Web-Dev-For-Beginners/translations/ja

初心者向けウェブ開発 - カリキュラム

Microsoft Cloud Advocatesによる12週間の包括的なコースでウェブ開発の基礎を学びましょう。24のレッスンでは、JavaScript、CSS、HTMLを使った実践的なプロジェクト（テラリウム、ブラウザ拡張機能、宇宙ゲームなど）を通じて学びます。クイズ、ディスカッション、実践課題を通じてスキルを向上させ、プロジェクトベースの効果的な学習方法で知識を深めましょう。今すぐコーディングの旅を始めましょう！

Azure AI Foundry Discordコミュニティに参加しましょう

以下の手順に従ってリソースを利用してください:

1. リポジトリをフォークする: をクリック
2. リポジトリをクローンする: git clone https://github.com/microsoft/Web-Dev-For-Beginners.git
3. Azure AI Foundry Discordに参加して、専門家や開発者仲間と交流する

🌐 多言語対応

GitHub Actionによるサポート (自動更新)

アラビア語 | ベンガル語 | ブルガリア語 | ビルマ語 (ミャンマー) | 中国語 (簡体字) | 中国語 (繁体字, 香港) | 中国語 (繁体字, マカオ) | 中国語 (繁体字, 台湾) | クロアチア語 | チェコ語 | デンマーク語 | オランダ語 | エストニア語 | フィンランド語 | フランス語 | ドイツ語 | ギリシャ語 | ヘブライ語 | ヒンディー語 | ハンガリー語 | インドネシア語 | イタリア語 | 日本語 | 韓国語 | リトアニア語 | マレー語 | マラーティー語 | ネパール語 | ノルウェー語 | ペルシャ語 (ファルシー) | ポーランド語 | ポルトガル語 (ブラジル) | ポルトガル語 (ポルトガル) | パンジャブ語 (グルムキー) | ルーマニア語 | ロシア語 | セルビア語 (キリル文字) | スロバキア語 | スロベニア語 | スペイン語 | スワヒリ語 | スウェーデン語 | タガログ語 (フィリピン) | タミル語 | タイ語 | トルコ語 | ウクライナ語 | ウルドゥー語 | ベトナム語

追加の翻訳を希望する場合は、こちらにサポートされている言語が記載されています

🧑‍🎓 学生の皆さんへ

Student Hubページを訪れて、初心者向けリソース、学生向けパック、さらには無料の認定証バウチャーを取得する方法を見つけてください。このページはブックマークして、毎月内容が更新されるので定期的にチェックしてください。

📣 お知らせ - 新しいGitHub Copilot Agentモードチャレンジが登場！

新しいチャレンジが追加されました。ほとんどの章で「GitHub Copilot Agent Challenge 🚀」を探してみてください。これはGitHub CopilotとAgentモードを使用して完了する新しいチャレンジです。Agentモードを使用したことがない場合、テキストの生成だけでなく、ファイルの作成や編集、コマンドの実行なども可能です。

📣 お知らせ - 生成AIを使った新しいプロジェクト

新しいAIアシスタントプロジェクトが追加されました。詳細はプロジェクトをご覧ください。

📣 お知らせ - 新しいカリキュラム JavaScript向け生成AIがリリースされました

新しい生成AIカリキュラムをお見逃しなく！

https://aka.ms/genai-js-courseを訪れて学びを始めましょう！

• 基礎からRAGまでをカバーするレッスン
• GenAIとコンパニオンアプリを使って歴史上の人物と対話
• 楽しく魅力的なストーリーでタイムトラベルを体験！

各レッスンには、課題、知識チェック、チャレンジが含まれており、以下のトピックを学ぶ手助けをします:

• プロンプトとプロンプトエンジニアリング
• テキストと画像アプリの生成
• 検索アプリ

https://aka.ms/genai-js-courseを訪れて学びを始めましょう！

🌱 始め方

教師の皆さん、このカリキュラムの使用方法についていくつかの提案を含めています。ぜひディスカッションフォーラムでフィードバックをお寄せください！

学習者の皆さん、各レッスンでは、講義前のクイズから始め、講義資料を読み、さまざまな活動を完了し、講義後のクイズで理解度を確認してください。

学習体験を向上させるために、仲間と一緒にプロジェクトに取り組みましょう！ディスカッションはディスカッションフォーラムで歓迎されており、モデレーターが質問に答えるために待機しています。

さらに学びを深めるために、Microsoft Learnで追加の学習資料を探索することを強くお勧めします。

📋 環境の設定

このカリキュラムにはすぐに使える開発環境が用意されています！始める際には、Codespace（ブラウザベースでインストール不要の環境）を使用するか、ローカルのコンピュータでVisual Studio Codeなどのテキストエディタを使用して実行することができます。

リポジトリを作成する

作業を簡単に保存するために、このリポジトリのコピーを作成することをお勧めします。ページ上部のUse this templateボタンをクリックすると、カリキュラムのコピーがあなたのGitHubアカウントに新しいリポジトリとして作成されます。

以下の手順に従ってください:

