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

Arabic | Bengali | Bulgarian | Burmese (Myanmar) | Chinese (Simplified) | Chinese (Traditional, Hong Kong) | Chinese (Traditional, Macau) | Chinese (Traditional, Taiwan) | Croatian | Czech | Danish | Dutch | Estonian | Finnish | French | German | Greek | Hebrew | Hindi | Hungarian | Indonesian | Italian | Japanese | Kannada | Korean | Lithuanian | Malay | Malayalam | Marathi | Nepali | Nigerian Pidgin | Norwegian | Persian (Farsi) | Polish | Portuguese (Brazil) | Portuguese (Portugal) | Punjabi (Gurmukhi) | Romanian | Russian | Serbian (Cyrillic) | Slovak | Slovenian | Spanish | Swahili | Swedish | Tagalog (Filipino) | Tamil | Telugu | Thai | Turkish | Ukrainian | Urdu | Vietnamese

ローカルでクローンしたいですか？

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

Bash / macOS / Linux:

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'

CMD（Windows）:

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

リポジトリを作成する

作業を簡単に保存するため、自分のコピーのリポジトリを作成することをお勧めします。ページ上部の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 内の Terminal を開き、コピーした <your-repository-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	Getting Started	プログラミングの紹介と開発ツールの基礎	主要なプログラミング言語の基本的な基礎知識と、プロの開発者が仕事に使うソフトウェアについて学ぶ	プログラミング言語と開発ツールの紹介	Jasmine
02	Getting Started	GitHubの基本、チームでの作業を含む	プロジェクトでGitHubを利用する方法とコードベースで他者と協力する方法	GitHubの紹介	Floor
03	Getting Started	アクセシビリティ	ウェブアクセシビリティの基本を学ぶ	アクセシビリティの基礎	Christopher
04	JS Basics	JavaScriptのデータ型	JavaScriptのデータ型の基本を学ぶ	データ型	Jasmine
05	JS Basics	関数とメソッド	アプリケーションのロジックの流れを管理する関数とメソッドについて学ぶ	関数とメソッド	Jasmine and Christopher
06	JS Basics	JSでの条件分岐	コード内で条件を作る決定手法について学ぶ	条件分岐	Jasmine
07	JS Basics	配列とループ	JavaScriptで配列やループを使ってデータを操作する方法	配列とループ	Jasmine
08	Terrarium	実践的HTML	オンラインテラリウムを作成するためのHTMLを構築し、レイアウトを重視	HTMLの紹介	Jen
09	Terrarium	実践的CSS	オンラインテラリウムのスタイリング用CSSを構築し、ページのレスポンシブ化などCSSの基本を学ぶ	CSSの紹介	Jen
10	Terrarium	JavaScriptのクロージャーとDOM操作	ドラッグ＆ドロップインターフェースとして機能するテラリウムのJavaScriptを構築し、クロージャーとDOM操作に注力	クロージャーとDOM操作	Jen
11	Typing Game	タイピングゲームを作る	キーボードイベントを利用してJavaScriptアプリのロジックを操作する方法	イベント駆動プログラミング	Christopher
12	Green Browser Extension	ブラウザの仕組み	ブラウザの動作や歴史を学び、ブラウザー拡張機能の最初の要素をスキャフォールドする方法	ブラウザについて	Jen
13	Green Browser Extension	フォーム構築、API呼び出し、ローカルストレージ変数の利用	変数をローカルストレージに保存しAPIを呼び出すブラウザー拡張機能のJavaScript要素を作成	API、フォーム、ローカルストレージ	Jen
14	Green Browser Extension	ブラウザのバックグラウンドプロセス、ウェブパフォーマンス	拡張機能のアイコン管理にブラウザのバックグラウンドプロセスを使い、ウェブパフォーマンスと最適化手法を学ぶ	バックグラウンドタスクとパフォーマンス	Jen
15	Space Game	JavaScriptによる高度なゲーム開発	クラスとコンポジションの継承およびPub/Subパターンについて学び、ゲーム開発の準備をする	高度なゲーム開発の紹介	Chris
16	Space Game	Canvasへの描画	画面に要素を描画するためのCanvas APIについて学ぶ	Canvasへの描画	Chris
17	Space Game	画面上での要素の動かし方	要素に動きを与えるためのデカルト座標系とCanvas APIの使い方を学ぶ	要素の移動	Chris
18	Space Game	衝突検知	要素を衝突させ、互いに反応させ、パフォーマンスを維持するためのクールダウン機能を提供する方法	衝突検知	Chris
19	Space Game	得点管理	ゲームの状態とパフォーマンスに基づいた数学的計算を行う	得点管理	Chris
20	Space Game	ゲームの終了と再開	アセットのクリーンアップと変数値のリセットを含む、ゲームの終了と再開方法について学ぶ	終了条件	Chris
21	Banking App	ウェブアプリのHTMLテンプレートとルーティング	複数ページのウェブサイト構造のスキャフォールディングをルーティングとHTMLテンプレートを使って学ぶ	HTMLテンプレートとルーティング	Yohan
22	Banking App	ログインと登録フォームの構築	フォーム作成およびバリデーション処理について学ぶ	フォーム	Yohan
23	Banking App	データ取得と使用の方法	アプリ内でのデータの流れ、取得、保存、破棄の方法を学ぶ	データ	Yohan
24	Banking App	ステート管理の概念	アプリがステートを保持し、プログラムで管理する方法を学ぶ	ステート管理	Yohan
25	Browser/VScode Code	VScodeの使い方	コードエディタの使い方を学ぶ	VScodeコードエディタの使い方	Chris
26	AI Assistants	AIを使う	オリジナルのAIアシスタントの作り方を学ぶ	AIアシスタントプロジェクト	Chris

