Web Development for Beginners - カリキュラム

Microsoft Cloud Advocates による12週間の総合的なコースでウェブ開発の基本を学びましょう。24回の各レッスンは、テラリウム、ブラウザー拡張機能、宇宙ゲームなどの実践的プロジェクトを通じてJavaScript、CSS、HTMLを深掘りします。クイズやディスカッション、実践課題に参加してください。効果的なプロジェクトベースの教育法でスキルを高め、知識の定着を最適化しましょう。今日からコーディングを始めましょう！

Azure AI Foundry Discord コミュニティに参加する

これらのリソースを使い始めるには、以下の手順に従ってください:

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

🌐 多言語サポート

GitHub Action を通じてサポート（自動＆常に最新）

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

このリポジトリには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アカウントにカリキュラムのコピーを作成できます。

手順は以下のとおりです:

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

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

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

ローカルマシンでカリキュラムを実行する

ローカルで実行するには、テキストエディター、ブラウザー、コマンドラインツールが必要です。最初のレッスンプログラミング言語と開発ツール入門で各ツールの選択肢を案内しますので、ご自身に合うものを選択してください。

推奨は Visual Studio Code です。VS Codeには統合ターミナルも備わっています。Visual Studio Codeはこちらからダウンロードできます。

リポジトリをコンピューターにクローンします。これは、Code ボタンをクリックしてURLをコピーすることで行えます:

CodeSpace

次に、Visual Studio Code 内の Terminal を開き、先ほどコピーしたURLを <your-repository-url> に置き換えて、以下のコマンドを実行します:
```
git clone <your-repository-url>
```
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	JavaScriptでの条件分岐	条件分岐の作成方法を学ぶ	条件分岐	Jasmine
07	JS Basics	配列とループ	JavaScriptで配列とループを使ってデータを扱う	配列とループ	Jasmine
08	Terrarium	HTML実践	オンラインテラリウムを作成するHTML構築、レイアウト作成に重点を置く	HTML入門	Jen
09	Terrarium	CSS実践	オンラインテラリウムをスタイリングするCSS構築、レスポンシブページの基本を学ぶ	CSS入門	Jen
10	Terrarium	JavaScriptのクロージャ、DOM操作	ドラッグ＆ドロップ機能を持つテラリウムを作るJavaScript構築、クロージャとDOM操作に焦点を当てる	JavaScriptのクロージャと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	Webアプリの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」の映像も組み合わせています。本カリキュラムの著者の一部もこの動画シリーズに寄稿しています。

さらに、授業前の簡単なクイズが学習意欲を高め、授業後のクイズが理解を深めます。このカリキュラムは柔軟で楽しく、全編または一部だけを受講できます。プロジェクトは小さなものから始まり、12週間の期間終了時には徐々に複雑になります。

あえてJavaScriptのフレームワークは導入せず、基礎スキルの習得に集中しています。カリキュラム修了後の次のステップとしては、別の動画シリーズ「Beginner Series to: Node.js」でNode.jsを学ぶことをお勧めします。

私たちの行動規範とコントリビューションガイドをご覧ください。皆様の建設的なフィードバックを歓迎します！

🧭 オフラインアクセス

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

📘 PDF

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

🎒 その他のコース

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

LangChain

Azure / Edge / MCP / Agents

生成AIシリーズ

コアラーニング

コパイロットシリーズ

ヘルプの受け方

AIアプリの構築で行き詰まったり質問があれば、MCPに関する議論に参加しましょう。同じ学習者や経験豊富な開発者と交流できる支援コミュニティで、質問は歓迎され、知識は自由に共有されています。

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

ライセンス

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

免責事項:
本書類は AI 翻訳サービス Co-op Translator を使用して翻訳されています。正確性を期しておりますが、自動翻訳には誤りや不正確な点が含まれる可能性があることをご了承ください。原文の言語での文書が権威ある情報源と見なされます。重要な情報に関しては、専門の人間による翻訳をお勧めします。この翻訳の利用により生じたいかなる誤解や解釈の相違についても、当方は責任を負いかねます。

Provide feedback

Saved searches

Use saved searches to filter your results more quickly