1. リポジトリをフォークする: このページの右上にある「Fork」ボタンをクリックします。
2. リポジトリをクローンする: git clone https://github.com/microsoft/Web-Dev-For-Beginners.git

Codespaceでカリキュラムを実行する

作成したリポジトリのコピーで、Codeボタンをクリックし、Open with Codespacesを選択します。これにより、作業用の新しいCodespaceが作成されます。

ローカルコンピュータでカリキュラムを実行する

ローカルコンピュータでこのカリキュラムを実行するには、テキストエディタ、ブラウザ、コマンドラインツールが必要です。最初のレッスンプログラミング言語とツールの紹介では、これらのツールのさまざまなオプションを紹介し、最適なものを選択する方法を説明します。

おすすめはVisual Studio Codeをエディタとして使用することで、ターミナルも内蔵されています。こちらからVisual Studio Codeをダウンロードできます。

1. リポジトリをコンピュータにクローンします。CodeボタンをクリックしてURLをコピーしてください:

   CodeSpace

   次に、Visual Studio Code内のターミナルを開き、以下のコマンドを実行します。<your-repository-url>をコピーしたURLに置き換えてください:

   git clone <your-repository-url>
   

2. Visual Studio Codeでフォルダを開きます。File > Open Folderをクリックし、クローンしたフォルダを選択してください。

推奨されるVisual Studio Code拡張機能:

• Live Server - Visual Studio Code内でHTMLページをプレビューするためのツール
• Copilot - コードを書くスピードを向上させるための支援ツール

📂 各レッスンには以下が含まれます：

• オプションのスケッチノート
• オプションの補足動画
• レッスン前のウォームアップクイズ
• 書き起こしレッスン
• プロジェクトベースのレッスンでは、プロジェクトを構築するためのステップバイステップガイド
• 知識チェック
• チャレンジ
• 補足資料
• 課題
• レッスン後のクイズ

クイズについての注意: すべてのクイズはQuiz-appフォルダーに含まれており、合計48個のクイズがあり、それぞれ3問ずつです。クイズはこちらで利用可能で、ローカルで実行することもAzureにデプロイすることもできます。quiz-appフォルダー内の指示に従ってください。

🗃️ レッスン

	プロジェクト名	教えられる概念	学習目標	リンクされたレッスン	著者
01	はじめに	プログラミングとツールの基本	ほとんどのプログラミング言語の基本的な基盤と、プロの開発者が仕事をするのに役立つソフトウェアについて学ぶ	プログラミング言語とツールの基本	Jasmine
02	はじめに	GitHubの基本、チームでの作業	プロジェクトでGitHubを使用する方法、コードベースで他の人と協力する方法	GitHubの基本	Floor
03	はじめに	アクセシビリティ	Webアクセシビリティの基本を学ぶ	アクセシビリティの基本	Christopher
04	JSの基本	JavaScriptのデータ型	JavaScriptのデータ型の基本	データ型	Jasmine
05	JSの基本	関数とメソッド	アプリケーションのロジックフローを管理するための関数とメソッドについて学ぶ	関数とメソッド	JasmineとChristopher
06	JSの基本	JSでの条件分岐	条件分岐の方法を学ぶ	条件分岐	Jasmine
07	JSの基本	配列とループ	JavaScriptで配列とループを使用してデータを操作する	配列とループ	Jasmine
08	テラリウム	HTMLの実践	オンラインテラリウムを作成するためのHTMLを構築し、レイアウト作成に焦点を当てる	HTMLの基本	Jen
09	テラリウム	CSSの実践	オンラインテラリウムをスタイリングするためのCSSを構築し、レスポンシブデザインを含むCSSの基本に焦点を当てる	CSSの基本	Jen
10	テラリウム	JavaScriptクロージャ、DOM操作	テラリウムをドラッグ＆ドロップインターフェースとして機能させるためのJavaScriptを構築し、クロージャとDOM操作に焦点を当てる	JavaScriptクロージャ、DOM操作	Jen
11	タイピングゲーム	タイピングゲームを作成	キーボードイベントを使用してJavaScriptアプリのロジックを駆動する方法を学ぶ	イベント駆動型プログラミング	Christopher
12	グリーンブラウザー拡張機能	ブラウザーの操作	ブラウザーの動作、歴史、ブラウザー拡張機能の最初の要素をスキャフォールドする方法を学ぶ	ブラウザーについて	Jen
13	グリーンブラウザー拡張機能	フォームの作成、APIの呼び出し、ローカルストレージへの変数の保存	ローカルストレージに保存された変数を使用してAPIを呼び出すブラウザー拡張機能のJavaScript要素を構築する	API、フォーム、ローカルストレージ	Jen
14	グリーンブラウザー拡張機能	ブラウザーのバックグラウンドプロセス、Webパフォーマンス	ブラウザーのバックグラウンドプロセスを使用して拡張機能のアイコンを管理する方法を学び、Webパフォーマンスと最適化について学ぶ	バックグラウンドタスクとパフォーマンス	Jen
15	スペースゲーム	JavaScriptを使用したより高度なゲーム開発	クラスとコンポジションを使用した継承とPub/Subパターンについて学び、ゲーム構築の準備をする	高度なゲーム開発の基本	Chris
16	スペースゲーム	キャンバスへの描画	画面に要素を描画するために使用されるCanvas APIについて学ぶ	キャンバスへの描画	Chris
17	スペースゲーム	画面上の要素の移動	要素が直交座標とCanvas APIを使用して動きを得る方法を学ぶ	要素の移動	Chris
18	スペースゲーム	衝突検出	要素が衝突して反応する方法を学び、キー入力を使用してゲームのパフォーマンスを確保するためのクールダウン機能を提供する	衝突検出	Chris
19	スペースゲーム	スコアの保持	ゲームの状態とパフォーマンスに基づいて数学的計算を行う	スコアの保持	Chris
20	スペースゲーム	ゲームの終了と再開	ゲームの終了と再開について学び、アセットのクリーンアップと変数値のリセットを含む	終了条件	Chris
21	バンキングアプリ	WebアプリでのHTMLテンプレートとルート	マルチページウェブサイトのアーキテクチャのスキャフォールドをルーティングとHTMLテンプレートを使用して作成する方法を学ぶ	HTMLテンプレートとルート	Yohan
22	バンキングアプリ	ログインと登録フォームの作成	フォームの作成とバリデーションルーチンの処理について学ぶ	フォーム	Yohan
23	バンキングアプリ	データの取得と使用方法	アプリ内でデータがどのように流れ、取得、保存、廃棄されるかを学ぶ	データ	Yohan
24	バンキングアプリ	状態管理の概念	アプリが状態を保持する方法とそれをプログラム的に管理する方法を学ぶ	状態管理	Yohan
25	ブラウザー/VSコード	VSコードの操作	コードエディターの使用方法を学ぶ	VSコードエディターの使用	Chris
26	AIアシスタント	AIの操作	自分のAIアシスタントを構築する方法を学ぶ	AIアシスタントプロジェクト	Chris

