|
|
<!--
|
|
|
CO_OP_TRANSLATOR_METADATA:
|
|
|
{
|
|
|
"original_hash": "efa251c5fc089367f0a81c572874afca",
|
|
|
"translation_date": "2025-08-28T10:47:41+00:00",
|
|
|
"source_file": "README.md",
|
|
|
"language_code": "ja"
|
|
|
}
|
|
|
-->
|
|
|
[](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/zxKYvhSnVp?WT.mc_id=academic-000002-leestott)
|
|
|
|
|
|
[](https://open.vscode.dev/microsoft/Web-Dev-For-Beginners)
|
|
|
|
|
|
[](https://discord.com/invite/ByRwuEEgH4)
|
|
|
|
|
|
これらのリソースを使い始めるための手順:
|
|
|
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)
|
|
|
|
|
|
# 初心者向けウェブ開発 - カリキュラム
|
|
|
|
|
|
Microsoft Cloud Advocatesによる12週間の包括的なコースでウェブ開発の基礎を学びましょう。24のレッスンでは、JavaScript、CSS、HTMLを使った実践的なプロジェクト（テラリウム、ブラウザ拡張機能、宇宙ゲームなど）を通じて学びます。クイズ、ディスカッション、実践課題を通じてスキルを向上させ、プロジェクトベースの学習法で知識の定着を最大化します。今日からコーディングの旅を始めましょう！
|
|
|
|
|
|
#### 🧑🎓 _学生の方へ_
|
|
|
|
|
|
[**Student Hubページ**](https://docs.microsoft.com/learn/student-hub/?WT.mc_id=academic-77807-sagibbon) を訪問してください。初心者向けリソース、学生向けパック、さらには無料の認定証バウチャーを取得する方法が見つかります。このページはブックマークして、毎月内容が更新されるので定期的にチェックしてください。
|
|
|
|
|
|
### 📣 お知らせ - _新しいカリキュラム_「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)などのテキストエディタを使用して実行することができます。
|
|
|
|
|
|
#### リポジトリを作成する
|
|
|
作業内容を簡単に保存するために、このリポジトリのコピーを作成することをお勧めします。ページ上部の **Use this template** ボタンをクリックすると、カリキュラムのコピーがあなたのGitHubアカウントに新しいリポジトリとして作成されます。
|
|
|
|
|
|
手順:
|
|
|
1. **リポジトリをフォークする**: ページ右上の「Fork」ボタンをクリックしてください。
|
|
|
2. **リポジトリをクローンする**: `git clone https://github.com/microsoft/Web-Dev-For-Beginners.git`
|
|
|
|
|
|
#### Codespaceでカリキュラムを実行する
|
|
|
|
|
|
作成したリポジトリのコピーで、**Code** ボタンをクリックし、**Open with Codespaces** を選択してください。これにより、作業用の新しいCodespaceが作成されます。
|
|
|
|
|
|
[!Codespace](../..)./images/createcodespace.png)
|
|
|
|
|
|
#### ローカルコンピュータでカリキュラムを実行する
|
|
|
|
|
|
ローカルコンピュータでカリキュラムを実行するには、テキストエディタ、ブラウザ、コマンドラインツールが必要です。最初のレッスン[プログラミング言語とツールの紹介](../../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)も利用できます。[こちら](https://code.visualstudio.com/?WT.mc_id=academic-77807-sagibbon)からダウンロードできます。
|
|
|
|
|
|
1. リポジトリをコンピュータにクローンします。**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を `<your-repository-url>` に置き換えて以下のコマンドを実行してください:
|
|
|
|
|
|
```bash
|
|
|
git clone <your-repository-url>
|
|
|
```
|
|
|
|
|
|
2. Visual Studio Codeでフォルダを開きます。**File** > **Open Folder** をクリックし、クローンしたフォルダを選択してください。
|
|
|
|
|
|
> 推奨されるVisual Studio Code拡張機能:
|
|
|
>
|
|
|
> * [Live Server](https://marketplace.visualstudio.com/items?itemName=ritwickdey.LiveServer&WT.mc_id=academic-77807-sagibbon) - HTMLページをVisual Studio Code内でプレビューするため
|
|
|
> * [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 and 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の基本とページをレスポンシブにする方法に焦点を当てる | [CSSの紹介](./3-terrarium/2-intro-to-css/README.md) | Jen |
|
|
|
| 10 | [Terrarium](./3-terrarium/solution/README.md) | JavaScriptのクロージャとDOM操作 | JavaScriptを使ってドラッグ＆ドロップインターフェースとして機能するテラリウムを構築し、クロージャとDOM操作に焦点を当てます | [JavaScriptのクロージャとDOM操作](./3-terrarium/3-intro-to-DOM-and-closures/README.md) | Jen |
|
|
|
| 11 | [Typing Game](./4-typing-game/solution/README.md) | タイピングゲームを作成 | キーボードイベントを使用してJavaScriptアプリのロジックを駆動する方法を学びます | [イベント駆動型プログラミング](./4-typing-game/typing-game/README.md) | Christopher |
|
|
|
| 12 | [Green Browser Extension](./5-browser-extension/solution/README.md) | ブラウザの操作 | ブラウザの仕組み、その歴史、ブラウザ拡張機能の最初の要素をスキャフォールドする方法を学びます | [ブラウザについて](./5-browser-extension/1-about-browsers/README.md) | Jen |
|
|
|
| 13 | [Green Browser Extension](./5-browser-extension/solution/README.md) | フォームの構築、APIの呼び出し、ローカルストレージへの変数保存 | ローカルストレージに保存された変数を使用してAPIを呼び出すブラウザ拡張機能のJavaScript要素を構築します | [API、フォーム、ローカルストレージ](./5-browser-extension/2-forms-browsers-local-storage/README.md) | Jen |
|
|
|
| 14 | [Green Browser Extension](./5-browser-extension/solution/README.md) | ブラウザのバックグラウンドプロセス、ウェブパフォーマンス | ブラウザのバックグラウンドプロセスを使用して拡張機能のアイコンを管理し、ウェブパフォーマンスと最適化について学びます | [バックグラウンドタスクとパフォーマンス](./5-browser-extension/3-background-tasks-and-performance/README.md) | Jen |
|
|
|
| 15 | [Space Game](./6-space-game/solution/README.md) | JavaScriptを使ったより高度なゲーム開発 | クラスとコンポジションを使用した継承やPub/Subパターンについて学び、ゲーム構築の準備をします | [高度なゲーム開発の紹介](./6-space-game/1-introduction/README.md) | Chris |
|
|
|
| 16 | [Space Game](./6-space-game/solution/README.md) | Canvasへの描画 | 画面に要素を描画するために使用されるCanvas APIについて学びます | [Canvasへの描画](./6-space-game/2-drawing-to-canvas/README.md) | Chris |
|
|
|
| 17 | [Space Game](./6-space-game/solution/README.md) | 画面上の要素の移動 | 要素がカートesian座標とCanvas APIを使用して動きを得る方法を発見します | [要素の移動](./6-space-game/3-moving-elements-around/README.md) | Chris |
|
|
|
| 18 | [Space Game](./6-space-game/solution/README.md) | 衝突検知 | キー入力を使用して要素が衝突し反応するようにし、ゲームのパフォーマンスを確保するためのクールダウン機能を提供します | [衝突検知](./6-space-game/4-collision-detection/README.md) | Chris |
|
|
|
| 19 | [Space Game](./6-space-game/solution/README.md) | スコアの保持 | ゲームの状態とパフォーマンスに基づいて数学的計算を行います | [スコアの保持](./6-space-game/5-keeping-score/README.md) | Chris |
|
|
|
| 20 | [Space Game](./6-space-game/solution/README.md) | ゲームの終了と再開 | ゲームの終了と再開について学び、アセットのクリーンアップや変数値のリセットを含めます | [終了条件](./6-space-game/6-end-condition/README.md) | Chris |
|
|
|
| 21 | [Banking App](./7-bank-project/solution/README.md) | ウェブアプリにおけるHTMLテンプレートとルート | マルチページウェブサイトのアーキテクチャのスキャフォールドをルーティングとHTMLテンプレートを使用して作成する方法を学びます | [HTMLテンプレートとルート](./7-bank-project/1-template-route/README.md) | Yohan |
|
|
|
| 22 | [Banking App](./7-bank-project/solution/README.md) | ログインと登録フォームの作成 | フォームの作成とバリデーションルーチンの処理について学びます | [フォーム](./7-bank-project/2-forms/README.md) | Yohan |
|
|
|
| 23 | [Banking App](./7-bank-project/solution/README.md) | データの取得と使用方法 | アプリ内でデータがどのように流れ、取得、保存、破棄されるかを学びます | [データ](./7-bank-project/3-data/README.md) | Yohan |
|
|
|
| 24 | [Banking App](./7-bank-project/solution/README.md) | 状態管理の概念 | アプリが状態を保持する方法とそれをプログラム的に管理する方法を学びます | [状態管理](./7-bank-project/4-state-management/README.md) | Yohan |
|
|
|
|
|
|
|
|
|
## 🏫 教育方針
|
|
|
|
|
|
私たちのカリキュラムは、以下の2つの主要な教育方針に基づいて設計されています：
|
|
|
* プロジェクトベースの学習
|
|
|
* 頻繁なクイズ
|
|
|
|
|
|
このプログラムでは、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)"というビデオチュートリアルコレクションのビデオとペアリングしました。このコレクションの著者の一部は、このカリキュラムに貢献しています。
|
|
|
|
|
|
さらに、授業前の低リスクなクイズは、学生がトピックを学ぶ意図を設定し、授業後の2回目のクイズはさらに定着を確保します。このカリキュラムは柔軟で楽しいように設計されており、全体または部分的に受講することができます。プロジェクトは小さなものから始まり、12週間のサイクルの終わりまでに徐々に複雑になります。
|
|
|
|
|
|
JavaScriptフレームワークを導入せず、ウェブ開発者としてフレームワークを採用する前に必要な基本スキルに集中するよう意図的に設計されていますが、このカリキュラムを完了した後の次のステップとして、Node.jsについて学ぶことをお勧めします。これには、別のビデオコレクション"[Beginner Series to: Node.js](https://channel9.msdn.com/Series/Beginners-Series-to-Nodejs/?WT.mc_id=academic-77807-sagibbon)"が役立ちます。
|
|
|
|
|
|
> [行動規範](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)からダウンロードできます。
|
|
|
|
|
|
|
|
|
## 🎒 その他のコース
|
|
|
|
|
|
私たちのチームは他にもコースを提供しています！以下をご覧ください：
|
|
|
|
|
|
- [Generative AI for Beginners](https://aka.ms/genai-beginners)
|
|
|
- [Generative AI for Beginners .NET](https://github.com/microsoft/Generative-AI-for-beginners-dotnet)
|
|
|
- [Generative AI with JavaScript](https://github.com/microsoft/generative-ai-with-javascript)
|
|
|
- [Generative AI with Java](https://github.com/microsoft/Generative-AI-for-beginners-java)
|
|
|
- [AI for Beginners](https://aka.ms/ai-beginners)
|
|
|
- [Data Science for Beginners](https://aka.ms/datascience-beginners)
|
|
|
- [ML for Beginners](https://aka.ms/ml-beginners)
|
|
|
- [Cybersecurity for Beginners](https://github.com/microsoft/Security-101)
|
|
|
- [Web Dev for Beginners](https://aka.ms/webdev-beginners)
|
|
|
- [IoT for Beginners](https://aka.ms/iot-beginners)
|
|
|
- [XR Development for Beginners](https://github.com/microsoft/xr-development-for-beginners)
|
|
|
- [Mastering GitHub Copilot for Agentic use](https://github.com/microsoft/Mastering-GitHub-Copilot-for-Paired-Programming)
|
|
|
- [Mastering GitHub Copilot for C#/.NET Developers](https://github.com/microsoft/mastering-github-copilot-for-dotnet-csharp-developers)
|
|
|
- [Choose Your Own Copilot Adventure](https://github.com/microsoft/CopilotAdventures)
|
|
|
|
|
|
## ライセンス
|
|
|
|
|
|
このリポジトリはMITライセンスの下でライセンスされています。詳細は[LICENSE](../../LICENSE)ファイルをご覧ください。
|
|
|
|
|
|
---
|
|
|
|
|
|
**免責事項**:
|
|
|
この文書は、AI翻訳サービス [Co-op Translator](https://github.com/Azure/co-op-translator) を使用して翻訳されています。正確性を期すよう努めておりますが、自動翻訳には誤りや不正確な部分が含まれる可能性があります。元の言語で記載された原文が正式な情報源と見なされるべきです。重要な情報については、専門の人間による翻訳を推奨します。本翻訳の利用に起因する誤解や誤認について、当方は一切の責任を負いません。 |
