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で対応（自動かつ常に最新）

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以上の言語翻訳が含まれているため、ダウンロードサイズが大きくなっています。翻訳なしでクローンするにはスパースチェックアウトを使ってください：

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モードはテキスト生成だけでなく、ファイル作成・編集、コマンド実行なども可能です。

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

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

📣 お知らせ - 生成AIを使ったJavaScript向けの新カリキュラムをリリース

新しい生成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を使うことです。VS Codeにはターミナルが内蔵されています。ダウンロードはこちら：

https://code.visualstudio.com/?WT.mc_id=academic-77807-sagibbon

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

   CodeSpace 次に、Visual Studio Code 内の ターミナル を開き、先ほどコピーした URL に <your-repository-url> を置き換えて次のコマンドを実行します:

   git clone <your-repository-url>
   

2. Visual Studio Code でフォルダーを開きます。ファイル > フォルダーを開く をクリックして、先ほどクローンしたフォルダーを選択します。

推奨される 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	アクセシビリティ	Webアクセシビリティの基本を学ぶ	アクセシビリティ基礎	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の基本に注力	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による高度なゲーム開発	クラスとコンポジション両方を使った継承とパブ/サブパターンの理解、ゲーム作成の準備として学ぶ	高度なゲーム開発入門	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 のラーニングパスとしても学べます！

コンテンツをプロジェクトに連動させることで、学習者の関与を高め、概念の定着を助けるように設計しています。また、JavaScript基礎のスターターレッスンをいくつか作成し、Beginners Series to: JavaScript動画チュートリアルコレクションの一部と組み合わせています。このシリーズの一部の著者も本カリキュラムに寄稿しています。

さらに、低難度のクラス前クイズで学習への意識を促し、クラス後の第2回クイズで深い定着を促進。フレキシブルで楽しく取り組めるように設計されており、12週間の期間中にプロジェクトが徐々に複雑化していきます。

JavaScriptフレームワークの導入を意図的に避け、ウェブ開発者としての基本スキルを身につけることに集中していますが、カリキュラム修了後の次のステップとしてNode.jsを学ぶための別コレクション動画「Beginner Series to: Node.js」もお勧めします。

当プロジェクトの行動規範および貢献ガイドラインをご覧ください。建設的なご意見を歓迎します！

🧭 オフラインアクセス

このドキュメントは Docsify を使ってオフラインで閲覧できます。このリポジトリをフォークし、ローカル環境に Docsifyをインストールしてから、このリポジトリのルートフォルダーで docsify serve を実行すると、ウェブサイトがローカルホストの3000番ポートで提供されます: localhost:3000。

📘 PDF

すべてのレッスンをまとめたPDFはこちらで入手できます。

🎒 その他のコース

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

LangChain

Azure / Edge / MCP / Agents

---

Generative AI Series

---

Core Learning

---

Copilot Series

ヘルプを得る

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

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

ライセンス

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

---

免責事項： 本書類はAI翻訳サービス Co-op Translator を使用して翻訳されています。正確性には努めておりますが、自動翻訳には誤りや不正確な部分が含まれる可能性があります。正確な情報は原文の原言語の書類を正式な情報源としてご参照ください。重要な情報については、専門の人間翻訳をご利用いただくことを推奨します。本翻訳の利用によって生じたいかなる誤解や誤訳に対しても、当方は一切の責任を負いかねます。