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によるサポート（自動化＆常に最新）

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

ローカルでクローンする方が良いですか？

このリポジトリには50以上の言語翻訳が含まれているため、ダウンロードサイズが大幅に増加します。翻訳なしでクローンするには、スパースチェックアウトを使用してください：

git clone --filter=blob:none --sparse https://github.com/microsoft/Web-Dev-For-Beginners.git
cd Web-Dev-For-Beginners
git sparse-checkout set --no-cone '/*' '!translations' '!translated_images'

これにより、より高速なダウンロードでコースを完成させるために必要なすべてが手に入ります。

追加の翻訳言語が必要な場合は、こちらをご覧ください。

🧑‍🎓 学生ですか？

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などのテキストエディタを使ってローカルPCでの実行を選べます。

リポジトリの作成

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

手順は以下の通り：

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

Codespaceでのカリキュラム実行

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

ローカルPCでのカリキュラム実行

ローカルPCで実行するには、テキストエディタ、ブラウザ、コマンドラインツールが必要です。最初のレッスン、プログラミング言語とツールの紹介では、これらツールの様々なオプションを紹介し、最適なものを選べるよう案内します。

推奨エディタはVisual Studio Codeで、組み込みのターミナルも備えています。Visual Studio Codeはこちらからダウンロード可能です。

1. あなたのリポジトリをPCにクローンします。Codeボタンをクリックし、URLをコピーしてください。

   CodeSpace 次に、Visual Studio Code 内で Terminal を開き、以下のコマンドを実行します。<your-repository-url> は先ほどコピーしたURLに置き換えてください。

   git clone <your-repository-url>
   

2. Visual Studio Codeでフォルダを開きます。これはファイル > フォルダーを開く をクリックして、クローンしたばかりのフォルダを選択することで行えます。

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

• Live Server - Visual Studio Code内でHTMLページをプレビューするため
• Copilot - コードを書くスピードを上げるために役立ちます

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

• 任意のスケッチノート
• 任意の補足動画
• レッスン前のウォームアップクイズ
• 書面によるレッスン
• プロジェクトベースのレッスンでは、プロジェクトの構築方法をステップバイステップで解説
• 知識チェック
• チャレンジ
• 補足読書資料
• 課題
• レッスン後のクイズ

クイズに関する注意: すべてのクイズはQuiz-appフォルダに格納されており、各クイズは3問からなり、合計48問あります。こちらからアクセスでき、クイズアプリはローカルで実行するかAzureにデプロイ可能です。quiz-appフォルダの指示に従ってください。

🗃️ レッスンリスト

	プロジェクト名	教えられるコンセプト	学習目標	関連レッスン	著者
01	はじめに	プログラミングとツールの基礎	多くのプログラミング言語の基本概念とプロの開発者が使用するソフトウェアについて学びます	プログラミング言語とツールの紹介	Jasmine
02	はじめに	GitHubの基本、チームでの作業を含む	プロジェクトでのGitHubの使用方法、コードベースでの共同作業方法を学びます	GitHubの紹介	Floor
03	はじめに	アクセシビリティ	ウェブアクセシビリティの基礎を学びます	アクセシビリティの基礎	Christopher
04	JS基礎	JavaScriptのデータ型	JavaScriptのデータ型の基本	データ型	Jasmine
05	JS基礎	関数とメソッド	アプリケーションのロジックフローを管理する関数とメソッドについて学びます	関数とメソッド	Jasmine and 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	グリーンブラウザ拡張	ブラウザのバックグラウンド処理、ウェブパフォーマンス	ブラウザのバックグラウンド処理を使って拡張機能のアイコンを管理し、ウェブパフォーマンスと最適化について学びます	バックグラウンドタスクとパフォーマンス	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	ブラウザ/VScodeコード	VScodeの使い方	コードエディタの使用方法を学ぶ	VScodeコードエディタの使い方	Chris
26	AIアシスタント	AIとの連携	自分自身のAIアシスタントを作る方法を学ぶ	AIアシスタントプロジェクト	Chris

🏫 教育方針

当カリキュラムは2つの主要な教育原則に基づいて設計されています:

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

本プログラムではJavaScript、HTML、CSSの基礎ならびに現代のウェブ開発者が使用する最新のツールと技術を教えます。受講生はタイピングゲーム、バーチャルテラリウム、エコフレンドリーなブラウザ拡張機能、スペースインベーダースタイルゲーム、ビジネス向けバンキングアプリを作成することで実践的な経験を積めます。シリーズの終わりには、ウェブ開発のしっかりした理解を得られます。

🎓 Microsoft LearnのLearn Pathとして、本カリキュラムの最初の数レッスンを受講することができます！

内容がプロジェクトと連動していることで、学生の関心を引きつけ、概念の保持が増強されます。またJavaScriptの基礎を導入するスターターレッスンを複数作成し、さらに「Beginners Series to: JavaScript」の動画チュートリアルを組み合わせました。その著者の一部も本カリキュラムに貢献しています。

授業前の低リスクなクイズは学習意図を設定し、授業後のクイズはさらなる理解定着を促します。本カリキュラムは柔軟かつ楽しく受講でき、全体または一部のみ受講可能です。プロジェクトは小規模から始まり、12週間のサイクル終了時には複雑性が増します。

JavaScriptフレームワークの導入は意図的に避け、ウェブ開発者に必要な基本スキルに集中しています。次のステップとしては、別の動画シリーズ「Beginner Series to: Node.js」でNode.jsの学習をおすすめします。

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

🧭 オフラインアクセス

Docsify を使って、このドキュメントをオフラインで閲覧できます。このリポジトリをフォークし、ローカルマシンにDocsifyをインストールしてください。次にこのリポジトリのルートフォルダで docsify serve を入力します。ウェブサイトはローカルホストのポート3000で配信されます：localhost:3000。

📘 PDF

すべてのレッスンのPDFはこちらから入手可能です: here.

🎒 他のコース

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

LangChain

---

Azure / Edge / MCP / Agents

---

ジェネレーティブAIシリーズ

---

コアラーニング

---

コパイロットシリーズ

ヘルプを得る

AI アプリの構築で詰まったり、質問がある場合は MCP に関する学習者や経験豊富な開発者と一緒にディスカッションに参加しましょう。質問が歓迎され、知識が自由に共有される支援的なコミュニティです。

製品のフィードバックや製品構築時のエラーがある場合は、以下をご覧ください：

ライセンス

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

---

免責事項：
本書類はAI翻訳サービス「Co-op Translator」（https://github.com/Azure/co-op-translator）を使用して翻訳されました。正確性の向上に努めておりますが、自動翻訳には誤りや不正確な箇所が含まれる可能性があります。正式な内容については原文書を権威ある情報源としてご参照ください。重要な情報に関しては、専門の人間による翻訳を推奨いたします。本翻訳の利用により生じたいかなる誤解や解釈違いについても、当方は一切責任を負いかねます。