From 535f3e2a1c4c1977d57ae49f3e24b81d8403ffcd Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E3=83=8A=E3=83=A2=E3=81=99=E3=81=91?= Date: Mon, 8 Feb 2021 20:57:17 +0900 Subject: [PATCH 1/9] =?UTF-8?q?=E6=97=A5=E6=9C=AC=E8=AA=9E=E8=A8=B3?= =?UTF-8?q?=E3=83=95=E3=82=A1=E3=82=A4=E3=83=AB=E3=81=AE=E4=BF=AE=E6=AD=A3?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .docs/about.md | 12 ++++ .../translations/README.ja.md | 4 +- .../3-accessibility/translations/README.ja.md | 6 +- .../1-data-types/translations/README.ja.md | 6 +- .../translations/README.ja.md | 2 +- .../translations/README.ja.md | 2 +- .../4-arrays-loops/translations/README.ja.md | 4 +- .../1-intro-to-html/translations/README.ja.md | 4 +- .../2-intro-to-css/translations/README.ja.md | 21 ++++--- .../translations/README.ja.md | 12 ++-- 3-terrarium/translations/README.ja.md | 8 +-- 4-typing-game/translations/README.ja.md | 2 +- .../translations/README.ja.md | 2 +- .../translations/README.ja.md | 14 ++--- .../translations/README.ja.md | 8 +-- .../start/translations/README.ja.md | 2 + 5-browser-extension/translations/README.ja.md | 8 +-- .../1-introduction/translations/README.ja.md | 4 +- .../translations/README.ja.md | 2 +- 6-space-game/translations/README.ja.md | 4 +- .../translations/README.ja.md | 2 +- .../2-forms/translations/README.ja.md | 2 +- .../3-data/translations/README.ja.md | 2 +- .../translations/README.ja.md | 4 +- .../translations/assignment.ja.md | 2 +- _sidebar.md | 56 +++++++++++++++++++ index.html | 26 ++++++--- translations/README.ja.md | 4 +- 28 files changed, 151 insertions(+), 74 deletions(-) create mode 100644 .docs/about.md create mode 100644 _sidebar.md 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") > 上の画像をクリックすると、プロジェクトとそれを作成した人々についてのビデオを見ることができます。 From 540beaee3d6d662b4d9c042cdbcd6ed86c0d1cb1 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E3=83=8A=E3=83=A2=E3=81=99=E3=81=91?= Date: Mon, 8 Feb 2021 21:21:20 +0900 Subject: [PATCH 2/9] =?UTF-8?q?=E3=83=91=E3=82=B9=E4=BF=AE=E6=AD=A3?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- {.docs => _docs}/about.md | 2 +- _sidebar.md | 2 +- 2 files changed, 2 insertions(+), 2 deletions(-) rename {.docs => _docs}/about.md (58%) diff --git a/.docs/about.md b/_docs/about.md similarity index 58% rename from .docs/about.md rename to _docs/about.md index cae1ee45..e5ff0fcf 100644 --- a/.docs/about.md +++ b/_docs/about.md @@ -1,6 +1,6 @@ # このサイトについて -- この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サイトは、運営者である[namosuke](https://github.com/namosuke)が[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)」をフォークし、日本語話者がより学習しやすくなるよう編纂し、公開したものです。 - このWebサイトは[こちらのリポジトリ](https://github.com/namosuke/Web-Dev-For-Beginners)からビルドされています。日本語訳以外のファイルはMicrosoftから公開されているものと同一です。 - 日本語訳の大半はMicrosoftによる翻訳です。一部明らかな誤訳等は運営者が修正しています。 - PR及びissueは歓迎します。 diff --git a/_sidebar.md b/_sidebar.md index ad65ae9d..ce7f7b23 100644 --- a/_sidebar.md +++ b/_sidebar.md @@ -1,4 +1,4 @@ -- [このサイトについて](/.docs/about) +- [このサイトについて](/_docs/about) - 入門 From 169c2763049eaf866a1cbd4f79ed5f4a89ac0457 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E3=83=8A=E3=83=A2=E3=81=99=E3=81=91?= Date: Mon, 8 Feb 2021 21:26:02 +0900 Subject: [PATCH 3/9] =?UTF-8?q?OGP=E7=AD=89=E3=81=AE=E4=BF=AE=E6=AD=A3?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- index.html | 5 +++++ 1 file changed, 5 insertions(+) diff --git a/index.html b/index.html index 51fe3220..06dab976 100644 --- a/index.html +++ b/index.html @@ -7,6 +7,11 @@ + + + + + From 44591f03d88bb5d7077e8a0fe5301418cd3f44bf Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E3=83=8A=E3=83=A2=E3=81=99=E3=81=91?= Date: Mon, 8 Feb 2021 21:52:22 +0900 Subject: [PATCH 4/9] =?UTF-8?q?=E3=83=87=E3=83=A2=E3=81=AE=E3=83=AA?= =?UTF-8?q?=E3=83=B3=E3=82=AF=E8=BF=BD=E5=8A=A0,=20=E3=82=AB=E3=83=AA?= =?UTF-8?q?=E3=82=AD=E3=83=A5=E3=83=A9=E3=83=A0=E3=81=AE=E3=83=AA=E3=83=B3?= =?UTF-8?q?=E3=82=AF=E5=88=87=E3=82=8C=E4=BF=AE=E6=AD=A3?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- _sidebar.md | 4 ++++ translations/README.ja.md | 36 ++++++++++++++++++------------------ 2 files changed, 22 insertions(+), 18 deletions(-) diff --git a/_sidebar.md b/_sidebar.md index ce7f7b23..768e18da 100644 --- a/_sidebar.md +++ b/_sidebar.md @@ -19,12 +19,14 @@ - [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://wdfb.netlify.app/3-terrarium/solution/) - [(参考コード)](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://wdfb.netlify.app/4-typing-game/solution/) - [(参考コード)](https://github.com/microsoft/Web-Dev-For-Beginners/tree/main/4-typing-game/solution) - ブラウザ拡張機能 @@ -44,6 +46,7 @@ - [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://wdfb.netlify.app/6-space-game/solution/) - [(参考コード)](https://github.com/microsoft/Web-Dev-For-Beginners/tree/main/6-space-game/solution) - バンキングアプリ @@ -53,4 +56,5 @@ - [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://wdfb.netlify.app/7-bank-project/solution) - [(参考コード)](https://github.com/microsoft/Web-Dev-For-Beginners/tree/main/7-bank-project/solution) \ No newline at end of file diff --git a/translations/README.ja.md b/translations/README.ja.md index c82b1c33..570631da 100644 --- a/translations/README.ja.md +++ b/translations/README.ja.md @@ -42,29 +42,29 @@ | | プロジェクト名 | 教える概念 | 学習の目的 | 関連するレッスン | レッスンの記載 | スケッチノート | 課題 | レッスン前の小テスト | レッスン後の小テスト | ビデオ | 著者 | | :---: | :-----------------------------------------------------------: | :--------------------------------------------------------------: | ---------------------------------------------------------------------------------------------------------------------------------- | :-------------------------------------------------------------------------------------------------------------------------: | :------------: | :------------: | :---: | :------------------: | :------------------: | :----: | :---------------------: | | 01 | 入門 | プログラミング言語と開発ツール入門 | ほとんどのプログラミング言語の背後にある基本的な基盤と、プロの開発者が仕事をするのに役立つソフトウェアについて学ぶことができます。 | [プログラミング言語と開発ツール入門](/1-getting-started-lessons/1-intro-to-programming-languages/translations/README.ja.md) | ✅ | ✅ | ✅ | ✅ | ✅ | ✅ | Jasmine | -| 02 | 入門 | GitHubの基礎、チームでの作業を含む | プロジェクトでの GitHub の使い方、コードベースでの他の人との共同作業の仕方 | [GitHub 入門](/1-getting-started-lessons/2-github-basics/translations/README.ja.md) | ✅ | ✅ | ✅ | ✅ | ✅ | 🛑 | Floor | +| 02 | 入門 | GitHubの基礎、チームでの作業を含む | プロジェクトでの GitHub の使い方、コードベースでの他の人との共同作業の仕方 | [GitHub 入門](/1-getting-started-lessons/2-github-basics/) | ✅ | ✅ | ✅ | ✅ | ✅ | 🛑 | Floor | | 03 | 入門 | アクセシビリティ | Web アクセシビリティの基礎を学ぶ | [アクセシビリティの基本](/1-getting-started-lessons/3-accessibility/translations/README.ja.md) | ✅ | ✅ | ✅ | ✅ | ✅ | 🛑 | Christopher | | 04 | JS の基礎 | JavaScript のデータ型 | JavaScript のデータ型の基礎 | [データ型](/2-js-basics/1-data-types/translations/README.ja.md) | ✅ | ✅ | ✅ | ✅ | ✅ | ✅ | Jasmine | | 05 | JS の基礎 | 関数とメソッド | アプリケーションのロジックフローを管理するための機能とメソッドを学ぶ | [関数とメソッド](/2-js-basics/2-functions-methods/translations/README.ja.md) | ✅ | ✅ | ✅ | ✅ | ✅ | ✅ | Jasmine and Christopher | | 06 | JS の基礎 | JS での意思決定 | 意思決定の方法を使ってコードに条件を作成する方法を学ぶ | [意思決定](/2-js-basics/3-making-decisions/translations/README.ja.md) | ✅ | ✅ | ✅ | ✅ | ✅ | ✅ | Jasmine | | 07 | JS の基礎 | 配列とループ | JavaScript で配列やループを使ってデータを扱う | [配列とループ](/2-js-basics/4-arrays-loops/translations/README.ja.md) | ✅ | ✅ | ✅ | ✅ | ✅ | ✅ | Jasmine | -| 08 | [テラリウム](/3-terrarium/solution/translations/README.ja.md) | HTML の実践 | レイアウトの構築を中心に、オンラインテラリウムを作成するための HTML を構築する | [HTML 入門](/3-terrarium/1-intro-to-html/translations/README.ja.md) | ✅ | ✅ | ✅ | ✅ | ✅ | 🛑 | Jen | -| 09 | [テラリウム](/3-terrarium/solution/translations/README.ja.md) | CSS の実践 | レスポンシブ対応など CSS の基本を中心に、オンラインテラリウムのスタイルを整える CSS を構築します。 | [CSS 入門](/3-terrarium/2-intro-to-css/translations/README.ja.md) | ✅ | ✅ | ✅ | ✅ | ✅ | 🛑 | Jen | -| 10 | [テラリウム](/3-terrarium/solution) | JavaScript のクロージャ、DOM の操作 | テラリウムをドラッグ＆ドロップのインターフェイスとして機能させるための JavaScript を構築します。 | [JavaScript のクロージャ、DOM の操作](/3-terrarium/3-intro-to-DOM-and-closures/translations/README.ja.md) | ✅ | ✅ | ✅ | ✅ | ✅ | 🛑 | Jen | -| 11 | [タイピングゲーム](/4-typing-game/solution) | タイピングゲームを構築 | キーボードイベントを使用して JavaScript アプリのロジックを駆動する方法を学びます。 | [イベント駆動型プログラミング](/4-typing-game/typing-game/translations/README.ja.md) | ✅ | 🛑 | ✅ | ✅ | ✅ | ✅ | Christopher | -| 12 | [グリーンブラウザ拡張機能](/5-browser-extension/solution) | ブラウザとの連携 | ブラウザの仕組み、歴史、ブラウザ拡張機能の最初の要素の足場の作り方を学ぶ | [ブラウザについて](/5-browser-extension/1-about-browsers/translations/README.ja.md) | ✅ | ✅ | ✅ | ✅ | ✅ | 🛑 | Jen | -| 13 | [グリーンブラウザ拡張機能](/5-browser-extension/solution) | フォームの構築、API の呼び出し、ローカルストレージへの変数の格納 | ローカルストレージに格納された変数を使用して API を呼び出すためのブラウザ拡張機能の JavaScript 要素を構築します。 | [API、フォーム、およびローカルストレージ](/5-browser-extension/2-forms-browsers-local-storage/translations/README.ja.md) | ✅ | 🛑 | ✅ | ✅ | ✅ | ✅ | Jen | -| 14 | [グリーンブラウザ拡張機能](/5-browser-extension/solution) | ブラウザのバックグラウンドプロセス、Web パフォーマンス | ブラウザのバックグラウンドプロセスを使用して拡張機能のアイコンを管理します。Web のパフォーマンスと最適化について学びます。 | [バックグラウンドタスクとパフォーマンス](/5-browser-extension/3-background-tasks-and-performance/translations/README.ja.md) | ✅ | 🛑 | ✅ | ✅ | ✅ | 🛑 | Jen | -| 15 | [スペースゲーム](/6-space-game/solution) | JavaScript を使ったより高度なゲーム開発 | ゲーム構築に備えて、クラスとコンポジションの両方を使った継承と Pub/Sub パターンを学ぶ | [高度なゲーム開発入門](/6-space-game/1-introduction/translations/README.ja.md) | ✅ | 🛑 | ✅ | ✅ | ✅ | 🛑 | Chris | -| 16 | [スペースゲーム](/6-space-game/solution) | キャンバスへの描画 | 画面に要素を描画するために使用される Canvas API について説明します。 | [キャンバスへの描画](/6-space-game/2-drawing-to-canvas/translations/README.ja.md) | ✅ | 🛑 | ✅ | ✅ | ✅ | 🛑 | Chris | -| 17 | [スペースゲーム](/6-space-game/solution) | 画面の周りの要素の移動 | 直交座標と Canvas API を使用して、要素がどのように動きを得ることができるかをご覧ください。 | [要素の移動](/6-space-game/3-moving-elements-around/translations/README.ja.md) | ✅ | 🛑 | ✅ | ✅ | ✅ | 🛑 | Chris | -| 18 | [スペースゲーム](/6-space-game/solution) | 衝突の検出 | 要素を衝突させ、キープレスでお互いに反応させ、ゲームのパフォーマンスを確保するためのクールダウン機能を提供します。 | [衝突の検出](/6-space-game/4-collision-detection/translations/README.ja.md) | ✅ | 🛑 | ✅ | ✅ | ✅ | 🛑 | Chris | -| 19 | [スペースゲーム](/6-space-game/solution) | スコアの保持 | ゲームのステータスや成績に応じて計算を行う | [スコアの保持](/6-space-game/5-keeping-score/translations/README.ja.md) | ✅ | 🛑 | ✅ | ✅ | ✅ | 🛑 | Chris | -| 20 | [スペースゲーム](/6-space-game/solution) | ゲームの終了と再開 | アセットのクリーンアップや変数値のリセットなど、ゲームの終了と再開について学ぶことができます。 | [終了条件](/6-space-game/6-end-condition/translations/README.ja.md) | ✅ | 🛑 | ✅ | ✅ | ✅ | 🛑 | Chris | -| 21 | [バンキングアプリケーション](/7-bank-project/solution) | Web アプリの HTML テンプレートとルート | ルーティングと HTML テンプレートを使ったマルチページサイトのアーキテクチャの足場の作り方を学ぶ | [HTML テンプレートとルート](/7-bank-project/1-template-route/translations/README.ja.md) | ✅ | 🛑 | ✅ | ✅ | ✅ | ✅ | Yohan | -| 22 | [バンキングアプリケーション](/7-bank-project/solution) | ログインと登録フォームの構築 | フォームの構築と検証ルーチンの渡し方について学ぶ | [フォーム](/7-bank-project/2-forms/translations/README.ja.md) | ✅ | 🛑 | ✅ | ✅ | ✅ | ✅ | Yohan | -| 23 | [バンキングアプリケーション](/7-bank-project/solution) | データの取得と利用方法 | アプリのデータの出入り、データの取得方法、保存方法、廃棄方法 | [データ](/7-bank-project/3-data/translations/README.ja.md) | ✅ | 🛑 | ✅ | ✅ | ✅ | ✅ | Yohan | -| 24 | [バンキングアプリケーション](/7-bank-project/solution) | 状態管理の概念 | アプリの状態を保持する方法とプログラムで管理する方法を学ぶ | [状態管理](/7-bank-project/4-state-management/translations/README.ja.md) | ✅ | 🛑 | ✅ | ✅ | ✅ | | Yohan | +| 08 | [テラリウム](https://github.com/microsoft/Web-Dev-For-Beginners/tree/main/3-terrarium/solution) | HTML の実践 | レイアウトの構築を中心に、オンラインテラリウムを作成するための HTML を構築する | [HTML 入門](/3-terrarium/1-intro-to-html/translations/README.ja.md) | ✅ | ✅ | ✅ | ✅ | ✅ | 🛑 | Jen | +| 09 | [テラリウム](https://github.com/microsoft/Web-Dev-For-Beginners/tree/main/3-terrarium/solution) | CSS の実践 | レスポンシブ対応など CSS の基本を中心に、オンラインテラリウムのスタイルを整える CSS を構築します。 | [CSS 入門](/3-terrarium/2-intro-to-css/translations/README.ja.md) | ✅ | ✅ | ✅ | ✅ | ✅ | 🛑 | Jen | +| 10 | [テラリウム](https://github.com/microsoft/Web-Dev-For-Beginners/tree/main/3-terrarium/solution) | JavaScript のクロージャ、DOM の操作 | テラリウムをドラッグ＆ドロップのインターフェイスとして機能させるための JavaScript を構築します。 | [JavaScript のクロージャ、DOM の操作](/3-terrarium/3-intro-to-DOM-and-closures/translations/README.ja.md) | ✅ | ✅ | ✅ | ✅ | ✅ | 🛑 | Jen | +| 11 | [タイピングゲーム](https://github.com/microsoft/Web-Dev-For-Beginners/tree/main/4-typing-game/solution) | タイピングゲームを構築 | キーボードイベントを使用して JavaScript アプリのロジックを駆動する方法を学びます。 | [イベント駆動型プログラミング](/4-typing-game/typing-game/translations/README.ja.md) | ✅ | 🛑 | ✅ | ✅ | ✅ | ✅ | Christopher | +| 12 | グリーンブラウザ拡張機能 | ブラウザとの連携 | ブラウザの仕組み、歴史、ブラウザ拡張機能の最初の要素の足場の作り方を学ぶ | [ブラウザについて](/5-browser-extension/1-about-browsers/translations/README.ja.md) | ✅ | ✅ | ✅ | ✅ | ✅ | 🛑 | Jen | +| 13 | グリーンブラウザ拡張機能 | フォームの構築、API の呼び出し、ローカルストレージへの変数の格納 | ローカルストレージに格納された変数を使用して API を呼び出すためのブラウザ拡張機能の JavaScript 要素を構築します。 | [API、フォーム、およびローカルストレージ](/5-browser-extension/2-forms-browsers-local-storage/translations/README.ja.md) | ✅ | 🛑 | ✅ | ✅ | ✅ | ✅ | Jen | +| 14 | グリーンブラウザ拡張機能 | ブラウザのバックグラウンドプロセス、Web パフォーマンス | ブラウザのバックグラウンドプロセスを使用して拡張機能のアイコンを管理します。Web のパフォーマンスと最適化について学びます。 | [バックグラウンドタスクとパフォーマンス](/5-browser-extension/3-background-tasks-and-performance/translations/README.ja.md) | ✅ | 🛑 | ✅ | ✅ | ✅ | 🛑 | Jen | +| 15 | [スペースゲーム](https://github.com/microsoft/Web-Dev-For-Beginners/tree/main/6-space-game/solution) | JavaScript を使ったより高度なゲーム開発 | ゲーム構築に備えて、クラスとコンポジションの両方を使った継承と Pub/Sub パターンを学ぶ | [高度なゲーム開発入門](/6-space-game/1-introduction/translations/README.ja.md) | ✅ | 🛑 | ✅ | ✅ | ✅ | 🛑 | Chris | +| 16 | [スペースゲーム](https://github.com/microsoft/Web-Dev-For-Beginners/tree/main/6-space-game/solution) | キャンバスへの描画 | 画面に要素を描画するために使用される Canvas API について説明します。 | [キャンバスへの描画](/6-space-game/2-drawing-to-canvas/translations/README.ja.md) | ✅ | 🛑 | ✅ | ✅ | ✅ | 🛑 | Chris | +| 17 | [スペースゲーム](https://github.com/microsoft/Web-Dev-For-Beginners/tree/main/6-space-game/solution) | 画面の周りの要素の移動 | 直交座標と Canvas API を使用して、要素がどのように動きを得ることができるかをご覧ください。 | [要素の移動](/6-space-game/3-moving-elements-around/translations/README.ja.md) | ✅ | 🛑 | ✅ | ✅ | ✅ | 🛑 | Chris | +| 18 | [スペースゲーム](https://github.com/microsoft/Web-Dev-For-Beginners/tree/main/6-space-game/solution) | 衝突の検出 | 要素を衝突させ、キープレスでお互いに反応させ、ゲームのパフォーマンスを確保するためのクールダウン機能を提供します。 | [衝突の検出](/6-space-game/4-collision-detection/translations/README.ja.md) | ✅ | 🛑 | ✅ | ✅ | ✅ | 🛑 | Chris | +| 19 | [スペースゲーム](https://github.com/microsoft/Web-Dev-For-Beginners/tree/main/6-space-game/solution) | スコアの保持 | ゲームのステータスや成績に応じて計算を行う | [スコアの保持](/6-space-game/5-keeping-score/translations/README.ja.md) | ✅ | 🛑 | ✅ | ✅ | ✅ | 🛑 | Chris | +| 20 | [スペースゲーム](https://github.com/microsoft/Web-Dev-For-Beginners/tree/main/6-space-game/solution) | ゲームの終了と再開 | アセットのクリーンアップや変数値のリセットなど、ゲームの終了と再開について学ぶことができます。 | [終了条件](/6-space-game/6-end-condition/translations/README.ja.md) | ✅ | 🛑 | ✅ | ✅ | ✅ | 🛑 | Chris | +| 21 | [バンキングアプリケーション](https://github.com/microsoft/Web-Dev-For-Beginners/tree/main/7-bank-project/solution) | Web アプリの HTML テンプレートとルート | ルーティングと HTML テンプレートを使ったマルチページサイトのアーキテクチャの足場の作り方を学ぶ | [HTML テンプレートとルート](/7-bank-project/1-template-route/translations/README.ja.md) | ✅ | 🛑 | ✅ | ✅ | ✅ | ✅ | Yohan | +| 22 | [バンキングアプリケーション](https://github.com/microsoft/Web-Dev-For-Beginners/tree/main/7-bank-project/solution) | ログインと登録フォームの構築 | フォームの構築と検証ルーチンの渡し方について学ぶ | [フォーム](/7-bank-project/2-forms/translations/README.ja.md) | ✅ | 🛑 | ✅ | ✅ | ✅ | ✅ | Yohan | +| 23 | [バンキングアプリケーション](https://github.com/microsoft/Web-Dev-For-Beginners/tree/main/7-bank-project/solution) | データの取得と利用方法 | アプリのデータの出入り、データの取得方法、保存方法、廃棄方法 | [データ](/7-bank-project/3-data/translations/README.ja.md) | ✅ | 🛑 | ✅ | ✅ | ✅ | ✅ | Yohan | +| 24 | [バンキングアプリケーション](https://github.com/microsoft/Web-Dev-For-Beginners/tree/main/7-bank-project/solution) | 状態管理の概念 | アプリの状態を保持する方法とプログラムで管理する方法を学ぶ | [状態管理](/7-bank-project/4-state-management/translations/README.ja.md) | ✅ | 🛑 | ✅ | ✅ | ✅ | | Yohan | ## オフラインアクセス From 7078ef6cd45c963898ca056c5b3607e5ac84f970 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E3=83=8A=E3=83=A2=E3=81=99=E3=81=91?= Date: Mon, 8 Feb 2021 21:55:36 +0900 Subject: [PATCH 5/9] =?UTF-8?q?=E3=83=AA=E3=83=B3=E3=82=AF=E4=BF=AE?= =?UTF-8?q?=E6=AD=A3?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- translations/README.ja.md | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/translations/README.ja.md b/translations/README.ja.md index 570631da..e27ec14c 100644 --- a/translations/README.ja.md +++ b/translations/README.ja.md @@ -52,9 +52,9 @@ | 09 | [テラリウム](https://github.com/microsoft/Web-Dev-For-Beginners/tree/main/3-terrarium/solution) | CSS の実践 | レスポンシブ対応など CSS の基本を中心に、オンラインテラリウムのスタイルを整える CSS を構築します。 | [CSS 入門](/3-terrarium/2-intro-to-css/translations/README.ja.md) | ✅ | ✅ | ✅ | ✅ | ✅ | 🛑 | Jen | | 10 | [テラリウム](https://github.com/microsoft/Web-Dev-For-Beginners/tree/main/3-terrarium/solution) | JavaScript のクロージャ、DOM の操作 | テラリウムをドラッグ＆ドロップのインターフェイスとして機能させるための JavaScript を構築します。 | [JavaScript のクロージャ、DOM の操作](/3-terrarium/3-intro-to-DOM-and-closures/translations/README.ja.md) | ✅ | ✅ | ✅ | ✅ | ✅ | 🛑 | Jen | | 11 | [タイピングゲーム](https://github.com/microsoft/Web-Dev-For-Beginners/tree/main/4-typing-game/solution) | タイピングゲームを構築 | キーボードイベントを使用して JavaScript アプリのロジックを駆動する方法を学びます。 | [イベント駆動型プログラミング](/4-typing-game/typing-game/translations/README.ja.md) | ✅ | 🛑 | ✅ | ✅ | ✅ | ✅ | Christopher | -| 12 | グリーンブラウザ拡張機能 | ブラウザとの連携 | ブラウザの仕組み、歴史、ブラウザ拡張機能の最初の要素の足場の作り方を学ぶ | [ブラウザについて](/5-browser-extension/1-about-browsers/translations/README.ja.md) | ✅ | ✅ | ✅ | ✅ | ✅ | 🛑 | Jen | -| 13 | グリーンブラウザ拡張機能 | フォームの構築、API の呼び出し、ローカルストレージへの変数の格納 | ローカルストレージに格納された変数を使用して API を呼び出すためのブラウザ拡張機能の JavaScript 要素を構築します。 | [API、フォーム、およびローカルストレージ](/5-browser-extension/2-forms-browsers-local-storage/translations/README.ja.md) | ✅ | 🛑 | ✅ | ✅ | ✅ | ✅ | Jen | -| 14 | グリーンブラウザ拡張機能 | ブラウザのバックグラウンドプロセス、Web パフォーマンス | ブラウザのバックグラウンドプロセスを使用して拡張機能のアイコンを管理します。Web のパフォーマンスと最適化について学びます。 | [バックグラウンドタスクとパフォーマンス](/5-browser-extension/3-background-tasks-and-performance/translations/README.ja.md) | ✅ | 🛑 | ✅ | ✅ | ✅ | 🛑 | Jen | +| 12 | [グリーンブラウザ拡張機能](https://github.com/microsoft/Web-Dev-For-Beginners/tree/main/5-browser-extension/solution) | ブラウザとの連携 | ブラウザの仕組み、歴史、ブラウザ拡張機能の最初の要素の足場の作り方を学ぶ | [ブラウザについて](/5-browser-extension/1-about-browsers/translations/README.ja.md) | ✅ | ✅ | ✅ | ✅ | ✅ | 🛑 | Jen | +| 13 | [グリーンブラウザ拡張機能](https://github.com/microsoft/Web-Dev-For-Beginners/tree/main/5-browser-extension/solution) | フォームの構築、API の呼び出し、ローカルストレージへの変数の格納 | ローカルストレージに格納された変数を使用して API を呼び出すためのブラウザ拡張機能の JavaScript 要素を構築します。 | [API、フォーム、およびローカルストレージ](/5-browser-extension/2-forms-browsers-local-storage/translations/README.ja.md) | ✅ | 🛑 | ✅ | ✅ | ✅ | ✅ | Jen | +| 14 | [グリーンブラウザ拡張機能](https://github.com/microsoft/Web-Dev-For-Beginners/tree/main/5-browser-extension/solution) | ブラウザのバックグラウンドプロセス、Web パフォーマンス | ブラウザのバックグラウンドプロセスを使用して拡張機能のアイコンを管理します。Web のパフォーマンスと最適化について学びます。 | [バックグラウンドタスクとパフォーマンス](/5-browser-extension/3-background-tasks-and-performance/translations/README.ja.md) | ✅ | 🛑 | ✅ | ✅ | ✅ | 🛑 | Jen | | 15 | [スペースゲーム](https://github.com/microsoft/Web-Dev-For-Beginners/tree/main/6-space-game/solution) | JavaScript を使ったより高度なゲーム開発 | ゲーム構築に備えて、クラスとコンポジションの両方を使った継承と Pub/Sub パターンを学ぶ | [高度なゲーム開発入門](/6-space-game/1-introduction/translations/README.ja.md) | ✅ | 🛑 | ✅ | ✅ | ✅ | 🛑 | Chris | | 16 | [スペースゲーム](https://github.com/microsoft/Web-Dev-For-Beginners/tree/main/6-space-game/solution) | キャンバスへの描画 | 画面に要素を描画するために使用される Canvas API について説明します。 | [キャンバスへの描画](/6-space-game/2-drawing-to-canvas/translations/README.ja.md) | ✅ | 🛑 | ✅ | ✅ | ✅ | 🛑 | Chris | | 17 | [スペースゲーム](https://github.com/microsoft/Web-Dev-For-Beginners/tree/main/6-space-game/solution) | 画面の周りの要素の移動 | 直交座標と Canvas API を使用して、要素がどのように動きを得ることができるかをご覧ください。 | [要素の移動](/6-space-game/3-moving-elements-around/translations/README.ja.md) | ✅ | 🛑 | ✅ | ✅ | ✅ | 🛑 | Chris | From 3c752f334f5efd29387830f928f5a9a3ec4e8c51 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E3=83=8A=E3=83=A2=E3=81=99=E3=81=91?= Date: Tue, 9 Feb 2021 04:47:54 +0900 Subject: [PATCH 6/9] =?UTF-8?q?PR=E7=94=A8=E3=81=AB=E7=8B=AC=E8=87=AA?= =?UTF-8?q?=E3=81=AE=E5=A4=89=E6=9B=B4=E3=82=92=E5=8F=96=E6=B6=88?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../translations/README.ja.md | 2 +- .../start/translations/README.ja.md | 2 - .../translations/README.ja.md | 2 +- _docs/about.md | 12 ---- _sidebar.md | 60 ------------------- translations/README.ja.md | 38 ++++++------ 6 files changed, 21 insertions(+), 95 deletions(-) delete mode 100644 _docs/about.md delete mode 100644 _sidebar.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 76602525..a5fea876 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' を使用しています) -- [スターターコード](/5-browser-extension/start/translations/README.ja)。`start`フォルダをダウンロードしてください。このフォルダでコードを完成させることになります。 +- [スターターコード](../../start)。`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/start/translations/README.ja.md b/5-browser-extension/start/translations/README.ja.md index 6f0a21bd..6121aa49 100644 --- a/5-browser-extension/start/translations/README.ja.md +++ b/5-browser-extension/start/translations/README.ja.md @@ -1,7 +1,5 @@ # カーボントリガーブラウザ拡張機能： スターターコード -**ローカルフォルダのWeb-Dev-For-Beginners/5-browser-extension/startをご覧ください** - tmrow の C02 シグナル API を使用して電力使用量を追跡するために、あなたの地域の電力使用量がどれだけ多いかをブラウザ上でリマインダーとして表示できるようにブラウザ拡張機能を構築します。この拡張機能をアドホックに使用することで、この情報に基づいてあなたの活動を判断することができます。 ![extension screenshot](../../extension-screenshot.png) 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 50bbf243..5ba9d1aa 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](https://github.com/microsoft/Web-Dev-For-Beginners/tree/main/6-space-game/2-drawing-to-canvas/solution) を参考にしてみてください。 +まずはご自身で解決してみていただきたいですが、行き詰った場合は [solution](../solution/app.js) を参考にしてみてください。 --- diff --git a/_docs/about.md b/_docs/about.md deleted file mode 100644 index e5ff0fcf..00000000 --- a/_docs/about.md +++ /dev/null @@ -1,12 +0,0 @@ -# このサイトについて - -- このWebサイトは、運営者である[namosuke](https://github.com/namosuke)が[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)」をフォークし、日本語話者がより学習しやすくなるよう編纂し、公開したものです。 -- この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/_sidebar.md b/_sidebar.md deleted file mode 100644 index 768e18da..00000000 --- a/_sidebar.md +++ /dev/null @@ -1,60 +0,0 @@ -- [このサイトについて](/_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://wdfb.netlify.app/3-terrarium/solution/) - - [(参考コード)](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://wdfb.netlify.app/4-typing-game/solution/) - - [(参考コード)](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://wdfb.netlify.app/6-space-game/solution/) - - [(参考コード)](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://wdfb.netlify.app/7-bank-project/solution) - - [(参考コード)](https://github.com/microsoft/Web-Dev-For-Beginners/tree/main/7-bank-project/solution) \ No newline at end of file diff --git a/translations/README.ja.md b/translations/README.ja.md index e27ec14c..db1a236e 100644 --- a/translations/README.ja.md +++ b/translations/README.ja.md @@ -4,7 +4,7 @@ **著者の Jen Looper さん、Chris Noring さん、Christopher Harrison さん、Jasmine Greenaway さん、Yohan Lasorsa さん、Floor Drees さん、そしてスケッチノートアーティストの Tomomi Imura さんに心から感謝します。** -> **先生方**、このカリキュラムをどのように使用するか、[いくつかの提案があります](/translations/for-teachers.ja.md)。あなた自身のレッスンを作成したい場合は、[レッスンテンプレート](/lesson-template/)もご用意しています。 +> **先生方**、このカリキュラムをどのように使用するか、[いくつかの提案があります](for-teachers.ja.md)。あなた自身のレッスンを作成したい場合は、[レッスンテンプレート](lesson-template/translations/README.ja.md)もご用意しています。 > **学生の皆さん**、このカリキュラムを自分で使うためには、リポジトリ全体をフォークして、講義前の小テストから始めて、講義を読んで、残りのアクティビティを自分で完成させてください。解答コードは各レッスンの /solutions フォルダにありますが、解答コードをコピーするのではなく、授業を理解した上でプロジェクトを作成するようにしてください。また、友達と勉強会を作って、一緒に勉強するのもいいでしょう。さらに勉強するには、[Microsoft Learn](https://docs.microsoft.com/users/jenlooper-2911/collections/jg2gax8pzd6o81?WT.mc_id=academic-13441-cxa) や以下のビデオを見ることをお勧めします。 @@ -42,29 +42,29 @@ | | プロジェクト名 | 教える概念 | 学習の目的 | 関連するレッスン | レッスンの記載 | スケッチノート | 課題 | レッスン前の小テスト | レッスン後の小テスト | ビデオ | 著者 | | :---: | :-----------------------------------------------------------: | :--------------------------------------------------------------: | ---------------------------------------------------------------------------------------------------------------------------------- | :-------------------------------------------------------------------------------------------------------------------------: | :------------: | :------------: | :---: | :------------------: | :------------------: | :----: | :---------------------: | | 01 | 入門 | プログラミング言語と開発ツール入門 | ほとんどのプログラミング言語の背後にある基本的な基盤と、プロの開発者が仕事をするのに役立つソフトウェアについて学ぶことができます。 | [プログラミング言語と開発ツール入門](/1-getting-started-lessons/1-intro-to-programming-languages/translations/README.ja.md) | ✅ | ✅ | ✅ | ✅ | ✅ | ✅ | Jasmine | -| 02 | 入門 | GitHubの基礎、チームでの作業を含む | プロジェクトでの GitHub の使い方、コードベースでの他の人との共同作業の仕方 | [GitHub 入門](/1-getting-started-lessons/2-github-basics/) | ✅ | ✅ | ✅ | ✅ | ✅ | 🛑 | Floor | +| 02 | 入門 | GitHubの基礎、チームでの作業を含む | プロジェクトでの GitHub の使い方、コードベースでの他の人との共同作業の仕方 | [GitHub 入門](/1-getting-started-lessons/2-github-basics/translations/README.ja.md) | ✅ | ✅ | ✅ | ✅ | ✅ | 🛑 | Floor | | 03 | 入門 | アクセシビリティ | Web アクセシビリティの基礎を学ぶ | [アクセシビリティの基本](/1-getting-started-lessons/3-accessibility/translations/README.ja.md) | ✅ | ✅ | ✅ | ✅ | ✅ | 🛑 | Christopher | | 04 | JS の基礎 | JavaScript のデータ型 | JavaScript のデータ型の基礎 | [データ型](/2-js-basics/1-data-types/translations/README.ja.md) | ✅ | ✅ | ✅ | ✅ | ✅ | ✅ | Jasmine | | 05 | JS の基礎 | 関数とメソッド | アプリケーションのロジックフローを管理するための機能とメソッドを学ぶ | [関数とメソッド](/2-js-basics/2-functions-methods/translations/README.ja.md) | ✅ | ✅ | ✅ | ✅ | ✅ | ✅ | Jasmine and Christopher | | 06 | JS の基礎 | JS での意思決定 | 意思決定の方法を使ってコードに条件を作成する方法を学ぶ | [意思決定](/2-js-basics/3-making-decisions/translations/README.ja.md) | ✅ | ✅ | ✅ | ✅ | ✅ | ✅ | Jasmine | | 07 | JS の基礎 | 配列とループ | JavaScript で配列やループを使ってデータを扱う | [配列とループ](/2-js-basics/4-arrays-loops/translations/README.ja.md) | ✅ | ✅ | ✅ | ✅ | ✅ | ✅ | Jasmine | -| 08 | [テラリウム](https://github.com/microsoft/Web-Dev-For-Beginners/tree/main/3-terrarium/solution) | HTML の実践 | レイアウトの構築を中心に、オンラインテラリウムを作成するための HTML を構築する | [HTML 入門](/3-terrarium/1-intro-to-html/translations/README.ja.md) | ✅ | ✅ | ✅ | ✅ | ✅ | 🛑 | Jen | -| 09 | [テラリウム](https://github.com/microsoft/Web-Dev-For-Beginners/tree/main/3-terrarium/solution) | CSS の実践 | レスポンシブ対応など CSS の基本を中心に、オンラインテラリウムのスタイルを整える CSS を構築します。 | [CSS 入門](/3-terrarium/2-intro-to-css/translations/README.ja.md) | ✅ | ✅ | ✅ | ✅ | ✅ | 🛑 | Jen | -| 10 | [テラリウム](https://github.com/microsoft/Web-Dev-For-Beginners/tree/main/3-terrarium/solution) | JavaScript のクロージャ、DOM の操作 | テラリウムをドラッグ＆ドロップのインターフェイスとして機能させるための JavaScript を構築します。 | [JavaScript のクロージャ、DOM の操作](/3-terrarium/3-intro-to-DOM-and-closures/translations/README.ja.md) | ✅ | ✅ | ✅ | ✅ | ✅ | 🛑 | Jen | -| 11 | [タイピングゲーム](https://github.com/microsoft/Web-Dev-For-Beginners/tree/main/4-typing-game/solution) | タイピングゲームを構築 | キーボードイベントを使用して JavaScript アプリのロジックを駆動する方法を学びます。 | [イベント駆動型プログラミング](/4-typing-game/typing-game/translations/README.ja.md) | ✅ | 🛑 | ✅ | ✅ | ✅ | ✅ | Christopher | -| 12 | [グリーンブラウザ拡張機能](https://github.com/microsoft/Web-Dev-For-Beginners/tree/main/5-browser-extension/solution) | ブラウザとの連携 | ブラウザの仕組み、歴史、ブラウザ拡張機能の最初の要素の足場の作り方を学ぶ | [ブラウザについて](/5-browser-extension/1-about-browsers/translations/README.ja.md) | ✅ | ✅ | ✅ | ✅ | ✅ | 🛑 | Jen | -| 13 | [グリーンブラウザ拡張機能](https://github.com/microsoft/Web-Dev-For-Beginners/tree/main/5-browser-extension/solution) | フォームの構築、API の呼び出し、ローカルストレージへの変数の格納 | ローカルストレージに格納された変数を使用して API を呼び出すためのブラウザ拡張機能の JavaScript 要素を構築します。 | [API、フォーム、およびローカルストレージ](/5-browser-extension/2-forms-browsers-local-storage/translations/README.ja.md) | ✅ | 🛑 | ✅ | ✅ | ✅ | ✅ | Jen | -| 14 | [グリーンブラウザ拡張機能](https://github.com/microsoft/Web-Dev-For-Beginners/tree/main/5-browser-extension/solution) | ブラウザのバックグラウンドプロセス、Web パフォーマンス | ブラウザのバックグラウンドプロセスを使用して拡張機能のアイコンを管理します。Web のパフォーマンスと最適化について学びます。 | [バックグラウンドタスクとパフォーマンス](/5-browser-extension/3-background-tasks-and-performance/translations/README.ja.md) | ✅ | 🛑 | ✅ | ✅ | ✅ | 🛑 | Jen | -| 15 | [スペースゲーム](https://github.com/microsoft/Web-Dev-For-Beginners/tree/main/6-space-game/solution) | JavaScript を使ったより高度なゲーム開発 | ゲーム構築に備えて、クラスとコンポジションの両方を使った継承と Pub/Sub パターンを学ぶ | [高度なゲーム開発入門](/6-space-game/1-introduction/translations/README.ja.md) | ✅ | 🛑 | ✅ | ✅ | ✅ | 🛑 | Chris | -| 16 | [スペースゲーム](https://github.com/microsoft/Web-Dev-For-Beginners/tree/main/6-space-game/solution) | キャンバスへの描画 | 画面に要素を描画するために使用される Canvas API について説明します。 | [キャンバスへの描画](/6-space-game/2-drawing-to-canvas/translations/README.ja.md) | ✅ | 🛑 | ✅ | ✅ | ✅ | 🛑 | Chris | -| 17 | [スペースゲーム](https://github.com/microsoft/Web-Dev-For-Beginners/tree/main/6-space-game/solution) | 画面の周りの要素の移動 | 直交座標と Canvas API を使用して、要素がどのように動きを得ることができるかをご覧ください。 | [要素の移動](/6-space-game/3-moving-elements-around/translations/README.ja.md) | ✅ | 🛑 | ✅ | ✅ | ✅ | 🛑 | Chris | -| 18 | [スペースゲーム](https://github.com/microsoft/Web-Dev-For-Beginners/tree/main/6-space-game/solution) | 衝突の検出 | 要素を衝突させ、キープレスでお互いに反応させ、ゲームのパフォーマンスを確保するためのクールダウン機能を提供します。 | [衝突の検出](/6-space-game/4-collision-detection/translations/README.ja.md) | ✅ | 🛑 | ✅ | ✅ | ✅ | 🛑 | Chris | -| 19 | [スペースゲーム](https://github.com/microsoft/Web-Dev-For-Beginners/tree/main/6-space-game/solution) | スコアの保持 | ゲームのステータスや成績に応じて計算を行う | [スコアの保持](/6-space-game/5-keeping-score/translations/README.ja.md) | ✅ | 🛑 | ✅ | ✅ | ✅ | 🛑 | Chris | -| 20 | [スペースゲーム](https://github.com/microsoft/Web-Dev-For-Beginners/tree/main/6-space-game/solution) | ゲームの終了と再開 | アセットのクリーンアップや変数値のリセットなど、ゲームの終了と再開について学ぶことができます。 | [終了条件](/6-space-game/6-end-condition/translations/README.ja.md) | ✅ | 🛑 | ✅ | ✅ | ✅ | 🛑 | Chris | -| 21 | [バンキングアプリケーション](https://github.com/microsoft/Web-Dev-For-Beginners/tree/main/7-bank-project/solution) | Web アプリの HTML テンプレートとルート | ルーティングと HTML テンプレートを使ったマルチページサイトのアーキテクチャの足場の作り方を学ぶ | [HTML テンプレートとルート](/7-bank-project/1-template-route/translations/README.ja.md) | ✅ | 🛑 | ✅ | ✅ | ✅ | ✅ | Yohan | -| 22 | [バンキングアプリケーション](https://github.com/microsoft/Web-Dev-For-Beginners/tree/main/7-bank-project/solution) | ログインと登録フォームの構築 | フォームの構築と検証ルーチンの渡し方について学ぶ | [フォーム](/7-bank-project/2-forms/translations/README.ja.md) | ✅ | 🛑 | ✅ | ✅ | ✅ | ✅ | Yohan | -| 23 | [バンキングアプリケーション](https://github.com/microsoft/Web-Dev-For-Beginners/tree/main/7-bank-project/solution) | データの取得と利用方法 | アプリのデータの出入り、データの取得方法、保存方法、廃棄方法 | [データ](/7-bank-project/3-data/translations/README.ja.md) | ✅ | 🛑 | ✅ | ✅ | ✅ | ✅ | Yohan | -| 24 | [バンキングアプリケーション](https://github.com/microsoft/Web-Dev-For-Beginners/tree/main/7-bank-project/solution) | 状態管理の概念 | アプリの状態を保持する方法とプログラムで管理する方法を学ぶ | [状態管理](/7-bank-project/4-state-management/translations/README.ja.md) | ✅ | 🛑 | ✅ | ✅ | ✅ | | Yohan | +| 08 | [テラリウム](/3-terrarium/solution/translations/README.ja.md) | HTML の実践 | レイアウトの構築を中心に、オンラインテラリウムを作成するための HTML を構築する | [HTML 入門](/3-terrarium/1-intro-to-html/translations/README.ja.md) | ✅ | ✅ | ✅ | ✅ | ✅ | 🛑 | Jen | +| 09 | [テラリウム](/3-terrarium/solution/translations/README.ja.md) | CSS の実践 | レスポンシブ対応など CSS の基本を中心に、オンラインテラリウムのスタイルを整える CSS を構築します。 | [CSS 入門](/3-terrarium/2-intro-to-css/translations/README.ja.md) | ✅ | ✅ | ✅ | ✅ | ✅ | 🛑 | Jen | +| 10 | [テラリウム](/3-terrarium/solution) | JavaScript のクロージャ、DOM の操作 | テラリウムをドラッグ＆ドロップのインターフェイスとして機能させるための JavaScript を構築します。 | [JavaScript のクロージャ、DOM の操作](/3-terrarium/3-intro-to-DOM-and-closures/translations/README.ja.md) | ✅ | ✅ | ✅ | ✅ | ✅ | 🛑 | Jen | +| 11 | [タイピングゲーム](/4-typing-game/solution) | タイピングゲームを構築 | キーボードイベントを使用して JavaScript アプリのロジックを駆動する方法を学びます。 | [イベント駆動型プログラミング](/4-typing-game/typing-game/translations/README.ja.md) | ✅ | 🛑 | ✅ | ✅ | ✅ | ✅ | Christopher | +| 12 | [グリーンブラウザ拡張機能](/5-browser-extension/solution) | ブラウザとの連携 | ブラウザの仕組み、歴史、ブラウザ拡張機能の最初の要素の足場の作り方を学ぶ | [ブラウザについて](/5-browser-extension/1-about-browsers/translations/README.ja.md) | ✅ | ✅ | ✅ | ✅ | ✅ | 🛑 | Jen | +| 13 | [グリーンブラウザ拡張機能](/5-browser-extension/solution) | フォームの構築、API の呼び出し、ローカルストレージへの変数の格納 | ローカルストレージに格納された変数を使用して API を呼び出すためのブラウザ拡張機能の JavaScript 要素を構築します。 | [API、フォーム、およびローカルストレージ](/5-browser-extension/2-forms-browsers-local-storage/translations/README.ja.md) | ✅ | 🛑 | ✅ | ✅ | ✅ | ✅ | Jen | +| 14 | [グリーンブラウザ拡張機能](/5-browser-extension/solution) | ブラウザのバックグラウンドプロセス、Web パフォーマンス | ブラウザのバックグラウンドプロセスを使用して拡張機能のアイコンを管理します。Web のパフォーマンスと最適化について学びます。 | [バックグラウンドタスクとパフォーマンス](/5-browser-extension/3-background-tasks-and-performance/translations/README.ja.md) | ✅ | 🛑 | ✅ | ✅ | ✅ | 🛑 | Jen | +| 15 | [スペースゲーム](/6-space-game/solution) | JavaScript を使ったより高度なゲーム開発 | ゲーム構築に備えて、クラスとコンポジションの両方を使った継承と Pub/Sub パターンを学ぶ | [高度なゲーム開発入門](/6-space-game/1-introduction/translations/README.ja.md) | ✅ | 🛑 | ✅ | ✅ | ✅ | 🛑 | Chris | +| 16 | [スペースゲーム](/6-space-game/solution) | キャンバスへの描画 | 画面に要素を描画するために使用される Canvas API について説明します。 | [キャンバスへの描画](/6-space-game/2-drawing-to-canvas/translations/README.ja.md) | ✅ | 🛑 | ✅ | ✅ | ✅ | 🛑 | Chris | +| 17 | [スペースゲーム](/6-space-game/solution) | 画面の周りの要素の移動 | 直交座標と Canvas API を使用して、要素がどのように動きを得ることができるかをご覧ください。 | [要素の移動](/6-space-game/3-moving-elements-around/translations/README.ja.md) | ✅ | 🛑 | ✅ | ✅ | ✅ | 🛑 | Chris | +| 18 | [スペースゲーム](/6-space-game/solution) | 衝突の検出 | 要素を衝突させ、キープレスでお互いに反応させ、ゲームのパフォーマンスを確保するためのクールダウン機能を提供します。 | [衝突の検出](/6-space-game/4-collision-detection/translations/README.ja.md) | ✅ | 🛑 | ✅ | ✅ | ✅ | 🛑 | Chris | +| 19 | [スペースゲーム](/6-space-game/solution) | スコアの保持 | ゲームのステータスや成績に応じて計算を行う | [スコアの保持](/6-space-game/5-keeping-score/translations/README.ja.md) | ✅ | 🛑 | ✅ | ✅ | ✅ | 🛑 | Chris | +| 20 | [スペースゲーム](/6-space-game/solution) | ゲームの終了と再開 | アセットのクリーンアップや変数値のリセットなど、ゲームの終了と再開について学ぶことができます。 | [終了条件](/6-space-game/6-end-condition/translations/README.ja.md) | ✅ | 🛑 | ✅ | ✅ | ✅ | 🛑 | Chris | +| 21 | [バンキングアプリケーション](/7-bank-project/solution) | Web アプリの HTML テンプレートとルート | ルーティングと HTML テンプレートを使ったマルチページサイトのアーキテクチャの足場の作り方を学ぶ | [HTML テンプレートとルート](/7-bank-project/1-template-route/translations/README.ja.md) | ✅ | 🛑 | ✅ | ✅ | ✅ | ✅ | Yohan | +| 22 | [バンキングアプリケーション](/7-bank-project/solution) | ログインと登録フォームの構築 | フォームの構築と検証ルーチンの渡し方について学ぶ | [フォーム](/7-bank-project/2-forms/translations/README.ja.md) | ✅ | 🛑 | ✅ | ✅ | ✅ | ✅ | Yohan | +| 23 | [バンキングアプリケーション](/7-bank-project/solution) | データの取得と利用方法 | アプリのデータの出入り、データの取得方法、保存方法、廃棄方法 | [データ](/7-bank-project/3-data/translations/README.ja.md) | ✅ | 🛑 | ✅ | ✅ | ✅ | ✅ | Yohan | +| 24 | [バンキングアプリケーション](/7-bank-project/solution) | 状態管理の概念 | アプリの状態を保持する方法とプログラムで管理する方法を学ぶ | [状態管理](/7-bank-project/4-state-management/translations/README.ja.md) | ✅ | 🛑 | ✅ | ✅ | ✅ | | Yohan | ## オフラインアクセス From 962caa22df55bb46feca08e54a0650784635181e Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E3=83=8A=E3=83=A2=E3=81=99=E3=81=91?= Date: Tue, 9 Feb 2021 04:57:12 +0900 Subject: [PATCH 7/9] =?UTF-8?q?PR=E7=94=A8=E3=81=AB=E7=8B=AC=E8=87=AA?= =?UTF-8?q?=E3=81=AE=E5=A4=89=E6=9B=B4=E3=81=AE=E5=8F=96=E6=B6=88?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- index.html | 22 +++++++--------------- 1 file changed, 7 insertions(+), 15 deletions(-) diff --git a/index.html b/index.html index 06dab976..75775de4 100644 --- a/index.html +++ b/index.html @@ -1,31 +1,23 @@ - + - 初心者のためのWeb開発 by Microsoft [Web Development for Beginners] (forked by namosuke for Japanese) + Document - - - - - - + - +
From 67fa25a120bc7b2ecf4e44f9a11930b7cb7fd235 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E3=83=8A=E3=83=A2=E3=81=99=E3=81=91?= Date: Tue, 9 Feb 2021 05:10:24 +0900 Subject: [PATCH 8/9] =?UTF-8?q?=E8=87=AA=E5=8B=95=E6=95=B4=E5=BD=A2?= =?UTF-8?q?=E3=81=AE=E5=8F=96=E6=B6=88?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- index.html | 11 +++-------- 1 file changed, 3 insertions(+), 8 deletions(-) diff --git a/index.html b/index.html index 75775de4..202a4877 100644 --- a/index.html +++ b/index.html @@ -1,16 +1,12 @@ - Document - - - - + +
- - \ No newline at end of file + From 641c905b5dcdde3ce852fb98e5802e82bdfc9992 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E3=83=8A=E3=83=A2=E3=81=99=E3=81=91?= Date: Tue, 9 Feb 2021 06:28:25 +0900 Subject: [PATCH 9/9] =?UTF-8?q?=E6=8B=A1=E5=BC=B5=E5=AD=90=E4=BF=AE?= =?UTF-8?q?=E6=AD=A3?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- 3-terrarium/translations/README.ja.md | 6 +++--- .../translations/README.ja.md | 2 +- 7-bank-project/2-forms/translations/README.ja.md | 2 +- 3 files changed, 5 insertions(+), 5 deletions(-) diff --git a/3-terrarium/translations/README.ja.md b/3-terrarium/translations/README.ja.md index af8ca18e..7c0ef58e 100644 --- a/3-terrarium/translations/README.ja.md +++ b/3-terrarium/translations/README.ja.md @@ -6,9 +6,9 @@ # レッスン -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) +1. [HTML 入門](../1-intro-to-html/translations/README.ja.md) +2. [CSS 入門](../2-intro-to-css/translations/README.ja.md) +3. [DOM の操作とクロージャ](../3-intro-to-DOM-and-closures/translations/README.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 index c6ff28b9..257fdf1b 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,7 +12,7 @@ ### 拡張機能で操作する要素の設定: -この時点で、フォーム用の HTML とブラウザ拡張機能用の結果 `
` が構築されています。これからは、`/src/index.js` ファイルを使って少しずつ拡張機能を構築していく必要があります。プロジェクトのセットアップとビルドのプロセスについては [前のレッスン](/5-browser-extension/1-about-browsers/translations/README.ja) を参照してください。 +この時点で、フォーム用の HTML とブラウザ拡張機能用の結果 `
` が構築されています。これからは、`/src/index.js` ファイルを使って少しずつ拡張機能を構築していく必要があります。プロジェクトのセットアップとビルドのプロセスについては [前のレッスン](/5-browser-extension/1-about-browsers/translations/README.ja.md) を参照してください。 `index.js` ファイルの中で作業を行うには、様々なフィールドに関連付けられた値を保持するための `const` 変数を作成することから始めます。 diff --git a/7-bank-project/2-forms/translations/README.ja.md b/7-bank-project/2-forms/translations/README.ja.md index 619254b5..d92e307b 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/translations/README.ja)が完了している必要があります。また、アカウントを作成するためのデータを送信できるように、ローカルに [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)をインストールする必要があります。 ターミナルでこのコマンドを実行することで、サーバーが正常に動作していることを確認することができます。