From 5ca9c7b367430c0e30604cfe0c302e581c05f217 Mon Sep 17 00:00:00 2001
From: Yuuki Ebihara <yuuki.ebihara813@gmail.com>
Date: Sat, 2 Jan 2021 05:28:09 +0900
Subject: [PATCH 01/10] translate 5-browser-extension README into japanese

---
 5-browser-extension/translations/README.ja.md | 28 +++++++++++++++++++
 1 file changed, 28 insertions(+)
 create mode 100644 5-browser-extension/translations/README.ja.md

diff --git a/5-browser-extension/translations/README.ja.md b/5-browser-extension/translations/README.ja.md
new file mode 100644
index 00000000..88055778
--- /dev/null
+++ b/5-browser-extension/translations/README.ja.md
@@ -0,0 +1,28 @@
+# ブラウザ拡張機能の構築
+
+ブラウザ拡張機能を構築することは、異なるタイプの Web 資産を構築しながら、アプリのパフォーマンスについて考えることができる、楽しくて興味深い方法です。このモジュールでは、ブラウザの仕組みやブラウザ拡張機能の展開方法、フォームの構築方法、API の呼び出し方、ローカルストレージの使用方法、Web サイトのパフォーマンスを測定して改善する方法などのレッスンが含まれています。
+
+Edge、Chrome、Firefox で動作するブラウザ拡張機能を構築します。この拡張機能は、非常に特定のタスクに合わせたミニ Web サイトのようなもので、[C02 Signal API](https://www.co2signal.com) を使って、指定された地域の電力使用量と炭素強度をチェックし、その地域のカーボンフットプリントの読み取り値を返します。
+
+この拡張機能は、API キーと地域コードがフォームに入力されると、ユーザーがアドホックに呼び出すことができ、地域の電力使用量を決定し、それによってユーザーの電力決定に影響を与えるデータを提供することができます。例えば、地域の電力使用量が多い時期には、衣類乾燥機の運転を遅らせることが望ましいかもしれません。
+
+### トピック
+
+1. [ブラウザについて](1-about-browsers/translations/README.ja.md)
+2. [フォームとローカルストレージ](2-forms-browsers-local-storage/translations/README.ja.md)
+3. [バックグラウンドタスクとパフォーマンス](3-background-tasks-and-performance/translations/README.ja.md)
+
+### クレジット
+
+![a green browser extension](extension-screenshot.png)
+
+## クレジット
+
+この Web カーボントリガーのアイデアは、Microsoft のグリーンクラウドアドボカシーチームのリーダーであり、[グリーンプリンシプル](https://principles.green/) の著者でもある Asim Hussain 氏によって提供されました。もともとは [Web サイトプロジェクト](https://github.com/jlooper/green) でした。
+
+ブラウザ拡張の構造は [Adebola Adeniran の COVID 拡張機能](https://github.com/onedebos/covtension) の影響を受けています。
+
+「ドット」アイコンシステムのコンセプトは、カリフォルニア州の排出量のためのブラウザ拡張機能 [Energy Lollipop](https://energylollipop.com/) のアイコン構造によって提案されました。
+
+These lessons were written with ♥️ by [Jen Looper](https://www.twitter.com/jenlooper)
+

From 59e69df72be0b3c78bc2e649eff6f9a884baaac1 Mon Sep 17 00:00:00 2001
From: Yuuki Ebihara <yuuki.ebihara813@gmail.com>
Date: Sat, 2 Jan 2021 06:01:57 +0900
Subject: [PATCH 02/10] translate 1-about-browsers into japanese

---
 .../translations/README.ja.md                 | 167 ++++++++++++++++++
 .../translations/assignment.ja.md             |  11 ++
 2 files changed, 178 insertions(+)
 create mode 100644 5-browser-extension/1-about-browsers/translations/README.ja.md
 create mode 100644 5-browser-extension/1-about-browsers/translations/assignment.ja.md

diff --git a/5-browser-extension/1-about-browsers/translations/README.ja.md b/5-browser-extension/1-about-browsers/translations/README.ja.md
new file mode 100644
index 00000000..34d80bb6
--- /dev/null
+++ b/5-browser-extension/1-about-browsers/translations/README.ja.md
@@ -0,0 +1,167 @@
+# ブラウザ拡張機能プロジェクト その 1: ブラウザのすべて
+
+![Browser sketchnote](../images/sketchnote.jpg)
+> Sketchnote by [Wassim Chegham](https://dev.to/wassimchegham/ever-wondered-what-happens-when-you-type-in-a-url-in-an-address-bar-in-a-browser-3dob)
+
+## レッスン前の小テスト
+
+[レッスン前の小テスト](https://nice-beach-0fe9e9d0f.azurestaticapps.net/quiz/23)
+
+### イントロダクション
+
+ブラウザ拡張機能はブラウザに機能を追加するものです。しかし、拡張機能を作る前に、ブラウザがどのように機能するのかを少し学んでおく必要があります。
+
+### ブラウザについて
+
+この一連のレッスンでは、Chrome、Firefox、Edge ブラウザで動作するブラウザ拡張機能の構築方法を学びます。このパートでは、ブラウザがどのように動作するのかを理解し、ブラウザ拡張の要素を足場にしていきます。
+
+しかし、ブラウザとは正確には何でしょうか? それは、エンドユーザーがサーバーからコンテンツにアクセスして Web ページに表示することを可能にするソフトウェアアプリケーションです。
+
+✅ 少し歴史を紹介します: 最初のブラウザは 'WorldWideWeb' と呼ばれ、1990年にティモシー・バーナーズ・リー卿によって作成されました。
+
+![early browsers](../images/earlybrowsers.jpg)
+> いくつかの初期のブラウザは、[Karen McGrane](https://www.slideshare.net/KMcGrane/week-4-ixd-history-personal-computing) を経由しています。
+
+ユーザーが URL (Uniform Resource Locator) アドレスを使用してインターネットに接続すると、通常は Hypertext Transfer Protocol を使用して `http` または `https` アドレスを経由して、ブラウザが Web サーバと通信して Web ページを取得します。
+
+この時点で、ブラウザのレンダリングエンジンがユーザのデバイス (携帯電話、デスクトップ、ラップトップなど) にページを表示します。
+
+ブラウザにはコンテンツをキャッシュする機能もあり、毎回サーバから取得する必要がありません。ブラウザは、ユーザーのブラウジング活動の履歴を記録したり、ユーザーの活動を保存するために使用される情報を含む小さなデータである「クッキー」を保存したりすることができます。
+
+ブラウザについて覚えておくべき重要なことは、ブラウザはすべて同じではないということです。それぞれのブラウザには長所と短所があり、プロの Web 開発者は、Web ページをクロスブラウザでうまく動作させる方法を理解する必要があります。これには、携帯電話のような小さなビューポートやオフラインのユーザーへの対応も含まれます。
+
+あなたが使いたいブラウザにブックマークしておくべき本当に便利な Web サイトは、[caniuse.com](https://www.caniuse.com) です。Web ページを作成する際には、caniuse のサポートされている技術のリストを利用すると、ユーザーを最大限にサポートすることができるので、非常に便利です。
+
+✅ どのブラウザがあなたの Web サイトのユーザーに最も人気があるのか、どのようにして知ることができるでしょうか? アナリティクスをチェックする - Web 開発プロセスの一環として様々なアナリティクスパッケージをインストールすることができ、様々な人気のあるブラウザで最も使用されているブラウザを教えてくれます。
+
+## ブラウザの拡張機能
+
+なぜブラウザ拡張機能を作ろうと思ったのでしょうか? ブラウザの拡張機能は、何度も繰り返しがちな作業に素早くアクセスしたいときに便利なものです。例えば、対話する様々な Web ページの色をチェックする必要がある場合は、カラーピッカーブラウザ拡張機能をインストールするとよいでしょう。パスワードを覚えるのが面倒な場合は、パスワード管理ブラウザ拡張機能を使うとよいでしょう。
+
+ブラウザ拡張機能は開発するのも楽しいものです。彼らは、有限のタスクを管理する傾向があり、それがうまく機能しています。
+
+✅ お気に入りのブラウザ拡張機能は何ですか? どのようなタスクを実行しますか?
+
+### 拡張機能のインストール
+
+ビルドを始める前に、ブラウザ拡張機能のビルドとデプロイのプロセスを見てみましょう。ブラウザによってこのタスクを管理する方法は少し異なりますが、Chrome と Firefox では、Edge のこの例とプロセスは似ています。
+
+![Edge ブラウザのスクリーンショットでは、edge://extensions のページと設定メニューを開いている様子が表示されています。](../images/install-on-edge.png)
+
+本質的には、このプロセスになります。
+
+- `npm build` を使って拡張機能をビルドします
+- ブラウザの右上にある「設定とその他」ボタン (`...` アイコン) を使って、拡張機能ペインに移動します
+- 新規インストールの場合は、`load unpacked` を選択してビルドフォルダ (私たちの場合は `/dist`) から新しい拡張機能をアップロードします
+- または、既にインストールされている拡張機能をリロードする場合は `reload` をクリックします
+
+✅ 各ブラウザに関連付けられたブラウザ拡張機能ストアにリリースされた拡張機能をインストールするには、それらの [ストア](https://microsoftedge.microsoft.com/addons/Microsoft-Edge-Extensions-Home) に移動して、お好みの拡張機能をインストールしてください。
+
+### 開始する
+
+あなたの地域のカーボンフットプリントを表示し、地域のエネルギー使用量とエネルギー源を表示するブラウザ拡張機能を構築します。拡張機能には、CO2 Signal API にアクセスできるように API キーを収集するフォームがあります。
+
+**必要なもの:**
+
+- [API キー](https://www.co2signal.com/); このページのボックスにメールアドレスを入力します
+- [電力地図](https://www.electricitymap.org/map) に対応する地域のコード (例えばボストンでは 'US-NEISO' を使用しています)
+- [スターターコード](../../start)。`start`フォルダをダウンロードしてください。このフォルダでコードを完成させることになります。
+- [NPM](https://www.npmjs.com) - NPM はパッケージ管理ツールです。ローカルにインストールすると、`package.json` ファイルに記載されているパッケージがインストールされ、Web アセットで使用されます。
+
+✅ この[優れた Learn モジュール](https://docs.microsoft.com/ja-jp/learn/modules/create-nodejs-project-dependencies/)では、パッケージ管理の詳細を学ぶことができます。
+
+コードベースに目を通してみてください。
+
+dist
+    -|manifest.json (ここに設定されているデフォルト)
+    -|index.html (フロントエンド HTML マークアップはこちら)
+    -|background.js (バックグラウンド JS はこちら)
+    -|main.js (ビルド JS)
+src
+    -|index.js (あなたのJSコードはここにあります)
+
+✅ API キーとリージョンコードが手元にあれば、後で使うときのためにノートのどこかに保存しておきましょう。
+
+### 拡張機能の HTML を構築する
+
+この拡張機能には2つのビューがあります。1つは API キーとリージョンコードを収集するためのものです。
+
+![完成した拡張機能をブラウザで開いて、リージョン名と API キーを入力したフォームを表示したときのスクリーンショットです。](../images/1.png)
+
+そして2つ目は、地域の炭素使用量を表示するためのものです。
+
+![完成した拡張機能のスクリーンショットは、US-NEISO 地域の炭素使用量と化石燃料の割合の値を表示しています。](../images/2.png)
+
+まずはフォーム用の HTML を構築し、CSS でスタイリングしてみましょう。
+
+`/dist` フォルダにフォームと結果領域を作成します。`index.html` ファイルの中には、区切りのついたフォーム領域を作成します。
+
+```HTML
+<form class="form-data" autocomplete="on">
+	<div>
+		<h2>New? Add your Information</h2>
+	</div>
+	<div>
+		<label for="region">Region Name</label>
+		<input type="text" id="region" required class="region-name" />
+	</div>
+	<div>
+		<label for="api">Your API Key from tmrow</label>
+		<input type="text" id="api" required class="api-key" />
+	</div>
+	<button class="search-btn">Submit</button>
+</form>	
+```
+これは、保存した情報を入力し、ローカルストレージに保存するフォームです。
+
+次に、結果領域を作成します。最終的なフォームタグの下に、いくつかの div を追加します。
+
+```HTML
+<div class="result">
+	<div class="loading">loading...</div>
+	<div class="errors"></div>
+	<div class="data"></div>
+	<div class="result-container">
+		<p><strong>Region: </strong><span class="my-region"></span></p>
+		<p><strong>Carbon Usage: </strong><span class="carbon-usage"></span></p>
+		<p><strong>Fossil Fuel Percentage: </strong><span class="fossil-fuel"></span></p>
+	</div>
+	<button class="clear-btn">Change region</button>
+</div>
+```
+この時点で、ビルドを試してみましょう。この拡張モジュールのパッケージの依存関係を必ずインストールしてください。
+
+```
+npm install
+```
+
+このコマンドは、Node Package Manager である npm を使用して、拡張機能のビルドプロセスに Webpack をインストールします。webpack はコードのコンパイルを処理するバンドルです。この処理の出力は `/dist/main.js` を見ることで見ることができます - コードがバンドルされていることがわかります。
+
+とりあえず、拡張機能をビルドして、拡張機能として Edge にデプロイすると、フォームがきれいに表示されます。
+
+これで、ブラウザ拡張機能を構築するための第一歩が踏み出せました。この後のレッスンでは、ブラウザ拡張機能をより機能的で便利なものにしていきます。
+
+---
+
+## 🚀 チャレンジ
+
+ブラウザの拡張機能ストアを見て、ブラウザにインストールしてください。興味深い方法でそのファイルを調べることができます。あなたは何を発見しましたか？
+
+## レッスン後の小テスト
+
+[レッスン後の小テスト](https://nice-beach-0fe9e9d0f.azurestaticapps.net/quiz/24)
+
+## 復習と自己学習
+
+このレッスンでは、Web ブラウザの歴史について少し学びました。この機会に、Web ブラウザの歴史を読むことで、World Wide Web の発明者がどのように Web ブラウザの使用を想定しているかを学びましょう。役に立つサイトをいくつか紹介します。
+
+[Web ブラウザの歴史](https://www.mozilla.org/en-US/firefox/browsers/browser-history/)
+
+[Web の歴史](https://webfoundation.org/about/vision/history-of-the-web/)
+
+[ティム・バーナーズ・リーのインタビュー](https://www.theguardian.com/technology/2019/mar/12/tim-berners-lee-on-30-years-of-the-web-if-we-dream-a-little-we-can-get-the-web-we-want)
+
+## 課題 
+
+[拡張機能のスタイル変更](assignment.ja.md)
+
diff --git a/5-browser-extension/1-about-browsers/translations/assignment.ja.md b/5-browser-extension/1-about-browsers/translations/assignment.ja.md
new file mode 100644
index 00000000..9cca2984
--- /dev/null
+++ b/5-browser-extension/1-about-browsers/translations/assignment.ja.md
@@ -0,0 +1,11 @@
+# 拡張機能のスタイル変更
+
+## 説明書
+
+この拡張機能のコードベースにはスタイルが完全に含まれていますが、それらを使用する必要はありません。css ファイルを編集してスタイルを変更することで拡張機能を自分のものにしてください。
+
+## ルーブリック
+
+| 基準 | 模範的な例                                    | 適切              | 改善が必要 |
+| -------- | -------------------------------------------- | --------------------- | ----------------- |
+|          | コードは機能的な新しいスタイルで提出されます | スタイリングが不完全 | スタイルがバグっている  |
\ No newline at end of file

From fe157db6b94f60018057e87018a10e2cb0536c29 Mon Sep 17 00:00:00 2001
From: Yuuki Ebihara <yuuki.ebihara813@gmail.com>
Date: Sat, 2 Jan 2021 19:31:22 +0900
Subject: [PATCH 03/10] translate 2-forms-browsers-local-storage into japanese

---
 .../translations/README.ja.md                 | 222 ++++++++++++++++++
 .../translations/assignment.ja.md             |  11 +
 2 files changed, 233 insertions(+)
 create mode 100644 5-browser-extension/2-forms-browsers-local-storage/translations/README.ja.md
 create mode 100644 5-browser-extension/2-forms-browsers-local-storage/translations/assignment.ja.md

diff --git a/5-browser-extension/2-forms-browsers-local-storage/translations/README.ja.md b/5-browser-extension/2-forms-browsers-local-storage/translations/README.ja.md
new file mode 100644
index 00000000..0490a62a
--- /dev/null
+++ b/5-browser-extension/2-forms-browsers-local-storage/translations/README.ja.md
@@ -0,0 +1,222 @@
+# ブラウザ拡張機能プロジェクト その 2: API の呼び出し、ローカルストレージの使用
+
+## レッスン前の小テスト
+
+[レッスン前の小テスト](https://nice-beach-0fe9e9d0f.azurestaticapps.net/quiz/25)
+
+### イントロダクション
+
+このレッスンでは、ブラウザ拡張機能のフォームを送信して API を呼び出し、その結果をブラウザ拡張機能に表示します。また、将来の参照や利用のために、ブラウザのローカルストレージにデータを保存する方法についても学びます。
+
+✅ コードをどこに配置するかについては、適切なファイル内の番号の付いたセグメントを参照してください。
+
+### 拡張機能で操作する要素の設定:
+
+この時点で、フォーム用の HTML とブラウザ拡張機能用の結果 `<div>` が構築されています。これからは、`/src/index.js` ファイルを使って少しずつ拡張機能を構築していく必要があります。プロジェクトのセットアップとビルドのプロセスについては [前のレッスン](.../.../1-about-browsers/translations/README.ja.md) を参照してください。
+
+`index.js` ファイルの中で作業を行うには、様々なフィールドに関連付けられた値を保持するための `const` 変数を作成することから始めます。
+
+```JavaScript
+// フォームフィールド
+const form = document.querySelector('.form-data');
+const region = document.querySelector('.region-name');
+const apiKey = document.querySelector('.api-key');
+
+// 結果
+const errors = document.querySelector('.errors');
+const loading = document.querySelector('.loading');
+const results = document.querySelector('.result-container');
+const usage = document.querySelector('.carbon-usage');
+const fossilfuel = document.querySelector('.fossil-fuel');
+const myregion = document.querySelector('.my-region');
+const clearBtn = document.querySelector('.clear-btn');
+```
+
+前のレッスンで HTML で設定したように、これらのフィールドはすべてその CSS クラスによって参照されます。
+
+### リスナーの追加
+
+次に、フォームにイベントリスナーを追加し、フォームをリセットするクリアボタンを追加します。ユーザーがフォームを送信したり、リセットボタンをクリックしたりした場合に、そのリセットボタンをクリックするようにします。何かが起こるときのため、ファイルの一番下にアプリを初期化するための呼び出しを追加します。
+
+```JavaScript
+form.addEventListener('submit', (e) => handleSubmit(e));
+clearBtn.addEventListener('click', (e) => reset(e));
+init();
+```
+
+✅ 投稿やクリックのイベントをリッスンするために使用される速記法と、そのイベントがどのように handleSubmit や reset 関数に渡されるかに注目してください。この速記法と同等のものを、より長い形式で書くことができますか? どちらがいいですか?
+
+### init() 関数と reset() 関数のビルド
+
+今度は拡張機能を初期化する関数を作ります。これは init() と呼ばれています。
+
+```JavaScript
+function init() {
+	//何かがローカルストレージにある場合は、それをピックアップします。
+	const storedApiKey = localStorage.getItem('apiKey');
+	const storedRegion = localStorage.getItem('regionName');
+
+	//アイコンを一般的な緑色に設定
+	//todo
+
+	if (storedApiKey === null || storedRegion === null) {
+		//キーを持っていない場合は、フォームを表示します。
+		form.style.display = 'block';
+		results.style.display = 'none';
+		loading.style.display = 'none';
+		clearBtn.style.display = 'none';
+		errors.textContent = '';
+	} else {
+        //ローカルストレージにキー/領域を保存している場合、そのキー/領域がロードされたときに結果を表示します。
+        displayCarbonUsage(storedApiKey, storedRegion);
+		results.style.display = 'none';
+		form.style.display = 'none';
+		clearBtn.style.display = 'block';
+	}
+};
+
+function reset(e) {
+	e.preventDefault();
+	//リージョン専用のローカルストレージをクリアします。
+	localStorage.removeItem('regionName');
+	init();
+}
+
+```
+この関数には、面白いロジックがあります。これを読み進めていくと、何が起こるかわかりますか?
+
+- 2つの `const` は、ユーザが API キーとリージョンコードをローカルストレージに保存しているかどうかをチェックするために設定されます
+- どちらかが null の場合、フォームのスタイルを 'block' として表示するように変更してフォームを表示します
+- 結果、読み込み、および clearBtn を非表示にし、エラーテキストを空の文字列に設定します
+- キーとリージョンが存在する場合は、そのためのルーチンを開始します
+  - API を呼び出して炭素使用量のデータを取得します
+  - 結果領域を非表示にします
+  - フォームを非表示にします
+  - リセットボタンを表示します
+
+先に進む前に、ブラウザで利用できる非常に重要な概念を知っておくと便利です。それは [ローカルストレージ](https://developer.mozilla.org/ja/docs/Web/API/Window/localStorage) です。ローカルストレージは文字列を `key-value` のペアとしてブラウザに保存する便利な方法です。このタイプの Web ストレージは JavaScript で操作することができ、ブラウザでデータを管理することができます。ローカルストレージは有効期限がありませんが、もう一つの種類の Web ストレージであるセッションストレージはブラウザを閉じると消去されます。様々なタイプのストレージには、その使用方法に長所と短所があります。
+
+> 注意 - ブラウザ拡張機能は独自のローカルストレージを持っています。メインのブラウザウィンドウは別のインスタンスであり、別々に動作します。
+
+API キーに文字列の値を設定して、例えば Edge では Web ページを「検査」して (ブラウザを右クリックして検査することができます)、「アプリケーション」タブに行ってストレージを確認することで設定されていることがわかります。
+
+![ローカルストレージペイン](../images/localstorage.png)
+
+✅ ローカルストレージにデータを保存したくない状況を考えてみてください。一般的に、API キーをローカルストレージに置くのは悪い考えです! 理由がわかりますか? 私たちの場合、アプリは純粋に学習用であり、アプリストアにはデプロイされないので、このメソッドを使用します。
+
+ローカルストレージを操作するには、`getItem()`, `setItem()`, `removeItem()` のいずれかの方法で Web API を使用することに注意してください。これはブラウザ全体で広くサポートされています。
+
+`init()` で呼び出される `displayCarbonUsage()` 関数を構築する前に、フォームの初期投稿を処理する機能を構築しましょう。
+
+### フォーム送信の処理
+
+イベント引数 `(e)` を受け取る関数 `handleSubmit` を作成します。イベントの伝播を停止し (この場合、ブラウザの更新を停止したい)、新しい関数 `setUpUser` を呼び出し、引数 `apiKey.value` と `region.value` を渡します。このようにして、適切なフィールドが入力されたときに初期フォームから取得される2つの値を利用します。
+
+```JavaScript
+function handleSubmit(e) {
+	e.preventDefault();
+	setUpUser(apiKey.value, region.value);
+}
+```
+✅ 記憶をリフレッシュしてください - 前回のレッスンで設定した HTML には、ファイルの先頭に設定した `const` で `values` が取得される2つの入力フィールドがあり、両方とも `required` であるため、ブラウザはユーザが null 値を入力しないようにします。
+
+### ユーザーの設定
+
+次に `setUpUser` 関数に進み、ここで apiKey と regionName のローカルストレージの値を設定します。新しい関数を追加します。
+
+```JavaScript
+function setUpUser(apiKey, regionName) {
+	localStorage.setItem('apiKey', apiKey);
+	localStorage.setItem('regionName', regionName);
+	loading.style.display = 'block';
+	errors.textContent = '';
+	clearBtn.style.display = 'block';
+	//初期化の呼び出し
+	displayCarbonUsage(apiKey, regionName);
+}
+```
+この関数は、API が呼び出されている間に表示するローディングメッセージを設定します。この時点で、このブラウザ拡張機能の最も重要な機能の作成に到達しました!
+
+### 炭素使用量の表示
+
+ついに API に問い合わせをする時が来ました!
+
+先に進む前に、API について説明しましょう。API ([Application Programming Interfaces](https://www.webopedia.com/TERM/A/API.html)) は、Web 開発者のツールボックスの重要な要素です。API は、プログラムが相互作用し、相互にインターフェースするための標準的な方法を提供します。例えば、データベースへの問い合わせが必要な Web サイトを構築している場合、誰かが API を作成しているかもしれません。API には多くの種類がありますが、最も人気のあるものの一つが [REST API](https://www.smashingmagazine.com/2018/01/understanding-using-rest-api/) です。
+
+✅ 'REST' とは 'Representational State Transfer' の略で、様々な設定の URL を使ってデータを取得するのが特徴です。開発者が利用できる様々なタイプの API について少し調べてみてください。どのような形式に興味がありますか?
+
+この関数には注意すべき重要な点があります。まず、[`async` キーワード](https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Statements/async_function)に注目してください。非同期的に実行されるように関数を書くということは、データが返されるなどのアクションが完了するのを待ってから続行するということです。
+
+以下は `async` についての簡単なビデオです:
+
+[![Async and Await for managing promises](https://img.youtube.com/vi/YwmlRkrxvkk/0.jpg)](https://youtube.com/watch?v=YwmlRkrxvkk "Async and Await for managing promises")
+
+C02Signal API に問い合わせを行うための新しい関数を作成します:
+
+```JavaScript
+import axios from '../node_modules/axios';
+
+async function displayCarbonUsage(apiKey, region) {
+	try {
+		await axios
+			.get('https://api.co2signal.com/v1/latest', {
+				params: {
+					countryCode: region,
+				},
+				headers: {
+					'auth-token': apiKey,
+				},
+			})
+			.then((response) => {
+				let CO2 = Math.floor(response.data.data.carbonIntensity);
+
+				//calculateColor(CO2);
+
+				loading.style.display = 'none';
+				form.style.display = 'none';
+				myregion.textContent = region;
+				usage.textContent =
+					Math.round(response.data.data.carbonIntensity) + ' grams (grams C02 emitted per kilowatt hour)';
+				fossilfuel.textContent =
+					response.data.data.fossilFuelPercentage.toFixed(2) +
+					'% (percentage of fossil fuels used to generate electricity)';
+				results.style.display = 'block';
+			});
+	} catch (error) {
+		console.log(error);
+		loading.style.display = 'none';
+		results.style.display = 'none';
+		errors.textContent = 'Sorry, we have no data for the region you have requested.';
+	}
+}
+```
+
+これは大きな機能です。何が起こっているのでしょうか?
+
+- ベストプラクティスに従って、この関数を非同期的に動作させるために `async` キーワードを使用します。API がデータを返すときにプロミスを返すので、この関数には `try/catch` ブロックが含まれています。API が応答する速度を制御できないので (全く応答しないかもしれません!)、非同期的に呼び出すことでこの不確実性を処理する必要があります
+- co2signal API に問い合わせをして、API キーを使用してリージョンのデータを取得しています。そのキーを使用するには、ヘッダのパラメータで認証の種類を使用しなければなりません
+- API が応答したら、その応答データの様々な要素を、このデータを表示するために設定した画面の部分に割り当てます
+- エラーがあったり、結果が出なかったりすると、エラーメッセージが表示されます
+
+✅ 非同期プログラミングパターンを使用することも、ツールボックスの中で非常に便利なツールです。このタイプのコードを設定するための[様々な方法について](https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Statements/async_function)お読みください。
+
+おめでとうございます! 拡張機能をビルド (`npm run build`) して、拡張機能ペインで更新すると、拡張機能が動作するようになりました! 動作していないのはアイコンだけで、次のレッスンで修正します。
+
+---
+
+## 🚀 チャレンジ
+
+これらのレッスンでは、これまでにいくつかの種類の API について説明してきました。Web API を選択して、その API が提供しているものを詳しく調べてみましょう。例えば、[HTML ドラッグ＆ドロップ API](https://developer.mozilla.org/ja/docs/Web/API/HTML_Drag_and_Drop_API) のようなブラウザ内で利用できる API を見てみましょう。あなたの意見では、何が素晴らしい API を作るのでしょうか?
+
+## レッスン後の小テスト
+
+[レッスン後の小テスト](https://nice-beach-0fe9e9d0f.azurestaticapps.net/quiz/26)
+
+## 復習と自己学習
+
+このレッスンではローカルストレージと API について学びましたが、どちらもプロの Web 開発者にとって非常に有用なものです。この2つがどのように連携しているか考えてみましたか? API で使用するアイテムを保存する Web サイトをどのように構築するか考えてみてください。
+
+## 課題
+
+[API を採用する](assignment.ja.md)
+
diff --git a/5-browser-extension/2-forms-browsers-local-storage/translations/assignment.ja.md b/5-browser-extension/2-forms-browsers-local-storage/translations/assignment.ja.md
new file mode 100644
index 00000000..0da89295
--- /dev/null
+++ b/5-browser-extension/2-forms-browsers-local-storage/translations/assignment.ja.md
@@ -0,0 +1,11 @@
+# API を採用する
+
+## 説明書
+
+API はとても楽しく遊べます。ここでは、[多くの無料のもののリスト](https://github.com/public-apis/public-apis)を紹介します。API を選んで、問題を解決するブラウザ拡張機能を構築してください。それは、ペットの写真が十分にないという小さな問題 (だから、[dog CEO API](https://dog.ceo/dog-api/) を試してみてください) であっても、何か大きな問題であっても構いません - 楽しんでください!
+
+## ルーブリック
+
+| 基準 | 模範的な例                                                                  | 適切な                                 | 改善が必要       |
+| -------- | -------------------------------------------------------------------------- | ---------------------------------------- | ----------------------- |
+|          | 完全なブラウザ拡張機能は、上記のリストの API を使用して送信されます。 | ブラウザの拡張機能の一部を提出 | 投稿にはバグがある |
\ No newline at end of file

From d9185b824e9ad3f36ef7a02391aff740c04dbd56 Mon Sep 17 00:00:00 2001
From: Yuuki Ebihara <yuuki.ebihara813@gmail.com>
Date: Sat, 2 Jan 2021 21:51:18 +0900
Subject: [PATCH 04/10] translate 3-background-tasks-and-performance into
 japanese

---
 .../translations/README.ja.md                 | 161 ++++++++++++++++++
 .../translations/assignment.ja.md             |   9 +
 2 files changed, 170 insertions(+)
 create mode 100644 5-browser-extension/3-background-tasks-and-performance/translations/README.ja.md
 create mode 100644 5-browser-extension/3-background-tasks-and-performance/translations/assignment.ja.md

diff --git a/5-browser-extension/3-background-tasks-and-performance/translations/README.ja.md b/5-browser-extension/3-background-tasks-and-performance/translations/README.ja.md
new file mode 100644
index 00000000..26c35c09
--- /dev/null
+++ b/5-browser-extension/3-background-tasks-and-performance/translations/README.ja.md
@@ -0,0 +1,161 @@
+# ブラウザ拡張機能プロジェクト その 3: バックグラウンドタスクとパフォーマンスについて学ぶ
+
+## レッスン前の小テスト
+
+[レッスン前の小テスト](https://nice-beach-0fe9e9d0f.azurestaticapps.net/quiz/27)
+
+### イントロダクション
+
+このモジュールの最後の2つのレッスンでは、API からフェッチしたデータのフォームと表示領域を構築する方法を学びました。これは、Web 上でウェブプレゼンスを作成するための非常に標準的な方法です。非同期的にデータをフェッチする方法も学びました。ブラウザ拡張機能はほぼ完成しています。
+
+拡張機能のアイコンの色を更新するなどのバックグラウンドタスクが残っているので、この機会にブラウザがこのようなタスクをどのように管理しているのかについて話しましょう。これらのブラウザタスクについて、Web 資産を構築する際のパフォーマンスとの関連で考えてみましょう。
+
+## Web パフォーマンスの基礎
+
+> "Web サイトのパフォーマンスには2つのことがあります: ページの読み込み速度と、その上のコードの実行速度です。" -- [Zack Grossbart](https://www.smashingmagazine.com/2012/06/javascript-profiling-chrome-developer-tools/)
+
+どのようにしてあらゆるデバイス、あらゆるユーザー、あらゆる状況で、あなたのウェブサイトを燃えるように高速化するかという話題は、当然のことながら膨大なものになります。ここでは、標準的な Web プロジェクトまたはブラウザ拡張機能を構築する際に留意すべきポイントをいくつか紹介します。
+
+サイトが効率的に動作していることを確認するために最初に行う必要があることは、そのパフォーマンスに関するデータを収集することです。これを行う最初の場所は、Web ブラウザの開発者ツールにあります。Edge では、「設定とその他」ボタン（ブラウザの右上にある3つの点のアイコン）を選択してから、「その他のツール」→「開発者ツール」に移動し、「パフォーマンス」タブを開きます。Windows ではキーボードショートカット `Ctrl` + `Shift` + `I`、Mac では `Option` + `Command` + `I` を使用して開発者ツールを開くこともできます。
+
+パフォーマンスタブには、プロファイリングツールが含まれています。Web サイトを開いて (例えば https://www.microsoft.com を試してみてください)、「記録」ボタンをクリックし、サイトを更新します。いつでも録画を停止することができ、サイトを「スクリプト」、「レンダリング」、「ペイント」するために生成されたルーチンを見ることができます。
+
+![Edge profiler](../images/profiler.png)
+
+✅ Edge のパフォーマンスパネルの [Microsoft ドキュメント](https://docs.microsoft.com/ja-jp/microsoft-edge/edgehtml/) を参照してください。
+
+> ヒント: Web サイトの起動時間を正確に把握するには、ブラウザのキャッシュをクリアしてください。
+
+プロファイルのタイムラインの要素を選択すると、ページの読み込み中に発生するイベントをズームインできます。
+
+プロファイルのタイムラインの一部を選択してサマリーペインを見ることで、ページのパフォーマンスのスナップショットを得ることができます。
+
+![Edge プロファイラのスナップショット](../images/snapshot.png)
+
+イベントログペインをチェックして、15ms 以上かかったイベントがあるかどうかを確認します。
+
+![Edge イベントログ](../images/log.png)
+
+✅ プロファイラを知りましょう! このサイトの開発者ツールを開いて、ボトルネックがないか確認してみましょう。最も読み込みが遅いアセットは? 一番速いのは?
+
+## プロファイリングチェック
+
+一般的には、本番環境にデプロイする際に厄介な驚きを避けるために、すべての Web 開発者がサイトを構築する際に注意すべき「問題点」がいくつかあります。
+
+**アセットサイズ**: Web はここ数年で「重く」なり、その結果、遅くなっています。この重さのいくつかは、画像の使用に関係しています。
+
+✅ ページの重さなどの歴史的な見方については、[Internet Archive](https://httparchive.org/reports/page-weight) を参照してください。
+
+良い方法は、画像が最適化され、ユーザーにとって適切なサイズと解像度で配信されるようにすることです。
+
+**DOM トラバーサル**: ブラウザはあなたが書いたコードに基づいて Document Object Model を構築しなければならないので、タグを最小限に抑え、ページが必要とするものだけを使用してスタイリングすることがページパフォーマンスの向上につながります。この点については、ページに関連する余分な CSS を最適化することができます。例えば、1 つのページでのみ使用する必要のあるスタイルは、メインのスタイルシートに含める必要はありません。
+
+**JavaScript**: すべての JavaScript 開発者は、DOM の残りの部分を走査してブラウザに描画する前にロードしなければならない 'レンダーブロッキング' スクリプトに注意する必要があります。(テラリウムモジュールで行われているように) インラインスクリプトで `defer` を使うことを検討してください。
+
+✅ [Site Speed Test の Web サイト](https://www.webpagetest.org/)でいくつかのサイトを試してみると、サイトのパフォーマンスを判断するために行われる一般的なチェックについて詳しく知ることができます。
+
+これで、ブラウザが送信したアセットをどのようにレンダリングするかがわかったので、拡張機能を完成させるために必要な最後のいくつかのことを見てみましょう。
+
+### 色を計算する関数の作成
+
+`src/index.js` の中で作業し、`calculateColor()` という関数を、DOM にアクセスするために設定した一連の変数 `const` の後に追加します。
+
+```JavaScript
+function calculateColor(value) {
+	let co2Scale = [0, 150, 600, 750, 800];
+	let colors = ['#2AA364', '#F5EB4D', '#9E4229', '#381D02', '#381D02'];
+
+	let closestNum = co2Scale.sort((a, b) => {
+		return Math.abs(a - value) - Math.abs(b - value);
+	})[0];
+	console.log(value + ' is closest to ' + closestNum);
+	let num = (element) => element > closestNum;
+	let scaleIndex = co2Scale.findIndex(num);
+
+	let closestColor = colors[scaleIndex];
+	console.log(scaleIndex, closestColor);
+
+	chrome.runtime.sendMessage({ action: 'updateIcon', value: { color: closestColor } });
+}
+```
+
+ここでは何をしているのでしょうか? 前回のレッスンで完了した API コールの値 (炭素強度) を渡して、その値が colors 配列のインデックスにどれだけ近いかを計算します。そして、最も近い色の値を chrome.runtime に送ります。
+
+chrome.runtime には、あらゆる種類のバックグラウンドタスクを処理する [API](https://developer.chrome.com/extensions/runtime) があり、あなたの拡張機能はそれを利用しています。
+
+> "chrome.runtime API を使用して、バックグラウンドページを取得したり、マニフェストの詳細を返したり、アプリや拡張機能のライフサイクルでイベントをリッスンして応答したりすることができます。また、この API を使用して URL の相対パスを完全修飾 URL に変換することもできます。"
+
+✅ このブラウザ拡張を Edge 用に開発していると、chrome の API を使っていることに驚くかもしれません。新しい Edge ブラウザのバージョンは Chromium ブラウザエンジン上で動作しているので、これらのツールを活用することができます。
+
+> ブラウザ拡張機能をプロファイル化したい場合は、拡張機能自体が独立したブラウザインスタンスであるため、拡張機能自体の中から開発ツールを起動してください。
+
+### デフォルトのアイコンの色の設定
+
+ここで、`init()` 関数の中で、アイコンをジェネリックグリーンに設定して、chrome の `updateIcon` アクションを再度呼び出して起動します。
+
+```JavaScript
+chrome.runtime.sendMessage({
+	action: 'updateIcon',
+		value: {
+			color: 'green',
+		},
+});
+```
+### 関数の呼び出し、呼び出しの実行
+
+次に、C02Signal API が返すプロミスに追加して、先ほど作成した関数を呼び出します。
+
+```JavaScript
+//let CO2...
+calculateColor(CO2);
+```
+
+最後に、`/dist/background.js` で、これらのバックグラウンドアクションの呼び出し用のリスナーを追加します。
+
+```JavaScript
+chrome.runtime.onMessage.addListener(function (msg, sender, sendResponse) {
+	if (msg.action === 'updateIcon') {
+		chrome.browserAction.setIcon({ imageData: drawIcon(msg.value) });
+	}
+});
+//エナジーロリポップの拡張機能から借りた、良い機能
+function drawIcon(value) {
+	let canvas = document.createElement('canvas');
+	let context = canvas.getContext('2d');
+
+	context.beginPath();
+	context.fillStyle = value.color;
+	context.arc(100, 100, 50, 0, 2 * Math.PI);
+	context.fill();
+
+	return context.getImageData(50, 50, 100, 100);
+}
+```
+このコードでは、バックエンドのタスクマネージャに来るメッセージのリスナーを追加しています。'updateIcon' と呼ばれる場合、次のコードを実行して、Canvas API を使って適切な色のアイコンを描画しています。
+
+✅ Canvas API については、[スペースゲームのレッスン](../../../6-space-game/2-drawing-to-canvas/translations/README.ja.md)で詳しく説明しています。
+
+さて、拡張機能を再構築 (`npm run build`) して、リフレッシュして拡張機能を起動し、色の変化を見てみましょう。用事を済ませるのにも、お皿を洗うのにも良い時間帯でしょうか? これでわかりました!
+
+おめでとうございます。あなたは便利なブラウザ拡張機能を構築し、ブラウザがどのように動作するのか、そのパフォーマンスをどのようにプロファイルするのかについて、より多くのことを学びました。
+
+---
+
+## 🚀 チャレンジ
+
+オープンソースの Web サイトの中には、かなり昔からあるものもあり、それらの GitHub の歴史に基づいて、何年にもわたってどのようにパフォーマンスが最適化されてきたのかを調べてみましょう。最も一般的な問題点は何でしょうか?
+
+## レッスン後の小テスト
+
+[レッスン後の小テスト](https://nice-beach-0fe9e9d0f.azurestaticapps.net/quiz/28)
+
+## 復習と自己学習
+
+[パフォーマンスニュースレター](https://perf.email/)への登録を検討してみませんか?
+
+Web ツールのパフォーマンスタブを見て、ブラウザが Web のパフォーマンスを評価する方法のいくつかを調査してください。大きな違いはありますか?
+
+## 課題
+
+[パフォーマンスのためにサイトを分析する](assignment.ja.md)
+
diff --git a/5-browser-extension/3-background-tasks-and-performance/translations/assignment.ja.md b/5-browser-extension/3-background-tasks-and-performance/translations/assignment.ja.md
new file mode 100644
index 00000000..d9f82652
--- /dev/null
+++ b/5-browser-extension/3-background-tasks-and-performance/translations/assignment.ja.md
@@ -0,0 +1,9 @@
+# パフォーマンスのためにサイトを分析する
+
+Web サイトの詳細なレポートを提供し、パフォーマンスに問題がある領域を示します。サイトの速度が遅い理由と、速度を上げるために何ができるかを分析します。ブラウザツールだけに頼るのではなく、レポートに役立つ他のツールについても調査しましょう。
+
+## ルーブリック
+
+| 基準 | 模範的な例                                                                                                  | 適切な                    | 改善が必要             |
+| -------- | ---------------------------------------------------------------------------------------------------------- | --------------------------- | ----------------------------- |
+|          | レポートは、ブラウザツールだけでなく、サードパーティのツールが利用可能な場合は、サードパーティのツールから詳細を引き出して表示されます。 | 基本報告書を掲載しました | 最小限の報告書が提示される |
\ No newline at end of file

From badf868382d1ec72f018b44640e0f5a7b43f4b82 Mon Sep 17 00:00:00 2001
From: Yuuki Ebihara <yuuki.ebihara813@gmail.com>
Date: Sat, 2 Jan 2021 22:05:49 +0900
Subject: [PATCH 05/10] translate 5-browser-extension source README into
 japanese

---
 .../solution/translation/README.ja.md         | 28 +++++++++++++++++++
 .../start/translations/README.ja.md           | 28 +++++++++++++++++++
 2 files changed, 56 insertions(+)
 create mode 100644 5-browser-extension/solution/translation/README.ja.md
 create mode 100644 5-browser-extension/start/translations/README.ja.md

diff --git a/5-browser-extension/solution/translation/README.ja.md b/5-browser-extension/solution/translation/README.ja.md
new file mode 100644
index 00000000..c660937d
--- /dev/null
+++ b/5-browser-extension/solution/translation/README.ja.md
@@ -0,0 +1,28 @@
+# カーボントリガーブラウザ拡張機能： 完成したコード
+
+tmrow の C02 シグナル API を使用して電力使用量を追跡するために、あなたの地域の電力使用量がどれだけ多いかをブラウザ上でリマインダーとして表示できるようにブラウザ拡張機能を構築します。この拡張機能をアドホックに使用することで、この情報に基づいてあなたの活動を判断することができます。
+
+![extension screenshot](../../extension-screenshot.png)
+
+## はじめに
+
+[npm](https://npmjs.com) がインストールされている必要があります。このコードのコピーをコンピュータ上のフォルダにダウンロードしてください。
+
+必要なパッケージをすべてインストールします。
+
+```
+npm install
+```
+
+webpack から拡張機能をビルドします。
+
+```
+npm run build
+```
+
+Edge にインストールするには、ブラウザの右上にある「3つのドット」メニューから「拡張機能」パネルを見つけます。そこから「Load Unpacked」を選択して、新しい拡張機能をロードします。プロンプトで「dist」フォルダを開くと、拡張機能が読み込まれます。使用するには、CO2 シグナル API の API キー ([get one here via email](https://www.co2signal.com/) - このページのボックスにメールを入力してください) と、[Electricity Map](https://www.electricitymap.org/map) に対応する [code for your region](http://api.electricitymap.org/v3/zones) が必要です (ボストンでは、例えば、'US-NEISO' を使用しています)。
+
+![installing](../../install-on-edge.png)
+
+API キーと地域を拡張インターフェイスに入力すると、ブラウザの拡張バーに表示される色付きのドットが変化し、あなたの地域のエネルギー使用量を反映して、どのようなエネルギーを必要とする活動を行うのが適切なのかを示してくれます。この「ドット」システムのコンセプトは、カリフォルニア州の排出量のための [Energy Lollipop extension](https://energylollipop.com/) が私に与えてくれたものです。
+
diff --git a/5-browser-extension/start/translations/README.ja.md b/5-browser-extension/start/translations/README.ja.md
new file mode 100644
index 00000000..6121aa49
--- /dev/null
+++ b/5-browser-extension/start/translations/README.ja.md
@@ -0,0 +1,28 @@
+# カーボントリガーブラウザ拡張機能： スターターコード
+
+tmrow の C02 シグナル API を使用して電力使用量を追跡するために、あなたの地域の電力使用量がどれだけ多いかをブラウザ上でリマインダーとして表示できるようにブラウザ拡張機能を構築します。この拡張機能をアドホックに使用することで、この情報に基づいてあなたの活動を判断することができます。
+
+![extension screenshot](../../extension-screenshot.png)
+
+## はじめに
+
+[npm](https://npmjs.com) がインストールされている必要があります。このコードのコピーをコンピュータ上のフォルダにダウンロードしてください。
+
+必要なパッケージをすべてインストールします。
+
+```
+npm install
+```
+
+webpack から拡張機能をビルドします。
+
+```
+npm run build
+```
+
+Edge にインストールするには、ブラウザの右上にある「3つのドット」メニューから「拡張機能」パネルを見つけます。そこから「Load Unpacked」を選択して、新しい拡張機能をロードします。プロンプトで「dist」フォルダを開くと、拡張機能が読み込まれます。使用するには、CO2 シグナル API の API キー ([get one here via email](https://www.co2signal.com/) - このページのボックスにメールを入力してください) と、[Electricity Map](https://www.electricitymap.org/map) に対応する [code for your region](http://api.electricitymap.org/v3/zones) が必要です (ボストンでは、例えば、'US-NEISO' を使用しています)。
+
+![installing](../../install-on-edge.png)
+
+API キーと地域を拡張インターフェイスに入力すると、ブラウザの拡張バーに表示される色付きのドットが変化し、あなたの地域のエネルギー使用量を反映して、どのようなエネルギーを必要とする活動を行うのが適切なのかを示してくれます。この「ドット」システムのコンセプトは、カリフォルニア州の排出量のための [Energy Lollipop extension](https://energylollipop.com/) が私に与えてくれたものです。
+

From 923d2b29379b80aebd3f99049179a6df9af35004 Mon Sep 17 00:00:00 2001
From: Yuuki Ebihara <yuuki.ebihara813@gmail.com>
Date: Sat, 2 Jan 2021 05:28:09 +0900
Subject: [PATCH 06/10] translate 5-browser-extension README into japanese

---
 5-browser-extension/translations/README.ja.md | 28 +++++++++++++++++++
 1 file changed, 28 insertions(+)
 create mode 100644 5-browser-extension/translations/README.ja.md

diff --git a/5-browser-extension/translations/README.ja.md b/5-browser-extension/translations/README.ja.md
new file mode 100644
index 00000000..88055778
--- /dev/null
+++ b/5-browser-extension/translations/README.ja.md
@@ -0,0 +1,28 @@
+# ブラウザ拡張機能の構築
+
+ブラウザ拡張機能を構築することは、異なるタイプの Web 資産を構築しながら、アプリのパフォーマンスについて考えることができる、楽しくて興味深い方法です。このモジュールでは、ブラウザの仕組みやブラウザ拡張機能の展開方法、フォームの構築方法、API の呼び出し方、ローカルストレージの使用方法、Web サイトのパフォーマンスを測定して改善する方法などのレッスンが含まれています。
+
+Edge、Chrome、Firefox で動作するブラウザ拡張機能を構築します。この拡張機能は、非常に特定のタスクに合わせたミニ Web サイトのようなもので、[C02 Signal API](https://www.co2signal.com) を使って、指定された地域の電力使用量と炭素強度をチェックし、その地域のカーボンフットプリントの読み取り値を返します。
+
+この拡張機能は、API キーと地域コードがフォームに入力されると、ユーザーがアドホックに呼び出すことができ、地域の電力使用量を決定し、それによってユーザーの電力決定に影響を与えるデータを提供することができます。例えば、地域の電力使用量が多い時期には、衣類乾燥機の運転を遅らせることが望ましいかもしれません。
+
+### トピック
+
+1. [ブラウザについて](1-about-browsers/translations/README.ja.md)
+2. [フォームとローカルストレージ](2-forms-browsers-local-storage/translations/README.ja.md)
+3. [バックグラウンドタスクとパフォーマンス](3-background-tasks-and-performance/translations/README.ja.md)
+
+### クレジット
+
+![a green browser extension](extension-screenshot.png)
+
+## クレジット
+
+この Web カーボントリガーのアイデアは、Microsoft のグリーンクラウドアドボカシーチームのリーダーであり、[グリーンプリンシプル](https://principles.green/) の著者でもある Asim Hussain 氏によって提供されました。もともとは [Web サイトプロジェクト](https://github.com/jlooper/green) でした。
+
+ブラウザ拡張の構造は [Adebola Adeniran の COVID 拡張機能](https://github.com/onedebos/covtension) の影響を受けています。
+
+「ドット」アイコンシステムのコンセプトは、カリフォルニア州の排出量のためのブラウザ拡張機能 [Energy Lollipop](https://energylollipop.com/) のアイコン構造によって提案されました。
+
+These lessons were written with ♥️ by [Jen Looper](https://www.twitter.com/jenlooper)
+

From a677d9c7dd679d6d466bda16554fa5f1614abed4 Mon Sep 17 00:00:00 2001
From: Yuuki Ebihara <yuuki.ebihara813@gmail.com>
Date: Sat, 2 Jan 2021 06:01:57 +0900
Subject: [PATCH 07/10] translate 1-about-browsers into japanese

---
 .../translations/README.ja.md                 | 167 ++++++++++++++++++
 .../translations/assignment.ja.md             |  11 ++
 2 files changed, 178 insertions(+)
 create mode 100644 5-browser-extension/1-about-browsers/translations/README.ja.md
 create mode 100644 5-browser-extension/1-about-browsers/translations/assignment.ja.md

diff --git a/5-browser-extension/1-about-browsers/translations/README.ja.md b/5-browser-extension/1-about-browsers/translations/README.ja.md
new file mode 100644
index 00000000..34d80bb6
--- /dev/null
+++ b/5-browser-extension/1-about-browsers/translations/README.ja.md
@@ -0,0 +1,167 @@
+# ブラウザ拡張機能プロジェクト その 1: ブラウザのすべて
+
+![Browser sketchnote](../images/sketchnote.jpg)
+> Sketchnote by [Wassim Chegham](https://dev.to/wassimchegham/ever-wondered-what-happens-when-you-type-in-a-url-in-an-address-bar-in-a-browser-3dob)
+
+## レッスン前の小テスト
+
+[レッスン前の小テスト](https://nice-beach-0fe9e9d0f.azurestaticapps.net/quiz/23)
+
+### イントロダクション
+
+ブラウザ拡張機能はブラウザに機能を追加するものです。しかし、拡張機能を作る前に、ブラウザがどのように機能するのかを少し学んでおく必要があります。
+
+### ブラウザについて
+
+この一連のレッスンでは、Chrome、Firefox、Edge ブラウザで動作するブラウザ拡張機能の構築方法を学びます。このパートでは、ブラウザがどのように動作するのかを理解し、ブラウザ拡張の要素を足場にしていきます。
+
+しかし、ブラウザとは正確には何でしょうか? それは、エンドユーザーがサーバーからコンテンツにアクセスして Web ページに表示することを可能にするソフトウェアアプリケーションです。
+
+✅ 少し歴史を紹介します: 最初のブラウザは 'WorldWideWeb' と呼ばれ、1990年にティモシー・バーナーズ・リー卿によって作成されました。
+
+![early browsers](../images/earlybrowsers.jpg)
+> いくつかの初期のブラウザは、[Karen McGrane](https://www.slideshare.net/KMcGrane/week-4-ixd-history-personal-computing) を経由しています。
+
+ユーザーが URL (Uniform Resource Locator) アドレスを使用してインターネットに接続すると、通常は Hypertext Transfer Protocol を使用して `http` または `https` アドレスを経由して、ブラウザが Web サーバと通信して Web ページを取得します。
+
+この時点で、ブラウザのレンダリングエンジンがユーザのデバイス (携帯電話、デスクトップ、ラップトップなど) にページを表示します。
+
+ブラウザにはコンテンツをキャッシュする機能もあり、毎回サーバから取得する必要がありません。ブラウザは、ユーザーのブラウジング活動の履歴を記録したり、ユーザーの活動を保存するために使用される情報を含む小さなデータである「クッキー」を保存したりすることができます。
+
+ブラウザについて覚えておくべき重要なことは、ブラウザはすべて同じではないということです。それぞれのブラウザには長所と短所があり、プロの Web 開発者は、Web ページをクロスブラウザでうまく動作させる方法を理解する必要があります。これには、携帯電話のような小さなビューポートやオフラインのユーザーへの対応も含まれます。
+
+あなたが使いたいブラウザにブックマークしておくべき本当に便利な Web サイトは、[caniuse.com](https://www.caniuse.com) です。Web ページを作成する際には、caniuse のサポートされている技術のリストを利用すると、ユーザーを最大限にサポートすることができるので、非常に便利です。
+
+✅ どのブラウザがあなたの Web サイトのユーザーに最も人気があるのか、どのようにして知ることができるでしょうか? アナリティクスをチェックする - Web 開発プロセスの一環として様々なアナリティクスパッケージをインストールすることができ、様々な人気のあるブラウザで最も使用されているブラウザを教えてくれます。
+
+## ブラウザの拡張機能
+
+なぜブラウザ拡張機能を作ろうと思ったのでしょうか? ブラウザの拡張機能は、何度も繰り返しがちな作業に素早くアクセスしたいときに便利なものです。例えば、対話する様々な Web ページの色をチェックする必要がある場合は、カラーピッカーブラウザ拡張機能をインストールするとよいでしょう。パスワードを覚えるのが面倒な場合は、パスワード管理ブラウザ拡張機能を使うとよいでしょう。
+
+ブラウザ拡張機能は開発するのも楽しいものです。彼らは、有限のタスクを管理する傾向があり、それがうまく機能しています。
+
+✅ お気に入りのブラウザ拡張機能は何ですか? どのようなタスクを実行しますか?
+
+### 拡張機能のインストール
+
+ビルドを始める前に、ブラウザ拡張機能のビルドとデプロイのプロセスを見てみましょう。ブラウザによってこのタスクを管理する方法は少し異なりますが、Chrome と Firefox では、Edge のこの例とプロセスは似ています。
+
+![Edge ブラウザのスクリーンショットでは、edge://extensions のページと設定メニューを開いている様子が表示されています。](../images/install-on-edge.png)
+
+本質的には、このプロセスになります。
+
+- `npm build` を使って拡張機能をビルドします
+- ブラウザの右上にある「設定とその他」ボタン (`...` アイコン) を使って、拡張機能ペインに移動します
+- 新規インストールの場合は、`load unpacked` を選択してビルドフォルダ (私たちの場合は `/dist`) から新しい拡張機能をアップロードします
+- または、既にインストールされている拡張機能をリロードする場合は `reload` をクリックします
+
+✅ 各ブラウザに関連付けられたブラウザ拡張機能ストアにリリースされた拡張機能をインストールするには、それらの [ストア](https://microsoftedge.microsoft.com/addons/Microsoft-Edge-Extensions-Home) に移動して、お好みの拡張機能をインストールしてください。
+
+### 開始する
+
+あなたの地域のカーボンフットプリントを表示し、地域のエネルギー使用量とエネルギー源を表示するブラウザ拡張機能を構築します。拡張機能には、CO2 Signal API にアクセスできるように API キーを収集するフォームがあります。
+
+**必要なもの:**
+
+- [API キー](https://www.co2signal.com/); このページのボックスにメールアドレスを入力します
+- [電力地図](https://www.electricitymap.org/map) に対応する地域のコード (例えばボストンでは 'US-NEISO' を使用しています)
+- [スターターコード](../../start)。`start`フォルダをダウンロードしてください。このフォルダでコードを完成させることになります。
+- [NPM](https://www.npmjs.com) - NPM はパッケージ管理ツールです。ローカルにインストールすると、`package.json` ファイルに記載されているパッケージがインストールされ、Web アセットで使用されます。
+
+✅ この[優れた Learn モジュール](https://docs.microsoft.com/ja-jp/learn/modules/create-nodejs-project-dependencies/)では、パッケージ管理の詳細を学ぶことができます。
+
+コードベースに目を通してみてください。
+
+dist
+    -|manifest.json (ここに設定されているデフォルト)
+    -|index.html (フロントエンド HTML マークアップはこちら)
+    -|background.js (バックグラウンド JS はこちら)
+    -|main.js (ビルド JS)
+src
+    -|index.js (あなたのJSコードはここにあります)
+
+✅ API キーとリージョンコードが手元にあれば、後で使うときのためにノートのどこかに保存しておきましょう。
+
+### 拡張機能の HTML を構築する
+
+この拡張機能には2つのビューがあります。1つは API キーとリージョンコードを収集するためのものです。
+
+![完成した拡張機能をブラウザで開いて、リージョン名と API キーを入力したフォームを表示したときのスクリーンショットです。](../images/1.png)
+
+そして2つ目は、地域の炭素使用量を表示するためのものです。
+
+![完成した拡張機能のスクリーンショットは、US-NEISO 地域の炭素使用量と化石燃料の割合の値を表示しています。](../images/2.png)
+
+まずはフォーム用の HTML を構築し、CSS でスタイリングしてみましょう。
+
+`/dist` フォルダにフォームと結果領域を作成します。`index.html` ファイルの中には、区切りのついたフォーム領域を作成します。
+
+```HTML
+<form class="form-data" autocomplete="on">
+	<div>
+		<h2>New? Add your Information</h2>
+	</div>
+	<div>
+		<label for="region">Region Name</label>
+		<input type="text" id="region" required class="region-name" />
+	</div>
+	<div>
+		<label for="api">Your API Key from tmrow</label>
+		<input type="text" id="api" required class="api-key" />
+	</div>
+	<button class="search-btn">Submit</button>
+</form>	
+```
+これは、保存した情報を入力し、ローカルストレージに保存するフォームです。
+
+次に、結果領域を作成します。最終的なフォームタグの下に、いくつかの div を追加します。
+
+```HTML
+<div class="result">
+	<div class="loading">loading...</div>
+	<div class="errors"></div>
+	<div class="data"></div>
+	<div class="result-container">
+		<p><strong>Region: </strong><span class="my-region"></span></p>
+		<p><strong>Carbon Usage: </strong><span class="carbon-usage"></span></p>
+		<p><strong>Fossil Fuel Percentage: </strong><span class="fossil-fuel"></span></p>
+	</div>
+	<button class="clear-btn">Change region</button>
+</div>
+```
+この時点で、ビルドを試してみましょう。この拡張モジュールのパッケージの依存関係を必ずインストールしてください。
+
+```
+npm install
+```
+
+このコマンドは、Node Package Manager である npm を使用して、拡張機能のビルドプロセスに Webpack をインストールします。webpack はコードのコンパイルを処理するバンドルです。この処理の出力は `/dist/main.js` を見ることで見ることができます - コードがバンドルされていることがわかります。
+
+とりあえず、拡張機能をビルドして、拡張機能として Edge にデプロイすると、フォームがきれいに表示されます。
+
+これで、ブラウザ拡張機能を構築するための第一歩が踏み出せました。この後のレッスンでは、ブラウザ拡張機能をより機能的で便利なものにしていきます。
+
+---
+
+## 🚀 チャレンジ
+
+ブラウザの拡張機能ストアを見て、ブラウザにインストールしてください。興味深い方法でそのファイルを調べることができます。あなたは何を発見しましたか？
+
+## レッスン後の小テスト
+
+[レッスン後の小テスト](https://nice-beach-0fe9e9d0f.azurestaticapps.net/quiz/24)
+
+## 復習と自己学習
+
+このレッスンでは、Web ブラウザの歴史について少し学びました。この機会に、Web ブラウザの歴史を読むことで、World Wide Web の発明者がどのように Web ブラウザの使用を想定しているかを学びましょう。役に立つサイトをいくつか紹介します。
+
+[Web ブラウザの歴史](https://www.mozilla.org/en-US/firefox/browsers/browser-history/)
+
+[Web の歴史](https://webfoundation.org/about/vision/history-of-the-web/)
+
+[ティム・バーナーズ・リーのインタビュー](https://www.theguardian.com/technology/2019/mar/12/tim-berners-lee-on-30-years-of-the-web-if-we-dream-a-little-we-can-get-the-web-we-want)
+
+## 課題 
+
+[拡張機能のスタイル変更](assignment.ja.md)
+
diff --git a/5-browser-extension/1-about-browsers/translations/assignment.ja.md b/5-browser-extension/1-about-browsers/translations/assignment.ja.md
new file mode 100644
index 00000000..9cca2984
--- /dev/null
+++ b/5-browser-extension/1-about-browsers/translations/assignment.ja.md
@@ -0,0 +1,11 @@
+# 拡張機能のスタイル変更
+
+## 説明書
+
+この拡張機能のコードベースにはスタイルが完全に含まれていますが、それらを使用する必要はありません。css ファイルを編集してスタイルを変更することで拡張機能を自分のものにしてください。
+
+## ルーブリック
+
+| 基準 | 模範的な例                                    | 適切              | 改善が必要 |
+| -------- | -------------------------------------------- | --------------------- | ----------------- |
+|          | コードは機能的な新しいスタイルで提出されます | スタイリングが不完全 | スタイルがバグっている  |
\ No newline at end of file

From 40b0f078438c45e0e3107a0195dc49c525faf245 Mon Sep 17 00:00:00 2001
From: Yuuki Ebihara <yuuki.ebihara813@gmail.com>
Date: Sat, 2 Jan 2021 19:31:22 +0900
Subject: [PATCH 08/10] translate 2-forms-browsers-local-storage into japanese

---
 .../translations/README.ja.md                 | 222 ++++++++++++++++++
 .../translations/assignment.ja.md             |  11 +
 2 files changed, 233 insertions(+)
 create mode 100644 5-browser-extension/2-forms-browsers-local-storage/translations/README.ja.md
 create mode 100644 5-browser-extension/2-forms-browsers-local-storage/translations/assignment.ja.md

diff --git a/5-browser-extension/2-forms-browsers-local-storage/translations/README.ja.md b/5-browser-extension/2-forms-browsers-local-storage/translations/README.ja.md
new file mode 100644
index 00000000..0490a62a
--- /dev/null
+++ b/5-browser-extension/2-forms-browsers-local-storage/translations/README.ja.md
@@ -0,0 +1,222 @@
+# ブラウザ拡張機能プロジェクト その 2: API の呼び出し、ローカルストレージの使用
+
+## レッスン前の小テスト
+
+[レッスン前の小テスト](https://nice-beach-0fe9e9d0f.azurestaticapps.net/quiz/25)
+
+### イントロダクション
+
+このレッスンでは、ブラウザ拡張機能のフォームを送信して API を呼び出し、その結果をブラウザ拡張機能に表示します。また、将来の参照や利用のために、ブラウザのローカルストレージにデータを保存する方法についても学びます。
+
+✅ コードをどこに配置するかについては、適切なファイル内の番号の付いたセグメントを参照してください。
+
+### 拡張機能で操作する要素の設定:
+
+この時点で、フォーム用の HTML とブラウザ拡張機能用の結果 `<div>` が構築されています。これからは、`/src/index.js` ファイルを使って少しずつ拡張機能を構築していく必要があります。プロジェクトのセットアップとビルドのプロセスについては [前のレッスン](.../.../1-about-browsers/translations/README.ja.md) を参照してください。
+
+`index.js` ファイルの中で作業を行うには、様々なフィールドに関連付けられた値を保持するための `const` 変数を作成することから始めます。
+
+```JavaScript
+// フォームフィールド
+const form = document.querySelector('.form-data');
+const region = document.querySelector('.region-name');
+const apiKey = document.querySelector('.api-key');
+
+// 結果
+const errors = document.querySelector('.errors');
+const loading = document.querySelector('.loading');
+const results = document.querySelector('.result-container');
+const usage = document.querySelector('.carbon-usage');
+const fossilfuel = document.querySelector('.fossil-fuel');
+const myregion = document.querySelector('.my-region');
+const clearBtn = document.querySelector('.clear-btn');
+```
+
+前のレッスンで HTML で設定したように、これらのフィールドはすべてその CSS クラスによって参照されます。
+
+### リスナーの追加
+
+次に、フォームにイベントリスナーを追加し、フォームをリセットするクリアボタンを追加します。ユーザーがフォームを送信したり、リセットボタンをクリックしたりした場合に、そのリセットボタンをクリックするようにします。何かが起こるときのため、ファイルの一番下にアプリを初期化するための呼び出しを追加します。
+
+```JavaScript
+form.addEventListener('submit', (e) => handleSubmit(e));
+clearBtn.addEventListener('click', (e) => reset(e));
+init();
+```
+
+✅ 投稿やクリックのイベントをリッスンするために使用される速記法と、そのイベントがどのように handleSubmit や reset 関数に渡されるかに注目してください。この速記法と同等のものを、より長い形式で書くことができますか? どちらがいいですか?
+
+### init() 関数と reset() 関数のビルド
+
+今度は拡張機能を初期化する関数を作ります。これは init() と呼ばれています。
+
+```JavaScript
+function init() {
+	//何かがローカルストレージにある場合は、それをピックアップします。
+	const storedApiKey = localStorage.getItem('apiKey');
+	const storedRegion = localStorage.getItem('regionName');
+
+	//アイコンを一般的な緑色に設定
+	//todo
+
+	if (storedApiKey === null || storedRegion === null) {
+		//キーを持っていない場合は、フォームを表示します。
+		form.style.display = 'block';
+		results.style.display = 'none';
+		loading.style.display = 'none';
+		clearBtn.style.display = 'none';
+		errors.textContent = '';
+	} else {
+        //ローカルストレージにキー/領域を保存している場合、そのキー/領域がロードされたときに結果を表示します。
+        displayCarbonUsage(storedApiKey, storedRegion);
+		results.style.display = 'none';
+		form.style.display = 'none';
+		clearBtn.style.display = 'block';
+	}
+};
+
+function reset(e) {
+	e.preventDefault();
+	//リージョン専用のローカルストレージをクリアします。
+	localStorage.removeItem('regionName');
+	init();
+}
+
+```
+この関数には、面白いロジックがあります。これを読み進めていくと、何が起こるかわかりますか?
+
+- 2つの `const` は、ユーザが API キーとリージョンコードをローカルストレージに保存しているかどうかをチェックするために設定されます
+- どちらかが null の場合、フォームのスタイルを 'block' として表示するように変更してフォームを表示します
+- 結果、読み込み、および clearBtn を非表示にし、エラーテキストを空の文字列に設定します
+- キーとリージョンが存在する場合は、そのためのルーチンを開始します
+  - API を呼び出して炭素使用量のデータを取得します
+  - 結果領域を非表示にします
+  - フォームを非表示にします
+  - リセットボタンを表示します
+
+先に進む前に、ブラウザで利用できる非常に重要な概念を知っておくと便利です。それは [ローカルストレージ](https://developer.mozilla.org/ja/docs/Web/API/Window/localStorage) です。ローカルストレージは文字列を `key-value` のペアとしてブラウザに保存する便利な方法です。このタイプの Web ストレージは JavaScript で操作することができ、ブラウザでデータを管理することができます。ローカルストレージは有効期限がありませんが、もう一つの種類の Web ストレージであるセッションストレージはブラウザを閉じると消去されます。様々なタイプのストレージには、その使用方法に長所と短所があります。
+
+> 注意 - ブラウザ拡張機能は独自のローカルストレージを持っています。メインのブラウザウィンドウは別のインスタンスであり、別々に動作します。
+
+API キーに文字列の値を設定して、例えば Edge では Web ページを「検査」して (ブラウザを右クリックして検査することができます)、「アプリケーション」タブに行ってストレージを確認することで設定されていることがわかります。
+
+![ローカルストレージペイン](../images/localstorage.png)
+
+✅ ローカルストレージにデータを保存したくない状況を考えてみてください。一般的に、API キーをローカルストレージに置くのは悪い考えです! 理由がわかりますか? 私たちの場合、アプリは純粋に学習用であり、アプリストアにはデプロイされないので、このメソッドを使用します。
+
+ローカルストレージを操作するには、`getItem()`, `setItem()`, `removeItem()` のいずれかの方法で Web API を使用することに注意してください。これはブラウザ全体で広くサポートされています。
+
+`init()` で呼び出される `displayCarbonUsage()` 関数を構築する前に、フォームの初期投稿を処理する機能を構築しましょう。
+
+### フォーム送信の処理
+
+イベント引数 `(e)` を受け取る関数 `handleSubmit` を作成します。イベントの伝播を停止し (この場合、ブラウザの更新を停止したい)、新しい関数 `setUpUser` を呼び出し、引数 `apiKey.value` と `region.value` を渡します。このようにして、適切なフィールドが入力されたときに初期フォームから取得される2つの値を利用します。
+
+```JavaScript
+function handleSubmit(e) {
+	e.preventDefault();
+	setUpUser(apiKey.value, region.value);
+}
+```
+✅ 記憶をリフレッシュしてください - 前回のレッスンで設定した HTML には、ファイルの先頭に設定した `const` で `values` が取得される2つの入力フィールドがあり、両方とも `required` であるため、ブラウザはユーザが null 値を入力しないようにします。
+
+### ユーザーの設定
+
+次に `setUpUser` 関数に進み、ここで apiKey と regionName のローカルストレージの値を設定します。新しい関数を追加します。
+
+```JavaScript
+function setUpUser(apiKey, regionName) {
+	localStorage.setItem('apiKey', apiKey);
+	localStorage.setItem('regionName', regionName);
+	loading.style.display = 'block';
+	errors.textContent = '';
+	clearBtn.style.display = 'block';
+	//初期化の呼び出し
+	displayCarbonUsage(apiKey, regionName);
+}
+```
+この関数は、API が呼び出されている間に表示するローディングメッセージを設定します。この時点で、このブラウザ拡張機能の最も重要な機能の作成に到達しました!
+
+### 炭素使用量の表示
+
+ついに API に問い合わせをする時が来ました!
+
+先に進む前に、API について説明しましょう。API ([Application Programming Interfaces](https://www.webopedia.com/TERM/A/API.html)) は、Web 開発者のツールボックスの重要な要素です。API は、プログラムが相互作用し、相互にインターフェースするための標準的な方法を提供します。例えば、データベースへの問い合わせが必要な Web サイトを構築している場合、誰かが API を作成しているかもしれません。API には多くの種類がありますが、最も人気のあるものの一つが [REST API](https://www.smashingmagazine.com/2018/01/understanding-using-rest-api/) です。
+
+✅ 'REST' とは 'Representational State Transfer' の略で、様々な設定の URL を使ってデータを取得するのが特徴です。開発者が利用できる様々なタイプの API について少し調べてみてください。どのような形式に興味がありますか?
+
+この関数には注意すべき重要な点があります。まず、[`async` キーワード](https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Statements/async_function)に注目してください。非同期的に実行されるように関数を書くということは、データが返されるなどのアクションが完了するのを待ってから続行するということです。
+
+以下は `async` についての簡単なビデオです:
+
+[![Async and Await for managing promises](https://img.youtube.com/vi/YwmlRkrxvkk/0.jpg)](https://youtube.com/watch?v=YwmlRkrxvkk "Async and Await for managing promises")
+
+C02Signal API に問い合わせを行うための新しい関数を作成します:
+
+```JavaScript
+import axios from '../node_modules/axios';
+
+async function displayCarbonUsage(apiKey, region) {
+	try {
+		await axios
+			.get('https://api.co2signal.com/v1/latest', {
+				params: {
+					countryCode: region,
+				},
+				headers: {
+					'auth-token': apiKey,
+				},
+			})
+			.then((response) => {
+				let CO2 = Math.floor(response.data.data.carbonIntensity);
+
+				//calculateColor(CO2);
+
+				loading.style.display = 'none';
+				form.style.display = 'none';
+				myregion.textContent = region;
+				usage.textContent =
+					Math.round(response.data.data.carbonIntensity) + ' grams (grams C02 emitted per kilowatt hour)';
+				fossilfuel.textContent =
+					response.data.data.fossilFuelPercentage.toFixed(2) +
+					'% (percentage of fossil fuels used to generate electricity)';
+				results.style.display = 'block';
+			});
+	} catch (error) {
+		console.log(error);
+		loading.style.display = 'none';
+		results.style.display = 'none';
+		errors.textContent = 'Sorry, we have no data for the region you have requested.';
+	}
+}
+```
+
+これは大きな機能です。何が起こっているのでしょうか?
+
+- ベストプラクティスに従って、この関数を非同期的に動作させるために `async` キーワードを使用します。API がデータを返すときにプロミスを返すので、この関数には `try/catch` ブロックが含まれています。API が応答する速度を制御できないので (全く応答しないかもしれません!)、非同期的に呼び出すことでこの不確実性を処理する必要があります
+- co2signal API に問い合わせをして、API キーを使用してリージョンのデータを取得しています。そのキーを使用するには、ヘッダのパラメータで認証の種類を使用しなければなりません
+- API が応答したら、その応答データの様々な要素を、このデータを表示するために設定した画面の部分に割り当てます
+- エラーがあったり、結果が出なかったりすると、エラーメッセージが表示されます
+
+✅ 非同期プログラミングパターンを使用することも、ツールボックスの中で非常に便利なツールです。このタイプのコードを設定するための[様々な方法について](https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Statements/async_function)お読みください。
+
+おめでとうございます! 拡張機能をビルド (`npm run build`) して、拡張機能ペインで更新すると、拡張機能が動作するようになりました! 動作していないのはアイコンだけで、次のレッスンで修正します。
+
+---
+
+## 🚀 チャレンジ
+
+これらのレッスンでは、これまでにいくつかの種類の API について説明してきました。Web API を選択して、その API が提供しているものを詳しく調べてみましょう。例えば、[HTML ドラッグ＆ドロップ API](https://developer.mozilla.org/ja/docs/Web/API/HTML_Drag_and_Drop_API) のようなブラウザ内で利用できる API を見てみましょう。あなたの意見では、何が素晴らしい API を作るのでしょうか?
+
+## レッスン後の小テスト
+
+[レッスン後の小テスト](https://nice-beach-0fe9e9d0f.azurestaticapps.net/quiz/26)
+
+## 復習と自己学習
+
+このレッスンではローカルストレージと API について学びましたが、どちらもプロの Web 開発者にとって非常に有用なものです。この2つがどのように連携しているか考えてみましたか? API で使用するアイテムを保存する Web サイトをどのように構築するか考えてみてください。
+
+## 課題
+
+[API を採用する](assignment.ja.md)
+
diff --git a/5-browser-extension/2-forms-browsers-local-storage/translations/assignment.ja.md b/5-browser-extension/2-forms-browsers-local-storage/translations/assignment.ja.md
new file mode 100644
index 00000000..0da89295
--- /dev/null
+++ b/5-browser-extension/2-forms-browsers-local-storage/translations/assignment.ja.md
@@ -0,0 +1,11 @@
+# API を採用する
+
+## 説明書
+
+API はとても楽しく遊べます。ここでは、[多くの無料のもののリスト](https://github.com/public-apis/public-apis)を紹介します。API を選んで、問題を解決するブラウザ拡張機能を構築してください。それは、ペットの写真が十分にないという小さな問題 (だから、[dog CEO API](https://dog.ceo/dog-api/) を試してみてください) であっても、何か大きな問題であっても構いません - 楽しんでください!
+
+## ルーブリック
+
+| 基準 | 模範的な例                                                                  | 適切な                                 | 改善が必要       |
+| -------- | -------------------------------------------------------------------------- | ---------------------------------------- | ----------------------- |
+|          | 完全なブラウザ拡張機能は、上記のリストの API を使用して送信されます。 | ブラウザの拡張機能の一部を提出 | 投稿にはバグがある |
\ No newline at end of file

From b4d8fe5f664ac0d0fd145b1a2818afa181e5e91c Mon Sep 17 00:00:00 2001
From: Yuuki Ebihara <yuuki.ebihara813@gmail.com>
Date: Sat, 2 Jan 2021 21:51:18 +0900
Subject: [PATCH 09/10] translate 3-background-tasks-and-performance into
 japanese

---
 .../translations/README.ja.md                 | 161 ++++++++++++++++++
 .../translations/assignment.ja.md             |   9 +
 2 files changed, 170 insertions(+)
 create mode 100644 5-browser-extension/3-background-tasks-and-performance/translations/README.ja.md
 create mode 100644 5-browser-extension/3-background-tasks-and-performance/translations/assignment.ja.md

diff --git a/5-browser-extension/3-background-tasks-and-performance/translations/README.ja.md b/5-browser-extension/3-background-tasks-and-performance/translations/README.ja.md
new file mode 100644
index 00000000..26c35c09
--- /dev/null
+++ b/5-browser-extension/3-background-tasks-and-performance/translations/README.ja.md
@@ -0,0 +1,161 @@
+# ブラウザ拡張機能プロジェクト その 3: バックグラウンドタスクとパフォーマンスについて学ぶ
+
+## レッスン前の小テスト
+
+[レッスン前の小テスト](https://nice-beach-0fe9e9d0f.azurestaticapps.net/quiz/27)
+
+### イントロダクション
+
+このモジュールの最後の2つのレッスンでは、API からフェッチしたデータのフォームと表示領域を構築する方法を学びました。これは、Web 上でウェブプレゼンスを作成するための非常に標準的な方法です。非同期的にデータをフェッチする方法も学びました。ブラウザ拡張機能はほぼ完成しています。
+
+拡張機能のアイコンの色を更新するなどのバックグラウンドタスクが残っているので、この機会にブラウザがこのようなタスクをどのように管理しているのかについて話しましょう。これらのブラウザタスクについて、Web 資産を構築する際のパフォーマンスとの関連で考えてみましょう。
+
+## Web パフォーマンスの基礎
+
+> "Web サイトのパフォーマンスには2つのことがあります: ページの読み込み速度と、その上のコードの実行速度です。" -- [Zack Grossbart](https://www.smashingmagazine.com/2012/06/javascript-profiling-chrome-developer-tools/)
+
+どのようにしてあらゆるデバイス、あらゆるユーザー、あらゆる状況で、あなたのウェブサイトを燃えるように高速化するかという話題は、当然のことながら膨大なものになります。ここでは、標準的な Web プロジェクトまたはブラウザ拡張機能を構築する際に留意すべきポイントをいくつか紹介します。
+
+サイトが効率的に動作していることを確認するために最初に行う必要があることは、そのパフォーマンスに関するデータを収集することです。これを行う最初の場所は、Web ブラウザの開発者ツールにあります。Edge では、「設定とその他」ボタン（ブラウザの右上にある3つの点のアイコン）を選択してから、「その他のツール」→「開発者ツール」に移動し、「パフォーマンス」タブを開きます。Windows ではキーボードショートカット `Ctrl` + `Shift` + `I`、Mac では `Option` + `Command` + `I` を使用して開発者ツールを開くこともできます。
+
+パフォーマンスタブには、プロファイリングツールが含まれています。Web サイトを開いて (例えば https://www.microsoft.com を試してみてください)、「記録」ボタンをクリックし、サイトを更新します。いつでも録画を停止することができ、サイトを「スクリプト」、「レンダリング」、「ペイント」するために生成されたルーチンを見ることができます。
+
+![Edge profiler](../images/profiler.png)
+
+✅ Edge のパフォーマンスパネルの [Microsoft ドキュメント](https://docs.microsoft.com/ja-jp/microsoft-edge/edgehtml/) を参照してください。
+
+> ヒント: Web サイトの起動時間を正確に把握するには、ブラウザのキャッシュをクリアしてください。
+
+プロファイルのタイムラインの要素を選択すると、ページの読み込み中に発生するイベントをズームインできます。
+
+プロファイルのタイムラインの一部を選択してサマリーペインを見ることで、ページのパフォーマンスのスナップショットを得ることができます。
+
+![Edge プロファイラのスナップショット](../images/snapshot.png)
+
+イベントログペインをチェックして、15ms 以上かかったイベントがあるかどうかを確認します。
+
+![Edge イベントログ](../images/log.png)
+
+✅ プロファイラを知りましょう! このサイトの開発者ツールを開いて、ボトルネックがないか確認してみましょう。最も読み込みが遅いアセットは? 一番速いのは?
+
+## プロファイリングチェック
+
+一般的には、本番環境にデプロイする際に厄介な驚きを避けるために、すべての Web 開発者がサイトを構築する際に注意すべき「問題点」がいくつかあります。
+
+**アセットサイズ**: Web はここ数年で「重く」なり、その結果、遅くなっています。この重さのいくつかは、画像の使用に関係しています。
+
+✅ ページの重さなどの歴史的な見方については、[Internet Archive](https://httparchive.org/reports/page-weight) を参照してください。
+
+良い方法は、画像が最適化され、ユーザーにとって適切なサイズと解像度で配信されるようにすることです。
+
+**DOM トラバーサル**: ブラウザはあなたが書いたコードに基づいて Document Object Model を構築しなければならないので、タグを最小限に抑え、ページが必要とするものだけを使用してスタイリングすることがページパフォーマンスの向上につながります。この点については、ページに関連する余分な CSS を最適化することができます。例えば、1 つのページでのみ使用する必要のあるスタイルは、メインのスタイルシートに含める必要はありません。
+
+**JavaScript**: すべての JavaScript 開発者は、DOM の残りの部分を走査してブラウザに描画する前にロードしなければならない 'レンダーブロッキング' スクリプトに注意する必要があります。(テラリウムモジュールで行われているように) インラインスクリプトで `defer` を使うことを検討してください。
+
+✅ [Site Speed Test の Web サイト](https://www.webpagetest.org/)でいくつかのサイトを試してみると、サイトのパフォーマンスを判断するために行われる一般的なチェックについて詳しく知ることができます。
+
+これで、ブラウザが送信したアセットをどのようにレンダリングするかがわかったので、拡張機能を完成させるために必要な最後のいくつかのことを見てみましょう。
+
+### 色を計算する関数の作成
+
+`src/index.js` の中で作業し、`calculateColor()` という関数を、DOM にアクセスするために設定した一連の変数 `const` の後に追加します。
+
+```JavaScript
+function calculateColor(value) {
+	let co2Scale = [0, 150, 600, 750, 800];
+	let colors = ['#2AA364', '#F5EB4D', '#9E4229', '#381D02', '#381D02'];
+
+	let closestNum = co2Scale.sort((a, b) => {
+		return Math.abs(a - value) - Math.abs(b - value);
+	})[0];
+	console.log(value + ' is closest to ' + closestNum);
+	let num = (element) => element > closestNum;
+	let scaleIndex = co2Scale.findIndex(num);
+
+	let closestColor = colors[scaleIndex];
+	console.log(scaleIndex, closestColor);
+
+	chrome.runtime.sendMessage({ action: 'updateIcon', value: { color: closestColor } });
+}
+```
+
+ここでは何をしているのでしょうか? 前回のレッスンで完了した API コールの値 (炭素強度) を渡して、その値が colors 配列のインデックスにどれだけ近いかを計算します。そして、最も近い色の値を chrome.runtime に送ります。
+
+chrome.runtime には、あらゆる種類のバックグラウンドタスクを処理する [API](https://developer.chrome.com/extensions/runtime) があり、あなたの拡張機能はそれを利用しています。
+
+> "chrome.runtime API を使用して、バックグラウンドページを取得したり、マニフェストの詳細を返したり、アプリや拡張機能のライフサイクルでイベントをリッスンして応答したりすることができます。また、この API を使用して URL の相対パスを完全修飾 URL に変換することもできます。"
+
+✅ このブラウザ拡張を Edge 用に開発していると、chrome の API を使っていることに驚くかもしれません。新しい Edge ブラウザのバージョンは Chromium ブラウザエンジン上で動作しているので、これらのツールを活用することができます。
+
+> ブラウザ拡張機能をプロファイル化したい場合は、拡張機能自体が独立したブラウザインスタンスであるため、拡張機能自体の中から開発ツールを起動してください。
+
+### デフォルトのアイコンの色の設定
+
+ここで、`init()` 関数の中で、アイコンをジェネリックグリーンに設定して、chrome の `updateIcon` アクションを再度呼び出して起動します。
+
+```JavaScript
+chrome.runtime.sendMessage({
+	action: 'updateIcon',
+		value: {
+			color: 'green',
+		},
+});
+```
+### 関数の呼び出し、呼び出しの実行
+
+次に、C02Signal API が返すプロミスに追加して、先ほど作成した関数を呼び出します。
+
+```JavaScript
+//let CO2...
+calculateColor(CO2);
+```
+
+最後に、`/dist/background.js` で、これらのバックグラウンドアクションの呼び出し用のリスナーを追加します。
+
+```JavaScript
+chrome.runtime.onMessage.addListener(function (msg, sender, sendResponse) {
+	if (msg.action === 'updateIcon') {
+		chrome.browserAction.setIcon({ imageData: drawIcon(msg.value) });
+	}
+});
+//エナジーロリポップの拡張機能から借りた、良い機能
+function drawIcon(value) {
+	let canvas = document.createElement('canvas');
+	let context = canvas.getContext('2d');
+
+	context.beginPath();
+	context.fillStyle = value.color;
+	context.arc(100, 100, 50, 0, 2 * Math.PI);
+	context.fill();
+
+	return context.getImageData(50, 50, 100, 100);
+}
+```
+このコードでは、バックエンドのタスクマネージャに来るメッセージのリスナーを追加しています。'updateIcon' と呼ばれる場合、次のコードを実行して、Canvas API を使って適切な色のアイコンを描画しています。
+
+✅ Canvas API については、[スペースゲームのレッスン](../../../6-space-game/2-drawing-to-canvas/translations/README.ja.md)で詳しく説明しています。
+
+さて、拡張機能を再構築 (`npm run build`) して、リフレッシュして拡張機能を起動し、色の変化を見てみましょう。用事を済ませるのにも、お皿を洗うのにも良い時間帯でしょうか? これでわかりました!
+
+おめでとうございます。あなたは便利なブラウザ拡張機能を構築し、ブラウザがどのように動作するのか、そのパフォーマンスをどのようにプロファイルするのかについて、より多くのことを学びました。
+
+---
+
+## 🚀 チャレンジ
+
+オープンソースの Web サイトの中には、かなり昔からあるものもあり、それらの GitHub の歴史に基づいて、何年にもわたってどのようにパフォーマンスが最適化されてきたのかを調べてみましょう。最も一般的な問題点は何でしょうか?
+
+## レッスン後の小テスト
+
+[レッスン後の小テスト](https://nice-beach-0fe9e9d0f.azurestaticapps.net/quiz/28)
+
+## 復習と自己学習
+
+[パフォーマンスニュースレター](https://perf.email/)への登録を検討してみませんか?
+
+Web ツールのパフォーマンスタブを見て、ブラウザが Web のパフォーマンスを評価する方法のいくつかを調査してください。大きな違いはありますか?
+
+## 課題
+
+[パフォーマンスのためにサイトを分析する](assignment.ja.md)
+
diff --git a/5-browser-extension/3-background-tasks-and-performance/translations/assignment.ja.md b/5-browser-extension/3-background-tasks-and-performance/translations/assignment.ja.md
new file mode 100644
index 00000000..d9f82652
--- /dev/null
+++ b/5-browser-extension/3-background-tasks-and-performance/translations/assignment.ja.md
@@ -0,0 +1,9 @@
+# パフォーマンスのためにサイトを分析する
+
+Web サイトの詳細なレポートを提供し、パフォーマンスに問題がある領域を示します。サイトの速度が遅い理由と、速度を上げるために何ができるかを分析します。ブラウザツールだけに頼るのではなく、レポートに役立つ他のツールについても調査しましょう。
+
+## ルーブリック
+
+| 基準 | 模範的な例                                                                                                  | 適切な                    | 改善が必要             |
+| -------- | ---------------------------------------------------------------------------------------------------------- | --------------------------- | ----------------------------- |
+|          | レポートは、ブラウザツールだけでなく、サードパーティのツールが利用可能な場合は、サードパーティのツールから詳細を引き出して表示されます。 | 基本報告書を掲載しました | 最小限の報告書が提示される |
\ No newline at end of file

From 4cf4ff4c1a2b58ab43834df405b03cd096af400f Mon Sep 17 00:00:00 2001
From: Yuuki Ebihara <yuuki.ebihara813@gmail.com>
Date: Sat, 2 Jan 2021 22:05:49 +0900
Subject: [PATCH 10/10] translate 5-browser-extension source README into
 japanese

---
 .../solution/translation/README.ja.md         | 28 +++++++++++++++++++
 .../start/translations/README.ja.md           | 28 +++++++++++++++++++
 2 files changed, 56 insertions(+)
 create mode 100644 5-browser-extension/solution/translation/README.ja.md
 create mode 100644 5-browser-extension/start/translations/README.ja.md

diff --git a/5-browser-extension/solution/translation/README.ja.md b/5-browser-extension/solution/translation/README.ja.md
new file mode 100644
index 00000000..c660937d
--- /dev/null
+++ b/5-browser-extension/solution/translation/README.ja.md
@@ -0,0 +1,28 @@
+# カーボントリガーブラウザ拡張機能： 完成したコード
+
+tmrow の C02 シグナル API を使用して電力使用量を追跡するために、あなたの地域の電力使用量がどれだけ多いかをブラウザ上でリマインダーとして表示できるようにブラウザ拡張機能を構築します。この拡張機能をアドホックに使用することで、この情報に基づいてあなたの活動を判断することができます。
+
+![extension screenshot](../../extension-screenshot.png)
+
+## はじめに
+
+[npm](https://npmjs.com) がインストールされている必要があります。このコードのコピーをコンピュータ上のフォルダにダウンロードしてください。
+
+必要なパッケージをすべてインストールします。
+
+```
+npm install
+```
+
+webpack から拡張機能をビルドします。
+
+```
+npm run build
+```
+
+Edge にインストールするには、ブラウザの右上にある「3つのドット」メニューから「拡張機能」パネルを見つけます。そこから「Load Unpacked」を選択して、新しい拡張機能をロードします。プロンプトで「dist」フォルダを開くと、拡張機能が読み込まれます。使用するには、CO2 シグナル API の API キー ([get one here via email](https://www.co2signal.com/) - このページのボックスにメールを入力してください) と、[Electricity Map](https://www.electricitymap.org/map) に対応する [code for your region](http://api.electricitymap.org/v3/zones) が必要です (ボストンでは、例えば、'US-NEISO' を使用しています)。
+
+![installing](../../install-on-edge.png)
+
+API キーと地域を拡張インターフェイスに入力すると、ブラウザの拡張バーに表示される色付きのドットが変化し、あなたの地域のエネルギー使用量を反映して、どのようなエネルギーを必要とする活動を行うのが適切なのかを示してくれます。この「ドット」システムのコンセプトは、カリフォルニア州の排出量のための [Energy Lollipop extension](https://energylollipop.com/) が私に与えてくれたものです。
+
diff --git a/5-browser-extension/start/translations/README.ja.md b/5-browser-extension/start/translations/README.ja.md
new file mode 100644
index 00000000..6121aa49
--- /dev/null
+++ b/5-browser-extension/start/translations/README.ja.md
@@ -0,0 +1,28 @@
+# カーボントリガーブラウザ拡張機能： スターターコード
+
+tmrow の C02 シグナル API を使用して電力使用量を追跡するために、あなたの地域の電力使用量がどれだけ多いかをブラウザ上でリマインダーとして表示できるようにブラウザ拡張機能を構築します。この拡張機能をアドホックに使用することで、この情報に基づいてあなたの活動を判断することができます。
+
+![extension screenshot](../../extension-screenshot.png)
+
+## はじめに
+
+[npm](https://npmjs.com) がインストールされている必要があります。このコードのコピーをコンピュータ上のフォルダにダウンロードしてください。
+
+必要なパッケージをすべてインストールします。
+
+```
+npm install
+```
+
+webpack から拡張機能をビルドします。
+
+```
+npm run build
+```
+
+Edge にインストールするには、ブラウザの右上にある「3つのドット」メニューから「拡張機能」パネルを見つけます。そこから「Load Unpacked」を選択して、新しい拡張機能をロードします。プロンプトで「dist」フォルダを開くと、拡張機能が読み込まれます。使用するには、CO2 シグナル API の API キー ([get one here via email](https://www.co2signal.com/) - このページのボックスにメールを入力してください) と、[Electricity Map](https://www.electricitymap.org/map) に対応する [code for your region](http://api.electricitymap.org/v3/zones) が必要です (ボストンでは、例えば、'US-NEISO' を使用しています)。
+
+![installing](../../install-on-edge.png)
+
+API キーと地域を拡張インターフェイスに入力すると、ブラウザの拡張バーに表示される色付きのドットが変化し、あなたの地域のエネルギー使用量を反映して、どのようなエネルギーを必要とする活動を行うのが適切なのかを示してくれます。この「ドット」システムのコンセプトは、カリフォルニア州の排出量のための [Energy Lollipop extension](https://energylollipop.com/) が私に与えてくれたものです。
+