msb-public
/
Web-Dev-For-Beginners
mirror of https://github.com/microsoft/Web-Dev-For-Beginners.git
1
0
Code Issues Projects Releases Wiki Activity

Merge pull request #189 from namosuke/contribute-parent

Browse Source 
Fixed Japanese documents
pull/204/head
Jen Looper 4 years ago committed by GitHub
parent 2517d5cf16 641c905b5d
commit eba76b8ab3
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
22 changed files with 61 additions and 62 deletions
Show Stats Download Patch File Download Diff File

4
1-getting-started-lessons/1-intro-to-programming-languages/translations/README.ja.md
Unescape View File

@ -88,7 +88,7 @@ back add r0,r1
信じられないかもしれませんが、両者は同じ処理をしています。 信じられないかもしれませんが、両者は同じ処理をしています。
いずれもフィボナッチ数を順番に10個出力します。 いずれもフィボナッチ数を順番に10個出力します。
✅ [フィボナッチ数](https://en.wikipedia.org/wiki/Fibonacci_number)とは、各数がその手前の二つの値の和である値の集合です。 ✅ [フィボナッチ数](https://ja.wikipedia.org/wiki/%E3%83%95%E3%82%A3%E3%83%9C%E3%83%8A%E3%83%83%E3%83%81%E6%95%B0)とは、各数がその手前の二つの値の和である値の集合です。
## プログラムの基本要素 ## プログラムの基本要素
@ -244,4 +244,4 @@ COBOLとGoについては？
## 課題 ## 課題
[assignment.md](assignment.ja.md) [ドキュメントを読む](assignment.ja.md)

6
1-getting-started-lessons/3-accessibility/translations/README.ja.md
Unescape View File

@ -1,6 +1,6 @@
# アクセシブルな Web ページの作成 # アクセシブルな Web ページの作成
![All About Accessibility](webdev101-a11y.png) ![All About Accessibility](../webdev101-a11y.png)
> Sketchnote by [Tomomi Imura](https://twitter.com/girlie_mac) > Sketchnote by [Tomomi Imura](https://twitter.com/girlie_mac)
## レッスン前の小テスト ## レッスン前の小テスト
@ -84,7 +84,7 @@ CSS は、ページ上のあらゆる要素の外観を完全に制御するこ
ご想像の通り、スクリーンリーダーはリンクテキストをページ上の他のテキストと同じように読みます。このことを念頭に置いて、以下に示すテキストは完全に許容できると感じるかもしれません。 ご想像の通り、スクリーンリーダーはリンクテキストをページ上の他のテキストと同じように読みます。このことを念頭に置いて、以下に示すテキストは完全に許容できると感じるかもしれません。
> 妖精ペンギンと呼ばれることもあるコガタペンギンは、世界最小のペンギンです。[詳しくはこちら](https://en.wikipedia.org/wiki/Little_penguin) をご覧ください。 > 妖精ペンギンと呼ばれることもあるコガタペンギンは、世界最小のペンギンです。[詳しくはこちら](https://ja.wikipedia.org/wiki/%E3%82%B3%E3%82%AC%E3%82%BF%E3%83%9A%E3%83%B3%E3%82%AE%E3%83%B3) をご覧ください。
> 妖精ペンギンと呼ばれることもあるリトルペンギンは、世界最小のペンギンです。詳しくは https://ja.wikipedia.org/wiki/%E3%82%B3%E3%82%AC%E3%82%BF%E3%83%9A%E3%83%B3%E3%82%AE%E3%83%B3 をご覧ください。 > 妖精ペンギンと呼ばれることもあるリトルペンギンは、世界最小のペンギンです。詳しくは https://ja.wikipedia.org/wiki/%E3%82%B3%E3%82%AC%E3%82%BF%E3%83%9A%E3%83%B3%E3%82%AE%E3%83%B3 をご覧ください。
@ -224,6 +224,6 @@ CSS は、ページ上のあらゆる要素の外観を完全に制御するこ
## 課題 ## 課題
[Analyze a non-accessible web site](assignment.ja.md) [アクセスできない Web サイトを分析する](assignment.ja.md)
Credits: [Turtle Ipsum](https://github.com/Instrument/semantic-html-sample) by Instrument Credits: [Turtle Ipsum](https://github.com/Instrument/semantic-html-sample) by Instrument

6
2-js-basics/1-data-types/translations/README.ja.md
Unescape View File

@ -1,6 +1,6 @@
# JavaScript の基本: データ型 # JavaScript の基本: データ型
![JavaScript Basics - Data types](images/webdev101-js-datatypes.png) ![JavaScript Basics - Data types](../images/webdev101-js-datatypes.png)
> Sketchnote by [Tomomi Imura](https://twitter.com/girlie_mac) > Sketchnote by [Tomomi Imura](https://twitter.com/girlie_mac)
## レッスン前の小テスト ## レッスン前の小テスト
@ -111,7 +111,7 @@ const MY_VARIABLE = 123;
`let myVariable = 123;` `let myVariable = 123;`
変数は、小数や負の数を含むあらゆるタイプの数値を格納することができます。数値は、[次のセクション](#operators)で説明する算術演算子と一緒に使用することもできます。 変数は、小数や負の数を含むあらゆるタイプの数値を格納することができます。数値は、[次のセクション](#算術演算子)で説明する算術演算子と一緒に使用することもできます。
### 算術演算子 ### 算術演算子
@ -171,7 +171,7 @@ let myString2 = "World";
### ブール値 ### ブール値
ブール値は2つの値だけを持つことができます。`true` か `false` です。ブール値は、特定の条件が満たされたときにどの行のコードを実行するかを決定するのに役立ちます。多くの場合、[演算子](#operators) がブール値の設定を支援し、変数が初期化されたり、演算子で値が更新されたりしていることに気付いたり、書いたりすることが多いでしょう。 ブール値は2つの値だけを持つことができます。`true` か `false` です。ブール値は、特定の条件が満たされたときにどの行のコードを実行するかを決定するのに役立ちます。多くの場合、[演算子](#算術演算子) がブール値の設定を支援し、変数が初期化されたり、演算子で値が更新されたりしていることに気付いたり、書いたりすることが多いでしょう。
- `let myTrueBool = true` - `let myTrueBool = true`
- `let myFalseBool = false` - `let myFalseBool = false`

2
2-js-basics/2-functions-methods/translations/README.ja.md
Unescape View File

@ -1,6 +1,6 @@
# JavaScript の基本: メソッドと関数 # JavaScript の基本: メソッドと関数
![JavaScript Basics - Functions](images/webdev101-js-functions.png) ![JavaScript Basics - Functions](../images/webdev101-js-functions.png)
> Sketchnote by [Tomomi Imura](https://twitter.com/girlie_mac) > Sketchnote by [Tomomi Imura](https://twitter.com/girlie_mac)
## レッスン前の小テスト ## レッスン前の小テスト

2
2-js-basics/3-making-decisions/translations/README.ja.md
Unescape View File

@ -1,6 +1,6 @@
# JavaScript の基本: 意思決定 # JavaScript の基本: 意思決定
![JavaScript Basics - Making decisions](images/webdev101-js-decisions.png) ![JavaScript Basics - Making decisions](../images/webdev101-js-decisions.png)
> Sketchnote by [Tomomi Imura](https://twitter.com/girlie_mac) > Sketchnote by [Tomomi Imura](https://twitter.com/girlie_mac)
## レッスン前の小テスト ## レッスン前の小テスト

4
2-js-basics/4-arrays-loops/translations/README.ja.md
Unescape View File

@ -1,6 +1,6 @@
# JavaScript の基本: 配列とループ # JavaScript の基本: 配列とループ
![JavaScript Basics - Arrays](images/webdev101-js-arrays.png) ![JavaScript Basics - Arrays](../images/webdev101-js-arrays.png)
> Sketchnote by [Tomomi Imura](https://twitter.com/girlie_mac) > Sketchnote by [Tomomi Imura](https://twitter.com/girlie_mac)
## レッスン前の小テスト ## レッスン前の小テスト
@ -89,7 +89,7 @@ while (i < 10) {
} }
``` ```
✅ for loop と while loop のどちらかを選ぶ理由は何ですか? 17K の視聴者が StackOverflow で同じ質問をしていましたが、その意見の中には[あなたにとって興味深いものもあるかもしれません](https://stackoverflow.com/questions/39969145/while-loops-vs-for-loops-in-javascript)。 ✅ for loop と while loop のどちらかを選ぶ理由は何ですか? 同じ質問が StackOverflow で約2万回閲覧されていましたが、その意見の中には[あなたにとって興味深いものもあるかもしれません](https://stackoverflow.com/questions/39969145/while-loops-vs-for-loops-in-javascript)。
## ループと配列 ## ループと配列

4
3-terrarium/1-intro-to-html/translations/README.ja.md
Unescape View File

@ -1,6 +1,6 @@
# テラリウムプロジェクト その1: HTML 入門 # テラリウムプロジェクト その1: HTML 入門
![Introduction to HTML](images/webdev101-html.png) ![Introduction to HTML](../images/webdev101-html.png)
> Sketchnote by [Tomomi Imura](https://twitter.com/girlie_mac) > Sketchnote by [Tomomi Imura](https://twitter.com/girlie_mac)
## レッスン前の小テスト ## レッスン前の小テスト
@ -17,7 +17,7 @@ HTML (HyperText Markup Language) は、Web の「骨格」です。CSS が HTML
コンピュータ上に 'terrarium' というフォルダを作成し、その中に 'index.html' というファイルを作成します。テラリウムのフォルダを作成した後、Visual Studio Code で新しい VS Code ウィンドウを開き、「フォルダを開く」をクリックして新しいフォルダに移動することで、この作業を行うことができます。エクスプローラペインの「ファイル」ボタンをクリックして、新しいファイルを作成してください。 コンピュータ上に 'terrarium' というフォルダを作成し、その中に 'index.html' というファイルを作成します。テラリウムのフォルダを作成した後、Visual Studio Code で新しい VS Code ウィンドウを開き、「フォルダを開く」をクリックして新しいフォルダに移動することで、この作業を行うことができます。エクスプローラペインの「ファイル」ボタンをクリックして、新しいファイルを作成してください。
![explorer in VS Code](images/vs-code-index.png) ![explorer in VS Code](../images/vs-code-index.png)
もしくは もしくは

21
3-terrarium/2-intro-to-css/translations/README.ja.md
Unescape View File

@ -1,6 +1,6 @@
# テラリウムプロジェクト その2: CSS 入門 # テラリウムプロジェクト その2: CSS 入門
![Introduction to CSS](images/webdev101-css.png) ![Introduction to CSS](../images/webdev101-css.png)
> Sketchnote by [Tomomi Imura](https://twitter.com/girlie_mac) > Sketchnote by [Tomomi Imura](https://twitter.com/girlie_mac)
## レッスン前の小テスト ## レッスン前の小テスト
@ -11,7 +11,7 @@
CSS (カスケードスタイルシート) は、Web 開発の重要な問題である、Web サイトの見栄えを良くする方法を解決します。また、CSS を使用してレスポンシブ ウェブ デザイン (RWD) を作成することもできます。CSS の仕様には、アプリケーションの洗練されたインタラクションを可能にするアニメーションや変換が含まれています。CSS Working Group は現在の CSS 仕様の維持を支援しており、[World Wide Web Consortium のサイト](https://www.w3.org/Style/CSS/members) でその活動を追うことができます。 CSS (カスケードスタイルシート) は、Web 開発の重要な問題である、Web サイトの見栄えを良くする方法を解決します。また、CSS を使用してレスポンシブ ウェブ デザイン (RWD) を作成することもできます。CSS の仕様には、アプリケーションの洗練されたインタラクションを可能にするアニメーションや変換が含まれています。CSS Working Group は現在の CSS 仕様の維持を支援しており、[World Wide Web Consortium のサイト](https://www.w3.org/Style/CSS/members) でその活動を追うことができます。
> 注: CSS は Web 上のすべてのものと同様に進化する言語であり、すべてのブラウザが仕様の新しい部分をサポートしているわけではありません。常に [CanIUse.com](caniuse.com) に相談して実装を確認してください。 > 注: CSS は Web 上のすべてのものと同様に進化する言語であり、すべてのブラウザが仕様の新しい部分をサポートしているわけではありません。常に [CanIUse.com](https://caniuse.com) を参照して実装を確認してください。
このレッスンでは、オンラインテラリウムにスタイルを追加し、カスケード、継承、セレクタの使用、配置、CSS を使ったレイアウトの作成など、CSS の概念について学びます。その過程で、テラリウムをレイアウトし、実際のテラリウムを作成していきます。 このレッスンでは、オンラインテラリウムにスタイルを追加し、カスケード、継承、セレクタの使用、配置、CSS を使ったレイアウトの作成など、CSS の概念について学びます。その過程で、テラリウムをレイアウトし、実際のテラリウムを作成していきます。
@ -37,13 +37,13 @@ CSS (カスケードスタイルシート) は、Web 開発の重要な問題で
インラインスタイル "color: red" を `<h1>` タグに追加します。 インラインスタイル "color: red" を `<h1>` タグに追加します。
```HTML ```html
<h1 style="color: red">My Terrarium</h1> <h1 style="color: red">My Terrarium</h1>
``` ```
次に、以下のコードを `style.css` ファイルに追加します。 次に、以下のコードを `style.css` ファイルに追加します。
```CSS ```css
h1 { h1 {
color: blue; color: blue;
} }
@ -61,7 +61,7 @@ h1 {
body のフォントを指定されたフォントに設定し、入れ子になっている要素のフォントを確認します。 body のフォントを指定されたフォントに設定し、入れ子になっている要素のフォントを確認します。
``` ```css
body { body {
font-family: helvetica, arial, sans-serif; font-family: helvetica, arial, sans-serif;
} }
@ -69,7 +69,7 @@ body {
ブラウザのコンソールから「要素」タブを開き、h1 のフォントを観察してください。ブラウザ内で述べられているように、フォントは body から継承されています。 ブラウザのコンソールから「要素」タブを開き、h1 のフォントを観察してください。ブラウザ内で述べられているように、フォントは body から継承されています。
![inherited font](images/1.png) ![inherited font](../images/1.png)
✅ 入れ子になったスタイルを別のプロパティを継承させることはできますか? ✅ 入れ子になったスタイルを別のプロパティを継承させることはできますか?
@ -81,7 +81,7 @@ body {
これまでのところ、`style.css` ファイルにはいくつかのタグがスタイリングされているだけで、アプリはかなり変な感じになっています。 これまでのところ、`style.css` ファイルにはいくつかのタグがスタイリングされているだけで、アプリはかなり変な感じになっています。
``` ```css
body { body {
font-family: helvetica, arial, sans-serif; font-family: helvetica, arial, sans-serif;
} }
@ -94,12 +94,11 @@ h1 {
このようにタグをスタイリングすることで、ユニークな要素をコントロールすることができますが、テラリウム内の多くの植物のスタイルをコントロールする必要があります。そのためには、CSS セレクタを利用する必要があります。 このようにタグをスタイリングすることで、ユニークな要素をコントロールすることができますが、テラリウム内の多くの植物のスタイルをコントロールする必要があります。そのためには、CSS セレクタを利用する必要があります。
### Id ### id
Add some style to layout the left and right containers. Since there is only one left container and only one right container, they are given ids in the markup. To style them, use `#`:
左と右のコンテナをレイアウトするためのスタイルを追加します。左のコンテナと右のコンテナは1つしかないので、マークアップでは id が与えられます。スタイルを設定するには、`#` を使用します。 左と右のコンテナをレイアウトするためのスタイルを追加します。左のコンテナと右のコンテナは1つしかないので、マークアップでは id が与えられます。スタイルを設定するには、`#` を使用します。
``` ```css
#left-container { #left-container {
background-color: #eee; background-color: #eee;
width: 15%; width: 15%;
@ -247,7 +246,7 @@ HTML マークアップの各植物には、id とクラスの組み合わせが
瓶の左下の部分に「泡」のような輝きを加えて、よりガラスのように見えるようにします。`.jar-glossy-long` と `.jar-glossy-short` は反射光のように見えるようにスタイリングします。このようになります。 瓶の左下の部分に「泡」のような輝きを加えて、よりガラスのように見えるようにします。`.jar-glossy-long` と `.jar-glossy-short` は反射光のように見えるようにスタイリングします。このようになります。
![finished terrarium](./images/terrarium-final.png) ![finished terrarium](../images/terrarium-final.png)
レッスン後の小テストを完成させるには、この Learn モジュールを通ってください: [HTML アプリを CSS でスタイルを整える](https://docs.microsoft.com/ja-jp/learn/modules/build-simple-website/4-css-basics?WT.mc_id=academic-13441-cxa) レッスン後の小テストを完成させるには、この Learn モジュールを通ってください: [HTML アプリを CSS でスタイルを整える](https://docs.microsoft.com/ja-jp/learn/modules/build-simple-website/4-css-basics?WT.mc_id=academic-13441-cxa)

12
3-terrarium/3-intro-to-DOM-and-closures/translations/README.ja.md
Unescape View File

@ -1,6 +1,6 @@
# テラリウムプロジェクト その3: DOM の操作とクロージャ # テラリウムプロジェクト その3: DOM の操作とクロージャ
![DOM and a closure](images/webdev101-js.png) ![DOM and a closure](../images/webdev101-js.png)
> Sketchnote by [Tomomi Imura](https://twitter.com/girlie_mac) > Sketchnote by [Tomomi Imura](https://twitter.com/girlie_mac)
## レッスン前の小テスト ## レッスン前の小テスト
@ -19,7 +19,7 @@ DOM (Document Object Model) を操作することは、Web 開発の重要な
DOM をツリーと考え、Web ページのドキュメントを操作できるすべての方法を表しています。様々な API (Application Program Interfaces) が書かれており、プログラマーが自分の好きなプログラミング言語を使って DOM にアクセスし、編集、変更、再配置、その他の管理ができるようになっています。 DOM をツリーと考え、Web ページのドキュメントを操作できるすべての方法を表しています。様々な API (Application Program Interfaces) が書かれており、プログラマーが自分の好きなプログラミング言語を使って DOM にアクセスし、編集、変更、再配置、その他の管理ができるようになっています。
![DOM tree representation](./images/dom-tree.png) ![DOM tree representation](../images/dom-tree.png)
> DOM とそれを参照する HTML マークアップの表現。[Olfa Nasraoui](https://www.researchgate.net/publication/221417012_Profile-Based_Focused_Crawler_for_Social_Media-Sharing_Websites) より > DOM とそれを参照する HTML マークアップの表現。[Olfa Nasraoui](https://www.researchgate.net/publication/221417012_Profile-Based_Focused_Crawler_for_Social_Media-Sharing_Websites) より
@ -34,7 +34,7 @@ DOM をツリーと考え、Web ページのドキュメントを操作できる
terrarium フォルダ内に `script.js` というファイルを作成します。このファイルを `<head>` セクションにインポートします。 terrarium フォルダ内に `script.js` というファイルを作成します。このファイルを `<head>` セクションにインポートします。
```html ```html
<script src="./script.js" defer></script> <script src="./script.js" defer></script>
``` ```
> 注: HTML ファイルが完全に読み込まれた後にのみ JavaScript を実行できるようにするために、外部の JavaScript ファイルを HTML ファイルにインポートする際には `defer` を使用してください。また、`async` 属性を使用することもできます。これは HTML ファイルのパース中にスクリプトを実行できるようにしますが、私たちの場合は、ドラッグスクリプトを実行する前に HTML 要素を完全に利用できるようにしておくことが重要です。 > 注: HTML ファイルが完全に読み込まれた後にのみ JavaScript を実行できるようにするために、外部の JavaScript ファイルを HTML ファイルにインポートする際には `defer` を使用してください。また、`async` 属性を使用することもできます。これは HTML ファイルのパース中にスクリプトを実行できるようにしますが、私たちの場合は、ドラッグスクリプトを実行する前に HTML 要素を完全に利用できるようにしておくことが重要です。
@ -46,7 +46,7 @@ terrarium フォルダ内に `script.js` というファイルを作成します
### タスク ### タスク
```html ```javascript
dragElement(document.getElementById('plant1')); dragElement(document.getElementById('plant1'));
dragElement(document.getElementById('plant2')); dragElement(document.getElementById('plant2'));
dragElement(document.getElementById('plant3')); dragElement(document.getElementById('plant3'));
@ -141,7 +141,7 @@ function pointerDrag(e) {
`pos4 = e.clientY` の下にポインタイベントの操作を2つ追加して、初期関数を完成させます。 `pos4 = e.clientY` の下にポインタイベントの操作を2つ追加して、初期関数を完成させます。
```html ```javascript
document.onpointermove = elementDrag; document.onpointermove = elementDrag;
document.onpointerup = stopElementDrag; document.onpointerup = stopElementDrag;
``` ```
@ -191,7 +191,7 @@ function stopElementDrag() {
これでプロジェクトが完成しました! これでプロジェクトが完成しました!
🥇おめでとうございます。素敵なテラリウムが完成しましたね。 ![finished terrarium](./images/terrarium-final.png) 🥇おめでとうございます。素敵なテラリウムが完成しましたね。 ![finished terrarium](../images/terrarium-final.png)
--- ---

8
3-terrarium/translations/README.ja.md
Unescape View File

@ -2,13 +2,13 @@
ちょっとしたドラッグ＆ドロップのコードメディテーション。少しの HTML、JS、CSS で、Web インターフェースを構築し、スタイルを設定し、インタラクションを追加することができます。 ちょっとしたドラッグ＆ドロップのコードメディテーション。少しの HTML、JS、CSS で、Web インターフェースを構築し、スタイルを設定し、インタラクションを追加することができます。
![my terrarium](images/screenshot_gray.png) ![my terrarium](../images/screenshot_gray.png)
# レッスン # レッスン
1. [HTML 入門](./1-intro-to-html/README.md) 1. [HTML 入門](../1-intro-to-html/translations/README.ja.md)
2. [CSS 入門](./2-intro-to-css/README.md) 2. [CSS 入門](../2-intro-to-css/translations/README.ja.md)
3. [DOM と JS Closures の紹介](./3-intro-to-DOM-and-closures/README.md) 3. [DOM の操作とクロージャ](../3-intro-to-DOM-and-closures/translations/README.ja.md)
## クレジット ## クレジット

2
4-typing-game/translations/README.ja.md
Unescape View File

@ -23,7 +23,7 @@
## レッスン ## レッスン
[イベント駆動型プログラミングを用いたタイピングゲームの作成](./typing-game/translations/README.ja.md) [イベント駆動型プログラミングを用いたタイピングゲームの作成](../typing-game/translations/README.ja.md)
## クレジット ## クレジット

14
5-browser-extension/2-forms-browsers-local-storage/translations/README.ja.md
Unescape View File

@ -12,11 +12,11 @@
### 拡張機能で操作する要素の設定: ### 拡張機能で操作する要素の設定:
この時点で、フォーム用の HTML とブラウザ拡張機能用の結果 `<div>` が構築されています。これからは、`/src/index.js` ファイルを使って少しずつ拡張機能を構築していく必要があります。プロジェクトのセットアップとビルドのプロセスについては [前のレッスン](.../.../1-about-browsers/translations/README.ja.md) を参照してください。 この時点で、フォーム用の HTML とブラウザ拡張機能用の結果 `<div>` が構築されています。これからは、`/src/index.js` ファイルを使って少しずつ拡張機能を構築していく必要があります。プロジェクトのセットアップとビルドのプロセスについては [前のレッスン](/5-browser-extension/1-about-browsers/translations/README.ja.md) を参照してください。
`index.js` ファイルの中で作業を行うには、様々なフィールドに関連付けられた値を保持するための `const` 変数を作成することから始めます。 `index.js` ファイルの中で作業を行うには、様々なフィールドに関連付けられた値を保持するための `const` 変数を作成することから始めます。
```JavaScript ```javascript
// フォームフィールド // フォームフィールド
const form = document.querySelector('.form-data'); const form = document.querySelector('.form-data');
const region = document.querySelector('.region-name'); const region = document.querySelector('.region-name');
@ -38,7 +38,7 @@ const clearBtn = document.querySelector('.clear-btn');
次に、フォームにイベントリスナーを追加し、フォームをリセットするクリアボタンを追加します。ユーザーがフォームを送信したり、リセットボタンをクリックしたりした場合に、そのリセットボタンをクリックするようにします。何かが起こるときのため、ファイルの一番下にアプリを初期化するための呼び出しを追加します。 次に、フォームにイベントリスナーを追加し、フォームをリセットするクリアボタンを追加します。ユーザーがフォームを送信したり、リセットボタンをクリックしたりした場合に、そのリセットボタンをクリックするようにします。何かが起こるときのため、ファイルの一番下にアプリを初期化するための呼び出しを追加します。
```JavaScript ```javascript
form.addEventListener('submit', (e) => handleSubmit(e)); form.addEventListener('submit', (e) => handleSubmit(e));
clearBtn.addEventListener('click', (e) => reset(e)); clearBtn.addEventListener('click', (e) => reset(e));
init(); init();
@ -50,7 +50,7 @@ init();
今度は拡張機能を初期化する関数を作ります。これは init() と呼ばれています。 今度は拡張機能を初期化する関数を作ります。これは init() と呼ばれています。
```JavaScript ```javascript
function init() { function init() {
//何かがローカルストレージにある場合は、それをピックアップします。 //何かがローカルストレージにある場合は、それをピックアップします。
const storedApiKey = localStorage.getItem('apiKey'); const storedApiKey = localStorage.getItem('apiKey');
@ -112,7 +112,7 @@ API キーに文字列の値を設定して、例えば Edge では Web ペー
イベント引数 `(e)` を受け取る関数 `handleSubmit` を作成します。イベントの伝播を停止し (この場合、ブラウザの更新を停止したい)、新しい関数 `setUpUser` を呼び出し、引数 `apiKey.value` と `region.value` を渡します。このようにして、適切なフィールドが入力されたときに初期フォームから取得される2つの値を利用します。 イベント引数 `(e)` を受け取る関数 `handleSubmit` を作成します。イベントの伝播を停止し (この場合、ブラウザの更新を停止したい)、新しい関数 `setUpUser` を呼び出し、引数 `apiKey.value` と `region.value` を渡します。このようにして、適切なフィールドが入力されたときに初期フォームから取得される2つの値を利用します。
```JavaScript ```javascript
function handleSubmit(e) { function handleSubmit(e) {
e.preventDefault(); e.preventDefault();
setUpUser(apiKey.value, region.value); setUpUser(apiKey.value, region.value);
@ -124,7 +124,7 @@ function handleSubmit(e) {
次に `setUpUser` 関数に進み、ここで apiKey と regionName のローカルストレージの値を設定します。新しい関数を追加します。 次に `setUpUser` 関数に進み、ここで apiKey と regionName のローカルストレージの値を設定します。新しい関数を追加します。
```JavaScript ```javascript
function setUpUser(apiKey, regionName) { function setUpUser(apiKey, regionName) {
localStorage.setItem('apiKey', apiKey); localStorage.setItem('apiKey', apiKey);
localStorage.setItem('regionName', regionName); localStorage.setItem('regionName', regionName);
@ -153,7 +153,7 @@ function setUpUser(apiKey, regionName) {
C02Signal API に問い合わせを行うための新しい関数を作成します: C02Signal API に問い合わせを行うための新しい関数を作成します:
```JavaScript ```javascript
import axios from '../node_modules/axios'; import axios from '../node_modules/axios';
async function displayCarbonUsage(apiKey, region) { async function displayCarbonUsage(apiKey, region) {

8
5-browser-extension/3-background-tasks-and-performance/translations/README.ja.md
Unescape View File

@ -60,7 +60,7 @@
`src/index.js` の中で作業し、`calculateColor()` という関数を、DOM にアクセスするために設定した一連の変数 `const` の後に追加します。 `src/index.js` の中で作業し、`calculateColor()` という関数を、DOM にアクセスするために設定した一連の変数 `const` の後に追加します。
```JavaScript ```javascript
function calculateColor(value) { function calculateColor(value) {
let co2Scale = [0, 150, 600, 750, 800]; let co2Scale = [0, 150, 600, 750, 800];
let colors = ['#2AA364', '#F5EB4D', '#9E4229', '#381D02', '#381D02']; let colors = ['#2AA364', '#F5EB4D', '#9E4229', '#381D02', '#381D02'];
@ -93,7 +93,7 @@ chrome.runtime には、あらゆる種類のバックグラウンドタスク
ここで、`init()` 関数の中で、アイコンをジェネリックグリーンに設定して、chrome の `updateIcon` アクションを再度呼び出して起動します。 ここで、`init()` 関数の中で、アイコンをジェネリックグリーンに設定して、chrome の `updateIcon` アクションを再度呼び出して起動します。
```JavaScript ```javascript
chrome.runtime.sendMessage({ chrome.runtime.sendMessage({
action: 'updateIcon', action: 'updateIcon',
value: { value: {
@ -105,14 +105,14 @@ chrome.runtime.sendMessage({
次に、C02Signal API が返すプロミスに追加して、先ほど作成した関数を呼び出します。 次に、C02Signal API が返すプロミスに追加して、先ほど作成した関数を呼び出します。
```JavaScript ```javascript
//let CO2... //let CO2...
calculateColor(CO2); calculateColor(CO2);
``` ```
最後に、`/dist/background.js` で、これらのバックグラウンドアクションの呼び出し用のリスナーを追加します。 最後に、`/dist/background.js` で、これらのバックグラウンドアクションの呼び出し用のリスナーを追加します。
```JavaScript ```javascript
chrome.runtime.onMessage.addListener(function (msg, sender, sendResponse) { chrome.runtime.onMessage.addListener(function (msg, sender, sendResponse) {
if (msg.action === 'updateIcon') { if (msg.action === 'updateIcon') {
chrome.browserAction.setIcon({ imageData: drawIcon(msg.value) }); chrome.browserAction.setIcon({ imageData: drawIcon(msg.value) });

8
5-browser-extension/translations/README.ja.md
Unescape View File

@ -8,13 +8,13 @@ Edge、Chrome、Firefox で動作するブラウザ拡張機能を構築しま
### トピック ### トピック
1. [ブラウザについて](1-about-browsers/translations/README.ja.md) 1. [ブラウザのすべて](../1-about-browsers/translations/README.ja.md)
2. [フォームとローカルストレージ](2-forms-browsers-local-storage/translations/README.ja.md) 2. [API の呼び出し、ローカルストレージの使用](../2-forms-browsers-local-storage/translations/README.ja.md)
3. [バックグラウンドタスクとパフォーマンス](3-background-tasks-and-performance/translations/README.ja.md) 3. [バックグラウンドタスクとパフォーマンスについて学ぶ](../3-background-tasks-and-performance/translations/README.ja.md)
### クレジット ### クレジット
![a green browser extension](extension-screenshot.png) ![a green browser extension](../extension-screenshot.png)
## クレジット ## クレジット

4
6-space-game/1-introduction/translations/README.ja.md
Unescape View File

@ -29,7 +29,7 @@
クラスに特定の振る舞いを追加するために `クラス` を `継承` と組み合わせて使うという考え方です。 クラスに特定の振る舞いを追加するために `クラス` を `継承` と組み合わせて使うという考え方です。
✅ 継承は理解しておくべき重要な概念です。[継承に関する MdN の記事](https://developer.mozilla.org/ja/docs/Web/JavaScript/Inheritance_and_the_prototype_chain)で詳しく解説しています。 ✅ 継承は理解しておくべき重要な概念です。[継承に関する MDN の記事](https://developer.mozilla.org/ja/docs/Web/JavaScript/Inheritance_and_the_prototype_chain)で詳しく解説しています。
コードで表現すると、ゲームオブジェクトは通常このようになります。 コードで表現すると、ゲームオブジェクトは通常このようになります。
@ -136,7 +136,7 @@ const tree = createStatic(0,0, 'Tree');
ゲーム開発に共通するもう一つのパターンは、ゲームのユーザーエクスペリエンスとパフォーマンスを処理する問題を扱っています。 ゲーム開発に共通するもう一つのパターンは、ゲームのユーザーエクスペリエンスとパフォーマンスを処理する問題を扱っています。
## Pub/sub パターン ## Pub/Sub パターン
✅ Pub/Sub は 'publish-subscribe' の略です。 ✅ Pub/Sub は 'publish-subscribe' の略です。

4
6-space-game/translations/README.ja.md
Unescape View File

@ -19,11 +19,11 @@
- 理論 - 理論
- [JavaScript を使ったゲーム構築入門](../1-introduction/translations/README.ja.md) - [JavaScript を使ったゲーム構築入門](../1-introduction/translations/README.ja.md)
- 実践 - 実践
- [キャンバスへの描画](../2-drawing-to-canvas/translations/README.ja.md) - [Canvas への描画](../2-drawing-to-canvas/translations/README.ja.md)
- [画面の周りの要素の移動](../3-moving-elements-around/translations/README.ja.md) - [画面の周りの要素の移動](../3-moving-elements-around/translations/README.ja.md)
- [衝突の検出](../4-collision-detection/translations/README.ja.md) - [衝突の検出](../4-collision-detection/translations/README.ja.md)
- [スコアの保持](../5-keeping-score/translations/README.ja.md) - [スコアの保持](../5-keeping-score/translations/README.ja.md)
- [ゲームの終了と再開](../6-end-condition/translations/README.ja.md) - [ゲームの終了と再起動](../6-end-condition/translations/README.ja.md)
## クレジット ## クレジット

2
7-bank-project/1-template-route/translations/README.ja.md
Unescape View File

@ -202,7 +202,7 @@ function updateRoute() {
2番目の部分はすでに `updateRoute` 関数で処理したので、現在の URL を更新する方法を見つけなければなりません。 2番目の部分はすでに `updateRoute` 関数で処理したので、現在の URL を更新する方法を見つけなければなりません。
JavaScript、特に [history.pushState`](https://developer.mozilla.org/ja/docs/Web/API/History/pushState) を使う必要があります。これは HTML をリロードせずに URL を更新して閲覧履歴に新しいエントリを作成することができます。 JavaScript、特に [`history.pushState`](https://developer.mozilla.org/ja/docs/Web/API/History/pushState) を使う必要があります。これは HTML をリロードせずに URL を更新して閲覧履歴に新しいエントリを作成することができます。
> 注: HTML アンカー要素[`<a href>`](https://developer.mozilla.org/ja/docs/Web/HTML/Element/a)は単独で使用して異なる URL へのハイパーリンクを作成することができますが、ブラウザはデフォルトで HTML をリロードさせることになります。カスタム javascript でルーティングを扱う際には、クリックイベントの preventDefault() 関数を使用して、この動作を防ぐ必要があります。 > 注: HTML アンカー要素[`<a href>`](https://developer.mozilla.org/ja/docs/Web/HTML/Element/a)は単独で使用して異なる URL へのハイパーリンクを作成することができますが、ブラウザはデフォルトで HTML をリロードさせることになります。カスタム javascript でルーティングを扱う際には、クリックイベントの preventDefault() 関数を使用して、この動作を防ぐ必要があります。

2
7-bank-project/2-forms/translations/README.ja.md
Unescape View File

@ -12,7 +12,7 @@
### 前提条件 ### 前提条件
このレッスンでは、Web アプリの [HTML テンプレートとルーティング](../../1-template-route/README.md)が完了している必要があります。また、アカウントを作成するためのデータを送信できるように、ローカルに [Node.js](https://nodejs.org/ja) と[サーバー API を実行する](../../api/translations/README.ja.md)をインストールする必要があります。 このレッスンでは、Web アプリの [HTML テンプレートとルーティング](../../1-template-route/translations/README.ja.md)が完了している必要があります。また、アカウントを作成するためのデータを送信できるように、ローカルに [Node.js](https://nodejs.org/ja) と[サーバー API を実行する](../../api/translations/README.ja.md)をインストールする必要があります。
ターミナルでこのコマンドを実行することで、サーバーが正常に動作していることを確認することができます。 ターミナルでこのコマンドを実行することで、サーバーが正常に動作していることを確認することができます。

2
7-bank-project/3-data/translations/README.ja.md
Unescape View File

@ -321,7 +321,7 @@ function updateElement(id, textOrNode) {
ダッシュボードページのスタイリング例です。 ダッシュボードページのスタイリング例です。
![スタイリング後のダッシュボードの結果例のスクリーンショット](../images/screen2.png) ![スタイリング後のダッシュボードの結果例のスクリーンショット](../../images/screen2.png)
## レッスン後の小テスト ## レッスン後の小テスト

4
7-bank-project/4-state-management/translations/README.ja.md
Unescape View File

@ -12,7 +12,7 @@ Web アプリケーションが成長するにつれて、すべてのデータ
### 前提条件 ### 前提条件
このレッスンでは、Web アプリの[データ取得](./././3-data/translations/README.ja.md)の部分が完了している必要があります。また、アカウントデータを管理するためには、ローカルに [Node.js](https://nodejs.org/ja) をインストールし、[サーバー API を実行する](.../../api/translations/README.ja.md)をインストールする必要があります。 このレッスンでは、Web アプリの[データ取得](../../3-data/translations/README.ja.md)の部分が完了している必要があります。また、アカウントデータを管理するためには、ローカルに [Node.js](https://nodejs.org/ja) をインストールし、[サーバー API を実行する](../../api/translations/README.ja.md)をインストールする必要があります。
ターミナルでこのコマンドを実行することで、サーバーが正常に動作しているかどうかをテストすることができます。 ターミナルでこのコマンドを実行することで、サーバーが正常に動作しているかどうかをテストすることができます。
@ -82,7 +82,7 @@ const account = state.account;
データを保存するために `state` オブジェクトを配置したので、次のステップは更新を一元化することです。目的は、いつ変更があったのか、いつ変更が発生したのかを簡単に把握できるようにすることです。 データを保存するために `state` オブジェクトを配置したので、次のステップは更新を一元化することです。目的は、いつ変更があったのか、いつ変更が発生したのかを簡単に把握できるようにすることです。
`state` オブジェクトに変更が加えられないようにするためには、`state` オブジェクトを [*immutable*](https://en.wikipedia.org/wiki/Immutable_object) と考えるのも良い方法です。これはまた、何かを変更したい場合には新しいステートオブジェクトを作成しなければならないことを意味します。このようにすることで、潜在的に望ましくない[副作用](https://en.wikipedia.org/wiki/Side_effect_(computer_science)についての保護を構築し、アンドゥ/リドゥの実装のようなアプリの新機能の可能性を開くと同時に、デバッグを容易にします。例えば、ステートに加えられたすべての変更をログに記録し、バグの原因を理解するために変更の履歴を保持することができます。 `state` オブジェクトに変更が加えられないようにするためには、`state` オブジェクトを [*immutable*](https://en.wikipedia.org/wiki/Immutable_object) と考えるのも良い方法です。これはまた、何かを変更したい場合には新しいステートオブジェクトを作成しなければならないことを意味します。このようにすることで、潜在的に望ましくない[副作用](https://ja.wikipedia.org/wiki/%E5%89%AF%E4%BD%9C%E7%94%A8_(%E3%83%97%E3%83%AD%E3%82%B0%E3%83%A9%E3%83%A0))についての保護を構築し、アンドゥ/リドゥの実装のようなアプリの新機能の可能性を開くと同時に、デバッグを容易にします。例えば、ステートに加えられたすべての変更をログに記録し、バグの原因を理解するために変更の履歴を保持することができます。
JavaScript では、[`Object.freeze()`](https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Global_Objects/Object/freeze) を使って、オブジェクトの不変バージョンを作成することができます。不変オブジェクトに変更を加えようとすると例外が発生します。 JavaScript では、[`Object.freeze()`](https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Global_Objects/Object/freeze) を使って、オブジェクトの不変バージョンを作成することができます。不変オブジェクトに変更を加えようとすると例外が発生します。

2
7-bank-project/4-state-management/translations/assignment.ja.md
Unescape View File

@ -16,7 +16,7 @@
以下は、課題を完了した後の結果の例です。 以下は、課題を完了した後の結果の例です。
![「トランジションの追加」ダイアログの例を示すスクリーンショット](../../images/dialog.png) ![「トランジションの追加」ダイアログの例を示すスクリーンショット](../images/dialog.png)
## ルーブリック ## ルーブリック

2
translations/README.ja.md
Unescape View File

@ -8,7 +8,7 @@
> **学生の皆さん**、このカリキュラムを自分で使うためには、リポジトリ全体をフォークして、講義前の小テストから始めて、講義を読んで、残りのアクティビティを自分で完成させてください。解答コードは各レッスンの /solutions フォルダにありますが、解答コードをコピーするのではなく、授業を理解した上でプロジェクトを作成するようにしてください。また、友達と勉強会を作って、一緒に勉強するのもいいでしょう。さらに勉強するには、[Microsoft Learn](https://docs.microsoft.com/users/jenlooper-2911/collections/jg2gax8pzd6o81?WT.mc_id=academic-13441-cxa) や以下のビデオを見ることをお勧めします。 > **学生の皆さん**、このカリキュラムを自分で使うためには、リポジトリ全体をフォークして、講義前の小テストから始めて、講義を読んで、残りのアクティビティを自分で完成させてください。解答コードは各レッスンの /solutions フォルダにありますが、解答コードをコピーするのではなく、授業を理解した上でプロジェクトを作成するようにしてください。また、友達と勉強会を作って、一緒に勉強するのもいいでしょう。さらに勉強するには、[Microsoft Learn](https://docs.microsoft.com/users/jenlooper-2911/collections/jg2gax8pzd6o81?WT.mc_id=academic-13441-cxa) や以下のビデオを見ることをお勧めします。
[![Promo video](screenshot.png)](https://youtube.com/watch?v=R1wrdtmBSII "Promo video") [![Promo video](../screenshot.png)](https://youtube.com/watch?v=R1wrdtmBSII "Promo video")
> 上の画像をクリックすると、プロジェクトとそれを作成した人々についてのビデオを見ることができます。 > 上の画像をクリックすると、プロジェクトとそれを作成した人々についてのビデオを見ることができます。

Write Preview
Loading…
Cancel
Save