Web-Dev-For-Beginners/translations/ja

Web Development for Beginners - カリキュラム

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 | Khmer | 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>はコピーした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クイズ、それぞれ３問です。クイズはこちらで利用可能で、クイズアプリはローカルで実行するかAzureにデプロイ可能です。quiz-appフォルダ内の指示に従ってください。

🗃️ レッスンリスト

	プロジェクト名	教える概念	学習目標	リンクされたレッスン	作成者
01	Getting Started	プログラミング入門とツールの基礎	多くのプログラミング言語の基本的な仕組みとプロの開発者が仕事で使うソフトウェアについて学ぶ	Intro to Programming Languages and Tools of the Trade	Jasmine
02	Getting Started	GitHubの基礎、チームでの作業を含む	プロジェクトでGitHubを使う方法、コードベースで他者と協働する方法	Intro to GitHub	Floor
03	Getting Started	アクセシビリティ	ウェブアクセシビリティの基本を学ぶ	Accessibility Fundamentals	Christopher
04	JS Basics	JavaScriptのデータ型	JavaScriptのデータ型の基本	Data Types	Jasmine
05	JS Basics	関数とメソッド	アプリケーションのロジックフローを管理するための関数とメソッドについて学ぶ	Functions and Methods	Jasmine and Christopher
06	JS Basics	JSでの意思決定	コード内で条件を作成する意思決定の方法を学ぶ	Making Decisions	Jasmine
07	JS Basics	配列とループ	JavaScriptで配列とループを使ったデータ処理	Arrays and Loops	Jasmine
08	Terrarium	HTML実践	オンラインテラリウム作成のためのHTMLを構築、レイアウト構築に注力	Introduction to HTML	Jen
09	Terrarium	CSS実践	オンラインテラリウムをスタイル設定するCSSを作成、ページをレスポンシブにする基本を含む	Introduction to CSS	Jen
10	Terrarium	JavaScriptクロージャー、DOM操作	テラリウムをドラッグ＆ドロップインターフェースとして動作させるJavaScriptを構築。クロージャーとDOM操作に注力	JavaScript Closures, DOM manipulation	Jen
11	Typing Game	タイピングゲームの構築	キーボードイベントを使ってJavaScriptアプリのロジックを動かす方法を学ぶ	Event-Driven Programming	Christopher
12	Green Browser Extension	ブラウザの動作	ブラウザの動作、歴史、ブラウザ拡張機能の最初の要素を作成する方法を学ぶ	About Browsers	Jen
13	Green Browser Extension	フォームの構築、API呼び出し、ローカルストレージへの変数保存	APIを呼び出すブラウザ拡張機能のJavaScript要素を構築、ローカルストレージに保存した変数を使用	APIs, Forms, and Local Storage	Jen
14	Green Browser Extension	ブラウザのバックグラウンド処理とウェブパフォーマンス	ブラウザのバックグラウンド処理で拡張のアイコンを管理し、ウェブパフォーマンスと最適化を学ぶ	Background Tasks and Performance	Jen
15	Space Game	JavaScriptでのより高度なゲーム開発	クラスとコンポジションの両方を使った継承とPub/Subパターンについて学び、ゲーム開発に備える	Introduction to Advanced Game Development	Chris
16	Space Game	Canvasへの描画	スクリーンへの描画に使われるCanvas APIについて学ぶ	Drawing to Canvas	Chris
17	Space Game	画面上の要素の移動	カルテシアン座標とCanvas APIを使って要素に動きを付ける方法を学ぶ	Moving Elements Around	Chris
18	Space Game	衝突判定	キー押下を使った要素同士の衝突判定と反応を作り、ゲームのパフォーマンス用のクールダウン機能を提供	Collision Detection	Chris
19	Space Game	スコア管理	ゲームの状態やパフォーマンスに基づいた数学的計算を行う	Keeping Score	Chris
20	Space Game	ゲームの終了と再スタート	ゲームの終了と再スタートについて学び、アセットのクリーンアップや変数のリセットを含む	The Ending Condition	Chris
21	Banking App	WebアプリのHTMLテンプレートとルート	ルーティングとHTMLテンプレートを使い、マルチページWebサイトの骨組みの作成方法を学ぶ	HTML Templates and Routes	Yohan
22	Banking App	ログインと登録フォームの構築	フォーム構築と検証ルーチンの処理について学ぶ	Forms	Yohan
23	Banking App	データの取得と使用方法	アプリ内でのデータの流れ、取得、格納、破棄方法を学ぶ	Data	Yohan
24	Banking App	ステート管理の概念	アプリが状態を保持する方法とプログラム的な管理方法を学ぶ	State Management	Yohan
25	Browser/VScode Code	VScodeの操作	コードエディタの使い方を学ぶ	Use VScode Code Editor	Chris
26	AI Assistants	AIを使う	独自のAIアシスタント作成法を学ぶ	AI Assistant project	Chris

🏫 教育方針

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

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

このプログラムはJavaScript、HTML、CSSの基礎、及び現代のウェブ開発者が使う最新ツールや技法を教えます。学生は実際にタイピングゲーム、バーチャルテラリウム、環境に優しいブラウザ拡張機能、スペースインベーダースタイルのゲーム、ビジネス向け銀行アプリを作成することで実践経験を積むことができます。シリーズ終了時にはウェブ開発の確かな理解を得られます。

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

内容がプロジェクトと一貫していることで、学生にとってより興味深くなり、概念の定着が促進されます。また、JavaScript基本のスターターレッスンもいくつか用意し、「Beginners Series to: JavaScript」のビデオチュートリアル（本カリキュラム作者の一部も参加）に連動しています。

さらに、低リスクなクラス前クイズが学習目標を設定し、クラス後のクイズが理解の定着を助けます。本カリキュラムは柔軟で楽しく、全体でも一部でも受講できます。プロジェクトは小規模から始まり、12週間のサイクル終盤にはより複雑になります。

JavaScriptフレームワークを意図的に避け、フレームワーク導入前に必要な基本スキルを磨くことに集中しています。カリキュラム修了後の次のステップとして、別のビデオ集「Beginner Series to: Node.js」を学ぶことをお勧めします。

Code of ConductとContributingガイドラインもご覧ください。建設的なフィードバックを歓迎します！

🧭 オフラインアクセス

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

📘 PDF

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

🎒 その他のコース

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

LangChain

Azure / Edge / MCP / Agents

---

生成AIシリーズ

---

コアラーニング

---

コパイロットシリーズ

ヘルプを得るには

AIアプリの構築で行き詰まったり質問がある場合は、MCPに関するディスカッションに参加しましょう。質問が歓迎され、知識が自由に共有される支援的なコミュニティです。

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

ライセンス

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

---

免責事項:
本書類は AI 翻訳サービス Co-op Translator を使用して翻訳されています。正確さを期していますが、自動翻訳には誤りや不正確な箇所が含まれる可能性があることをご承知ください。原文の母国語版が正式な情報源とみなされます。重要な情報については、専門の人間による翻訳を推奨します。本翻訳の使用により生じた誤解や誤訳について、一切の責任を負いかねます。