🏫 教育法

私たちのカリキュラムは、以下の2つの主要な教育原則に基づいて設計されています：

• プロジェクトベースの学習
• 頻繁なクイズ

このプログラムでは、JavaScript、HTML、CSSの基本と、現在のウェブ開発者が使用する最新のツールや技術を教えます。学生はタイピングゲーム、仮想テラリウム、エコフレンドリーなブラウザー拡張機能、スペースインベーダースタイルのゲーム、ビジネス向けバンキングアプリを構築することで、実践的な経験を積むことができます。このシリーズの終わりまでに、学生はウェブ開発の確固たる理解を得ることができます。

🎓 このカリキュラムの最初のいくつかのレッスンをMicrosoft Learnで学習パスとして受講することができます！

プロジェクトに合わせて内容を調整することで、学生にとってより魅力的なプロセスとなり、概念の定着が促進されます。また、JavaScriptの基本を紹介するいくつかのスターターレッスンを作成し、"Beginners Series to: JavaScript"のビデオチュートリアルコレクションとペアリングしました。このコレクションの一部の著者は、このカリキュラムに貢献しています。

さらに、授業前の低リスクなクイズは、学生がトピックを学ぶ意図を設定し、授業後の2回目のクイズはさらに定着を確保します。このカリキュラムは柔軟で楽しいように設計されており、全体または部分的に受講することができます。プロジェクトは小規模から始まり、12週間のサイクルの終わりまでに徐々に複雑になります。

JavaScriptフレームワークの導入を意図的に避け、フレームワークを採用する前にウェブ開発者として必要な基本スキルに集中しました。このカリキュラムを修了した後の次のステップとして、Node.jsについて学ぶことをお勧めします。こちらのビデオコレクションをご覧ください: "Beginner Series to: Node.js".

行動規範と貢献ガイドラインをご覧ください。建設的なフィードバックを歓迎します！

🧭 オフラインアクセス

このドキュメントをオフラインで使用するには、Docsifyを使用してください。このリポジトリをフォークし、Docsifyをインストールしてローカルマシンにセットアップしてください。その後、このリポジトリのルートフォルダーでdocsify serveと入力してください。ウェブサイトはローカルホストのポート3000で提供されます: localhost:3000.

📘 PDF

すべてのレッスンのPDFはこちらで見つけることができます。

🎒 その他のコース

私たちのチームは他のコースも制作しています！以下をご覧ください：

Azure / Edge / MCP / Agents

---

生成AIシリーズ

---

基礎学習

---

Copilotシリーズ

ヘルプを得る方法

AIアプリの構築で行き詰まったり質問がある場合は、以下に参加してください：

製品のフィードバックや構築中のエラーについては以下を訪問してください：

ライセンス

このリポジトリはMITライセンスの下で提供されています。詳細はLICENSEファイルをご覧ください。

---

免責事項:
この文書はAI翻訳サービスCo-op Translatorを使用して翻訳されています。正確性を追求していますが、自動翻訳には誤りや不正確な部分が含まれる可能性があります。元の言語で記載された文書が正式な情報源とみなされるべきです。重要な情報については、専門の人間による翻訳を推奨します。この翻訳の使用に起因する誤解や誤認について、当社は責任を負いません。