🏫 教育方針

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

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

プログラムはJavaScript、HTML、CSSの基本と、今日のウェブ開発者が使う最新のツールや技術を教えます。学習者はタイピングゲーム、バーチャルテラリウム、環境配慮型ブラウザー拡張機能、スペースインベーダースタイルのゲーム、ビジネス向け銀行アプリ構築を通じて実践経験を積むことができます。シリーズの終了時にはウェブ開発の確固たる理解が得られます。

🎓 このカリキュラムの最初の数レッスンはMicrosoft LearnのLearn Pathとして受講可能です！

内容をプロジェクトに沿わせることで学習者の興味を引きつけ、概念の定着効果を高めます。また、JavaScriptの基本を紹介するいくつかのスターターレッスンと、“Beginners Series to: JavaScript”の動画シリーズ（本カリキュラムの著者の一部も関わっている）も組み合わせています。

さらに、クラス前の低負荷クイズで学習者の学習意欲を高め、クラス後の2回目のクイズで理解の定着を促します。このカリキュラムは柔軟かつ楽しく受講でき、全体または一部を選んで学ぶことができます。プロジェクトは小さなものから始まり、12週間コースの終わりにかけて徐々に複雑になります。

フレームワーク導入をあえて避けているため、まずはウェブ開発者としての基本スキルを身につけることに集中できます。次のステップとしては別の動画シリーズ「Beginner Series to: Node.js」を通じてNode.jsを学ぶことが推奨されます。

当プロジェクトの行動規範と貢献ガイドをご覧ください。建設的なフィードバックを歓迎します！

🧭 オフラインアクセス

Docsifyを使うことで、このドキュメントをオフラインで利用できます。このリポジトリをフォークし、ローカルマシンにDocsifyをインストールした後、リポジトリのルートフォルダーで docsify serve コマンドを実行します。ウェブサイトはローカルホストのポート3000で提供されます: localhost:3000。

📘 PDF

すべてのレッスンのPDFは、こちらで入手できます。

🎒 その他のコース

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

LangChain

Azure / Edge / MCP / Agents

---

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

---

コア学習

---

Copilotシリーズ

ヘルプを得るには

AIアプリの構築で行き詰まったり質問がある場合は、MCPに関する議論に参加して、仲間の学習者や経験豊富な開発者と交流しましょう。質問歓迎で知識を自由に共有するサポートコミュニティです。

製品のフィードバックや構築中のエラーについては、こちらをご覧ください：

ライセンス

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

---

免責事項： 本書類はAI翻訳サービス「Co-op Translator」(https://github.com/Azure/co-op-translator) を使用して翻訳されました。正確性の向上に努めておりますが、自動翻訳には誤りや不正確な箇所が含まれる可能性があります。正式な情報源は原文の原語版となります。重要な情報については、専門の翻訳者による人力翻訳を推奨します。本翻訳の利用により発生した誤解や誤訳について、一切の責任を負いかねます。