diff --git a/.docs/about.md b/.docs/about.md new file mode 100644 index 00000000..cae1ee45 --- /dev/null +++ b/.docs/about.md @@ -0,0 +1,12 @@ +# このサイトについて + +- このWebサイトは、[MITライセンス](https://github.com/microsoft/Web-Dev-For-Beginners/blob/main/LICENSE)で公開されているMicrosoftのプロジェクト「[Web Development for Beginners](https://github.com/microsoft/Web-Dev-For-Beginners)」を[namosuke](https://github.com/namosuke)がフォークし、日本語話者がより学習しやすくなるよう編纂し、GitHub Pagesで公開したものです。 +- このWebサイトは[こちらのリポジトリ](https://github.com/namosuke/Web-Dev-For-Beginners)からビルドされています。日本語訳以外のファイルはMicrosoftから公開されているものと同一です。 +- 日本語訳の大半はMicrosoftによる翻訳です。一部明らかな誤訳等は運営者が修正しています。 +- PR及びissueは歓迎します。 +- フォーク元との最終同期日は 2021年2月8日 です。 + +## カリキュラム + +- [カリキュラム](/) +- [教育者の方へ](/translations/for-teachers.ja) \ No newline at end of file diff --git a/1-getting-started-lessons/1-intro-to-programming-languages/translations/README.ja.md b/1-getting-started-lessons/1-intro-to-programming-languages/translations/README.ja.md index 8244f76c..b0361fba 100644 --- a/1-getting-started-lessons/1-intro-to-programming-languages/translations/README.ja.md +++ b/1-getting-started-lessons/1-intro-to-programming-languages/translations/README.ja.md @@ -88,7 +88,7 @@ back add r0,r1 信じられないかもしれませんが、両者は同じ処理をしています。 いずれもフィボナッチ数を順番に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) diff --git a/1-getting-started-lessons/3-accessibility/translations/README.ja.md b/1-getting-started-lessons/3-accessibility/translations/README.ja.md index c0d9af3d..f30838d3 100644 --- a/1-getting-started-lessons/3-accessibility/translations/README.ja.md +++ b/1-getting-started-lessons/3-accessibility/translations/README.ja.md @@ -1,6 +1,6 @@ # アクセシブルな Web ページの作成 -![All About Accessibility](webdev101-a11y.png) +![All About Accessibility](../webdev101-a11y.png) > 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 をご覧ください。 @@ -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 diff --git a/2-js-basics/1-data-types/translations/README.ja.md b/2-js-basics/1-data-types/translations/README.ja.md index 65801862..71594a0b 100644 --- a/2-js-basics/1-data-types/translations/README.ja.md +++ b/2-js-basics/1-data-types/translations/README.ja.md @@ -1,6 +1,6 @@ # 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) ## レッスン前の小テスト @@ -111,7 +111,7 @@ const MY_VARIABLE = 123; `let myVariable = 123;` -変数は、小数や負の数を含むあらゆるタイプの数値を格納することができます。数値は、[次のセクション](#operators)で説明する算術演算子と一緒に使用することもできます。 +変数は、小数や負の数を含むあらゆるタイプの数値を格納することができます。数値は、[次のセクション](#算術演算子)で説明する算術演算子と一緒に使用することもできます。 ### 算術演算子 @@ -171,7 +171,7 @@ let myString2 = "World"; ### ブール値 -ブール値は2つの値だけを持つことができます。`true` か `false` です。ブール値は、特定の条件が満たされたときにどの行のコードを実行するかを決定するのに役立ちます。多くの場合、[演算子](#operators) がブール値の設定を支援し、変数が初期化されたり、演算子で値が更新されたりしていることに気付いたり、書いたりすることが多いでしょう。 +ブール値は2つの値だけを持つことができます。`true` か `false` です。ブール値は、特定の条件が満たされたときにどの行のコードを実行するかを決定するのに役立ちます。多くの場合、[演算子](#算術演算子) がブール値の設定を支援し、変数が初期化されたり、演算子で値が更新されたりしていることに気付いたり、書いたりすることが多いでしょう。 - `let myTrueBool = true` - `let myFalseBool = false` diff --git a/2-js-basics/2-functions-methods/translations/README.ja.md b/2-js-basics/2-functions-methods/translations/README.ja.md index 411fd731..94681031 100644 --- a/2-js-basics/2-functions-methods/translations/README.ja.md +++ b/2-js-basics/2-functions-methods/translations/README.ja.md @@ -1,6 +1,6 @@ # 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) ## レッスン前の小テスト diff --git a/2-js-basics/3-making-decisions/translations/README.ja.md b/2-js-basics/3-making-decisions/translations/README.ja.md index 730755ad..93e0e701 100644 --- a/2-js-basics/3-making-decisions/translations/README.ja.md +++ b/2-js-basics/3-making-decisions/translations/README.ja.md @@ -1,6 +1,6 @@ # 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) ## レッスン前の小テスト diff --git a/2-js-basics/4-arrays-loops/translations/README.ja.md b/2-js-basics/4-arrays-loops/translations/README.ja.md index 6c67ebd1..fd1eb9a3 100644 --- a/2-js-basics/4-arrays-loops/translations/README.ja.md +++ b/2-js-basics/4-arrays-loops/translations/README.ja.md @@ -1,6 +1,6 @@ # 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) ## レッスン前の小テスト @@ -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)。 ## ループと配列 diff --git a/3-terrarium/1-intro-to-html/translations/README.ja.md b/3-terrarium/1-intro-to-html/translations/README.ja.md index 9071b9a3..c80ac593 100644 --- a/3-terrarium/1-intro-to-html/translations/README.ja.md +++ b/3-terrarium/1-intro-to-html/translations/README.ja.md @@ -1,6 +1,6 @@ # テラリウムプロジェクト その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) ## レッスン前の小テスト @@ -17,7 +17,7 @@ HTML (HyperText Markup Language) は、Web の「骨格」です。CSS が HTML コンピュータ上に '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) もしくは diff --git a/3-terrarium/2-intro-to-css/translations/README.ja.md b/3-terrarium/2-intro-to-css/translations/README.ja.md index b7816599..f7e45c57 100644 --- a/3-terrarium/2-intro-to-css/translations/README.ja.md +++ b/3-terrarium/2-intro-to-css/translations/README.ja.md @@ -1,6 +1,6 @@ # テラリウムプロジェクト その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) ## レッスン前の小テスト @@ -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 上のすべてのものと同様に進化する言語であり、すべてのブラウザが仕様の新しい部分をサポートしているわけではありません。常に [CanIUse.com](caniuse.com) に相談して実装を確認してください。 +> 注: CSS は Web 上のすべてのものと同様に進化する言語であり、すべてのブラウザが仕様の新しい部分をサポートしているわけではありません。常に [CanIUse.com](https://caniuse.com) を参照して実装を確認してください。 このレッスンでは、オンラインテラリウムにスタイルを追加し、カスケード、継承、セレクタの使用、配置、CSS を使ったレイアウトの作成など、CSS の概念について学びます。その過程で、テラリウムをレイアウトし、実際のテラリウムを作成していきます。 @@ -37,13 +37,13 @@ CSS (カスケードスタイルシート) は、Web 開発の重要な問題で インラインスタイル "color: red" を `

