[](https://github.com/microsoft/Web-Dev-For-Beginners/blob/master/LICENSE) [](https://GitHub.com/microsoft/Web-Dev-For-Beginners/graphs/contributors/) [](https://GitHub.com/microsoft/Web-Dev-For-Beginners/issues/) [](https://GitHub.com/microsoft/Web-Dev-For-Beginners/pulls/) [](http://makeapullrequest.com) [](https://GitHub.com/microsoft/Web-Dev-For-Beginners/watchers/) [](https://GitHub.com/microsoft/Web-Dev-For-Beginners/network/) [](https://GitHub.com/microsoft/Web-Dev-For-Beginners/stargazers/) [](https://discord.gg/nTYy5BXMWG) # 初心者のためのウェブ開発 - カリキュラム Microsoft Cloud Advocatesによる12週間の包括的なコースで、ウェブ開発の基本を学びましょう。24のレッスンそれぞれで、テラリウム、ブラウザー拡張機能、宇宙ゲームなどの実践的なプロジェクトを通じてJavaScript、CSS、HTMLを学びます。クイズ、ディスカッション、実践的な課題にも参加できます。効果的なプロジェクトベースの教育法でスキルを高め、知識の定着を最適化しましょう。今日からコーディングの旅を始めてみませんか！ Azure AI Foundry Discordコミュニティに参加 [](https://discord.gg/nTYy5BXMWG) これらのリソースを使い始めるには、以下の手順に従ってください： 1. **リポジトリをフォーク**：クリック [](https://GitHub.com/microsoft/Web-Dev-For-Beginners/fork) 2. **リポジトリをクローン**： `git clone https://github.com/microsoft/Web-Dev-For-Beginners.git` 3. [**Azure AI Foundry Discordに参加し、専門家や仲間の開発者と交流**](https://discord.com/invite/ByRwuEEgH4) ### 🌐 多言語サポート #### GitHub Actionを通じてサポート（自動かつ常に最新） [Arabic](../ar/README.md) | [Bengali](../bn/README.md) | [Bulgarian](../bg/README.md) | [Burmese (Myanmar)](../my/README.md) | [Chinese (Simplified)](../zh/README.md) | [Chinese (Traditional, Hong Kong)](../hk/README.md) | [Chinese (Traditional, Macau)](../mo/README.md) | [Chinese (Traditional, Taiwan)](../tw/README.md) | [Croatian](../hr/README.md) | [Czech](../cs/README.md) | [Danish](../da/README.md) | [Dutch](../nl/README.md) | [Estonian](../et/README.md) | [Finnish](../fi/README.md) | [French](../fr/README.md) | [German](../de/README.md) | [Greek](../el/README.md) | [Hebrew](../he/README.md) | [Hindi](../hi/README.md) | [Hungarian](../hu/README.md) | [Indonesian](../id/README.md) | [Italian](../it/README.md) | [Japanese](./README.md) | [Kannada](../kn/README.md) | [Korean](../ko/README.md) | [Lithuanian](../lt/README.md) | [Malay](../ms/README.md) | [Malayalam](../ml/README.md) | [Marathi](../mr/README.md) | [Nepali](../ne/README.md) | [Nigerian Pidgin](../pcm/README.md) | [Norwegian](../no/README.md) | [Persian (Farsi)](../fa/README.md) | [Polish](../pl/README.md) | [Portuguese (Brazil)](../br/README.md) | [Portuguese (Portugal)](../pt/README.md) | [Punjabi (Gurmukhi)](../pa/README.md) | [Romanian](../ro/README.md) | [Russian](../ru/README.md) | [Serbian (Cyrillic)](../sr/README.md) | [Slovak](../sk/README.md) | [Slovenian](../sl/README.md) | [Spanish](../es/README.md) | [Swahili](../sw/README.md) | [Swedish](../sv/README.md) | [Tagalog (Filipino)](../tl/README.md) | [Tamil](../ta/README.md) | [Telugu](../te/README.md) | [Thai](../th/README.md) | [Turkish](../tr/README.md) | [Ukrainian](../uk/README.md) | [Urdu](../ur/README.md) | [Vietnamese](../vi/README.md) > **ローカルでのクローンを希望されますか？** > このリポジトリには50以上の言語翻訳が含まれており、ダウンロードサイズが大きくなります。翻訳なしでクローンするには、スパースチェックアウトを使用してください： > ```bash > 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' > ``` > これにより、コースを完了するために必要なすべてが含まれ、より高速にダウンロードできます。 **追加の翻訳言語をご希望の場合は [こちら](https://github.com/Azure/co-op-translator/blob/main/getting_started/supported-languages.md) に記載されています** [](https://open.vscode.dev/microsoft/Web-Dev-For-Beginners) #### 🧑‍🎓 _学生の皆さんへ_ [**Student Hubページ**](https://docs.microsoft.com/learn/student-hub/?WT.mc_id=academic-77807-sagibbon)をご覧ください。初心者向けリソース、学生パック、無料の証明書バウチャー獲得方法も掲載しています。このページはブックマークして、毎月更新されるコンテンツを随時チェックしてください。 ### 📣 お知らせ - GitHub Copilot Agentモードの新たなチャレンジが登場！ 「GitHub Copilot Agent Challenge 🚀」という新チャレンジが多くの章に追加されました。GitHub CopilotとAgentモードを使ってクリアしてください。Agentモードはテキスト生成だけでなく、ファイル作成や編集、コマンド実行も可能です。まだ使ったことがない方はぜひお試しください。 ### 📣 お知らせ - ジェネレーティブAIを使った新プロジェクト追加 新しいAIアシスタントプロジェクトが追加されました。詳細は[プロジェクト](./9-chat-project/README.md)をチェック！ ### 📣 お知らせ - JavaScriptのジェネレーティブAI用新カリキュラムリリース ジェネレーティブAIの新カリキュラムをお見逃しなく！ [https://aka.ms/genai-js-course](https://aka.ms/genai-js-course)で今すぐ始めましょう！  - 基礎からRAGまでをカバーするレッスン。 - GenAIと連携アプリで歴史上の人物と対話。 - 楽しく魅力的な物語形式でタイムトラベル体験！  各レッスンには課題、知識チェック、チャレンジが含まれており、以下のようなトピックを学びます： - プロンプトとプロンプトエンジニアリング - テキストおよび画像のアプリ生成 - 検索アプリ [https://aka.ms/genai-js-course](../../[https:/aka.ms/genai-js-course)で今すぐ始めましょう！ ## 🌱 はじめに > **先生方へ**、このカリキュラムの使い方について[いくつかの提案](for-teachers.md)を用意しています。ぜひ[ディスカッションフォーラム](https://github.com/microsoft/Web-Dev-For-Beginners/discussions/categories/teacher-corner)でフィードバックをお寄せください！ **[学習者](https://aka.ms/student-page/?WT.mc_id=academic-77807-sagibbon)**は各レッスンで、まず事前クイズから始め、講義資料の読解、様々なアクティビティに取り組み、事後クイズで理解度をチェックしましょう。 学習効果を高めるために、仲間とつながって一緒にプロジェクトに取り組むことをお勧めします！ディスカッションは[フォーラム](https://github.com/microsoft/Web-Dev-For-Beginners/discussions)で活発に行われており、モデレータチームが質問に対応します。 さらに学習を進めるには[Microsoft Learn](https://learn.microsoft.com/users/wirelesslife/collections/p1ddcy5jwy0jkm?WT.mc_id=academic-77807-sagibbon)で追加の教材を探すことを強く推奨します。 ### 📋 環境のセットアップ このカリキュラムは開発環境がすぐ利用できる状態になっています！開始時には[Codespace](https://github.com/features/codespaces/)（ブラウザベースでインストール不要の環境）またはテキストエディタ（例：[Visual Studio Code](https://code.visualstudio.com/?WT.mc_id=academic-77807-sagibbon)）を使ってローカルに実行できます。 #### リポジトリを作成しましょう 作業を保存しやすくするため、リポジトリのコピーを自分のGitHubアカウントに作成することをお勧めします。ページ上部の**Use this template**ボタンをクリックすると、カリキュラムのコピーを含む新しいリポジトリが作成されます。 以下の手順に従ってください： 1. **リポジトリをフォーク**：ページ右上の「Fork」ボタンをクリック。 2. **リポジトリをクローン**： `git clone https://github.com/microsoft/Web-Dev-For-Beginners.git` #### Codespaceでカリキュラムを実行する 作成したリポジトリのコピーで、**Code**ボタンをクリックし、**Open with Codespaces**を選択すると、新しいCodespaceが作成されます。  #### ご自身のコンピューターでカリキュラムを実行する ローカルで実行するにはテキストエディタ、ブラウザー、コマンドラインツールが必要です。最初のレッスン[プログラミング言語とツールの紹介](../../1-getting-started-lessons/1-intro-to-programming-languages)では、それぞれのツールの選択肢を紹介し、最適なものを選べるようガイドします。 おすすめは[Visual Studio Code](https://code.visualstudio.com/?WT.mc_id=academic-77807-sagibbon)で、内蔵の[ターミナル](https://code.visualstudio.com/docs/terminal/basics/?WT.mc_id=academic-77807-sagibbon)も利用可能です。Visual Studio Codeは[こちら](https://code.visualstudio.com/?WT.mc_id=academic-77807-sagibbon)からダウンロードできます。 1. GitHub上のリポジトリをクローンしてください。**Code**ボタンをクリックし、URLをコピーして使用します。 [CodeSpace](./images/createcodespace.png) それから、[Visual Studio Code](https://code.visualstudio.com/?WT.mc_id=academic-77807-sagibbon)内の[ターミナル](https://code.visualstudio.com/docs/terminal/basics/?WT.mc_id=academic-77807-sagibbon)を開き、以下のコマンドを実行します。``は先ほどコピーしたURLに置き換えてください。 ```bash git clone ``` 2. Visual Studio Codeでフォルダーを開きます。これは**ファイル** > **フォルダーを開く** をクリックし、先ほどクローンしたフォルダーを選択することで行えます。 > 推奨されるVisual Studio Code拡張機能： > > * [Live Server](https://marketplace.visualstudio.com/items?itemName=ritwickdey.LiveServer&WT.mc_id=academic-77807-sagibbon) - Visual Studio Code内でHTMLページをプレビューするため > * [Copilot](https://marketplace.visualstudio.com/items?itemName=GitHub.copilot&WT.mc_id=academic-77807-sagibbon) - コーディングをより速くするための支援ツール ## 📂 各レッスンには以下が含まれます: - 任意のスケッチノート - 任意の補足ビデオ - レッスン前のウォームアップクイズ - 書面によるレッスン - プロジェクトベースのレッスンの場合は、プロジェクト開発のステップバイステップガイド - 知識チェック - チャレンジ - 補足読書 - [レッスン後のクイズ](https://ff-quizzes.netlify.app/web/) > **クイズについての注意**：すべてのクイズはQuiz-appフォルダーに収録されており、全48回のクイズが各3問ずつあります。これらは[ここ](https://ff-quizzes.netlify.app/web/)で利用可能です。クイズアプリはローカルで実行するかAzureにデプロイできます。詳細は`quiz-app`フォルダー内の指示に従ってください。 ## 🗃️ レッスン一覧 | | プロジェクト名 | 教える概念 | 学習目標 | リンクされたレッスン | 著者 | | :-: | :---------------------------------------------------------: | :-----------------------------------------------------------------: | -------------------------------------------------------------------------------------------------------------------------- | :-------------------------------------------------------------------------------------------------------------------------: | :-------------------: | | 01 | はじめに | プログラミングの紹介とツールの基礎知識 | ほとんどのプログラミング言語の基本的な基礎知識と、プロの開発者が仕事で使用するソフトウェアについて学びます | [プログラミング言語とツールの紹介](./1-getting-started-lessons/1-intro-to-programming-languages/README.md) | Jasmine | | 02 | はじめに | GitHubの基本、チームでの作業 | GitHubの使い方、チームでコードベースを共同で作業する方法 | [GitHub入門](./1-getting-started-lessons/2-github-basics/README.md) | Floor | | 03 | はじめに | アクセシビリティ | ウェブアクセシビリティの基礎を学びます | [アクセシビリティの基礎](./1-getting-started-lessons/3-accessibility/README.md) | Christopher | | 04 | JS基礎 | JavaScriptのデータ型 | JavaScriptデータ型の基本を学びます | [データ型](./2-js-basics/1-data-types/README.md) | Jasmine | | 05 | JS基礎 | 関数とメソッド | アプリケーションのロジックフローを管理するための関数とメソッドについて学びます | [関数とメソッド](./2-js-basics/2-functions-methods/README.md) | Jasmine と Christopher | | 06 | JS基礎 | JSでの条件分岐作成 | 条件分岐メソッドを使ってコードに条件を作成する方法を学びます | [条件分岐](./2-js-basics/3-making-decisions/README.md) | Jasmine | | 07 | JS基礎 | 配列とループ | JavaScriptで配列とループを使ってデータを扱う方法を学びます | [配列とループ](./2-js-basics/4-arrays-loops/README.md) | Jasmine | | 08 | [テラリウム](./3-terrarium/solution/README.md) | 実践的HTML | オンラインテラリウムを作るためのHTMLを構築し、レイアウト作成に注力します | [HTML入門](./3-terrarium/1-intro-to-html/README.md) | Jen | | 09 | [テラリウム](./3-terrarium/solution/README.md) | 実践的CSS | オンラインテラリウムのスタイルを作るCSSを構築し、ページをレスポンシブ化する基本を学びます | [CSS入門](./3-terrarium/2-intro-to-css/README.md) | Jen | | 10 | [テラリウム](./3-terrarium/solution/README.md) | JavaScriptのクロージャとDOM操作 | ドラッグ＆ドロップインターフェイスにするJavaScriptを作成し、クロージャとDOM操作に注目します | [JavaScriptのクロージャとDOM操作](./3-terrarium/3-intro-to-DOM-and-closures/README.md) | Jen | | 11 | [タイピングゲーム](./4-typing-game/solution/README.md) | タイピングゲームの作成 | キーボードイベントを使ってJavaScriptアプリのロジックを制御する方法を学びます | [イベント駆動プログラミング](./4-typing-game/typing-game/README.md) | Christopher | | 12 | [グリーンブラウザー拡張機能](./5-browser-extension/solution/README.md) | ブラウザーの仕組み | ブラウザーの仕組みと歴史、そしてブラウザー拡張機能の最初の要素の雛形を作る方法を学びます | [ブラウザーについて](./5-browser-extension/1-about-browsers/README.md) | Jen | | 13 | [グリーンブラウザー拡張機能](./5-browser-extension/solution/README.md) | フォームの作成、API呼び出し、ローカルストレージへの変数保存 | API呼び出しのためのJavaScript要素を作り、ローカルストレージに保存した変数を利用する方法を学びます | [API、フォーム、ローカルストレージ](./5-browser-extension/2-forms-browsers-local-storage/README.md) | Jen | | 14 | [グリーンブラウザー拡張機能](./5-browser-extension/solution/README.md) | ブラウザーのバックグラウンド処理とウェブパフォーマンス | 拡張機能のアイコンを管理するためのブラウザーのバックグラウンド処理を利用し、ウェブパフォーマンス関連の最適化を学びます | [バックグラウンド処理とパフォーマンス](./5-browser-extension/3-background-tasks-and-performance/README.md) | Jen | | 15 | [スペースゲーム](./6-space-game/solution/README.md) | JavaScriptによる高度なゲーム開発 | クラスとコンポジションによる継承、Pub/Subパターンなどを学び、ゲーム開発の準備をします | [高度なゲーム開発入門](./6-space-game/1-introduction/README.md) | Chris | | 16 | [スペースゲーム](./6-space-game/solution/README.md) | Canvasへの描画 | 画面に要素を描画するCanvas APIについて学びます | [Canvasへの描画](./6-space-game/2-drawing-to-canvas/README.md) | Chris | | 17 | [スペースゲーム](./6-space-game/solution/README.md) | 画面上での要素の移動 | 直交座標とCanvas APIを用いて要素に動きを付ける方法を発見します | [要素の移動](./6-space-game/3-moving-elements-around/README.md) | Chris | | 18 | [スペースゲーム](./6-space-game/solution/README.md) | 衝突検出 | 要素同士の衝突検出やそれに対する反応、キー押下によるクールダウン機能を作り、ゲームのパフォーマンスを確保します | [衝突検出](./6-space-game/4-collision-detection/README.md) | Chris | | 19 | [スペースゲーム](./6-space-game/solution/README.md) | スコア管理 | ゲームの状態やパフォーマンスに基づいて数学計算を実施します | [スコア管理](./6-space-game/5-keeping-score/README.md) | Chris | | 20 | [スペースゲーム](./6-space-game/solution/README.md) | ゲーム終了と再開 | ゲームの終了と再開について学び、資源のクリーンアップや変数のリセット方法を学びます | [終了条件](./6-space-game/6-end-condition/README.md) | Chris | | 21 | [バンキングアプリ](./7-bank-project/solution/README.md) | ウェブアプリにおけるHTMLテンプレートとルーティング | ルーティングとHTMLテンプレートを使ってマルチページサイトの構造を作る方法を学びます | [HTMLテンプレートとルート](./7-bank-project/1-template-route/README.md) | Yohan | | 22 | [バンキングアプリ](./7-bank-project/solution/README.md) | ログインと登録フォームの作成 | フォーム作成と検証処理の基礎を学びます | [フォーム](./7-bank-project/2-forms/README.md) | Yohan | | 23 | [バンキングアプリ](./7-bank-project/solution/README.md) | データの取得と利用方法 | アプリ内のデータの流れ、取得、保存、処理方法を学びます | [データ](./7-bank-project/3-data/README.md) | Yohan | | 24 | [バンキングアプリ](./7-bank-project/solution/README.md) | 状態管理の概念 | アプリがどのように状態を保持し、プログラム的に管理するかを学びます | [状態管理](./7-bank-project/4-state-management/README.md) | Yohan | | 25 | [Browser/VScode Code](../../8-code-editor) | VScodeの使い方 | コードエディターの使い方を学ぶ | [VScodeコードエディターの使用](./8-code-editor/1-using-a-code-editor/README.md) | Chris | | 26 | [AIアシスタント](./9-chat-project/README.md) | AIとの連携 | 独自のAIアシスタントの作成方法を学ぶ | [AIアシスタントプロジェクト](./9-chat-project/README.md) | Chris | ## 🏫 教育方針 私たちのカリキュラムは、以下の二つの重要な教育原則に基づいて設計されています： * プロジェクトベースの学習 * 頻繁なクイズ このプログラムではJavaScript、HTML、CSSの基礎から、今日のウェブ開発者が使用する最新のツールと技術を学べます。学習者はタイピングゲーム、バーチャルテラリウム、環境に優しいブラウザー拡張機能、スペースインベーダースタイルのゲーム、企業向けの銀行アプリを作成することで実践的な経験が得られます。シリーズの終了時点で、ウェブ開発に関する確かな理解を身につけられます。 > 🎓 このカリキュラムの最初の数レッスンは、Microsoft Learnの[学習パス](https://docs.microsoft.com/learn/paths/web-development-101/?WT.mc_id=academic-77807-sagibbon)として受講できます！ 内容がプロジェクトに沿っているため、学習者にとってより興味を引くものとなり、概念の定着が促進されます。またJavaScriptの基礎を紹介するスターター用のレッスンもいくつか用意し、同時に"[Beginners Series to: JavaScript](https://channel9.msdn.com/Series/Beginners-Series-to-JavaScript/?WT.mc_id=academic-77807-sagibbon)"というビデオチュートリアル集から提供しており、その中の一部の作者も本カリキュラムの作成に貢献しています。 さらに、クラスの前に低難度のクイズを行うことで学習者の学習意図を高め、クラス後の別クイズで理解度のさらなる定着を図ります。このカリキュラムは柔軟かつ楽しく学べるよう設計されているため、一部だけでも全体でも受講可能です。プロジェクトは小さなものから始まり、12週間のサイクル終了時にはより複雑なものへと発展します。 JavaScriptフレームワークの導入は意図的に避けており、基本的なウェブ開発スキルを身につけた後にフレームワーク導入に進むことを狙っています。このカリキュラムを終えた次のステップとして、別のビデオ集である"[Beginner Series to: Node.js](https://channel9.msdn.com/Series/Beginners-Series-to-Nodejs/?WT.mc_id=academic-77807-sagibbon)"でNode.jsを学ぶことを推奨します。 > 私たちの[行動規範](CODE_OF_CONDUCT.md)と[貢献ガイドライン](CONTRIBUTING.md)をご覧ください。建設的なフィードバックを歓迎します！ ## 🧭 オフラインアクセス [Docsify](https://docsify.js.org/#/)を使ってこのドキュメントをオフラインで実行できます。このリポジトリをフォークし、ローカルマシンに[Docsifyをインストール](https://docsify.js.org/#/quickstart)した上で、このリポジトリのルートフォルダーで`docsify serve`と入力してください。ウェブサイトはローカルホストの3000番ポート（`localhost:3000`）で提供されます。 ## 📘 PDF すべてのレッスンのPDFはこちらから入手できます: [ここ](https://microsoft.github.io/Web-Dev-For-Beginners/pdf/readme.pdf)。 ## 🎒 その他のコース 私たちのチームは他にもコースを提供しています！ぜひご覧ください： ### LangChain [](https://aka.ms/langchain4j-for-beginners) [](https://aka.ms/langchainjs-for-beginners?WT.mc_id=m365-94501-dwahlin) --- ### Azure / Edge / MCP / Agents [](https://github.com/microsoft/AZD-for-beginners?WT.mc_id=academic-105485-koreyst) [](https://github.com/microsoft/edgeai-for-beginners?WT.mc_id=academic-105485-koreyst) [](https://github.com/microsoft/mcp-for-beginners?WT.mc_id=academic-105485-koreyst) [](https://github.com/microsoft/ai-agents-for-beginners?WT.mc_id=academic-105485-koreyst) --- ### 生成AIシリーズ [](https://github.com/microsoft/generative-ai-for-beginners?WT.mc_id=academic-105485-koreyst) [-9333EA?style=for-the-badge&labelColor=E5E7EB&color=9333EA)](https://github.com/microsoft/Generative-AI-for-beginners-dotnet?WT.mc_id=academic-105485-koreyst) [-C084FC?style=for-the-badge&labelColor=E5E7EB&color=C084FC)](https://github.com/microsoft/generative-ai-for-beginners-java?WT.mc_id=academic-105485-koreyst) [-E879F9?style=for-the-badge&labelColor=E5E7EB&color=E879F9)](https://github.com/microsoft/generative-ai-with-javascript?WT.mc_id=academic-105485-koreyst) --- ### コアラーニング [](https://aka.ms/ml-beginners?WT.mc_id=academic-105485-koreyst) [](https://aka.ms/datascience-beginners?WT.mc_id=academic-105485-koreyst) [](https://aka.ms/ai-beginners?WT.mc_id=academic-105485-koreyst) [](https://github.com/microsoft/Security-101?WT.mc_id=academic-96948-sayoung) [](https://aka.ms/webdev-beginners?WT.mc_id=academic-105485-koreyst) [](https://aka.ms/iot-beginners?WT.mc_id=academic-105485-koreyst) [](https://github.com/microsoft/xr-development-for-beginners?WT.mc_id=academic-105485-koreyst) --- ### Copilotシリーズ [](https://aka.ms/GitHubCopilotAI?WT.mc_id=academic-105485-koreyst) [](https://github.com/microsoft/mastering-github-copilot-for-dotnet-csharp-developers?WT.mc_id=academic-105485-koreyst) [](https://github.com/microsoft/CopilotAdventures?WT.mc_id=academic-105485-koreyst) ## ヘルプを得る AIアプリの構築で困ったことがあったり質問がある場合は、学習者や経験豊富な開発者と一緒にMCPについて議論に参加しましょう。質問歓迎のサポートコミュニティで、知識が自由に共有されています。 [](https://discord.gg/nTYy5BXMWG) 製品のフィードバックや構築中のエラーについては、こちらをご覧ください： [](https://aka.ms/foundry/forum) ## ライセンス このリポジトリはMITライセンスの下でライセンスされています。詳細は[LICENSE](../../LICENSE)ファイルをご覧ください。 --- **免責事項**： 本書類はAI翻訳サービス「Co-op Translator」（https://github.com/Azure/co-op-translator）を用いて翻訳されました。正確さには努めておりますが、自動翻訳には誤りや不正確な部分が含まれる可能性があります。原文の言語で記述された文書を正式な情報源としてご参照ください。重要な情報については、専門の人間翻訳をご利用いただくことを推奨します。本翻訳の利用により生じたいかなる誤解や解釈の相違についても、当方は責任を負いかねます。