diff --git a/translated_images/codespace.bcecbdf5d2747d3d17da67a78ad911c8853d68102e34748ec372cde1e9236e1d.ja.png b/translated_images/codespace.bcecbdf5d2747d3d17da67a78ad911c8853d68102e34748ec372cde1e9236e1d.ja.png new file mode 100644 index 000000000..d9eb7664e Binary files /dev/null and b/translated_images/codespace.bcecbdf5d2747d3d17da67a78ad911c8853d68102e34748ec372cde1e9236e1d.ja.png differ diff --git a/translated_images/codespace.bcecbdf5d2747d3d17da67a78ad911c8853d68102e34748ec372cde1e9236e1d.my.png b/translated_images/codespace.bcecbdf5d2747d3d17da67a78ad911c8853d68102e34748ec372cde1e9236e1d.my.png new file mode 100644 index 000000000..20ca00caa Binary files /dev/null and b/translated_images/codespace.bcecbdf5d2747d3d17da67a78ad911c8853d68102e34748ec372cde1e9236e1d.my.png differ diff --git a/translated_images/codespace.bcecbdf5d2747d3d17da67a78ad911c8853d68102e34748ec372cde1e9236e1d.uk.png b/translated_images/codespace.bcecbdf5d2747d3d17da67a78ad911c8853d68102e34748ec372cde1e9236e1d.uk.png new file mode 100644 index 000000000..ca03a5cf7 Binary files /dev/null and b/translated_images/codespace.bcecbdf5d2747d3d17da67a78ad911c8853d68102e34748ec372cde1e9236e1d.uk.png differ diff --git a/translated_images/playground-choice.1d23ba7d407f47584c9f446c77f0bcf70cae794cc9c8d7849a3cca4a3693e6c4.ja.png b/translated_images/playground-choice.1d23ba7d407f47584c9f446c77f0bcf70cae794cc9c8d7849a3cca4a3693e6c4.ja.png new file mode 100644 index 000000000..517f83232 Binary files /dev/null and b/translated_images/playground-choice.1d23ba7d407f47584c9f446c77f0bcf70cae794cc9c8d7849a3cca4a3693e6c4.ja.png differ diff --git a/translated_images/playground-choice.1d23ba7d407f47584c9f446c77f0bcf70cae794cc9c8d7849a3cca4a3693e6c4.my.png b/translated_images/playground-choice.1d23ba7d407f47584c9f446c77f0bcf70cae794cc9c8d7849a3cca4a3693e6c4.my.png new file mode 100644 index 000000000..6be780fc5 Binary files /dev/null and b/translated_images/playground-choice.1d23ba7d407f47584c9f446c77f0bcf70cae794cc9c8d7849a3cca4a3693e6c4.my.png differ diff --git a/translated_images/playground-choice.1d23ba7d407f47584c9f446c77f0bcf70cae794cc9c8d7849a3cca4a3693e6c4.uk.png b/translated_images/playground-choice.1d23ba7d407f47584c9f446c77f0bcf70cae794cc9c8d7849a3cca4a3693e6c4.uk.png new file mode 100644 index 000000000..872402252 Binary files /dev/null and b/translated_images/playground-choice.1d23ba7d407f47584c9f446c77f0bcf70cae794cc9c8d7849a3cca4a3693e6c4.uk.png differ diff --git a/translated_images/playground.d2b927122224ff8ff4028fc842176e353c339147d8925455f36c92fb1655c477.ja.png b/translated_images/playground.d2b927122224ff8ff4028fc842176e353c339147d8925455f36c92fb1655c477.ja.png new file mode 100644 index 000000000..7c44c8ab1 Binary files /dev/null and b/translated_images/playground.d2b927122224ff8ff4028fc842176e353c339147d8925455f36c92fb1655c477.ja.png differ diff --git a/translated_images/playground.d2b927122224ff8ff4028fc842176e353c339147d8925455f36c92fb1655c477.my.png b/translated_images/playground.d2b927122224ff8ff4028fc842176e353c339147d8925455f36c92fb1655c477.my.png new file mode 100644 index 000000000..7fff8b0d9 Binary files /dev/null and b/translated_images/playground.d2b927122224ff8ff4028fc842176e353c339147d8925455f36c92fb1655c477.my.png differ diff --git a/translated_images/playground.d2b927122224ff8ff4028fc842176e353c339147d8925455f36c92fb1655c477.uk.png b/translated_images/playground.d2b927122224ff8ff4028fc842176e353c339147d8925455f36c92fb1655c477.uk.png new file mode 100644 index 000000000..98d141cfb Binary files /dev/null and b/translated_images/playground.d2b927122224ff8ff4028fc842176e353c339147d8925455f36c92fb1655c477.uk.png differ diff --git a/translated_images/screenshot.0a1ee0d123df681b4501eb53ffb267519fcc20aa653eabecef1e7561ddfb1cab.ja.png b/translated_images/screenshot.0a1ee0d123df681b4501eb53ffb267519fcc20aa653eabecef1e7561ddfb1cab.ja.png new file mode 100644 index 000000000..2c4b3b346 Binary files /dev/null and b/translated_images/screenshot.0a1ee0d123df681b4501eb53ffb267519fcc20aa653eabecef1e7561ddfb1cab.ja.png differ diff --git a/translated_images/screenshot.0a1ee0d123df681b4501eb53ffb267519fcc20aa653eabecef1e7561ddfb1cab.my.png b/translated_images/screenshot.0a1ee0d123df681b4501eb53ffb267519fcc20aa653eabecef1e7561ddfb1cab.my.png new file mode 100644 index 000000000..5f42eed4d Binary files /dev/null and b/translated_images/screenshot.0a1ee0d123df681b4501eb53ffb267519fcc20aa653eabecef1e7561ddfb1cab.my.png differ diff --git a/translated_images/screenshot.0a1ee0d123df681b4501eb53ffb267519fcc20aa653eabecef1e7561ddfb1cab.uk.png b/translated_images/screenshot.0a1ee0d123df681b4501eb53ffb267519fcc20aa653eabecef1e7561ddfb1cab.uk.png new file mode 100644 index 000000000..a4ce7d42e Binary files /dev/null and b/translated_images/screenshot.0a1ee0d123df681b4501eb53ffb267519fcc20aa653eabecef1e7561ddfb1cab.uk.png differ diff --git a/translated_images/template.67ad477109d29a2b04599a83c964c87fcde041256d4f04d3589cbb00c696f76c.ja.png b/translated_images/template.67ad477109d29a2b04599a83c964c87fcde041256d4f04d3589cbb00c696f76c.ja.png new file mode 100644 index 000000000..e81d018f7 Binary files /dev/null and b/translated_images/template.67ad477109d29a2b04599a83c964c87fcde041256d4f04d3589cbb00c696f76c.ja.png differ diff --git a/translated_images/template.67ad477109d29a2b04599a83c964c87fcde041256d4f04d3589cbb00c696f76c.my.png b/translated_images/template.67ad477109d29a2b04599a83c964c87fcde041256d4f04d3589cbb00c696f76c.my.png new file mode 100644 index 000000000..21ef761e7 Binary files /dev/null and b/translated_images/template.67ad477109d29a2b04599a83c964c87fcde041256d4f04d3589cbb00c696f76c.my.png differ diff --git a/translated_images/template.67ad477109d29a2b04599a83c964c87fcde041256d4f04d3589cbb00c696f76c.uk.png b/translated_images/template.67ad477109d29a2b04599a83c964c87fcde041256d4f04d3589cbb00c696f76c.uk.png new file mode 100644 index 000000000..9a71e7f32 Binary files /dev/null and b/translated_images/template.67ad477109d29a2b04599a83c964c87fcde041256d4f04d3589cbb00c696f76c.uk.png differ diff --git a/translations/ja/1-getting-started-lessons/1-intro-to-programming-languages/README.md b/translations/ja/1-getting-started-lessons/1-intro-to-programming-languages/README.md index d6bb43243..071dcd1ce 100644 --- a/translations/ja/1-getting-started-lessons/1-intro-to-programming-languages/README.md +++ b/translations/ja/1-getting-started-lessons/1-intro-to-programming-languages/README.md @@ -1,17 +1,17 @@ # プログラミング言語とツールの基礎 -このレッスンでは、プログラミング言語の基本を学びます。ここで扱うトピックは、今日のほとんどの現代的なプログラミング言語に適用されます。「ツールの基礎」セクションでは、開発者として役立つソフトウェアについて学びます。 +このレッスンでは、プログラミング言語の基本について学びます。ここで取り上げるトピックは、今日のほとんどの現代的なプログラミング言語に適用されます。「ツールの基礎」セクションでは、開発者として役立つソフトウェアについて学びます。 -![Intro Programming](../../../../sketchnotes/webdev101-programming.png) +![Intro Programming](../../../../translated_images/webdev101-programming.d6e3f98e61ac4bff0b27dcbf1c3f16c8ed46984866f2d29988929678b0058fde.ja.png) > スケッチノート: [Tomomi Imura](https://twitter.com/girlie_mac) ## 講義前のクイズ @@ -24,15 +24,15 @@ CO_OP_TRANSLATOR_METADATA: - プログラミングとは何か？ - プログラミング言語の種類 - プログラムの基本要素 -- プロフェッショナルな開発者に役立つソフトウェアとツール +- プロフェッショナルな開発者向けの便利なソフトウェアとツール > このレッスンは [Microsoft Learn](https://docs.microsoft.com/learn/modules/web-development-101/introduction-programming/?WT.mc_id=academic-77807-sagibbon) で受講できます！ ## プログラミングとは？ -プログラミング（コーディングとも呼ばれる）は、コンピュータやモバイルデバイスなどの機器に指示を与えるプロセスです。これらの指示はプログラミング言語を使って記述され、デバイスによって解釈されます。これらの指示セットはさまざまな名前で呼ばれることがありますが、*プログラム*、*コンピュータプログラム*、*アプリケーション（アプリ）*、*実行可能ファイル* などが一般的です。 +プログラミング（コーディングとも呼ばれる）は、コンピュータやモバイルデバイスなどの機器に指示を与えるプロセスです。これらの指示はプログラミング言語を使って記述され、デバイスによって解釈されます。これらの指示セットはさまざまな名前で呼ばれることがありますが、*プログラム*、*コンピュータプログラム*、*アプリケーション（アプリ）*、*実行ファイル* などが一般的な名称です。 -*プログラム* はコードで書かれたものすべてを指します。ウェブサイト、ゲーム、スマホアプリなどがプログラムです。コードを書かずにプログラムを作成することも可能ですが、その基盤となるロジックはデバイスによって解釈され、そのロジックはほとんどの場合コードで書かれています。*実行中* または *実行している* プログラムは指示を実行しています。このレッスンを読んでいるデバイスも、画面に表示するためのプログラムを実行しています。 +*プログラム* はコードで記述されたものであれば何でも該当します。ウェブサイト、ゲーム、スマホアプリなどがプログラムの例です。コードを書かずにプログラムを作成することも可能ですが、その基盤となるロジックはデバイスによって解釈され、そのロジックはおそらくコードで記述されています。*実行中* または *コードを実行している* プログラムは指示を実行しています。あなたがこのレッスンを読んでいるデバイスも、画面に表示するためのプログラムを実行しています。 ✅ 少し調べてみましょう: 世界初のコンピュータプログラマーとされる人物は誰でしょう？ @@ -42,9 +42,9 @@ CO_OP_TRANSLATOR_METADATA: プログラミング言語にはさまざまな形式があり、目的も異なる場合があります。例えば、JavaScriptは主にウェブアプリケーションに使用され、Bashは主にオペレーティングシステムに使用されます。 -*低水準言語* は通常、デバイスが指示を解釈するために必要なステップが少なくなります。しかし、*高水準言語* が人気なのは、その読みやすさとサポートの充実度です。JavaScriptは高水準言語とされています。 +*低水準言語* は、デバイスが指示を解釈するために必要なステップが *高水準言語* よりも少ないことが一般的です。しかし、高水準言語が人気なのは、その読みやすさとサポートの充実度です。JavaScriptは高水準言語とされています。 -以下のコードは、高水準言語であるJavaScriptと低水準言語であるARMアセンブリコードの違いを示しています。 +以下のコードは、JavaScriptという高水準言語とARMアセンブリコードという低水準言語の違いを示しています。 ```javascript let number = 10 @@ -85,15 +85,15 @@ back add r0,r1 信じられないかもしれませんが、*どちらも同じことをしています*: フィボナッチ数列を10まで表示しています。 -✅ フィボナッチ数列は [定義](https://en.wikipedia.org/wiki/Fibonacci_number) によると、0と1から始まり、各数がその前の2つの数の合計となる数列です。フィボナッチ数列の最初の10個の数字は、0, 1, 1, 2, 3, 5, 8, 13, 21, 34です。 +✅ フィボナッチ数列は [定義](https://en.wikipedia.org/wiki/Fibonacci_number) によると、0と1から始まり、各数がその前の2つの数の合計となる一連の数です。フィボナッチ数列に従う最初の10個の数は、0, 1, 1, 2, 3, 5, 8, 13, 21, 34です。 ## プログラムの要素 -プログラム内の単一の指示は *ステートメント* と呼ばれ、通常は指示が終了する場所、つまり *終端* を示す文字や行間隔があります。プログラムの終端方法は言語によって異なります。 +プログラム内の単一の指示は *ステートメント* と呼ばれ、通常は指示が終了する場所、つまり *終端* を示す文字や行間が含まれています。プログラムの終端方法は言語によって異なります。 -プログラム内のステートメントは、ユーザーやその他の場所から提供されるデータに依存して指示を実行することがあります。データはプログラムの動作を変える可能性があるため、プログラミング言語にはデータを一時的に保存して後で使用できる方法が備わっています。これを *変数* と呼びます。変数は、デバイスにデータをメモリに保存するよう指示するステートメントです。プログラム内の変数は代数の変数に似ており、ユニークな名前を持ち、その値は時間とともに変化する可能性があります。 +プログラム内のステートメントは、ユーザーやその他の場所から提供されるデータに依存して指示を実行する場合があります。データはプログラムの動作を変える可能性があるため、プログラミング言語にはデータを一時的に保存して後で使用できる方法が備わっています。これを *変数* と呼びます。変数は、デバイスにデータをメモリに保存するよう指示するステートメントです。プログラム内の変数は代数の変数に似ており、ユニークな名前を持ち、その値は時間とともに変化する可能性があります。 -一部のステートメントがデバイスによって実行されない可能性があります。これは通常、開発者によって意図的に書かれた場合や、予期しないエラーが発生した場合に起こります。このようなアプリケーションの制御は、より堅牢で保守性の高いものにします。通常、これらの制御の変更は特定の条件が満たされたときに発生します。現代のプログラミングでよく使われるステートメントの1つに `if..else` ステートメントがあります。 +一部のステートメントがデバイスによって実行されない可能性があります。これは通常、開発者によって意図的に書かれた場合や、予期しないエラーが発生した場合に起こります。このようなアプリケーションの制御は、より堅牢で保守性の高いものにします。通常、これらの制御の変更は特定の条件が満たされた場合に発生します。現代のプログラミングでよく使われる制御ステートメントの1つが `if..else` ステートメントです。 ✅ このタイプのステートメントについては、後のレッスンでさらに学びます。 @@ -101,9 +101,9 @@ back add r0,r1 [![Tools of the Trade](https://img.youtube.com/vi/69WJeXGBdxg/0.jpg)](https://youtube.com/watch?v=69WJeXGBdxg "Tools of the Trade") -> 🎥 上の画像をクリックしてツールに関する動画を視聴 +> 🎥 上の画像をクリックするとツールに関する動画が再生されます -このセクションでは、プロフェッショナルな開発の旅を始める際に非常に役立つソフトウェアについて学びます。 +このセクションでは、プロフェッショナルな開発の旅を始める際に役立つソフトウェアについて学びます。 **開発環境** とは、開発者がソフトウェアを書く際に頻繁に使用するツールや機能の独自のセットです。これらのツールは開発者の特定のニーズに合わせてカスタマイズされている場合があり、開発者が仕事や個人プロジェクトの優先順位を変更したり、異なるプログラミング言語を使用したりする場合に変化することがあります。開発環境は、それを使用する開発者と同じくらいユニークです。 @@ -111,11 +111,11 @@ back add r0,r1 ソフトウェア開発において最も重要なツールの1つがエディタです。エディタはコードを書く場所であり、時にはコードを実行する場所でもあります。 -開発者がエディタを利用する理由は以下の通りです: +開発者がエディタを使用する理由は以下の通りです: -- *デバッグ* は、コードを1行ずつステップ実行してバグやエラーを見つけるのに役立ちます。一部のエディタにはデバッグ機能があり、特定のプログラミング言語に合わせてカスタマイズして追加することができます。 -- *構文ハイライト* は、コードに色やテキストのフォーマットを追加し、読みやすくします。ほとんどのエディタはカスタマイズ可能な構文ハイライトを提供しています。 -- *拡張機能と統合* は、開発者による開発者のための専門的なツールです。これらのツールは基本エディタに組み込まれていません。例えば、多くの開発者はコードの動作を説明するためにドキュメントを作成します。彼らはスペルチェック拡張機能をインストールして、ドキュメント内の誤字を見つけることができます。ほとんどの拡張機能は特定のエディタ内で使用することを目的としており、ほとんどのエディタには利用可能な拡張機能を検索する方法が備わっています。 +- *デバッグ* は、コードを1行ずつステップ実行することでバグやエラーを発見するのに役立ちます。一部のエディタにはデバッグ機能があり、特定のプログラミング言語に合わせてカスタマイズして追加することができます。 +- *構文ハイライト* は、コードに色やテキストフォーマットを追加し、読みやすくします。ほとんどのエディタはカスタマイズ可能な構文ハイライトを提供しています。 +- *拡張機能と統合* は、開発者による開発者のための専門的なツールです。これらのツールは基本エディタに組み込まれていません。例えば、多くの開発者はコードの動作を説明するためにドキュメントを作成します。彼らはドキュメント内のタイプミスを見つけるためにスペルチェック拡張機能をインストールするかもしれません。ほとんどの拡張機能は特定のエディタ内で使用することを目的としており、ほとんどのエディタには利用可能な拡張機能を検索する方法が備わっています。 - *カスタマイズ* により、開発者は自分のニーズに合わせた独自の開発環境を作成できます。ほとんどのエディタは非常にカスタマイズ可能で、開発者が独自の拡張機能を作成することも可能です。 #### 人気のエディタとウェブ開発拡張機能 @@ -135,9 +135,9 @@ back add r0,r1 ### ブラウザ -もう1つの重要なツールがブラウザです。ウェブ開発者は、ウェブ上でコードがどのように動作するかを確認するためにブラウザを利用します。また、HTMLのようにエディタで書かれたウェブページの視覚的要素を表示するためにも使用されます。 +もう1つ重要なツールがブラウザです。ウェブ開発者は、ウェブ上でコードがどのように動作するかを確認するためにブラウザを使用します。また、HTMLのようにエディタで記述されたウェブページの視覚的要素を表示するためにも使用されます。 -多くのブラウザには *開発者ツール* (DevTools) が搭載されており、アプリケーションに関する重要な情報を収集・キャプチャするための便利な機能が含まれています。例えば、ウェブページにエラーがある場合、エラーが発生したタイミングを知ることが役立つことがあります。ブラウザのDevToolsはこの情報をキャプチャするように設定できます。 +多くのブラウザには *開発者ツール* (DevTools) が搭載されており、アプリケーションに関する重要な情報を収集・キャプチャするための便利な機能が含まれています。例えば、ウェブページにエラーがある場合、それがいつ発生したかを知ることが役立つことがあります。ブラウザのDevToolsは、この情報をキャプチャするように設定できます。 #### 人気のブラウザとDevTools @@ -147,7 +147,7 @@ back add r0,r1 ### コマンドラインツール -一部の開発者は、日常の作業においてグラフィカルなビューをあまり必要とせず、コマンドラインを利用することを好みます。コードを書くには大量のタイピングが必要であり、一部の開発者はキーボードでの作業の流れを中断したくないと考えます。彼らはキーボードショートカットを使ってデスクトップウィンドウを切り替えたり、異なるファイルで作業したり、ツールを使用したりします。ほとんどのタスクはマウスで完了できますが、コマンドラインを使用する利点の1つは、マウスとキーボードを切り替える必要なく多くの作業をコマンドラインツールで完了できることです。コマンドラインのもう1つの利点は、カスタマイズ可能であり、カスタム設定を保存して後で変更したり、他の開発マシンにインポートしたりできることです。開発環境は開発者ごとに非常にユニークであるため、コマンドラインを完全に避ける人もいれば、完全に依存する人もおり、その両方を好む人もいます。 +一部の開発者は、日常の作業においてグラフィカルなビューをあまり使用せず、コマンドラインを好むことがあります。コードを書くには大量のタイピングが必要であり、一部の開発者はキーボードでの作業の流れを中断したくないと考えます。彼らはキーボードショートカットを使用してデスクトップウィンドウを切り替えたり、異なるファイルで作業したり、ツールを使用したりします。ほとんどのタスクはマウスで完了できますが、コマンドラインを使用する利点の1つは、マウスとキーボードを切り替えることなく多くの作業をコマンドラインツールで完了できることです。コマンドラインのもう1つの利点は、設定を保存して後で変更したり、他の開発マシンにインポートしたりできることです。開発環境が開発者ごとに非常にユニークであるため、一部の開発者はコマンドラインを完全に避けることもあれば、完全に依存することもあり、またはその両方を好む場合もあります。 ### 人気のコマンドラインオプション @@ -182,17 +182,17 @@ back add r0,r1 ### ドキュメント -開発者が新しいことを学びたいとき、最も頼りにするのはドキュメントです。開発者はツールや言語を正しく使用する方法を学ぶため、またその仕組みを深く理解するためにドキュメントを利用します。 +開発者が新しいことを学びたいと思ったとき、最も頼りにするのはドキュメントです。開発者はツールや言語を正しく使用する方法を学ぶため、またその仕組みを深く理解するためにドキュメントを利用します。 #### ウェブ開発に関する人気のドキュメント -- [Mozilla Developer Network (MDN)](https://developer.mozilla.org/docs/Web) - Mozillaによる、[Firefox](https://www.mozilla.org/firefox/)ブラウザの発行元 +- [Mozilla Developer Network (MDN)](https://developer.mozilla.org/docs/Web), Mozillaによる、[Firefox](https://www.mozilla.org/firefox/)ブラウザの発行元 - [Frontend Masters](https://frontendmasters.com/learn/) -- [Web.dev](https://web.dev) - Googleによる、[Chrome](https://www.google.com/chrome/)の発行元 -- [Microsoftの開発者向けドキュメント](https://docs.microsoft.com/microsoft-edge/#microsoft-edge-for-developers) - [Microsoft Edge](https://www.microsoft.com/edge)向け +- [Web.dev](https://web.dev), Googleによる、[Chrome](https://www.google.com/chrome/)の発行元 +- [Microsoftの開発者向けドキュメント](https://docs.microsoft.com/microsoft-edge/#microsoft-edge-for-developers), [Microsoft Edge](https://www.microsoft.com/edge)向け - [W3 Schools](https://www.w3schools.com/where_to_start.asp) -✅ 調査してみましょう: ウェブ開発者の環境の基本を理解した今、ウェブデザイナーの環境と比較してみましょう。 +✅ 調査してみましょう: ウェブ開発者の環境の基本を理解したところで、ウェブデザイナーの環境と比較してみましょう。 --- @@ -201,15 +201,17 @@ back add r0,r1 いくつかのプログラミング言語を比較してみましょう。JavaScriptとJavaのユニークな特徴は何ですか？COBOLとGoではどうでしょう？ ## 講義後のクイズ -[講義後のクイズ](https://ff-quizzes.netlify.app/web/quiz/2) +[講義後のクイズ](https://ff-quizzes.netlify.app/web/) ## 復習と自己学習 -プログラマーが利用できるさまざまな言語について少し学びましょう。1つの言語で1行を書き、それを別の2つの言語で書き直してみてください。何を学びましたか？ +プログラマーが利用できるさまざまな言語について少し学びましょう。1つの言語で1行を書いてみて、それを別の2つの言語で書き直してみてください。何を学びましたか？ ## 課題 [ドキュメントを読む](assignment.md) +--- + **免責事項**: -この文書は、AI翻訳サービス [Co-op Translator](https://github.com/Azure/co-op-translator) を使用して翻訳されています。正確性を期すよう努めておりますが、自動翻訳には誤りや不正確さが含まれる可能性があります。元の言語で記載された原文が公式な情報源と見なされるべきです。重要な情報については、専門の人間による翻訳を推奨します。この翻訳の使用に起因する誤解や誤認について、当方は一切の責任を負いません。 \ No newline at end of file +この文書は、AI翻訳サービス [Co-op Translator](https://github.com/Azure/co-op-translator) を使用して翻訳されています。正確性を追求しておりますが、自動翻訳には誤りや不正確な部分が含まれる可能性があることをご承知ください。元の言語で記載された文書が正式な情報源とみなされるべきです。重要な情報については、専門の人間による翻訳を推奨します。この翻訳の使用に起因する誤解や誤認について、当方は一切の責任を負いません。 \ No newline at end of file diff --git a/translations/ja/1-getting-started-lessons/2-github-basics/README.md b/translations/ja/1-getting-started-lessons/2-github-basics/README.md index 5c9d7cf9c..7bef08ec6 100644 --- a/translations/ja/1-getting-started-lessons/2-github-basics/README.md +++ b/translations/ja/1-getting-started-lessons/2-github-basics/README.md @@ -1,29 +1,29 @@ -# GitHubの概要 +# GitHubの紹介 -このレッスンでは、コードのホスティングと変更管理を行うプラットフォームであるGitHubの基本を学びます。 +このレッスンでは、コードをホストし、変更を管理するためのプラットフォームであるGitHubの基本を学びます。 -![GitHubの概要](../../../../sketchnotes/webdev101-github.png) +![GitHubの紹介](../../../../translated_images/webdev101-github.8846d7971abef6f947909b4f9d343e2a23778aa716ca6b9d71df7174ee5009ac.ja.png) > スケッチノート: [Tomomi Imura](https://twitter.com/girlie_mac) -## 講義前のクイズ -[講義前のクイズ](https://ff-quizzes.netlify.app/web/quiz/3) +## 講義前クイズ +[講義前クイズ](https://ff-quizzes.netlify.app) ## はじめに このレッスンでは以下を学びます： -- 自分のマシンでの作業を追跡する方法 +- 自分のマシン上での作業の追跡 - 他の人とプロジェクトを進める方法 -- オープンソースソフトウェアに貢献する方法 +- オープンソースソフトウェアへの貢献方法 ### 前提条件 @@ -34,26 +34,26 @@ Gitがインストールされていない場合は、[Gitをダウンロード] * `git config --global user.name "your-name"` * `git config --global user.email "your-email"` -Gitがすでに設定されているか確認するには以下を入力します： +Gitがすでに設定されているか確認するには、以下を入力します： `git config --list` -また、GitHubアカウント、コードエディタ（例: Visual Studio Code）、ターミナル（またはコマンドプロンプト）が必要です。 +また、GitHubアカウント、コードエディタ（例: Visual Studio Code）、ターミナル（またはコマンドプロンプト）も必要です。 -[github.com](https://github.com/)にアクセスして、まだアカウントを作成していない場合は作成し、ログインしてプロファイルを完成させてください。 +[github.com](https://github.com/)にアクセスして、まだアカウントを作成していない場合は作成し、ログインしてプロフィールを埋めてください。 ✅ GitHubは世界で唯一のコードリポジトリではありません。他にもありますが、GitHubが最もよく知られています。 ### 準備 -ローカルマシン（ノートPCまたはPC）にコードプロジェクトのフォルダと、他の人のプロジェクトに貢献する方法を学ぶための例として使用するGitHub上の公開リポジトリが必要です。 +ローカルマシン（ノートPCまたはPC）にコードプロジェクトのフォルダを用意し、他の人のプロジェクトに貢献する方法を学ぶための例として、GitHub上に公開リポジトリを作成してください。 --- ## コード管理 -ローカルにコードプロジェクトのフォルダがあり、その進捗をバージョン管理システムであるGitを使って追跡したいとします。Gitを使うことは、未来の自分へのラブレターを書くようなものだと例えられることがあります。数日、数週間、数ヶ月後にコミットメッセージを読むことで、なぜその決定をしたのかを思い出したり、変更を「巻き戻す」ことができます。ただし、良い「コミットメッセージ」を書いた場合に限ります。 +ローカルにコードプロジェクトのフォルダがあり、その進捗をバージョン管理システムであるgitを使って追跡したいとします。一部の人は、gitを使うことを「未来の自分へのラブレターを書くこと」に例えます。数日、数週間、または数か月後にコミットメッセージを読むことで、なぜその決定をしたのかを思い出したり、変更を「ロールバック」したりすることができます。ただし、良い「コミットメッセージ」を書いた場合に限ります。 -### タスク: リポジトリを作成してコードをコミットする +### タスク: リポジトリを作成し、コードをコミットする > 動画をチェック > @@ -70,19 +70,19 @@ Gitがすでに設定されているか確認するには以下を入力しま cd [name of your folder] ``` -1. **Gitリポジトリを初期化**。プロジェクトで以下を入力します： +1. **gitリポジトリを初期化**。プロジェクトで以下を入力します： ```bash git init ``` -1. **ステータスを確認**。リポジトリのステータスを確認するには以下を入力します： +1. **ステータスを確認**。リポジトリのステータスを確認するには、以下を入力します： ```bash git status ``` - 出力は以下のようになることがあります： + 出力は次のようになる場合があります： ```output Changes not staged for commit: @@ -93,16 +93,16 @@ Gitがすでに設定されているか確認するには以下を入力しま modified: file2.txt ``` - 通常、`git status`コマンドは、リポジトリに保存する準備ができたファイルや変更があるファイルなどを教えてくれます。 + 通常、`git status`コマンドは、リポジトリに保存する準備ができているファイルや、変更が加えられたファイルなどを教えてくれます。 1. **すべてのファイルを追跡対象に追加** - これはファイルをステージングエリアに追加することを意味します。 + これは、ファイルをステージングエリアに追加することとも呼ばれます。 ```bash git add . ``` - `git add`と`.`の引数は、すべてのファイルと変更を追跡対象にすることを示します。 + `git add`に`.`を付けることで、すべてのファイルと変更を追跡対象に追加します。 1. **選択したファイルを追跡対象に追加** @@ -110,35 +110,35 @@ Gitがすでに設定されているか確認するには以下を入力しま git add [file or folder name] ``` - すべてのファイルを一度にコミットしたくない場合に、選択したファイルだけをステージングエリアに追加するのに役立ちます。 + すべてのファイルを一度にコミットしたくない場合に、選択したファイルだけをステージングエリアに追加できます。 -1. **すべてのファイルをステージング解除** +1. **すべてのファイルをステージ解除** ```bash git reset ``` - このコマンドは、すべてのファイルを一度にステージング解除するのに役立ちます。 + このコマンドは、すべてのファイルを一度にステージ解除するのに役立ちます。 -1. **特定のファイルをステージング解除** +1. **特定のファイルをステージ解除** ```bash git reset [file or folder name] ``` - このコマンドは、次のコミットに含めたくない特定のファイルだけをステージング解除するのに役立ちます。 + 次のコミットに含めたくない特定のファイルだけをステージ解除するのに役立ちます。 -1. **作業を永続化**。この時点で、ファイルをいわゆるステージングエリアに追加しました。Gitがファイルを追跡している場所です。変更を永続化するには、ファイルをコミットする必要があります。コミットを作成するには、`git commit`コマンドを使用します。コミットはリポジトリの履歴における保存ポイントを表します。以下を入力してコミットを作成します： +1. **作業を永続化**。この時点で、ファイルをいわゆるステージングエリアに追加しました。Gitがファイルを追跡している場所です。変更を永続化するには、ファイルをコミットする必要があります。`git commit`コマンドを使用してコミットを作成します。コミットは、リポジトリの履歴における保存ポイントを表します。以下を入力してコミットを作成します： ```bash git commit -m "first commit" ``` - これにより、すべてのファイルがコミットされ、「first commit」というメッセージが追加されます。将来のコミットメッセージでは、変更の種類を伝えるためにもっと具体的な説明をすることをお勧めします。 + これにより、すべてのファイルがコミットされ、「first commit」というメッセージが追加されます。将来のコミットメッセージでは、どのような変更を行ったのかを伝えるために、より具体的な説明を記述することをお勧めします。 -1. **ローカルGitリポジトリをGitHubと接続**。ローカルリポジトリはマシン上で便利ですが、ファイルのバックアップをどこかに保存したり、他の人をリポジトリに招待したりしたい場合があります。そのための素晴らしい場所がGitHubです。すでにGitHubでリポジトリを作成しているので、ローカルGitリポジトリをGitHubと接続するだけです。`git remote add`コマンドを使用します。以下のコマンドを入力してください： +1. **ローカルGitリポジトリをGitHubと接続**。ローカルリポジトリはマシン上で便利ですが、ファイルのバックアップをどこかに保存したり、他の人を招待してリポジトリで作業してもらいたい場合があります。そのための素晴らしい場所がGitHubです。すでにGitHubでリポジトリを作成しているので、ローカルGitリポジトリをGitHubと接続するだけです。`git remote add`コマンドを使用します。以下のコマンドを入力します： - > 注意：コマンドを入力する前に、GitHubリポジトリページに移動してリポジトリURLを見つけてください。このURLを以下のコマンドで使用します。```https://github.com/username/repository_name.git```をGitHub URLに置き換えてください。 + > 注意：コマンドを入力する前に、GitHubリポジトリページに移動してリポジトリURLを見つけてください。このURLを以下のコマンドで使用します。```https://github.com/username/repository_name.git```をGitHubのURLに置き換えてください。 ```bash git remote add origin https://github.com/username/repository_name.git @@ -146,7 +146,7 @@ Gitがすでに設定されているか確認するには以下を入力しま これにより、「origin」という名前のリモート接続が作成され、先ほど作成したGitHubリポジトリを指します。 -1. **ローカルファイルをGitHubに送信**。これまでのところ、ローカルリポジトリとGitHubリポジトリの間に接続を作成しました。次に、これらのファイルをGitHubに送信します。以下の`git push`コマンドを使用します： +1. **ローカルファイルをGitHubに送信**。これまでにローカルリポジトリとGitHubリポジトリの間に接続を作成しました。次に、以下の`git push`コマンドを使用してファイルをGitHubに送信します： > 注意：デフォルトのブランチ名が```main```と異なる場合があります。 @@ -156,7 +156,7 @@ Gitがすでに設定されているか確認するには以下を入力しま これにより、「main」ブランチのコミットがGitHubに送信されます。 -2. **さらに変更を加える**。変更を続けてGitHubにプッシュしたい場合は、以下の3つのコマンドを使用するだけです： +2. **さらに変更を加える場合**。変更を続けてGitHubにプッシュしたい場合は、以下の3つのコマンドを使用するだけです： ```bash git add . @@ -164,21 +164,21 @@ Gitがすでに設定されているか確認するには以下を入力しま git push ``` - > ヒント：`.gitignore`ファイルを採用して、GitHubに表示したくないファイルを追跡対象から除外することを検討してください。例えば、同じフォルダに保存しているメモファイルなどで、公開リポジトリには不要なものです。`.gitignore`ファイルのテンプレートは[.gitignore templates](https://github.com/github/gitignore)で見つけることができます。 + > ヒント：`.gitignore`ファイルを採用して、追跡したくないファイルがGitHubに表示されないようにすることも検討してください。例えば、同じフォルダに保存しているメモファイルなどで、公開リポジトリには不要なものです。`.gitignore`ファイルのテンプレートは[.gitignore templates](https://github.com/github/gitignore)で見つけることができます。 #### コミットメッセージ -優れたGitコミットの件名は以下の文を完成させます： -「このコミットが適用されると、<件名>」 +優れたGitコミットの件名行は、次の文を完成させる形になります： +「このコミットが適用されると、<件名行>」 -件名では命令形の現在形を使用します。「変更する」ではなく「変更した」や「変更する予定」ではありません。 -件名と同様に、本文（オプション）でも命令形の現在形を使用します。本文には変更の動機を含め、以前の動作と対比させます。`なぜ`を説明するのであって、`どのように`ではありません。 +件名には命令形の現在形を使用します。「変更する」ではなく「変更した」や「変更すること」でもありません。 +件名と同様に、本文（任意）でも命令形の現在形を使用します。本文には変更の動機を含め、以前の動作と対比させます。`どうやって`ではなく、`なぜ`を説明します。 -✅ GitHubを少し探索してみてください。非常に優れたコミットメッセージを見つけることができますか？非常に簡素なものはどうですか？コミットメッセージで伝えるべき最も重要で有用な情報は何だと思いますか？ +✅ GitHubを少し探索してみてください。特に優れたコミットメッセージを見つけられますか？非常に簡素なものはどうですか？コミットメッセージで伝えるべき最も重要で有用な情報は何だと思いますか？ ### タスク: コラボレーション -GitHubにコードをアップロードする主な理由は、他の開発者とコラボレーションを可能にすることです。 +GitHubにコードを置く主な理由は、他の開発者とコラボレーションを可能にすることです。 ## 他の人とプロジェクトを進める @@ -188,29 +188,29 @@ GitHubにコードをアップロードする主な理由は、他の開発者 リポジトリ内で、`Insights > Community`に移動して、プロジェクトが推奨されるコミュニティ標準とどのように比較されるかを確認します。 -以下はGitHubリポジトリを改善するためのポイントです： -- **説明**。プロジェクトに説明を追加しましたか？ -- **README**。READMEを追加しましたか？GitHubは[READMEの書き方](https://docs.github.com/articles/about-readmes/?WT.mc_id=academic-77807-sagibbon)についてのガイダンスを提供しています。 +以下は、GitHubリポジトリを改善するためのいくつかのポイントです： +- **説明**。プロジェクトの説明を追加しましたか？ +- **README**。READMEを追加しましたか？GitHubは[READMEの書き方](https://docs.github.com/articles/about-readmes/?WT.mc_id=academic-77807-sagibbon)についてガイドを提供しています。 - **貢献ガイドライン**。プロジェクトに[貢献ガイドライン](https://docs.github.com/articles/setting-guidelines-for-repository-contributors/?WT.mc_id=academic-77807-sagibbon)がありますか？ - **行動規範**。[行動規範](https://docs.github.com/articles/adding-a-code-of-conduct-to-your-project/)がありますか？ - **ライセンス**。おそらく最も重要な[ライセンス](https://docs.github.com/articles/adding-a-license-to-a-repository/)がありますか？ -これらのリソースは新しいチームメンバーのオンボーディングに役立ちます。そして、これらは通常、新しい貢献者がコードを見る前にプロジェクトが自分の時間を費やす価値があるかどうかを判断するために見るものです。 +これらのリソースは、新しいチームメンバーのオンボーディングに役立ちます。また、新しい貢献者がコードを見る前に、プロジェクトが自分の時間を費やす価値がある場所かどうかを判断するために通常確認するものです。 -✅ READMEファイルは準備に時間がかかることがありますが、忙しいメンテナーによってしばしば無視されます。特に説明的なREADMEの例を見つけることができますか？注：良いREADMEを作成するための[ツール](https://www.makeareadme.com/)がいくつかありますので、試してみてください。 +✅ READMEファイルは準備に時間がかかるものの、忙しいメンテナーによってしばしば軽視されます。特に詳細なREADMEの例を見つけられますか？注：良いREADMEを作成するための[ツール](https://www.makeareadme.com/)もありますので、試してみてください。 ### タスク: コードをマージする -貢献ドキュメントは人々がプロジェクトに貢献するのを助けます。どのような種類の貢献を求めているか、プロセスがどのように機能するかを説明します。貢献者はGitHubのリポジトリに貢献するために一連のステップを踏む必要があります： +貢献ドキュメントは、人々がプロジェクトに貢献するのを助けます。どのような種類の貢献を求めているのか、プロセスがどのように機能するのかを説明します。貢献者は、GitHubのリポジトリに貢献するために一連のステップを実行する必要があります： -1. **リポジトリをフォークする**。通常、プロジェクトをフォークするように求めます。フォークとは、リポジトリの複製を自分のGitHubプロファイルに作成することを意味します。 +1. **リポジトリをフォークする**。通常、プロジェクトをフォークするように求めます。フォークとは、自分のGitHubプロファイルにリポジトリの複製を作成することを意味します。 1. **クローン**。そこからプロジェクトをローカルマシンにクローンします。 -1. **ブランチを作成**。作業用のブランチを作成するように求めます。 -1. **変更を1つの領域に集中**。貢献者に1度に1つのことに集中するように求めます。そうすることで、彼らの作業をマージする可能性が高くなります。例えば、バグ修正、新機能の追加、複数のテストの更新を行った場合、3つのうち2つまたは1つしか実装できない場合はどうしますか？ +1. **ブランチを作成**。作業用のブランチを作成するように依頼します。 +1. **変更を1つの領域に集中**。貢献者に、1回の貢献で1つのことに集中するよう依頼します。そうすることで、作業をマージする可能性が高くなります。例えば、バグ修正、新機能の追加、いくつかのテストの更新を同時に行った場合、3つのうち2つまたは1つしか実装できない場合があります。 ✅ ブランチが特に重要になる状況を想像してみてください。どのようなユースケースが考えられますか？ -> 注意：自分自身もブランチを作成して作業することで、他の人に良い例を示しましょう。現在「チェックアウト」しているブランチにコミットが行われます。`git status`を使用して、どのブランチにいるか確認してください。 +> 注意：自分自身もブランチを作成して作業することで、他の人に良い例を示しましょう。現在「チェックアウト」しているブランチにコミットが行われます。どのブランチにいるかを確認するには、`git status`を使用します。 貢献者のワークフローを見てみましょう。貢献者がすでにリポジトリをフォークし、クローンしていると仮定します。つまり、ローカルマシンで作業可能なGitリポジトリが準備されています： @@ -226,67 +226,67 @@ GitHubにコードをアップロードする主な理由は、他の開発者 git switch [branch-name] ``` -1. **作業を行う**。この時点で変更を加えます。以下のコマンドを使用してGitに変更を伝えるのを忘れないでください： +1. **作業を行う**。この時点で変更を加えます。以下のコマンドを使用してGitに変更を通知するのを忘れないでください： ```bash git add . git commit -m "my changes" ``` - コミットに良い名前を付けることを忘れないでください。自分のためにも、リポジトリのメンテナーのためにも役立ちます。 + コミットには良い名前を付けてください。自分のためにも、リポジトリのメンテナーのためにも役立ちます。 -1. **作業を`main`ブランチと統合**。作業が完了したら、`main`ブランチと作業を統合したいと思います。`main`ブランチはその間に変更されている可能性があるので、以下のコマンドで最新の状態に更新してください： +1. **作業を`main`ブランチと統合**。作業が完了したら、`main`ブランチと作業を統合したいとします。その間に`main`ブランチが変更されている可能性があるため、以下のコマンドで最新の状態に更新してください： ```bash git switch main git pull ``` - この時点で、競合（Gitが変更を簡単に統合できない状況）が作業ブランチで発生することを確認してください。そのため、以下のコマンドを実行します： + この時点で、_コンフリクト_（Gitが変更を簡単に統合できない状況）が作業ブランチで発生しないようにします。そのため、以下のコマンドを実行します： ```bash git switch [branch_name] git merge main ``` - これにより、`main`ブランチからすべての変更がブランチに取り込まれ、問題なく作業を続けることができます。もし競合が発生した場合は、VS CodeがGitが混乱している箇所を教えてくれるので、影響を受けたファイルを変更して最も正確な内容を指定します。 + これにより、`main`からのすべての変更がブランチに取り込まれ、通常はそのまま作業を続けることができます。そうでない場合は、VS CodeがGitが「混乱」している場所を教えてくれるので、影響を受けたファイルを変更して、どの内容が最も正確かを指定します。 -1. **作業をGitHubに送信**。作業をGitHubに送信するには2つのことが必要です。ブランチをリポジトリにプッシュし、PR（プルリクエスト）を開くことです。 +1. **作業をGitHubに送信**。作業をGitHubに送信するには、2つのことを行います。ブランチをリポジトリにプッシュし、PR（プルリクエスト）を開きます。 ```bash git push --set-upstream origin [branch-name] ``` - 上記のコマンドはフォークしたリポジトリにブランチを作成します。 + 上記のコマンドは、フォークしたリポジトリにブランチを作成します。 -1. **PRを開く**。次に、PRを開きます。フォークしたリポジトリのGitHubページに移動します。GitHubで新しいPRを作成するかどうかを尋ねる表示があり、それをクリックすると、コミットメッセージのタイトルを変更したり、より適切な説明を追加したりするインターフェースに移動します。これで、フォークしたリポジトリのメンテナーがこのPRを確認し、_うまくいけば_ PRを評価してマージしてくれるでしょう。これで貢献者になりました、やったね！ +1. **PRを開く**。次に、PRを開きます。GitHubのフォークしたリポジトリに移動します。GitHubで新しいPRを作成するかどうかを尋ねるインジケーターが表示されます。それをクリックすると、コミットメッセージのタイトルを変更したり、より適切な説明を追加したりできるインターフェースに移動します。これで、フォークしたリポジトリのメンテナーがこのPRを確認し、_うまくいけば_感謝してPRをマージしてくれるでしょう。これであなたは貢献者です。おめでとうございます :) -1. **クリーンアップ**。PRが正常にマージされた後は、クリーンアップすることが良い習慣とされています。ローカルブランチとGitHubにプッシュしたブランチの両方をクリーンアップしたいと思います。まず、以下のコマンドでローカルブランチを削除します： +1. **クリーンアップ**。PRが正常にマージされた後は、クリーンアップするのが良い習慣とされています。ローカルブランチとGitHubにプッシュしたブランチの両方をクリーンアップします。まず、以下のコマンドでローカルで削除します： ```bash git branch -d [branch-name] ``` -GitHub のフォークしたリポジトリのページに移動し、先ほどプッシュしたリモートブランチを削除してください。 -`Pull request`（プルリクエスト）という言葉は少し変に思えるかもしれません。実際にはプロジェクトに変更を「プッシュ」したいわけですが、メンテナー（プロジェクトの所有者）やコアチームがその変更をプロジェクトの「メイン」ブランチにマージする前に検討する必要があります。つまり、メンテナーに変更の判断を「リクエスト」しているのです。 + 次に、フォークしたリポジトリのGitHubページに移動し、プッシュしたリモートブランチを削除してください。 +`Pull request`（プルリクエスト）という言葉は、一見すると少し変に思えるかもしれません。なぜなら、実際にはプロジェクトに変更を「プッシュ」したいからです。しかし、メンテナー（プロジェクトの所有者）やコアチームが、あなたの変更をプロジェクトの「メイン」ブランチにマージする前に、その変更を検討する必要があります。つまり、メンテナーに変更の判断を「リクエスト」しているわけです。 -プルリクエストは、ブランチで導入された差分をレビュー、コメント、統合テストなどを通じて比較・議論する場です。良いプルリクエストは、コミットメッセージとほぼ同じルールに従います。例えば、作業が特定の課題を解決する場合、課題トラッカーの課題番号を参照として追加できます。これは `#` に続けて課題番号を記載することで行います。例: `#97` +プルリクエストは、ブランチで導入された差分をレビュー、コメント、統合テストなどを通じて比較・議論する場です。良いプルリクエストは、コミットメッセージとほぼ同じルールに従います。例えば、作業が特定の課題を解決する場合、課題トラッカーの課題番号を参照として追加することができます。これは、`#`の後に課題番号を記載することで行います。例えば、`#97`のように記述します。 -🤞すべてのチェックが通り、プロジェクトの所有者があなたの変更をプロジェクトにマージしてくれることを祈りましょう🤞 +🤞すべてのチェックが通り、プロジェクト所有者があなたの変更をプロジェクトにマージしてくれることを祈りましょう🤞 -現在のローカル作業ブランチを GitHub 上の対応するリモートブランチの新しいコミットで更新するには、以下を実行します： +現在のローカル作業ブランチを、GitHub上の対応するリモートブランチの最新コミットで更新するには、以下を実行します： `git pull` ## オープンソースへの貢献方法 -まず、GitHub 上で興味のあるリポジトリ（または **repo**）を見つけ、そこに変更を加えたいと思ったら、その内容を自分のマシンにコピーします。 +まずは、GitHubで興味のあるリポジトリ（**repo**）を見つけ、それに変更を加えたいと思ったら、その内容を自分のマシンにコピーしましょう。 -✅ '初心者向け' のリポジトリを見つける良い方法は、[タグ 'good-first-issue' で検索すること](https://github.blog/2020-01-22-browse-good-first-issues-to-start-contributing-to-open-source/)です。 +✅ 初心者向けのリポジトリを見つける良い方法は、[「good-first-issue」タグで検索すること](https://github.blog/2020-01-22-browse-good-first-issues-to-start-contributing-to-open-source/)です。 -![リポジトリをローカルにコピー](../../../../1-getting-started-lessons/2-github-basics/images/clone_repo.png) +![リポジトリをローカルにコピー](../../../../translated_images/clone_repo.5085c48d666ead57664f050d806e325d7f883be6838c821e08bc823ab7c66665.ja.png) -コードをコピーする方法はいくつかあります。一つの方法は、HTTPS、SSH、または GitHub CLI（コマンドラインインターフェース）を使用してリポジトリの内容を「クローン」することです。 +コードをコピーする方法はいくつかあります。その一つは、HTTPS、SSH、またはGitHub CLI（コマンドラインインターフェース）を使用してリポジトリの内容を「クローン」する方法です。 ターミナルを開き、以下のようにリポジトリをクローンします： `git clone https://github.com/ProjectURL` @@ -294,44 +294,46 @@ GitHub のフォークしたリポジトリのページに移動し、先ほど プロジェクトで作業するには、正しいフォルダに移動します： `cd ProjectURL` -また、[Codespaces](https://github.com/features/codespaces)（GitHub の組み込みコードエディタ/クラウド開発環境）や [GitHub Desktop](https://desktop.github.com/) を使用してプロジェクト全体を開くこともできます。 +また、[Codespaces](https://github.com/features/codespaces)（GitHubの埋め込みコードエディタ/クラウド開発環境）や[GitHub Desktop](https://desktop.github.com/)を使用してプロジェクト全体を開くこともできます。 -最後に、コードを zip フォルダとしてダウンロードすることも可能です。 +最後に、コードをZIPフォルダとしてダウンロードすることも可能です。 -### GitHub に関するいくつかの興味深いポイント +### GitHubに関するいくつかの興味深いポイント -GitHub 上の公開リポジトリは、スターを付けたり、ウォッチしたり、「フォーク」したりすることができます。スターを付けたリポジトリは、右上のドロップダウンメニューから確認できます。これはコードのブックマークのようなものです。 +GitHub上の公開リポジトリは、スターを付けたり、ウォッチしたり、「フォーク」することができます。スターを付けたリポジトリは、右上のドロップダウンメニューから確認できます。これは、コードをブックマークするようなものです。 -プロジェクトには、通常 GitHub の「Issues」タブにある課題トラッカーがあり、そこでプロジェクトに関連する問題について議論します。また、「Pull Requests」タブでは、進行中の変更について議論やレビューが行われます。 +プロジェクトには、通常「Issues」タブにある課題トラッカー（特にGitHub上）があります。ここでは、プロジェクトに関連する問題について議論が行われます。また、「Pull Requests」タブでは、進行中の変更について議論やレビューが行われます。 -プロジェクトによっては、フォーラム、メーリングリスト、Slack、Discord、IRC などのチャットチャンネルで議論が行われることもあります。 +プロジェクトによっては、フォーラム、メーリングリスト、Slack、Discord、IRCなどのチャットチャンネルで議論が行われることもあります。 -✅ 新しい GitHub リポジトリを見て回り、設定を編集したり、リポジトリに情報を追加したり、プロジェクト（例えばカンバンボード）を作成したりしてみてください。できることはたくさんあります！ +✅ 新しいGitHubリポジトリを見て回り、設定を編集したり、リポジトリに情報を追加したり、プロジェクト（例えばカンバンボード）を作成したりしてみましょう。できることはたくさんあります！ --- ## 🚀 チャレンジ -友達とペアを組んでお互いのコードに取り組みましょう。共同でプロジェクトを作成し、コードをフォークし、ブランチを作成し、変更をマージしてください。 +友達とペアを組んでお互いのコードに取り組みましょう。共同でプロジェクトを作成し、コードをフォークし、ブランチを作成し、変更をマージしてみてください。 ## 講義後のクイズ -[講義後のクイズ](https://ff-quizzes.netlify.app/web/quiz/4) +[講義後のクイズ](https://ff-quizzes.netlify.app/web/en/) ## 復習と自己学習 -[オープンソースソフトウェアへの貢献について](https://opensource.guide/how-to-contribute/#how-to-submit-a-contribution)をさらに読んでみましょう。 +[オープンソースソフトウェアへの貢献についてもっと読む](https://opensource.guide/how-to-contribute/#how-to-submit-a-contribution)。 -[Git チートシート](https://training.github.com/downloads/github-git-cheat-sheet/)。 +[Gitチートシート](https://training.github.com/downloads/github-git-cheat-sheet/)。 -練習、練習、練習。GitHub には [skills.github.com](https://skills.github.com) を通じて素晴らしい学習パスが用意されています： +練習、練習、練習。GitHubには[skills.github.com](https://skills.github.com)で利用できる素晴らしい学習パスがあります： -- [GitHub の最初の一週間](https://skills.github.com/#first-week-on-github) +- [GitHubでの最初の1週間](https://skills.github.com/#first-week-on-github) -さらに高度なコースも見つかります。 +さらに高度なコースも見つけることができます。 ## 課題 -[GitHub の最初の一週間コース](https://skills.github.com/#first-week-on-github)を完了してください。 +[GitHubでの最初の1週間コース](https://skills.github.com/#first-week-on-github)を完了してください。 + +--- **免責事項**: -この文書は、AI翻訳サービス [Co-op Translator](https://github.com/Azure/co-op-translator) を使用して翻訳されています。正確性を追求しておりますが、自動翻訳には誤りや不正確な部分が含まれる可能性があることをご承知ください。元の言語で記載された文書が正式な情報源とみなされるべきです。重要な情報については、専門の人間による翻訳を推奨します。この翻訳の使用に起因する誤解や誤解釈について、当方は一切の責任を負いません。 \ No newline at end of file +この文書は、AI翻訳サービス [Co-op Translator](https://github.com/Azure/co-op-translator) を使用して翻訳されています。正確性を追求しておりますが、自動翻訳には誤りや不正確な部分が含まれる可能性があることをご承知ください。元の言語で記載された文書が正式な情報源とみなされるべきです。重要な情報については、専門の人間による翻訳を推奨します。この翻訳の使用に起因する誤解や誤解釈について、当方は責任を負いません。 \ No newline at end of file diff --git a/translations/ja/1-getting-started-lessons/3-accessibility/README.md b/translations/ja/1-getting-started-lessons/3-accessibility/README.md index 3b690e075..d216ba1a4 100644 --- a/translations/ja/1-getting-started-lessons/3-accessibility/README.md +++ b/translations/ja/1-getting-started-lessons/3-accessibility/README.md @@ -1,25 +1,25 @@ # アクセシブルなウェブページの作成 -![アクセシビリティについて](../../../../sketchnotes/webdev101-a11y.png) +![アクセシビリティについて](../../../../translated_images/webdev101-a11y.8ef3025c858d897a403a1a42c0897c76e11b724d9a8a0c0578dd4316f7507622.ja.png) > スケッチノート: [Tomomi Imura](https://twitter.com/girlie_mac) -## 講義前のクイズ -[講義前のクイズ](https://ff-quizzes.netlify.app/web/quiz/5) +## 講義前のクイズ +[講義前のクイズ](https://ff-quizzes.netlify.app/web/) -> ウェブの力はその普遍性にあります。障害の有無にかかわらず、誰もがアクセスできることが重要です。 -> +> Webの力はその普遍性にあります。障害の有無にかかわらず、誰もがアクセスできることが重要です。 +> > \- Sir Timothy Berners-Lee, W3Cディレクター、ワールドワイドウェブの発明者 -この引用は、アクセシブルなウェブサイトを作成する重要性を完璧に強調しています。すべての人がアクセスできないアプリケーションは、定義上排他的です。ウェブ開発者として、常にアクセシビリティを念頭に置くべきです。最初からこの点に焦点を当てることで、作成するページがすべての人にアクセス可能であることを確保する道を進むことができます。このレッスンでは、ウェブ資産がアクセシブルであることを確認するためのツールと、アクセシビリティを考慮して構築する方法について学びます。 +この引用は、アクセシブルなウェブサイトを作成する重要性を完璧に強調しています。すべての人がアクセスできないアプリケーションは、定義上排他的です。ウェブ開発者として、常にアクセシビリティを念頭に置くべきです。最初からこの点に焦点を当てることで、作成するページがすべての人にアクセス可能であることを確保する道を進むことができます。このレッスンでは、ウェブ資産がアクセシブルであることを確保するためのツールと、アクセシビリティを考慮した構築方法について学びます。 > このレッスンは[Microsoft Learn](https://docs.microsoft.com/learn/modules/web-development-101/accessibility/?WT.mc_id=academic-77807-sagibbon)で受講できます！ @@ -27,35 +27,35 @@ CO_OP_TRANSLATOR_METADATA: ### スクリーンリーダー -最もよく知られているアクセシビリティツールの1つがスクリーンリーダーです。 +最もよく知られているアクセシビリティツールの一つがスクリーンリーダーです。 -[スクリーンリーダー](https://en.wikipedia.org/wiki/Screen_reader)は、視覚障害のある人々がよく使用するクライアントです。ブラウザが共有したい情報を適切に伝えるようにするのと同様に、スクリーンリーダーが同じように情報を伝えることを確認する必要があります。 +[スクリーンリーダー](https://en.wikipedia.org/wiki/Screen_reader)は、視覚障害を持つ人々がよく使用するクライアントです。ブラウザが共有したい情報を適切に伝えるようにするのと同様に、スクリーンリーダーが同じ情報を正しく伝えるようにする必要があります。 -スクリーンリーダーの基本的な機能は、ページを上から下まで音声で読み上げることです。ページがすべてテキストで構成されている場合、リーダーはブラウザと同様に情報を伝えます。しかし、ウェブページは純粋にテキストだけで構成されることはほとんどありません。リンク、グラフィック、色、その他の視覚的要素が含まれることが一般的です。これらの情報がスクリーンリーダーによって正しく読み取られるように注意を払う必要があります。 +スクリーンリーダーは基本的に、ページを上から下まで音声で読み上げます。ページがすべてテキストで構成されている場合、リーダーはブラウザと同様に情報を伝えます。しかし、ウェブページは純粋にテキストだけで構成されることはほとんどありません。リンク、グラフィック、色、その他の視覚的要素が含まれることが一般的です。これらの情報がスクリーンリーダーによって正しく読み取られるように注意を払う必要があります。 -すべてのウェブ開発者はスクリーンリーダーに慣れるべきです。上記で強調したように、それはユーザーが利用するクライアントです。ブラウザの操作方法に慣れているのと同じように、スクリーンリーダーの操作方法を学ぶべきです。幸いなことに、ほとんどのオペレーティングシステムにはスクリーンリーダーが組み込まれています。 +すべてのウェブ開発者はスクリーンリーダーに慣れるべきです。上記で強調したように、それはユーザーが利用するクライアントです。ブラウザの操作方法に精通しているのと同じように、スクリーンリーダーの操作方法を学ぶべきです。幸いなことに、スクリーンリーダーはほとんどのオペレーティングシステムに組み込まれています。 -一部のブラウザには、テキストを音声で読み上げたり、基本的なナビゲーション機能を提供するアクセシビリティツールが組み込まれている場合があります。例えば、[Edgeブラウザのアクセシビリティツール](https://support.microsoft.com/help/4000734/microsoft-edge-accessibility-features)などです。これらも重要なアクセシビリティツールですが、スクリーンリーダーとは異なる機能を持ち、スクリーンリーダーのテストツールとして誤解してはいけません。 +一部のブラウザには、テキストを音声で読み上げたり、基本的なナビゲーション機能を提供するアクセシビリティツールが組み込まれています。例えば、[Edgeブラウザのアクセシビリティツール](https://support.microsoft.com/help/4000734/microsoft-edge-accessibility-features)などです。ただし、これらはスクリーンリーダーとは異なる機能を持ち、スクリーンリーダーのテストツールとして誤解してはいけません。 ✅ スクリーンリーダーとブラウザのテキストリーダーを試してみましょう。Windowsでは[ナレーター](https://support.microsoft.com/windows/complete-guide-to-narrator-e4397a0d-ef4f-b386-d8ae-c172f109bdb1/?WT.mc_id=academic-77807-sagibbon)がデフォルトで含まれており、[JAWS](https://webaim.org/articles/jaws/)や[NVDA](https://www.nvaccess.org/about-nvda/)もインストール可能です。macOSやiOSでは[VoiceOver](https://support.apple.com/guide/voiceover/welcome/10)がデフォルトでインストールされています。 ### ズーム -視覚障害のある人々がよく使用するもう1つのツールがズーム機能です。最も基本的なズームは静的ズームで、`Control + プラス記号 (+)`を使用するか、画面解像度を下げることで制御されます。このタイプのズームはページ全体をリサイズするため、[レスポンシブデザイン](https://developer.mozilla.org/docs/Learn/CSS/CSS_layout/Responsive_Design)を使用して、ズームレベルが高い場合でも良好なユーザー体験を提供することが重要です。 +視覚障害を持つ人々がよく使用するもう一つのツールがズーム機能です。最も基本的なズームは静的ズームで、`Control + プラス記号 (+)`や画面解像度を下げることで制御されます。このタイプのズームはページ全体をリサイズするため、[レスポンシブデザイン](https://developer.mozilla.org/docs/Learn/CSS/CSS_layout/Responsive_Design)を使用して、ズームレベルが高くても良好なユーザー体験を提供することが重要です。 -もう1つのタイプのズームは、特定の画面領域を拡大してパンする特殊なソフトウェアを使用するもので、実際の拡大鏡を使用するようなものです。Windowsでは[拡大鏡](https://support.microsoft.com/windows/use-magnifier-to-make-things-on-the-screen-easier-to-see-414948ba-8b1c-d3bd-8615-0e5e32204198)が組み込まれており、[ZoomText](https://www.freedomscientific.com/training/zoomtext/getting-started/)はより多くの機能を持つサードパーティ製の拡大ソフトウェアです。macOSやiOSには[Zoom](https://www.apple.com/accessibility/mac/vision/)という拡大ソフトウェアが組み込まれています。 +もう一つのタイプのズームは、画面の特定の領域を拡大してパンする特殊なソフトウェアを使用します。これは実際の拡大鏡を使用するようなものです。Windowsでは[拡大鏡](https://support.microsoft.com/windows/use-magnifier-to-make-things-on-the-screen-easier-to-see-414948ba-8b1c-d3bd-8615-0e5e32204198)が組み込まれており、[ZoomText](https://www.freedomscientific.com/training/zoomtext/getting-started/)はより多くの機能を持つサードパーティ製の拡大ソフトウェアです。macOSやiOSには[Zoom](https://www.apple.com/accessibility/mac/vision/)という拡大ソフトウェアが組み込まれています。 ### コントラストチェッカー -ウェブサイトの色は、色覚異常のあるユーザーや低コントラストの色が見づらい人々のニーズに応えるよう慎重に選ぶ必要があります。 +ウェブサイトの色は、色覚異常のユーザーや低コントラストの色を見るのが難しい人々のニーズに応えるよう慎重に選ぶ必要があります。 -✅ お気に入りのウェブサイトをブラウザ拡張機能（例: [WCAGのコントラストチェッカー](https://microsoftedge.microsoft.com/addons/detail/wcag-color-contrast-check/idahaggnlnekelhgplklhfpchbfdmkjp?hl=en-US&WT.mc_id=academic-77807-sagibbon)）で色の使用をテストしてみましょう。何が学べますか？ +✅ お気に入りのウェブサイトをブラウザ拡張機能で色の使用をテストしてみましょう。例えば[WCAGのコントラストチェッカー](https://microsoftedge.microsoft.com/addons/detail/wcag-color-contrast-check/idahaggnlnekelhgplklhfpchbfdmkjp?hl=en-US&WT.mc_id=academic-77807-sagibbon)などです。何が学べますか？ ### Lighthouse ブラウザの開発者ツールエリアにはLighthouseツールがあります。このツールは、ウェブサイトのアクセシビリティ（およびその他の分析）を初めて確認するために重要です。Lighthouseだけに頼るべきではありませんが、100%のスコアは基準として非常に役立ちます。 -✅ ブラウザの開発者ツールパネルでLighthouseを見つけ、任意のサイトを分析してみましょう。何がわかりますか？ +✅ ブラウザの開発者ツールパネルでLighthouseを見つけ、任意のサイトを分析してみましょう。何が分かりますか？ ## アクセシビリティを考慮したデザイン @@ -69,23 +69,23 @@ CO_OP_TRANSLATOR_METADATA: ### 色の安全なパレット -人々は世界をさまざまな方法で見ていますが、これには色も含まれます。サイトのカラースキームを選択する際には、すべての人にとってアクセシブルであることを確認する必要があります。優れた[カラーパレット生成ツールはColor Safe](http://colorsafe.co/)です。 +人々は世界を異なる方法で見ますが、これには色も含まれます。サイトのカラースキームを選択する際には、すべての人にとってアクセシブルであることを確認する必要があります。素晴らしい[カラーパレット生成ツールはColor Safe](http://colorsafe.co/)です。 ✅ 色の使用が非常に問題のあるウェブサイトを特定してください。なぜ問題なのでしょうか？ ### 正しいHTMLを使用する -CSSやJavaScriptを使用すると、任意の要素を任意のタイプのコントロールのように見せることができます。例えば、``を使用して` ``` -これは保存された情報が入力され、ローカルストレージに保存されるフォームです。 +このフォームは、保存された情報を入力し、ローカルストレージに保存するためのものです。 次に、結果表示エリアを作成します。最後のフォームタグの下にいくつかのdivを追加します： @@ -146,29 +146,29 @@ src npm install ``` -このコマンドはnpm（Node Package Manager）を使用して、拡張機能のビルドプロセスに必要なwebpackをインストールします。ビルドプロセスの出力は`/dist/main.js`で確認できます。コードがバンドルされていることがわかります。 +このコマンドは、Node Package Manager（npm）を使用して、拡張機能のビルドプロセスに必要なwebpackをインストールします。このプロセスの出力は、`/dist/main.js`で確認できます。コードがバンドルされているのがわかるでしょう。 -現時点では、拡張機能をビルドし、Edgeに拡張機能として展開すると、フォームがきれいに表示されるはずです。 +現時点では、拡張機能をビルドし、Edgeに拡張機能としてデプロイすれば、フォームがきれいに表示されるはずです。 -おめでとうございます！ブラウザ拡張機能の作成に向けた最初のステップを踏み出しました。次のレッスンでは、さらに機能的で便利なものにしていきます。 +おめでとうございます！ ブラウザ拡張機能の作成に向けた最初のステップを踏み出しました。次のレッスンでは、これをさらに機能的で便利なものにしていきます。 --- ## 🚀 チャレンジ -ブラウザ拡張機能ストアを見て、1つをブラウザにインストールしてみましょう。そのファイルを興味深い方法で調べることができます。何を発見しましたか？ +ブラウザ拡張機能ストアを見て、1つインストールしてみましょう。そのファイルを調べてみると、興味深い発見があるかもしれません。何を見つけましたか？ -## 講義後のクイズ +## 講義後クイズ -[講義後のクイズ](https://ff-quizzes.netlify.app/web/quiz/24) +[講義後クイズ](https://ff-quizzes.netlify.app/web/quiz/24) ## 復習と自己学習 -このレッスンでは、ウェブブラウザの歴史について少し学びました。この機会に、ワールドワイドウェブの発明者がその使用方法をどのように考えていたかについて、さらに学んでみましょう。役立つサイトには以下があります： +このレッスンでは、ウェブブラウザの歴史について少し学びました。この機会に、ワールドワイドウェブの発明者たちがその利用をどのように想定していたかについて、さらに学んでみましょう。役立つサイトには以下があります： -[ウェブブラウザの歴史](https://www.mozilla.org/firefox/browsers/browser-history/) +[The History of Web Browsers](https://www.mozilla.org/firefox/browsers/browser-history/) -[ウェブの歴史](https://webfoundation.org/about/vision/history-of-the-web/) +[History of the Web](https://webfoundation.org/about/vision/history-of-the-web/) [ティム・バーナーズ＝リーとのインタビュー](https://www.theguardian.com/technology/2019/mar/12/tim-berners-lee-on-30-years-of-the-web-if-we-dream-a-little-we-can-get-the-web-we-want) @@ -176,5 +176,7 @@ npm install [拡張機能をリスタイルする](assignment.md) +--- + **免責事項**: この文書は、AI翻訳サービス [Co-op Translator](https://github.com/Azure/co-op-translator) を使用して翻訳されています。正確性を追求しておりますが、自動翻訳には誤りや不正確な部分が含まれる可能性があることをご承知ください。元の言語で記載された文書が正式な情報源とみなされるべきです。重要な情報については、専門の人間による翻訳を推奨します。この翻訳の使用に起因する誤解や誤解釈について、当方は責任を負いません。 \ No newline at end of file diff --git a/translations/ja/5-browser-extension/2-forms-browsers-local-storage/README.md b/translations/ja/5-browser-extension/2-forms-browsers-local-storage/README.md index 827d6dd1f..e0e4e9acd 100644 --- a/translations/ja/5-browser-extension/2-forms-browsers-local-storage/README.md +++ b/translations/ja/5-browser-extension/2-forms-browsers-local-storage/README.md @@ -1,13 +1,13 @@ -# ブラウザ拡張プロジェクト パート2: APIの呼び出しとローカルストレージの利用 +# ブラウザ拡張プロジェクト パート2: APIの呼び出しとローカルストレージの使用 ## 講義前クイズ @@ -15,15 +15,15 @@ CO_OP_TRANSLATOR_METADATA: ### はじめに -このレッスンでは、ブラウザ拡張のフォームを使ってAPIを呼び出し、その結果を拡張内に表示する方法を学びます。また、ブラウザのローカルストレージにデータを保存し、後で参照・利用する方法についても学びます。 +このレッスンでは、ブラウザ拡張のフォームを送信してAPIを呼び出し、その結果をブラウザ拡張内に表示する方法を学びます。また、ブラウザのローカルストレージにデータを保存し、後で参照・使用する方法についても学びます。 ✅ 適切なファイル内の番号付きセグメントに従ってコードを配置してください。 -### 拡張内で操作する要素を設定する +### 拡張機能で操作する要素を設定する -ここまでで、ブラウザ拡張のフォームと結果を表示する`
`のHTMLを作成しました。これ以降は、`/src/index.js`ファイルで作業を進め、拡張を少しずつ構築していきます。プロジェクトのセットアップやビルドプロセスについては[前回のレッスン](../1-about-browsers/README.md)を参照してください。 +ここまでで、ブラウザ拡張のフォームと結果を表示する`
`のHTMLを作成しました。これ以降は、`/src/index.js`ファイルで作業を進め、拡張機能を少しずつ構築していきます。プロジェクトのセットアップやビルドプロセスについては[前回のレッスン](../1-about-browsers/README.md)を参照してください。 -`index.js`ファイルで作業を開始し、まずは各フィールドに関連付けられた値を保持するための`const`変数を作成します。 +`index.js`ファイルで作業を開始し、まず各フィールドに関連付けられた値を保持するための`const`変数を作成します。 ```JavaScript // form fields @@ -45,7 +45,7 @@ const clearBtn = document.querySelector('.clear-btn'); ### リスナーを追加する -次に、フォームとリセットボタンにイベントリスナーを追加します。これにより、ユーザーがフォームを送信したりリセットボタンをクリックしたりすると、何かが起こります。また、ファイルの末尾にアプリを初期化する呼び出しを追加します。 +次に、フォームとリセットボタンにイベントリスナーを追加します。これにより、ユーザーがフォームを送信したりリセットボタンをクリックしたりすると何かが起こります。また、ファイルの末尾にアプリを初期化する呼び出しを追加します。 ```JavaScript form.addEventListener('submit', (e) => handleSubmit(e)); @@ -53,11 +53,11 @@ clearBtn.addEventListener('click', (e) => reset(e)); init(); ``` -✅ フォーム送信やクリックイベントをリスニングする際の省略形に注目してください。このイベントは`handleSubmit`や`reset`関数に渡されます。この省略形を長い形式で書き換えることはできますか？どちらの形式が好みですか？ +✅ フォーム送信やクリックイベントをリスニングするための簡略化された記述方法に注目してください。このイベントがhandleSubmitやreset関数に渡される仕組みを確認できます。この簡略化された記述を長い形式で書き換えることはできますか？どちらの形式が好みですか？ -### `init()`関数と`reset()`関数を構築する +### init()関数とreset()関数を構築する -次に、拡張を初期化する関数`init()`を構築します。 +次に、拡張機能を初期化する関数であるinit()を構築します。 ```JavaScript function init() { @@ -95,32 +95,32 @@ function reset(e) { この関数には興味深いロジックがあります。内容を読み解いてみてください。 -- ユーザーがローカルストレージにAPIキーと地域コードを保存しているかどうかを確認するための2つの`const`が設定されます。 -- どちらかが`null`の場合、フォームのスタイルを変更して表示します（`display: 'block'`）。 -- 結果、ローディング、`clearBtn`を非表示にし、エラーテキストを空文字列に設定します。 +- 2つの`const`が設定され、ユーザーがローカルストレージにAPIKeyと地域コードを保存しているかどうかを確認します。 +- どちらかがnullの場合、フォームのスタイルを変更して表示を'block'にします。 +- 結果、ローディング、clearBtnを非表示にし、エラーテキストを空文字列に設定します。 - キーと地域が存在する場合、以下のルーチンを開始します： - - APIを呼び出して炭素使用量データを取得する - - 結果エリアを非表示にする - - フォームを非表示にする - - リセットボタンを表示する + - APIを呼び出して炭素使用量データを取得 + - 結果エリアを非表示 + - フォームを非表示 + - リセットボタンを表示 -次に進む前に、ブラウザで利用可能な非常に重要な概念について学ぶのが役立ちます：[LocalStorage](https://developer.mozilla.org/docs/Web/API/Window/localStorage)。LocalStorageは、ブラウザ内で文字列を`key-value`ペアとして保存する便利な方法です。このタイプのウェブストレージは、JavaScriptを使用してブラウザ内のデータを管理するために操作できます。LocalStorageは期限切れになりませんが、もう一つのウェブストレージであるSessionStorageは、ブラウザを閉じるとクリアされます。これらのストレージの種類には、それぞれ利点と欠点があります。 +次に進む前に、ブラウザで利用可能な非常に重要な概念について学ぶことが役立ちます：[LocalStorage](https://developer.mozilla.org/docs/Web/API/Window/localStorage)。LocalStorageは、ブラウザ内で文字列を`key-value`ペアとして保存する便利な方法です。このタイプのウェブストレージは、JavaScriptを使用してブラウザ内のデータを管理するために操作できます。LocalStorageは期限切れになりませんが、もう一つの種類であるSessionStorageはブラウザを閉じるとクリアされます。これらのストレージの種類には、それぞれ利点と欠点があります。 > 注意 - ブラウザ拡張には独自のローカルストレージがあります。メインブラウザウィンドウは別のインスタンスであり、別々に動作します。 -APIキーを文字列値として設定すると、Edgeで「ウェブページを検査」（ブラウザを右クリックして検査）し、ストレージを確認することで設定されていることがわかります。 +APIKeyを文字列値として設定すると、Edgeで「ウェブページを検査」することで確認できます（ブラウザを右クリックして検査を選択）。その後、アプリケーションタブに移動してストレージを確認します。 -![ローカルストレージペイン](../../../../5-browser-extension/2-forms-browsers-local-storage/images/localstorage.png) +![ローカルストレージペイン](../../../../translated_images/localstorage.472f8147b6a3f8d141d9551c95a2da610ac9a3c6a73d4a1c224081c98bae09d9.ja.png) -✅ LocalStorageにデータを保存したくない状況について考えてみてください。一般的に、APIキーをLocalStorageに保存するのは良くないアイデアです！その理由がわかりますか？今回の場合、アプリは学習目的でのみ使用され、アプリストアに公開されることはないため、この方法を使用します。 +✅ LocalStorageにデータを保存しない方が良い状況について考えてみてください。一般的に、APIキーをLocalStorageに保存するのは良くないアイデアです！その理由がわかりますか？今回の場合、アプリは学習目的のみで使用され、アプリストアに公開されることはないため、この方法を使用します。 -LocalStorageを操作するには、Web APIを使用して`getItem()`、`setItem()`、または`removeItem()`を使用します。これらはほとんどのブラウザで広くサポートされています。 +Web APIを使用してLocalStorageを操作する際には、`getItem()`、`setItem()`、または`removeItem()`を使用します。これらはほとんどのブラウザで広くサポートされています。 `displayCarbonUsage()`関数を構築する前に、初期フォーム送信を処理する機能を構築しましょう。 ### フォーム送信を処理する -イベント引数`(e)`を受け取る`handleSubmit`関数を作成します。このイベントが伝播するのを止め（この場合、ブラウザのリフレッシュを止めたい）、新しい関数`setUpUser`を呼び出し、`apiKey.value`と`region.value`の引数を渡します。この方法で、適切なフィールドが入力された際に初期フォームから取得された2つの値を使用します。 +イベント引数`(e)`を受け取る`handleSubmit`という関数を作成します。このイベントが伝播するのを止め（この場合、ブラウザのリフレッシュを止めたい）、新しい関数`setUpUser`を呼び出し、`apiKey.value`と`region.value`の引数を渡します。この方法で、適切なフィールドが入力された際に初期フォームから取得された2つの値を使用します。 ```JavaScript function handleSubmit(e) { @@ -129,11 +129,11 @@ function handleSubmit(e) { } ``` -✅ 復習 - 前回のレッスンで設定したHTMLには、`value`がキャプチャされる2つの入力フィールドがあり、これらはファイルの冒頭で設定した`const`によって取得されます。また、両方とも`required`属性が設定されているため、ブラウザはユーザーが`null`値を入力するのを防ぎます。 +✅ 復習 - 前回のレッスンで設定したHTMLには、`value`がキャプチャされる2つの入力フィールドがあり、これらはファイルの冒頭で設定した`const`によって取得されます。また、両方とも`required`属性が設定されているため、ブラウザはユーザーがnull値を入力するのを防ぎます。 ### ユーザーを設定する -次に進み、`setUpUser`関数を作成します。ここでは、APIキーと地域名のローカルストレージ値を設定します。新しい関数を追加します： +次に進み、`setUpUser`関数を構築します。ここでは、apiKeyとregionNameのローカルストレージ値を設定します。新しい関数を追加します。 ```JavaScript function setUpUser(apiKey, regionName) { @@ -151,19 +151,19 @@ function setUpUser(apiKey, regionName) { ### 炭素使用量を表示する -いよいよAPIをクエリする時です！ +いよいよAPIをクエリする時が来ました！ -進む前に、APIについて話しましょう。API、つまり[アプリケーションプログラミングインターフェース](https://www.webopedia.com/TERM/A/API.html)は、ウェブ開発者のツールボックスにおける重要な要素です。APIは、プログラム同士が標準的な方法で相互作用し、インターフェースを提供する手段を提供します。例えば、データベースをクエリする必要があるウェブサイトを構築している場合、誰かが使用可能なAPIを作成しているかもしれません。APIには多くの種類がありますが、最も人気のあるものの一つが[REST API](https://www.smashingmagazine.com/2018/01/understanding-using-rest-api/)です。 +進む前に、APIについて話しましょう。API、つまり[アプリケーションプログラミングインターフェース](https://www.webopedia.com/TERM/A/API.html)は、ウェブ開発者のツールボックスにおける重要な要素です。APIは、プログラム同士が標準的な方法で相互作用し、インターフェースを提供する仕組みを提供します。例えば、データベースをクエリする必要があるウェブサイトを構築している場合、誰かが使用するためのAPIを作成しているかもしれません。APIには多くの種類がありますが、その中でも人気があるのが[REST API](https://www.smashingmagazine.com/2018/01/understanding-using-rest-api/)です。 -✅ 'REST'は'Representational State Transfer'の略で、さまざまに構成されたURLを使用してデータを取得する特徴があります。開発者が利用可能なさまざまな種類のAPIについて少し調べてみてください。どの形式が魅力的に感じますか？ +✅ 'REST'という用語は'Representational State Transfer'を意味し、さまざまに構成されたURLを使用してデータを取得する特徴があります。開発者が利用可能なAPIのさまざまな種類について少し調べてみてください。どの形式が魅力的に感じますか？ -この関数について重要な点があります。まず、[`async`キーワード](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Statements/async_function)に注目してください。関数を非同期的に動作させることで、データが返されるなどのアクションが完了するまで待機してから処理を続行します。 +この関数について重要な点をいくつか挙げます。まず、[`async`キーワード](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Statements/async_function)に注目してください。関数を非同期的に動作させることで、データが返されるなどのアクションが完了するまで待機してから処理を続行します。 -こちらは`async`についての簡単な動画です： +`async`についての簡単な動画はこちらです： [![非同期処理とAwaitによるPromise管理](https://img.youtube.com/vi/YwmlRkrxvkk/0.jpg)](https://youtube.com/watch?v=YwmlRkrxvkk "非同期処理とAwaitによるPromise管理") -> 🎥 上の画像をクリックすると、`async/await`に関する動画が再生されます。 +> 🎥 上の画像をクリックすると、async/awaitに関する動画が再生されます。 C02Signal APIをクエリする新しい関数を作成します： @@ -207,14 +207,14 @@ async function displayCarbonUsage(apiKey, region) { この関数は大きなものです。何が行われているのでしょうか？ -- ベストプラクティスに従い、`async`キーワードを使用してこの関数を非同期的に動作させます。この関数には`try/catch`ブロックが含まれており、APIがデータを返すとPromiseを返します。APIの応答速度を制御することはできないため（応答しない可能性もあります！）、非同期的に呼び出すことでこの不確実性を処理します。 +- ベストプラクティスに従い、`async`キーワードを使用してこの関数を非同期的に動作させます。この関数には`try/catch`ブロックが含まれており、APIがデータを返すとPromiseを返します。APIの応答速度を制御することはできないため（応答しない場合もあります）、非同期的に呼び出すことでこの不確実性を処理します。 - co2signal APIをクエリして地域のデータを取得し、APIキーを使用します。このキーを使用するには、ヘッダーのパラメータで認証を行う必要があります。 -- APIが応答すると、その応答データのさまざまな要素を画面の設定された部分に割り当てます。 +- APIが応答すると、その応答データのさまざまな要素を画面の対応する部分に割り当てます。 - エラーが発生した場合や結果がない場合は、エラーメッセージを表示します。 ✅ 非同期プログラミングパターンを使用することは、ツールボックスにおける非常に有用なツールの一つです。[さまざまな構成方法](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Statements/async_function)について読んでみてください。 -おめでとうございます！拡張をビルド（`npm run build`）し、拡張ペインでリフレッシュすると、動作する拡張が完成します！唯一動作していないのはアイコンで、次のレッスンで修正します。 +おめでとうございます！拡張機能をビルド（`npm run build`）して拡張機能ペインでリフレッシュすると、動作する拡張機能が完成します！唯一動作していないのはアイコンで、次のレッスンで修正します。 --- @@ -228,11 +228,13 @@ async function displayCarbonUsage(apiKey, region) { ## 復習と自己学習 -このレッスンでは、LocalStorageとAPIについて学びました。どちらもプロフェッショナルなウェブ開発者にとって非常に有用です。これら2つがどのように連携するかについて考えてみてください。APIを使用するウェブサイトを設計する際に、どのようにアイテムを保存するかを考えてみましょう。 +このレッスンでは、LocalStorageとAPIについて学びました。どちらもプロフェッショナルなウェブ開発者にとって非常に有用です。これら2つがどのように連携するかについて考えてみてください。APIを使用するためにアイテムを保存するウェブサイトをどのように設計するかを考えてみましょう。 ## 課題 [APIを採用する](assignment.md) +--- + **免責事項**: -この文書は、AI翻訳サービス [Co-op Translator](https://github.com/Azure/co-op-translator) を使用して翻訳されています。正確性を期すよう努めておりますが、自動翻訳には誤りや不正確な部分が含まれる可能性があります。元の言語で記載された原文が公式な情報源と見なされるべきです。重要な情報については、専門の人間による翻訳を推奨します。本翻訳の使用に起因する誤解や誤認について、当方は一切の責任を負いません。 \ No newline at end of file +この文書は、AI翻訳サービス [Co-op Translator](https://github.com/Azure/co-op-translator) を使用して翻訳されています。正確性を追求しておりますが、自動翻訳には誤りや不正確な部分が含まれる可能性があります。元の言語で記載された文書を正式な情報源としてお考えください。重要な情報については、専門の人間による翻訳を推奨します。この翻訳の使用に起因する誤解や誤解釈について、当社は責任を負いません。 \ No newline at end of file diff --git a/translations/ja/5-browser-extension/3-background-tasks-and-performance/README.md b/translations/ja/5-browser-extension/3-background-tasks-and-performance/README.md index 42f734e26..4a12cd861 100644 --- a/translations/ja/5-browser-extension/3-background-tasks-and-performance/README.md +++ b/translations/ja/5-browser-extension/3-background-tasks-and-performance/README.md @@ -1,8 +1,8 @@ -# 宇宙ゲームを作ろう パート3: 動きを追加する +# スペースゲームを作ろう パート3: 動きを追加する ## 講義前クイズ [講義前クイズ](https://ff-quizzes.netlify.app/web/quiz/33) -ゲームは、画面上でエイリアンが動き回るようになって初めて面白くなります！このゲームでは、以下の2種類の動きを使用します： +ゲームは、画面上でエイリアンが動き回るようになって初めて楽しくなります！このゲームでは、以下の2種類の動きを利用します： - **キーボード/マウスの動き**: ユーザーがキーボードやマウスを操作して画面上のオブジェクトを動かす場合。 - **ゲームによる動き**: ゲームが一定の時間間隔でオブジェクトを動かす場合。 -では、画面上で物を動かすにはどうすればいいのでしょうか？それはすべてデカルト座標に関することです。オブジェクトの位置 (x, y) を変更し、画面を再描画します。 +では、画面上で物を動かすにはどうすればいいのでしょうか？それはすべてデカルト座標に関することです。オブジェクトの位置 (x, y) を変更し、その後画面を再描画します。 -通常、画面上で「動き」を実現するには以下のステップが必要です： +通常、画面上で「動き」を実現するには以下の手順が必要です： -1. **新しい位置を設定する**: オブジェクトが移動したように見えるために必要です。 -2. **画面をクリアする**: 描画の間に画面をクリアする必要があります。背景色で塗りつぶした矩形を描画することでクリアできます。 -3. **新しい位置でオブジェクトを再描画する**: これにより、オブジェクトをある位置から別の位置に移動させることができます。 +1. **新しい位置を設定する**: オブジェクトが動いたように見せるために必要です。 +2. **画面をクリアする**: 描画の間に画面をクリアする必要があります。背景色で塗りつぶした長方形を描画することでクリアできます。 +3. **新しい位置にオブジェクトを再描画する**: これにより、オブジェクトをある位置から別の位置に移動させることができます。 -以下はコードの例です： +以下はコードでの例です： ```javascript //set the hero's location @@ -39,15 +39,15 @@ ctx.fillStyle = "black"; ctx.drawImage(heroImg, hero.x, hero.y); ``` -✅ ヒーローを1秒間に何フレームも再描画することで、パフォーマンスコストが発生する理由を考えられますか？[このパターンの代替案](https://developer.mozilla.org/en-US/docs/Web/API/Canvas_API/Tutorial/Optimizing_canvas)について読んでみましょう。 +✅ 毎秒何フレームもヒーローを再描画すると、パフォーマンスコストが発生する理由を考えられますか？[このパターンの代替案](https://developer.mozilla.org/en-US/docs/Web/API/Canvas_API/Tutorial/Optimizing_canvas)について読んでみてください。 -## キーボードイベントを処理する +## キーボードイベントの処理 -イベントは特定のコードに紐付けて処理します。キーボードイベントはウィンドウ全体でトリガーされますが、マウスイベント（例えば `click`）は特定の要素をクリックすることに紐付けることができます。このプロジェクトではキーボードイベントを使用します。 +イベントを処理するには、特定のイベントをコードに関連付けます。キーボードイベントはウィンドウ全体でトリガーされますが、マウスイベント（例えば `click`）は特定の要素をクリックすることに関連付けることができます。このプロジェクトではキーボードイベントを使用します。 -イベントを処理するには、ウィンドウの `addEventListener()` メソッドを使用し、2つの入力パラメータを提供する必要があります。1つ目のパラメータはイベント名（例: `keyup`）、2つ目のパラメータはイベントが発生した結果として呼び出されるべき関数です。 +イベントを処理するには、ウィンドウの `addEventListener()` メソッドを使用し、2つの入力パラメータを提供する必要があります。1つ目のパラメータはイベントの名前（例: `keyup`）、2つ目のパラメータはイベントが発生した結果として呼び出される関数です。 -以下は例です： +以下はその例です： ```javascript window.addEventListener('keyup', (evt) => { @@ -58,16 +58,16 @@ window.addEventListener('keyup', (evt) => { }) ``` -キーイベントでは、押されたキーを確認するために使用できる2つのプロパティがあります： +キーイベントでは、押されたキーを確認するためにイベントの2つのプロパティを使用できます： - `key`: 押されたキーの文字列表現（例: `ArrowUp`） -- `keyCode`: 数値表現（例: `37`）、これは `ArrowLeft` に対応します。 +- `keyCode`: 数値表現（例: `37`、これは `ArrowLeft` に対応） -✅ キーイベントの操作はゲーム開発以外でも役立ちます。この技術の他の用途を考えてみてください。 +✅ キーイベントの操作はゲーム開発以外でも役立ちます。この技術の他の用途を考えられますか？ ### 特殊キー: 注意点 -ウィンドウに影響を与える*特殊*なキーがあります。つまり、`keyup` イベントを監視していて、これらの特殊キーを使ってヒーローを移動させると、水平スクロールも実行されます。そのため、ゲームを構築する際にはこのブラウザの組み込み動作を*無効化*する必要があります。以下のようなコードが必要です： +ウィンドウに影響を与える*特殊な*キーがあります。例えば、`keyup` イベントをリッスンしている場合、これらの特殊キーを使ってヒーローを移動させると、水平スクロールも実行されます。そのため、ゲームを構築する際には、このブラウザの組み込み動作を*無効化*する必要があるかもしれません。そのためには以下のようなコードが必要です： ```javascript let onKeyDown = function (e) { @@ -88,11 +88,11 @@ let onKeyDown = function (e) { window.addEventListener('keydown', onKeyDown); ``` -上記のコードは、矢印キーとスペースキーの*デフォルト*動作を無効化します。この*無効化*メカニズムは、`e.preventDefault()` を呼び出すことで実現されます。 +上記のコードは、矢印キーとスペースキーの*デフォルト*の動作を無効化します。この*無効化*の仕組みは、`e.preventDefault()` を呼び出すことで実現されます。 ## ゲームによる動き -`setTimeout()` や `setInterval()` 関数を使用して、一定の時間間隔でオブジェクトの位置を更新することで、物を自動的に動かすことができます。以下はその例です： +`setTimeout()` や `setInterval()` のようなタイマーを使用して、一定の時間間隔でオブジェクトの位置を更新することで、オブジェクトを自動的に動かすことができます。以下はその例です： ```javascript let id = setInterval(() => { @@ -103,9 +103,9 @@ let id = setInterval(() => { ## ゲームループ -ゲームループは、定期的に呼び出される関数の概念です。ゲームループと呼ばれるのは、ユーザーに表示されるべきすべてのものがループ内で描画されるためです。ゲームループは、ゲームの一部であるすべてのゲームオブジェクトを使用し、それらを描画します。ただし、何らかの理由でゲームの一部ではなくなった場合は除外されます。例えば、敵がレーザーで撃たれて爆発した場合、その敵は現在のゲームループの一部ではなくなります（これについては後のレッスンで詳しく学びます）。 +ゲームループとは、定期的に呼び出される関数の概念です。ゲームループと呼ばれるのは、ユーザーに見えるすべてのものがこのループ内で描画されるためです。ゲームループは、ゲームの一部であるすべてのゲームオブジェクトを使用して、それらを描画します。ただし、何らかの理由でゲームの一部ではなくなったオブジェクト（例えば、レーザーで撃たれて爆発した敵）は除外されます（これについては後のレッスンで詳しく学びます）。 -以下は典型的なゲームループをコードで表現したものです： +以下は、コードで表現された典型的なゲームループの例です： ```javascript let gameLoopId = setInterval(() => @@ -119,18 +119,18 @@ let gameLoopId = setInterval(() => }, 200); ``` -上記のループは、`200` ミリ秒ごとにキャンバスを再描画します。ゲームに最適な間隔を選択することができます。 +上記のループは、200ミリ秒ごとにキャンバスを再描画します。ゲームに最適な間隔を選択することができます。 -## 宇宙ゲームの続き +## スペースゲームの続き 既存のコードを拡張します。パートIで完成させたコードを使用するか、[パートIIのスターターコード](../../../../6-space-game/3-moving-elements-around/your-work)を使用してください。 - **ヒーローを動かす**: 矢印キーを使用してヒーローを動かせるようにコードを追加します。 -- **敵を動かす**: 敵が一定の速度で上から下へ移動するようにコードを追加します。 +- **敵を動かす**: 敵が一定の速度で上から下に移動するようにコードを追加します。 -## 推奨ステップ +## 推奨手順 -`your-work` サブフォルダに作成されたファイルを見つけてください。以下が含まれているはずです： +`your-work` サブフォルダに作成されたファイルを見つけてください。以下の内容が含まれているはずです： ```bash -| assets @@ -141,22 +141,22 @@ let gameLoopId = setInterval(() => -| package.json ``` -`your_work` フォルダでプロジェクトを開始するには以下を入力してください： +プロジェクトを開始するには、`your_work` フォルダで以下を入力します： ```bash cd your-work npm start ``` -上記のコマンドは、`http://localhost:5000` アドレスでHTTPサーバーを開始します。ブラウザを開き、そのアドレスを入力してください。現在のところ、ヒーローとすべての敵が表示されるはずですが、まだ何も動いていません！ +上記のコマンドは、`http://localhost:5000` アドレスでHTTPサーバーを起動します。ブラウザを開いてそのアドレスを入力してください。現在のところ、ヒーローとすべての敵が表示されるはずですが、まだ何も動いていません！ -### コードを追加する +### コードを追加 -1. **専用のオブジェクトを追加する**: `hero`、`enemy`、`game object` を追加し、それぞれに `x` と `y` プロパティを持たせます。（[継承またはコンポジション](../README.md) の部分を思い出してください）。 +1. **専用のオブジェクトを追加**: `hero`、`enemy`、`game object` を追加し、それぞれに `x` と `y` のプロパティを持たせます。（[継承またはコンポジション](../README.md) の部分を思い出してください）。 - *ヒント* `game object` は `x` と `y` を持ち、キャンバスに自分自身を描画する能力を持つべきです。 + *ヒント*: `game object` は `x` と `y` を持ち、キャンバスに自分自身を描画する機能を持つべきです。 - >ヒント: 以下のようにコンストラクタを定義した新しい GameObject クラスを追加し、キャンバスに描画してください： + > ヒント: 以下のようにコンストラクタを定義した新しい GameObject クラスを追加し、それをキャンバスに描画してみてください： ```javascript @@ -205,11 +205,11 @@ npm start } ``` -2. **キーイベントハンドラを追加する**: キー操作（ヒーローを上下左右に移動）を処理するコードを追加します。 +2. **キーイベントハンドラを追加**: キー操作（ヒーローを上下左右に移動）を処理するコードを追加します。 - *注意* デカルト座標系では、左上が `0,0` です。また、*デフォルト動作*を停止するコードを追加することを忘れないでください。 + *覚えておいてください*: これはデカルト座標系であり、左上が `0,0` です。また、*デフォルト動作*を停止するコードを追加することを忘れないでください。 - >ヒント: onKeyDown 関数を作成し、それをウィンドウに紐付けます： + > ヒント: onKeyDown 関数を作成し、それをウィンドウにアタッチします： ```javascript let onKeyDown = function (e) { @@ -221,13 +221,13 @@ npm start window.addEventListener("keydown", onKeyDown); ``` - この時点でブラウザのコンソールを確認し、キー入力がログに記録されるのを確認してください。 + この時点でブラウザのコンソールを確認し、キー入力がログに記録されているか確認してください。 -3. **[Pub sub パターン](../README.md) を実装する**: 残りの部分を進める際にコードを整理するためにこれを使用します。 +3. **[Pub-Subパターン](../README.md)を実装**: これにより、残りの部分を進める際にコードをクリーンに保つことができます。 - この最後の部分を行うには： + この最後の部分を行うには、以下を実行します： - 1. **ウィンドウにイベントリスナーを追加する**: + 1. **ウィンドウにイベントリスナーを追加**: ```javascript window.addEventListener("keyup", (evt) => { @@ -243,7 +243,7 @@ npm start }); ``` - 1. **EventEmitter クラスを作成する**: メッセージを発行および購読するために使用します： + 1. **EventEmitterクラスを作成**: メッセージを発行および購読するために使用します： ```javascript class EventEmitter { @@ -266,7 +266,7 @@ npm start } ``` - 1. **定数を追加**し、EventEmitter を設定します： + 1. **定数を追加**し、EventEmitter をセットアップ： ```javascript const Messages = { @@ -285,7 +285,7 @@ npm start eventEmitter = new EventEmitter(); ``` - 1. **ゲームを初期化する** + 1. **ゲームを初期化**: ```javascript function initGame() { @@ -311,9 +311,9 @@ npm start } ``` -1. **ゲームループを設定する** +1. **ゲームループをセットアップ** - window.onload 関数をリファクタリングしてゲームを初期化し、適切な間隔でゲームループを設定します。また、レーザービームを追加します： + window.onload 関数をリファクタリングしてゲームを初期化し、適切な間隔でゲームループをセットアップします。また、レーザービームを追加します： ```javascript window.onload = async () => { @@ -334,9 +334,9 @@ npm start }; ``` -5. **敵を一定間隔で動かすコードを追加する** +5. **敵を一定間隔で動かすコードを追加** - `createEnemies()` 関数をリファクタリングして敵を作成し、新しい gameObjects クラスに追加します： + `createEnemies()` 関数をリファクタリングして敵を作成し、新しい gameObjects クラスにプッシュします： ```javascript function createEnemies() { @@ -355,7 +355,7 @@ npm start } ``` - また、ヒーロー用に同様のプロセスを行う `createHero()` 関数を追加します。 + そして、ヒーロー用に同様のプロセスを行う `createHero()` 関数を追加します。 ```javascript function createHero() { @@ -368,7 +368,7 @@ npm start } ``` - 最後に、描画を開始する `drawGameObjects()` 関数を追加します： + 最後に、`drawGameObjects()` 関数を追加して描画を開始します： ```javascript function drawGameObjects(ctx) { @@ -382,7 +382,7 @@ npm start ## 🚀 チャレンジ -ご覧の通り、関数や変数、クラスを追加していくとコードが「スパゲッティコード」になりがちです。コードをより読みやすくするために、どのように整理すればよいかを考え、スケッチしてみてください。たとえコードが1つのファイルに収まっていても構いません。 +ご覧の通り、関数や変数、クラスを追加していくとコードが「スパゲッティコード」になりがちです。コードをより読みやすくするために、どのように整理すればよいか考えてみてください。たとえ1つのファイルに収まる場合でも、コードを整理するシステムをスケッチしてみましょう。 ## 講義後クイズ @@ -390,11 +390,13 @@ npm start ## 復習と自己学習 -フレームワークを使用せずにゲームを作成していますが、ゲーム開発のためのJavaScriptベースのキャンバスフレームワークは多数存在します。これらについて[調べてみましょう](https://github.com/collections/javascript-game-engines)。 +フレームワークを使用せずにゲームを作成していますが、JavaScriptベースのキャンバスフレームワークはゲーム開発に多く存在します。これらについて[調べてみてください](https://github.com/collections/javascript-game-engines)。 ## 課題 [コードにコメントを追加する](assignment.md) +--- + **免責事項**: -この文書は、AI翻訳サービス [Co-op Translator](https://github.com/Azure/co-op-translator) を使用して翻訳されています。正確性を追求しておりますが、自動翻訳には誤りや不正確な部分が含まれる可能性があることをご承知おきください。元の言語で記載された文書が公式な情報源とみなされるべきです。重要な情報については、専門の人間による翻訳を推奨します。この翻訳の使用に起因する誤解や誤認について、当方は一切の責任を負いません。 \ No newline at end of file +この文書はAI翻訳サービス[Co-op Translator](https://github.com/Azure/co-op-translator)を使用して翻訳されています。正確性を追求しておりますが、自動翻訳には誤りや不正確な部分が含まれる可能性があります。元の言語で記載された文書を正式な情報源としてお考えください。重要な情報については、専門の人間による翻訳を推奨します。この翻訳の使用に起因する誤解や誤認について、当方は一切の責任を負いません。 \ No newline at end of file diff --git a/translations/ja/6-space-game/4-collision-detection/README.md b/translations/ja/6-space-game/4-collision-detection/README.md index 9aee7e38b..08f604a13 100644 --- a/translations/ja/6-space-game/4-collision-detection/README.md +++ b/translations/ja/6-space-game/4-collision-detection/README.md @@ -1,40 +1,40 @@ -# 宇宙ゲームを作ろう パート4: レーザーの追加と衝突判定 +# 宇宙ゲームを作ろう パート4: レーザーを追加して衝突を検出する ## 講義前クイズ [講義前クイズ](https://ff-quizzes.netlify.app/web/quiz/35) -このレッスンでは、JavaScriptを使ってレーザーを発射する方法を学びます！ゲームに以下の2つを追加します： +このレッスンでは、JavaScriptを使ってレーザーを撃つ方法を学びます！ゲームに以下の2つを追加します： -- **レーザー**: ヒーローの宇宙船から垂直に上方向へ発射されるレーザー -- **衝突判定**: *撃つ*機能を実装する一環として、以下のようなゲームルールを追加します： - - **レーザーが敵に当たる**: レーザーが敵に当たると敵が消滅 - - **レーザーが画面上部に当たる**: レーザーが画面上部に到達すると消滅 - - **敵とヒーローが衝突**: 敵とヒーローが衝突すると両方消滅 +- **レーザー**: ヒーローの船から垂直に上方向へ発射されるレーザー +- **衝突検出**: *撃つ*機能を実装する一環として、以下のゲームルールを追加します： + - **レーザーが敵に命中**: レーザーが敵に当たると敵が消滅 + - **レーザーが画面上部に命中**: レーザーが画面上部に到達すると消滅 + - **敵とヒーローが衝突**: 敵とヒーローが衝突すると両方が消滅 - **敵が画面下部に到達**: 敵が画面下部に到達すると敵とヒーローが消滅 -つまり、あなた -- *ヒーロー* -- は、敵が画面下部に到達する前にレーザーで全ての敵を倒す必要があります。 +つまり、あなた -- *ヒーロー* -- は敵が画面下部に到達する前にレーザーで全ての敵を倒さなければなりません。 -✅ 最初に作られたコンピュータゲームについて少し調べてみましょう。その機能はどのようなものでしたか？ +✅ 最初に作られたコンピューターゲームについて少し調べてみましょう。その機能はどのようなものでしたか？ 一緒にヒーローになりましょう！ -## 衝突判定 +## 衝突検出 -衝突判定はどのように行うのでしょうか？ゲームオブジェクトを動く長方形として考える必要があります。なぜかというと、ゲームオブジェクトを描画するために使用される画像は長方形だからです：`x`、`y`、`width`、`height`を持っています。 +衝突検出はどうやって行うのでしょうか？ゲームオブジェクトを動く矩形として考える必要があります。なぜかと言うと、ゲームオブジェクトを描画するために使用される画像は矩形だからです。矩形には `x`、`y`、`width`、`height` があります。 -もし2つの長方形、例えばヒーローと敵が*交差*した場合、それは衝突が発生したことを意味します。その後に何が起こるべきかはゲームのルール次第です。衝突判定を実装するには以下が必要です： +もし2つの矩形、つまりヒーローと敵が*交差*した場合、それは衝突です。その後に何が起こるべきかはゲームのルール次第です。衝突検出を実装するには以下が必要です： -1. ゲームオブジェクトの長方形表現を取得する方法、例えば以下のようなもの： +1. ゲームオブジェクトの矩形表現を取得する方法、例えば以下のようなもの： ```javascript rectFromGameObject() { @@ -60,14 +60,14 @@ CO_OP_TRANSLATOR_METADATA: ## 物を破壊する方法 -ゲーム内で物を破壊するには、ゲームループでそのアイテムを描画しないようにする必要があります。これを行う方法の一つは、何かが起こったときにゲームオブジェクトを*死んだ*とマークすることです： +ゲーム内で物を破壊するには、ゲームにそのアイテムを一定間隔でトリガーされるゲームループで描画しないように指示する必要があります。その方法の一つは、何かが起こったときにゲームオブジェクトを*死んだ*とマークすることです。例えば以下のように： ```javascript // collision happened enemy.dead = true ``` -その後、*死んだ*オブジェクトを画面再描画の前に除外することができます： +その後、画面を再描画する前に*死んだ*オブジェクトを整理することができます。例えば以下のように： ```javascript gameObjects = gameObject.filter(go => !go.dead); @@ -75,15 +75,15 @@ gameObjects = gameObject.filter(go => !go.dead); ## レーザーを発射する方法 -レーザーを発射するには、キーイベントに応答して特定の方向に移動するオブジェクトを作成する必要があります。そのため、以下の手順を実行します： +レーザーを発射するには、キーイベントに応答して特定の方向に移動するオブジェクトを作成することを意味します。そのため、以下の手順を実行する必要があります： -1. **レーザーオブジェクトを作成**: ヒーローの宇宙船の上部から、作成と同時に画面上部に向かって移動を開始します。 -2. **キーイベントにコードを紐付ける**: レーザー発射を表すキーボードのキーを選択します。 -3. **レーザーのように見えるゲームオブジェクトを作成**: キーが押されたときに表示されるようにします。 +1. **レーザーオブジェクトを作成**: ヒーローの船の上部から作成され、作成時に画面上部に向かって移動を開始します。 +2. **キーイベントにコードを紐付ける**: レーザーを撃つプレイヤーを表すキーボードのキーを選択する必要があります。 +3. **レーザーのように見えるゲームオブジェクトを作成**: キーが押されたときに。 ## レーザーのクールダウン -レーザーはキー（例えば*スペースキー*）を押すたびに発射される必要があります。しかし、短時間で大量のレーザーが生成されるのを防ぐために、*クールダウン*と呼ばれるタイマーを実装します。これにより、レーザーは一定間隔でしか発射されなくなります。以下のように実装できます： +レーザーは例えば*スペースキー*を押すたびに発射される必要があります。しかし、短時間で大量のレーザーが生成されるのを防ぐために修正が必要です。この修正は、いわゆる*クールダウン*、つまりタイマーを実装することで、レーザーが一定間隔でしか発射されないようにすることです。以下の方法で実装できます： ```javascript class Cooldown { @@ -109,23 +109,23 @@ class Weapon { } ``` -✅ 宇宙ゲームシリーズのレッスン1を参照して、*クールダウン*について復習しましょう。 +✅ 宇宙ゲームシリーズのレッスン1を参照して、*クールダウン*について思い出してください。 ## 作成するもの -前回のレッスンで作成したコード（整理してリファクタリング済みのもの）を拡張します。パートIIのコードから始めるか、[パートIIIのスターターコード](../../../../../../../../../your-work)を使用してください。 +前回のレッスンで整理してリファクタリングした既存のコードを使用して拡張します。パートIIのコードから始めるか、[Part III- starter](../../../../../../../../../your-work)のコードを使用してください。 -> ヒント: 使用するレーザーはすでにアセットフォルダにあり、コードで参照されています。 +> ヒント: 作業するレーザーはすでにアセットフォルダにあり、コードで参照されています。 -- **衝突判定を追加**: レーザーが何かに衝突したとき、以下のルールが適用されます： - 1. **レーザーが敵に当たる**: レーザーが敵に当たると敵が消滅 - 2. **レーザーが画面上部に当たる**: レーザーが画面上部に到達すると消滅 - 3. **敵とヒーローが衝突**: 敵とヒーローが衝突すると両方消滅 +- **衝突検出を追加**: レーザーが何かに衝突した場合、以下のルールが適用されるべきです： + 1. **レーザーが敵に命中**: レーザーが敵に当たると敵が消滅 + 2. **レーザーが画面上部に命中**: レーザーが画面上部に到達すると消滅 + 3. **敵とヒーローが衝突**: 敵とヒーローが衝突すると両方が消滅 4. **敵が画面下部に到達**: 敵が画面下部に到達すると敵とヒーローが消滅 ## 推奨手順 -`your-work`サブフォルダに作成されたファイルを見つけてください。以下の内容が含まれているはずです： +`your-work` サブフォルダに作成されたファイルを見つけてください。以下が含まれているはずです： ```bash -| assets @@ -137,18 +137,18 @@ class Weapon { -| package.json ``` -`your_work`フォルダで以下を入力してプロジェクトを開始します： +プロジェクトを開始するには、`your_work` フォルダで以下を入力してください： ```bash cd your-work npm start ``` -上記のコマンドは、アドレス`http://localhost:5000`でHTTPサーバーを起動します。ブラウザを開いてそのアドレスを入力してください。現在のところ、ヒーローと全ての敵が表示されますが、まだ何も動いていません。 +上記はHTTPサーバーをアドレス `http://localhost:5000` で開始します。ブラウザを開いてそのアドレスを入力してください。現在はヒーローと全ての敵が表示されるはずですが、まだ動いていません。 ### コードを追加 -1. **ゲームオブジェクトの長方形表現を設定して衝突を処理** 以下のコードは、`GameObject`の長方形表現を取得する方法を提供します。`GameObject`クラスを編集して拡張してください： +1. **ゲームオブジェクトの矩形表現を設定して衝突を処理する** 以下のコードは `GameObject` の矩形表現を取得する方法を提供します。`GameObject` クラスを編集して拡張してください： ```javascript rectFromGameObject() { @@ -161,7 +161,7 @@ npm start } ``` -2. **衝突をチェックするコードを追加** これは2つの長方形が交差しているかをテストする新しい関数になります： +2. **衝突をチェックするコードを追加** これは2つの矩形が交差しているかどうかをテストする新しい関数になります： ```javascript function intersectRect(r1, r2) { @@ -175,7 +175,7 @@ npm start ``` 3. **レーザー発射機能を追加** - 1. **キーイベントメッセージを追加** *スペースキー*がヒーローの宇宙船のすぐ上にレーザーを作成するようにします。Messagesオブジェクトに以下の3つの定数を追加してください： + 1. **キーイベントメッセージを追加**。*スペースキー*がヒーローの船のすぐ上にレーザーを作成するべきです。Messagesオブジェクトに3つの定数を追加してください： ```javascript KEY_EVENT_SPACE: "KEY_EVENT_SPACE", @@ -183,7 +183,7 @@ npm start COLLISION_ENEMY_HERO: "COLLISION_ENEMY_HERO", ``` - 1. **スペースキーを処理** `window.addEventListener`のkeyup関数を編集してスペースキーを処理します： + 1. **スペースキーを処理**。`window.addEventListener` のkeyup関数を編集してスペースキーを処理してください： ```javascript } else if(evt.keyCode === 32) { @@ -191,7 +191,7 @@ npm start } ``` - 1. **リスナーを追加** `initGame()`関数を編集して、スペースキーが押されたときにヒーローが発射できるようにします： + 1. **リスナーを追加**。`initGame()` 関数を編集して、スペースキーが押されたときにヒーローが発射できるようにしてください： ```javascript eventEmitter.on(Messages.KEY_EVENT_SPACE, () => { @@ -200,7 +200,7 @@ npm start } ``` - また、敵がレーザーに衝突したときの動作を確保するために新しい`eventEmitter.on()`関数を追加します： + また、敵がレーザーに衝突したときの動作を確保するために新しい `eventEmitter.on()` 関数を追加してください： ```javascript eventEmitter.on(Messages.COLLISION_ENEMY_LASER, (_, { first, second }) => { @@ -209,7 +209,7 @@ npm start }) ``` - 1. **オブジェクトを移動** レーザーが徐々に画面上部に移動するようにします。これには、`GameObject`を拡張した新しいLaserクラスを作成します： + 1. **オブジェクトを移動**。レーザーが徐々に画面上部に移動するようにしてください。これまでと同様に `GameObject` を拡張する新しいLaserクラスを作成します： ```javascript class Laser extends GameObject { @@ -230,7 +230,7 @@ npm start } ``` - 1. **衝突を処理** レーザーの衝突ルールを実装します。衝突するオブジェクトをテストする`updateGameObjects()`関数を追加します： + 1. **衝突を処理**。レーザーの衝突ルールを実装します。衝突するオブジェクトをテストする `updateGameObjects()` 関数を追加してください： ```javascript function updateGameObjects() { @@ -252,11 +252,11 @@ npm start } ``` - `updateGameObjects()`を`window.onload`のゲームループに追加することを忘れないでください。 + `updateGameObjects()` を `window.onload` のゲームループに追加することを忘れないでください。 - 4. **レーザーのクールダウンを実装** レーザーが一定間隔でしか発射されないようにします。 + 4. **レーザーのクールダウンを実装**。レーザーが一定間隔でしか発射されないようにします。 - 最後に、ヒーロークラスを編集してクールダウンを可能にします： + 最後に、ヒーロークラスを編集してクールダウンできるようにしてください： ```javascript class Hero extends GameObject { @@ -285,13 +285,13 @@ npm start } ``` -これで、ゲームにいくつかの機能が追加されました！矢印キーで移動し、スペースキーでレーザーを発射し、敵に当たると消滅します。お疲れ様でした！ +これでゲームにいくつかの機能が追加されました！矢印キーで移動し、スペースキーでレーザーを発射し、敵に命中すると消えるようになりました。お疲れ様です！ --- ## 🚀 チャレンジ -爆発を追加してみましょう！[Space Artリポジトリ](../../../../6-space-game/solution/spaceArt/readme.txt)のゲームアセットを確認し、レーザーがエイリアンに当たったときに爆発を追加してみてください。 +爆発を追加してみましょう！[Space Art repo](../../../../6-space-game/solution/spaceArt/readme.txt) のゲームアセットを確認して、レーザーがエイリアンに命中したときに爆発を追加してみてください。 ## 講義後クイズ @@ -299,11 +299,13 @@ npm start ## 復習と自己学習 -これまでのゲームの間隔を調整してみましょう。間隔を変更するとどうなるか試してみてください。[JavaScriptのタイミングイベント](https://www.freecodecamp.org/news/javascript-timing-events-settimeout-and-setinterval/)についてさらに学びましょう。 +これまでのゲームの間隔を試してみましょう。間隔を変更するとどうなるか確認してください。[JavaScriptのタイミングイベント](https://www.freecodecamp.org/news/javascript-timing-events-settimeout-and-setinterval/)についてさらに学びましょう。 ## 課題 [衝突を探る](assignment.md) +--- + **免責事項**: -この文書は、AI翻訳サービス [Co-op Translator](https://github.com/Azure/co-op-translator) を使用して翻訳されています。正確性を期すよう努めておりますが、自動翻訳には誤りや不正確な部分が含まれる可能性があります。元の言語で記載された文書が正式な情報源と見なされるべきです。重要な情報については、専門の人間による翻訳を推奨します。本翻訳の使用に起因する誤解や誤認について、当方は一切の責任を負いません。 \ No newline at end of file +この文書は、AI翻訳サービス [Co-op Translator](https://github.com/Azure/co-op-translator) を使用して翻訳されています。正確性を追求しておりますが、自動翻訳には誤りや不正確な部分が含まれる可能性があることをご承知ください。元の言語で記載された文書が正式な情報源とみなされるべきです。重要な情報については、専門の人間による翻訳を推奨します。この翻訳の使用に起因する誤解や誤解釈について、当方は一切の責任を負いません。 \ No newline at end of file diff --git a/translations/ja/6-space-game/5-keeping-score/README.md b/translations/ja/6-space-game/5-keeping-score/README.md index f908a01b4..c5a7d0336 100644 --- a/translations/ja/6-space-game/5-keeping-score/README.md +++ b/translations/ja/6-space-game/5-keeping-score/README.md @@ -1,23 +1,23 @@ # 宇宙ゲームを作ろう パート5: スコアとライフ -## 講義前クイズ +## 講義前のクイズ -[講義前クイズ](https://ff-quizzes.netlify.app/web/quiz/37) +[講義前のクイズ](https://ff-quizzes.netlify.app/web/quiz/37) このレッスンでは、ゲームにスコアを追加し、ライフを計算する方法を学びます。 ## 画面にテキストを描画する -ゲームのスコアを画面に表示するには、テキストを画面に配置する方法を知る必要があります。その答えは、canvasオブジェクトの`fillText()`メソッドを使用することです。また、使用するフォント、テキストの色、さらにはテキストの配置（左揃え、右揃え、中央揃え）など、他の要素も制御できます。以下は、画面にテキストを描画するコード例です。 +ゲームのスコアを画面に表示するには、テキストを画面に配置する方法を知る必要があります。その答えは、キャンバスオブジェクトの`fillText()`メソッドを使用することです。また、使用するフォントやテキストの色、さらにはテキストの配置（左揃え、右揃え、中央揃え）なども制御できます。以下は、画面にテキストを描画するコードの例です。 ```javascript ctx.font = "30px Arial"; @@ -26,18 +26,18 @@ ctx.textAlign = "right"; ctx.fillText("show this on the screen", 0, 0); ``` -✅ [キャンバスにテキストを追加する方法](https://developer.mozilla.org/docs/Web/API/Canvas_API/Tutorial/Drawing_text)についてさらに学び、自分のテキストをもっと魅力的にしてみましょう！ +✅ [キャンバスにテキストを追加する方法](https://developer.mozilla.org/docs/Web/API/Canvas_API/Tutorial/Drawing_text)についてさらに詳しく学び、自分のゲームをもっと魅力的にしてみましょう！ -## ゲームの概念としてのライフ +## ゲームコンセプトとしてのライフ -ゲームにおけるライフの概念は単なる数字です。宇宙ゲームの文脈では、ダメージを受けるたびに1つずつ減るライフを設定するのが一般的です。数字ではなく、ミニシップやハートのようなグラフィックで表現すると、より視覚的にわかりやすくなります。 +ゲームにおけるライフの概念は単なる数字です。宇宙ゲームの文脈では、ダメージを受けるたびに1つずつ減るライフを設定するのが一般的です。数字ではなく、ミニシップやハートのようなグラフィカルな表現を表示すると、より分かりやすくなります。 ## 作成するもの ゲームに以下を追加しましょう： - **ゲームスコア**: 敵の船を1隻撃破するごとに、ヒーローにポイントが与えられます。1隻につき100ポイントを提案します。ゲームスコアは画面の左下に表示されます。 -- **ライフ**: 自分の船には3つのライフがあります。敵の船が衝突するたびにライフが1つ減ります。ライフスコアは画面の右下に表示され、以下のグラフィックで構成されます ![ライフ画像](../../../../6-space-game/5-keeping-score/solution/assets/life.png)。 +- **ライフ**: 自分の船には3つのライフがあります。敵の船が衝突するたびにライフが1つ減ります。ライフスコアは画面の右下に表示され、以下のグラフィックで構成されます ![life image](../../../../translated_images/life.6fb9f50d53ee0413cd91aa411f7c296e10a1a6de5c4a4197c718b49bf7d63ebf.ja.png)。 ## 推奨手順 @@ -53,18 +53,18 @@ ctx.fillText("show this on the screen", 0, 0); -| package.json ``` -`your_work`フォルダでプロジェクトを開始するには、以下を入力します： +`your_work`フォルダでプロジェクトを開始するには、以下を入力してください： ```bash cd your-work npm start ``` -上記のコマンドでHTTPサーバーが`http://localhost:5000`で起動します。ブラウザを開き、そのアドレスを入力してください。現在のところ、ヒーローとすべての敵が表示され、左右の矢印キーを押すとヒーローが移動し、敵を撃つことができます。 +上記のコマンドでHTTPサーバーが`http://localhost:5000`で起動します。ブラウザを開き、そのアドレスを入力してください。現在の状態では、ヒーローとすべての敵が表示され、左右の矢印キーを押すとヒーローが移動し、敵を撃つことができます。 ### コードを追加する -1. **必要なアセットをコピー**します。`solution/assets/`フォルダから`your-work`フォルダに`life.png`アセットを追加します。`window.onload`関数に`lifeImg`を追加してください： +1. **必要なアセットをコピーする**: `solution/assets/`フォルダから`your-work`フォルダに`life.png`アセットをコピーします。`window.onload`関数に`lifeImg`を追加してください： ```javascript lifeImg = await loadTexture("assets/life.png"); @@ -80,9 +80,9 @@ npm start eventEmitter = new EventEmitter(); ``` -2. **変数を追加**します。合計スコア（0）と残りのライフ（3）を表すコードを追加し、これらのスコアを画面に表示します。 +2. **変数を追加する**: 合計スコア（0）と残りのライフ（3）を表すコードを追加し、これらのスコアを画面に表示します。 -3. **`updateGameObjects()`関数を拡張**します。敵との衝突を処理するように`updateGameObjects()`関数を拡張します： +3. **`updateGameObjects()`関数を拡張する**: `updateGameObjects()`関数を拡張して敵との衝突を処理します： ```javascript enemies.forEach(enemy => { @@ -93,15 +93,15 @@ npm start }) ``` -4. **ライフとポイントを追加**します。 - 1. **変数を初期化**します。`Hero`クラスの`this.cooldown = 0`の下にライフとポイントを設定します： +4. **ライフとポイントを追加する**: + 1. **変数を初期化する**: `Hero`クラスの`this.cooldown = 0`の下にライフとポイントを設定します： ```javascript this.life = 3; this.points = 0; ``` - 1. **変数を画面に描画**します。これらの値を画面に描画します： + 1. **変数を画面に描画する**: これらの値を画面に描画します： ```javascript function drawLife() { @@ -128,18 +128,18 @@ npm start ``` - 1. **ゲームループにメソッドを追加**します。これらの関数を`window.onload`関数の`updateGameObjects()`の下に追加してください： + 1. **ゲームループにメソッドを追加する**: `updateGameObjects()`の下にこれらの関数を`window.onload`関数に追加してください： ```javascript drawPoints(); drawLife(); ``` -1. **ゲームルールを実装**します。以下のゲームルールを実装します： +1. **ゲームルールを実装する**: 以下のゲームルールを実装します： - 1. **ヒーローと敵の衝突ごとに**、ライフを1つ減らします。 + 1. **ヒーローと敵の衝突ごとにライフを減らす**: - `Hero`クラスを拡張してこの減算を行います： + `Hero`クラスを拡張してライフを減らす処理を追加します： ```javascript decrementLife() { @@ -150,9 +150,9 @@ npm start } ``` - 2. **レーザーが敵に当たるごとに**、ゲームスコアを100ポイント増やします。 + 2. **レーザーが敵に当たるごとにゲームスコアを100ポイント増やす**: - `Hero`クラスを拡張してこの加算を行います： + `Hero`クラスを拡張してスコアを増やす処理を追加します： ```javascript incrementPoints() { @@ -177,7 +177,7 @@ npm start ✅ JavaScript/Canvasで作られた他のゲームを調べてみましょう。それらの共通点は何でしょうか？ -この作業が終わると、画面の右下に小さな「ライフ」シップが表示され、左下にポイントが表示されます。また、敵と衝突するとライフが減り、敵を撃つとポイントが増えるのが確認できるはずです。よくできました！ゲームはほぼ完成です。 +この作業が終わると、画面の右下に小さな「ライフ」シップが表示され、左下にポイントが表示されます。敵と衝突するとライフが減り、敵を撃つとポイントが増えるのが確認できるはずです。よくできました！ゲームはほぼ完成です。 --- @@ -185,17 +185,19 @@ npm start コードはほぼ完成しています。次のステップを想像できますか？ -## 講義後クイズ +## 講義後のクイズ -[講義後クイズ](https://ff-quizzes.netlify.app/web/quiz/38) +[講義後のクイズ](https://ff-quizzes.netlify.app/web/quiz/38) ## 復習と自己学習 -ゲームスコアとライフを増減させる方法をいくつか調べてみましょう。[PlayFab](https://playfab.com)のような興味深いゲームエンジンがあります。これらを使用することでゲームがどのように向上するか考えてみましょう。 +ゲームスコアとライフを増減させる方法をいくつか調べてみましょう。[PlayFab](https://playfab.com)のような興味深いゲームエンジンがあります。これらを使用することでゲームがどのように向上するか考えてみてください。 ## 課題 [スコアリングゲームを作る](assignment.md) +--- + **免責事項**: -この文書は、AI翻訳サービス [Co-op Translator](https://github.com/Azure/co-op-translator) を使用して翻訳されています。正確性を追求しておりますが、自動翻訳には誤りや不正確な部分が含まれる可能性があります。元の言語で記載された文書を正式な情報源としてお考えください。重要な情報については、専門の人間による翻訳を推奨します。この翻訳の使用に起因する誤解や誤解について、当社は責任を負いません。 \ No newline at end of file +この文書はAI翻訳サービス[Co-op Translator](https://github.com/Azure/co-op-translator)を使用して翻訳されています。正確性を追求しておりますが、自動翻訳には誤りや不正確な部分が含まれる可能性があります。元の言語で記載された文書を正式な情報源としてご参照ください。重要な情報については、専門の人間による翻訳を推奨します。この翻訳の使用に起因する誤解や誤認について、当方は一切の責任を負いません。 \ No newline at end of file diff --git a/translations/ja/6-space-game/6-end-condition/README.md b/translations/ja/6-space-game/6-end-condition/README.md index 460753645..4e0318556 100644 --- a/translations/ja/6-space-game/6-end-condition/README.md +++ b/translations/ja/6-space-game/6-end-condition/README.md @@ -1,8 +1,8 @@ -# 銀行アプリを作成する Part 1: HTMLテンプレートとWebアプリのルート +# 銀行アプリを作成する Part 1: HTMLテンプレートとWebアプリのルート設定 ## 講義前クイズ @@ -15,17 +15,17 @@ CO_OP_TRANSLATOR_METADATA: ### はじめに -ブラウザでJavaScriptが登場して以来、ウェブサイトはこれまで以上にインタラクティブで複雑になっています。現在では、ブラウザ内で直接動作する完全な機能を備えたアプリケーション、いわゆる[ウェブアプリケーション](https://en.wikipedia.org/wiki/Web_application)を作成するためにウェブ技術が一般的に使用されています。ウェブアプリは非常にインタラクティブであるため、ユーザーはアクションを実行するたびにページ全体をリロードするのを待ちたくありません。そのため、JavaScriptを使用してDOMを介してHTMLを直接更新し、スムーズなユーザー体験を提供します。 +ブラウザでJavaScriptが登場して以来、ウェブサイトはこれまで以上にインタラクティブで複雑になっています。現在では、ブラウザ内で直接動作する完全な機能を備えたアプリケーション、つまり[ウェブアプリケーション](https://en.wikipedia.org/wiki/Web_application)を作成するためにウェブ技術が一般的に使用されています。ウェブアプリは非常にインタラクティブであるため、ユーザーはアクションを実行するたびにページ全体をリロードするのを待ちたくありません。そのため、JavaScriptを使用してDOMを介してHTMLを直接更新し、スムーズなユーザー体験を提供します。 このレッスンでは、HTMLテンプレートを使用して複数の画面を作成し、HTMLページ全体をリロードすることなく表示および更新できる銀行ウェブアプリの基礎を構築します。 ### 前提条件 -このレッスンで作成するウェブアプリをテストするためにローカルウェブサーバーが必要です。まだインストールしていない場合は、[Node.js](https://nodejs.org)をインストールし、プロジェクトフォルダーで`npx lite-server`コマンドを使用してください。これによりローカルウェブサーバーが作成され、ブラウザでアプリが開きます。 +このレッスンで作成するウェブアプリをテストするには、ローカルウェブサーバーが必要です。まだインストールしていない場合は、[Node.js](https://nodejs.org)をインストールし、プロジェクトフォルダーでコマンド `npx lite-server` を使用してください。これによりローカルウェブサーバーが作成され、ブラウザでアプリが開きます。 ### 準備 -コンピューター上に`bank`という名前のフォルダーを作成し、その中に`index.html`という名前のファイルを作成してください。このHTMLの[ボイラープレート](https://en.wikipedia.org/wiki/Boilerplate_code)から始めます： +コンピュータ上で、`bank`という名前のフォルダーを作成し、その中に`index.html`という名前のファイルを作成してください。以下のHTML[ボイラープレート](https://en.wikipedia.org/wiki/Boilerplate_code)から始めます： ```html @@ -47,14 +47,14 @@ CO_OP_TRANSLATOR_METADATA: ウェブページに複数の画面を作成したい場合、1つの画面ごとにHTMLファイルを作成するという方法があります。しかし、この方法にはいくつかの不便があります： -- 画面を切り替えるたびにHTML全体をリロードする必要があり、これが遅くなる可能性があります。 +- 画面を切り替えるたびにHTML全体をリロードする必要があり、これが遅い場合があります。 - 異なる画面間でデータを共有するのが難しいです。 別の方法として、1つのHTMLファイルだけを使用し、` ``` -Якщо придивитися, ви помітите, що ми також додали елемент `