` タグに追加します。 -```HTML +```html

My Terrarium

``` 次に、以下のコードを `style.css` ファイルに追加します。 -```CSS +```css h1 { color: blue; } @@ -61,7 +61,7 @@ h1 { body のフォントを指定されたフォントに設定し、入れ子になっている要素のフォントを確認します。 -``` +```css body { font-family: helvetica, arial, sans-serif; } @@ -69,7 +69,7 @@ body { ブラウザのコンソールから「要素」タブを開き、h1 のフォントを観察してください。ブラウザ内で述べられているように、フォントは body から継承されています。 -![inherited font](images/1.png) +![inherited font](../images/1.png) ✅ 入れ子になったスタイルを別のプロパティを継承させることはできますか? @@ -81,7 +81,7 @@ body { これまでのところ、`style.css` ファイルにはいくつかのタグがスタイリングされているだけで、アプリはかなり変な感じになっています。 -``` +```css body { font-family: helvetica, arial, sans-serif; } @@ -94,12 +94,11 @@ h1 { このようにタグをスタイリングすることで、ユニークな要素をコントロールすることができますが、テラリウム内の多くの植物のスタイルをコントロールする必要があります。そのためには、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 が与えられます。スタイルを設定するには、`#` を使用します。 -``` +```css #left-container { background-color: #eee; width: 15%; @@ -247,7 +246,7 @@ HTML マークアップの各植物には、id とクラスの組み合わせが 瓶の左下の部分に「泡」のような輝きを加えて、よりガラスのように見えるようにします。`.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) diff --git a/3-terrarium/3-intro-to-DOM-and-closures/translations/README.ja.md b/3-terrarium/3-intro-to-DOM-and-closures/translations/README.ja.md index 4df3bb3b..2c400ff7 100644 --- a/3-terrarium/3-intro-to-DOM-and-closures/translations/README.ja.md +++ b/3-terrarium/3-intro-to-DOM-and-closures/translations/README.ja.md @@ -1,6 +1,6 @@ # テラリウムプロジェクト その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) ## レッスン前の小テスト @@ -19,7 +19,7 @@ DOM (Document Object Model) を操作することは、Web 開発の重要な 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) より @@ -34,7 +34,7 @@ DOM をツリーと考え、Web ページのドキュメントを操作できる terrarium フォルダ内に `script.js` というファイルを作成します。このファイルを `` セクションにインポートします。 ```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('plant2')); dragElement(document.getElementById('plant3')); @@ -141,7 +141,7 @@ function pointerDrag(e) { `pos4 = e.clientY` の下にポインタイベントの操作を2つ追加して、初期関数を完成させます。 -```html +```javascript document.onpointermove = elementDrag; document.onpointerup = stopElementDrag; ``` @@ -191,7 +191,7 @@ function stopElementDrag() { これでプロジェクトが完成しました! -🥇おめでとうございます。素敵なテラリウムが完成しましたね。 ![finished terrarium](./images/terrarium-final.png) +🥇おめでとうございます。素敵なテラリウムが完成しましたね。 ![finished terrarium](../images/terrarium-final.png) --- diff --git a/3-terrarium/translations/README.ja.md b/3-terrarium/translations/README.ja.md index 152673e5..af8ca18e 100644 --- a/3-terrarium/translations/README.ja.md +++ b/3-terrarium/translations/README.ja.md @@ -2,13 +2,13 @@ ちょっとしたドラッグ＆ドロップのコードメディテーション。少しの HTML、JS、CSS で、Web インターフェースを構築し、スタイルを設定し、インタラクションを追加することができます。 -![my terrarium](images/screenshot_gray.png) +![my terrarium](../images/screenshot_gray.png) # レッスン -1. [HTML 入門](./1-intro-to-html/README.md) -2. [CSS 入門](./2-intro-to-css/README.md) -3. [DOM と JS Closures の紹介](./3-intro-to-DOM-and-closures/README.md) +1. [HTML 入門](../1-intro-to-html/translations/README.ja) +2. [CSS 入門](../2-intro-to-css/translations/README.ja) +3. [DOM の操作とクロージャ](../3-intro-to-DOM-and-closures/translations/README.ja) ## クレジット diff --git a/4-typing-game/translations/README.ja.md b/4-typing-game/translations/README.ja.md index 89f4410a..f6fcd18c 100644 --- a/4-typing-game/translations/README.ja.md +++ b/4-typing-game/translations/README.ja.md @@ -23,7 +23,7 @@ ## レッスン -[イベント駆動型プログラミングを用いたタイピングゲームの作成](./typing-game/translations/README.ja.md) +[イベント駆動型プログラミングを用いたタイピングゲームの作成](../typing-game/translations/README.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 index a5fea876..76602525 100644 --- a/5-browser-extension/1-about-browsers/translations/README.ja.md +++ b/5-browser-extension/1-about-browsers/translations/README.ja.md @@ -65,7 +65,7 @@ - [API キー](https://www.co2signal.com/); このページのボックスにメールアドレスを入力します - [電力地図](https://www.electricitymap.org/map) に対応する地域のコード (例えばボストンでは 'US-NEISO' を使用しています) -- [スターターコード](../../start)。`start`フォルダをダウンロードしてください。このフォルダでコードを完成させることになります。 +- [スターターコード](/5-browser-extension/start/translations/README.ja)。`start`フォルダをダウンロードしてください。このフォルダでコードを完成させることになります。 - [NPM](https://www.npmjs.com) - NPM はパッケージ管理ツールです。ローカルにインストールすると、`package.json` ファイルに記載されているパッケージがインストールされ、Web アセットで使用されます。 ✅ この[優れた Learn モジュール](https://docs.microsoft.com/ja-jp/learn/modules/create-nodejs-project-dependencies/?WT.mc_id=academic-13441-cxa)では、パッケージ管理の詳細を学ぶことができます。 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 index df194736..c6ff28b9 100644 --- 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 @@ -12,11 +12,11 @@ ### 拡張機能で操作する要素の設定: -この時点で、フォーム用の HTML とブラウザ拡張機能用の結果 `
` が構築されています。これからは、`/src/index.js` ファイルを使って少しずつ拡張機能を構築していく必要があります。プロジェクトのセットアップとビルドのプロセスについては [前のレッスン](.../.../1-about-browsers/translations/README.ja.md) を参照してください。 +この時点で、フォーム用の HTML とブラウザ拡張機能用の結果 `
` が構築されています。これからは、`/src/index.js` ファイルを使って少しずつ拡張機能を構築していく必要があります。プロジェクトのセットアップとビルドのプロセスについては [前のレッスン](/5-browser-extension/1-about-browsers/translations/README.ja) を参照してください。 `index.js` ファイルの中で作業を行うには、様々なフィールドに関連付けられた値を保持するための `const` 変数を作成することから始めます。 -```JavaScript +```javascript // フォームフィールド const form = document.querySelector('.form-data'); const region = document.querySelector('.region-name'); @@ -38,7 +38,7 @@ const clearBtn = document.querySelector('.clear-btn'); 次に、フォームにイベントリスナーを追加し、フォームをリセットするクリアボタンを追加します。ユーザーがフォームを送信したり、リセットボタンをクリックしたりした場合に、そのリセットボタンをクリックするようにします。何かが起こるときのため、ファイルの一番下にアプリを初期化するための呼び出しを追加します。 -```JavaScript +```javascript form.addEventListener('submit', (e) => handleSubmit(e)); clearBtn.addEventListener('click', (e) => reset(e)); init(); @@ -50,7 +50,7 @@ init(); 今度は拡張機能を初期化する関数を作ります。これは init() と呼ばれています。 -```JavaScript +```javascript function init() { //何かがローカルストレージにある場合は、それをピックアップします。 const storedApiKey = localStorage.getItem('apiKey'); @@ -112,7 +112,7 @@ API キーに文字列の値を設定して、例えば Edge では Web ペー イベント引数 `(e)` を受け取る関数 `handleSubmit` を作成します。イベントの伝播を停止し (この場合、ブラウザの更新を停止したい)、新しい関数 `setUpUser` を呼び出し、引数 `apiKey.value` と `region.value` を渡します。このようにして、適切なフィールドが入力されたときに初期フォームから取得される2つの値を利用します。 -```JavaScript +```javascript function handleSubmit(e) { e.preventDefault(); setUpUser(apiKey.value, region.value); @@ -124,7 +124,7 @@ function handleSubmit(e) { 次に `setUpUser` 関数に進み、ここで apiKey と regionName のローカルストレージの値を設定します。新しい関数を追加します。 -```JavaScript +```javascript function setUpUser(apiKey, regionName) { localStorage.setItem('apiKey', apiKey); localStorage.setItem('regionName', regionName); @@ -153,7 +153,7 @@ function setUpUser(apiKey, regionName) { C02Signal API に問い合わせを行うための新しい関数を作成します: -```JavaScript +```javascript import axios from '../node_modules/axios'; async function displayCarbonUsage(apiKey, region) { 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 index c40e23b2..68f921eb 100644 --- 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 @@ -60,7 +60,7 @@ `src/index.js` の中で作業し、`calculateColor()` という関数を、DOM にアクセスするために設定した一連の変数 `const` の後に追加します。 -```JavaScript +```javascript function calculateColor(value) { let co2Scale = [0, 150, 600, 750, 800]; let colors = ['#2AA364', '#F5EB4D', '#9E4229', '#381D02', '#381D02']; @@ -93,7 +93,7 @@ chrome.runtime には、あらゆる種類のバックグラウンドタスク ここで、`init()` 関数の中で、アイコンをジェネリックグリーンに設定して、chrome の `updateIcon` アクションを再度呼び出して起動します。 -```JavaScript +```javascript chrome.runtime.sendMessage({ action: 'updateIcon', value: { @@ -105,14 +105,14 @@ chrome.runtime.sendMessage({ 次に、C02Signal API が返すプロミスに追加して、先ほど作成した関数を呼び出します。 -```JavaScript +```javascript //let CO2... calculateColor(CO2); ``` 最後に、`/dist/background.js` で、これらのバックグラウンドアクションの呼び出し用のリスナーを追加します。 -```JavaScript +```javascript chrome.runtime.onMessage.addListener(function (msg, sender, sendResponse) { if (msg.action === 'updateIcon') { chrome.browserAction.setIcon({ imageData: drawIcon(msg.value) }); diff --git a/5-browser-extension/start/translations/README.ja.md b/5-browser-extension/start/translations/README.ja.md index 6121aa49..6f0a21bd 100644 --- a/5-browser-extension/start/translations/README.ja.md +++ b/5-browser-extension/start/translations/README.ja.md @@ -1,5 +1,7 @@ # カーボントリガーブラウザ拡張機能： スターターコード +**ローカルフォルダのWeb-Dev-For-Beginners/5-browser-extension/startをご覧ください** + tmrow の C02 シグナル API を使用して電力使用量を追跡するために、あなたの地域の電力使用量がどれだけ多いかをブラウザ上でリマインダーとして表示できるようにブラウザ拡張機能を構築します。この拡張機能をアドホックに使用することで、この情報に基づいてあなたの活動を判断することができます。 ![extension screenshot](../../extension-screenshot.png) diff --git a/5-browser-extension/translations/README.ja.md b/5-browser-extension/translations/README.ja.md index 88055778..ab869b57 100644 --- a/5-browser-extension/translations/README.ja.md +++ b/5-browser-extension/translations/README.ja.md @@ -8,13 +8,13 @@ Edge、Chrome、Firefox で動作するブラウザ拡張機能を構築しま ### トピック -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) +1. [ブラウザのすべて](../1-about-browsers/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) ### クレジット -![a green browser extension](extension-screenshot.png) +![a green browser extension](../extension-screenshot.png) ## クレジット diff --git a/6-space-game/1-introduction/translations/README.ja.md b/6-space-game/1-introduction/translations/README.ja.md index ba772b7a..f2aa31af 100644 --- a/6-space-game/1-introduction/translations/README.ja.md +++ b/6-space-game/1-introduction/translations/README.ja.md @@ -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' の略です。 diff --git a/6-space-game/2-drawing-to-canvas/translations/README.ja.md b/6-space-game/2-drawing-to-canvas/translations/README.ja.md index 5ba9d1aa..50bbf243 100644 --- a/6-space-game/2-drawing-to-canvas/translations/README.ja.md +++ b/6-space-game/2-drawing-to-canvas/translations/README.ja.md @@ -195,7 +195,7 @@ npm start ## Solution -まずはご自身で解決してみていただきたいですが、行き詰った場合は [solution](../solution/app.js) を参考にしてみてください。 +まずはご自身で解決してみていただきたいですが、行き詰った場合は [solution](https://github.com/microsoft/Web-Dev-For-Beginners/tree/main/6-space-game/2-drawing-to-canvas/solution) を参考にしてみてください。 --- diff --git a/6-space-game/translations/README.ja.md b/6-space-game/translations/README.ja.md index 29ce5995..f0d4b9d9 100644 --- a/6-space-game/translations/README.ja.md +++ b/6-space-game/translations/README.ja.md @@ -19,11 +19,11 @@ - 理論 - [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) - [衝突の検出](../4-collision-detection/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) ## クレジット diff --git a/7-bank-project/1-template-route/translations/README.ja.md b/7-bank-project/1-template-route/translations/README.ja.md index 9205b0e2..61447857 100644 --- a/7-bank-project/1-template-route/translations/README.ja.md +++ b/7-bank-project/1-template-route/translations/README.ja.md @@ -202,7 +202,7 @@ function updateRoute() { 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 アンカー要素[``](https://developer.mozilla.org/ja/docs/Web/HTML/Element/a)は単独で使用して異なる URL へのハイパーリンクを作成することができますが、ブラウザはデフォルトで HTML をリロードさせることになります。カスタム javascript でルーティングを扱う際には、クリックイベントの preventDefault() 関数を使用して、この動作を防ぐ必要があります。 diff --git a/7-bank-project/2-forms/translations/README.ja.md b/7-bank-project/2-forms/translations/README.ja.md index 1d183066..619254b5 100644 --- a/7-bank-project/2-forms/translations/README.ja.md +++ b/7-bank-project/2-forms/translations/README.ja.md @@ -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)が完了している必要があります。また、アカウントを作成するためのデータを送信できるように、ローカルに [Node.js](https://nodejs.org/ja) と[サーバー API を実行する](../../api/translations/README.ja.md)をインストールする必要があります。 ターミナルでこのコマンドを実行することで、サーバーが正常に動作していることを確認することができます。 diff --git a/7-bank-project/3-data/translations/README.ja.md b/7-bank-project/3-data/translations/README.ja.md index c1f6e57c..ecec6b03 100644 --- a/7-bank-project/3-data/translations/README.ja.md +++ b/7-bank-project/3-data/translations/README.ja.md @@ -321,7 +321,7 @@ function updateElement(id, textOrNode) { ダッシュボードページのスタイリング例です。 -![スタイリング後のダッシュボードの結果例のスクリーンショット](../images/screen2.png) +![スタイリング後のダッシュボードの結果例のスクリーンショット](../../images/screen2.png) ## レッスン後の小テスト diff --git a/7-bank-project/4-state-management/translations/README.ja.md b/7-bank-project/4-state-management/translations/README.ja.md index 46592e0c..6f630f96 100644 --- a/7-bank-project/4-state-management/translations/README.ja.md +++ b/7-bank-project/4-state-management/translations/README.ja.md @@ -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` オブジェクトを [*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) を使って、オブジェクトの不変バージョンを作成することができます。不変オブジェクトに変更を加えようとすると例外が発生します。 diff --git a/7-bank-project/4-state-management/translations/assignment.ja.md b/7-bank-project/4-state-management/translations/assignment.ja.md index f1b25f22..b707bf65 100644 --- a/7-bank-project/4-state-management/translations/assignment.ja.md +++ b/7-bank-project/4-state-management/translations/assignment.ja.md @@ -16,7 +16,7 @@ 以下は、課題を完了した後の結果の例です。 -![「トランジションの追加」ダイアログの例を示すスクリーンショット](../../images/dialog.png) +![「トランジションの追加」ダイアログの例を示すスクリーンショット](../images/dialog.png) ## ルーブリック diff --git a/_sidebar.md b/_sidebar.md new file mode 100644 index 00000000..ad65ae9d --- /dev/null +++ b/_sidebar.md @@ -0,0 +1,56 @@ +- [このサイトについて](/.docs/about) + +- 入門 + + - [プログラミング言語と開発ツール入門](/1-getting-started-lessons/1-intro-to-programming-languages/translations/README.ja) + - [GitHub 入門(英語)](/1-getting-started-lessons/2-github-basics/) + - [アクセシブルな Web ページの作成](/1-getting-started-lessons/3-accessibility/translations/README.ja) + +- JavaScript の基本 + + - [データ型](/2-js-basics/1-data-types/translations/README.ja) + - [メソッドと関数](/2-js-basics/2-functions-methods/translations/README.ja) + - [意思決定](/2-js-basics/3-making-decisions/translations/README.ja) + - [配列とループ](/2-js-basics/4-arrays-loops/translations/README.ja) + +- マイテラリウム + + - [はじめに](/3-terrarium/translations/README.ja) + - [1. HTML 入門](/3-terrarium/1-intro-to-html/translations/README.ja) + - [2. CSS 入門](/3-terrarium/2-intro-to-css/translations/README.ja) + - [3. DOM の操作とクロージャ](/3-terrarium/3-intro-to-DOM-and-closures/translations/README.ja) + - [(参考コード)](https://github.com/microsoft/Web-Dev-For-Beginners/tree/main/3-terrarium/solution) + +- タイピングゲーム + + - [はじめに](/4-typing-game/translations/README.ja) + - [タイピングゲームの作成](/4-typing-game/typing-game/translations/README.ja) + - [(参考コード)](https://github.com/microsoft/Web-Dev-For-Beginners/tree/main/4-typing-game/solution) + +- ブラウザ拡張機能 + + - [はじめに](/5-browser-extension/translations/README.ja) + - [1. ブラウザのすべて](/5-browser-extension/1-about-browsers/translations/README.ja) + - [2. API とローカルストレージ](/5-browser-extension/2-forms-browsers-local-storage/translations/README.ja) + - [3. バックグラウンドとパフォーマンス](/5-browser-extension/3-background-tasks-and-performance/translations/README.ja) + - [(参考コード)](https://github.com/microsoft/Web-Dev-For-Beginners/tree/main/5-browser-extension/solution) + +- スペースゲーム + + - [はじめに](/6-space-game/translations/README.ja) + - [1. ゲーム構築入門](/6-space-game/1-introduction/translations/README.ja) + - [2. Canvas への描画](/6-space-game/2-drawing-to-canvas/translations/README.ja) + - [3. 画面の周りの要素の移動](/6-space-game/3-moving-elements-around/translations/README.ja) + - [4. 衝突の検出](/6-space-game/4-collision-detection/translations/README.ja) + - [5. スコアの保持](/6-space-game/5-keeping-score/translations/README.ja) + - [6. ゲームの終了と再起動](/6-space-game/6-end-condition/translations/README.ja) + - [(参考コード)](https://github.com/microsoft/Web-Dev-For-Beginners/tree/main/6-space-game/solution) + +- バンキングアプリ + + - [はじめに](/7-bank-project/translations/README.ja) + - [1. Web アプリの HTML テンプレートとルート](/7-bank-project/1-template-route/translations/README.ja) + - [2. ログインと登録フォームの構築](/7-bank-project/2-forms/translations/README.ja) + - [3. データの取得と利用方法](/7-bank-project/3-data/translations/README.ja) + - [4. 状態管理の概念](/7-bank-project/4-state-management/translations/README.ja) + - [(参考コード)](https://github.com/microsoft/Web-Dev-For-Beginners/tree/main/7-bank-project/solution) \ No newline at end of file diff --git a/index.html b/index.html index 202a4877..51fe3220 100644 --- a/index.html +++ b/index.html @@ -1,21 +1,29 @@ - + + - Document + 初心者のためのWeb開発 by Microsoft [Web Development for Beginners] (forked by namosuke for Japanese) - - - + + + + +
- + + \ No newline at end of file diff --git a/translations/README.ja.md b/translations/README.ja.md index 31613077..c82b1c33 100644 --- a/translations/README.ja.md +++ b/translations/README.ja.md @@ -4,11 +4,11 @@ **著者の Jen Looper さん、Chris Noring さん、Christopher Harrison さん、Jasmine Greenaway さん、Yohan Lasorsa さん、Floor Drees さん、そしてスケッチノートアーティストの Tomomi Imura さんに心から感謝します。** -> **先生方**、このカリキュラムをどのように使用するか、[いくつかの提案があります](for-teachers.ja.md)。あなた自身のレッスンを作成したい場合は、[レッスンテンプレート](lesson-template/translations/README.ja.md)もご用意しています。 +> **先生方**、このカリキュラムをどのように使用するか、[いくつかの提案があります](/translations/for-teachers.ja.md)。あなた自身のレッスンを作成したい場合は、[レッスンテンプレート](/lesson-template/)もご用意しています。 > **学生の皆さん**、このカリキュラムを自分で使うためには、リポジトリ全体をフォークして、講義前の小テストから始めて、講義を読んで、残りのアクティビティを自分で完成させてください。解答コードは各レッスンの /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") > 上の画像をクリックすると、プロジェクトとそれを作成した人々についてのビデオを見ることができます。