msb-public
/
Web-Dev-For-Beginners
mirror of https://github.com/microsoft/Web-Dev-For-Beginners.git
1
0
Code Issues Projects Releases Wiki Activity

chore(i18n): sync translations with latest source changes (chunk 1/1, 12 changes)

Browse Source
update-translations
localizeflow[bot] 2 days ago
parent 7b710086c9
commit 42da84e4d9
12 changed files with 1141 additions and 953 deletions
Show Stats Download Patch File Download Diff File

12
translations/ja/.co-op-translator.json
Unescape View File

@ -493,7 +493,7 @@
},
"AGENTS.md": {
"original_hash": "a362efd06d64d4134a0cfe8515a86d34",
"translation_date": "2025-10-03T11:18:51+00:00",
"translation_date": "2026-02-06T16:25:20+00:00",
"source_file": "AGENTS.md",
"language_code": "ja"
},
@ -516,11 +516,17 @@
"language_code": "ja"
},
"README.md": {
"original_hash": "490c83786552d7fab6390991517bef09",
"translation_date": "2026-01-29T17:54:08+00:00",
"original_hash": "6d6385fd098088cb2d690fb0a6cdaedc",
"translation_date": "2026-02-06T16:21:13+00:00",
"source_file": "README.md",
"language_code": "ja"
},
"Roadmap.md": {
"original_hash": "28bf6185fd7f27b62ddc210514366192",
"translation_date": "2026-02-06T16:21:56+00:00",
"source_file": "Roadmap.md",
"language_code": "ja"
},
"SECURITY.md": {
"original_hash": "4ecc3bf2e27983d4c780be6f26ee6228",
"translation_date": "2025-08-23T22:21:58+00:00",

436
translations/ja/AGENTS.md
Unescape View File

@ -1,282 +1,282 @@
# AGENTS.md
## プロジェクト概要
## Project Overview
このリポジトリは、初心者向けにウェブ開発の基礎を教える教育カリキュラムです。Microsoft Cloud Advocatesによって開発された包括的な12週間のコースで、JavaScript、CSS、HTMLを扱う24の実践的なレッスンが含まれています。
これは初心者にウェブ開発の基礎を教えるための教育用カリキュラムリポジトリです。Microsoft Cloud Advocatesによって開発された12週間の包括的なコースで、JavaScript、CSS、およびHTMLをカバーする24の実践的なレッスンが含まれています。
### 主な構成要素
### Key Components
- **教育コンテンツ**: プロジェクトベースのモジュールに整理された24の構造化されたレッスン
- **実践プロジェクト**: テラリウム、タイピングゲーム、ブラウザ拡張機能、スペースゲーム、銀行アプリ、コードエディタ、AIチャットアシスタント
- **インタラクティブクイズ**: 各レッスンの前後に3問ずつの48のクイズ
- **多言語対応**: GitHub Actionsを使用した50以上の言語への自動翻訳
- **使用技術**: HTML、CSS、JavaScript、Vue.js 3、Vite、Node.js、Express、Python（AIプロジェクト用）
- **Educational Content**: プロジェクトベースのモジュールに整理された24の構造化されたレッスン
- **Practical Projects**: テラリウム、タイピングゲーム、ブラウザ拡張機能、スペースゲーム、バンキングアプリ、コードエディター、AIチャットアシスタント
- **Interactive Quizzes**: 各3問のクイズ48回（レッスン前後の評価）
- **Multi-language Support**: GitHub Actionsによる50以上の言語の自動翻訳
- **Technologies**: HTML、CSS、JavaScript、Vue.js 3、Vite、Node.js、Express、Python（AIプロジェクト用）
### アーキテクチャ
### Architecture
- レッスンベースの構造を持つ教育リポジトリ
- 各レッスンフォルダにはREADME、コード例、解答が含まれる
- 独立したプロジェクトは別ディレクトリに配置（quiz-app、各レッスンプロジェクト）
- GitHub Actionsを使用した翻訳システム（co-op-translator）
- Docsifyで提供され、PDFとしても利用可能なドキュメント
- レッスンベースの構造を持つ教育用リポジトリ
- 各レッスンフォルダーにはREADME、コード例、解決策を含む
- 独立したプロジェクトは別ディレクトリに配置（quiz-app、各種レッスンプロジェクト）
- GitHub Actionsを使った翻訳システム（co-op-translator）
- Docsifyを通じたドキュメント提供およびPDF形式での利用可能
## セットアップコマンド
## Setup Commands
このリポジトリは主に教育コンテンツの利用を目的としています。特定のプロジェクトを操作する場合:
このリポジトリは主に教育コンテンツの利用を目的としています。特定プロジェクトに取り組む場合は以下を参照してください：
### メインリポジトリのセットアップ
### Main Repository Setup
```bash
git clone https://github.com/microsoft/Web-Dev-For-Beginners.git
cd Web-Dev-For-Beginners
```
### クイズアプリのセットアップ (Vue 3 + Vite)
### Quiz App Setup (Vue 3 + Vite)
```bash
cd quiz-app
npm install
npm run dev # Start development server
npm run build # Build for production
npm run lint # Run ESLint
npm run dev # 開発サーバーを起動する
npm run build # 本番用にビルドする
npm run lint # ESLintを実行する
```
### 銀行プロジェクトAPI (Node.js + Express)
### Bank Project API (Node.js + Express)
```bash
cd 7-bank-project/api
npm install
npm start # Start API server
npm run lint # Run ESLint
npm run format # Format with Prettier
npm start # APIサーバーを起動する
npm run lint # ESLintを実行する
npm run format # Prettierでフォーマットする
```
### ブラウザ拡張機能プロジェクト
### Browser Extension Projects
```bash
cd 5-browser-extension/solution
npm install
# Follow browser-specific extension loading instructions
# ブラウザ固有の拡張機能読み込み手順に従ってください
```
### スペースゲームプロジェクト
### Space Game Projects
```bash
cd 6-space-game/solution
npm install
# Open index.html in browser or use Live Server
# ブラウザでindex.htmlを開くか、Live Serverを使用してください
```
### チャットプロジェクト (Pythonバックエンド)
### Chat Project (Python Backend)
```bash
cd 9-chat-project/solution/backend/python
pip install openai
# Set GITHUB_TOKEN environment variable
# GITHUB_TOKEN 環境変数を設定する
python api.py
```
## 開発ワークフロー
## Development Workflow
### コンテンツ貢献者向け
### For Content Contributors
1. **リポジトリをフォーク**してGitHubアカウントにコピー
2. **フォークをローカルにクローン**
3. **変更用の新しいブランチを作成**
4. レッスンコンテンツやコード例を変更
5. 関連するプロジェクトディレクトリでコード変更をテスト
6. 貢献ガイドラインに従ってプルリクエストを送信
4. レッスンの内容またはコード例を編集
5. 関連プロジェクトディレクトリでコードをテスト
6. 貢献ガイドラインに従ってプルリクエストを提出
### 学習者向け
### For Learners
1. リポジトリをフォークまたはクローン
2. レッスンディレクトリを順番に進む
3. 各レッスンのREADMEファイルを読む
2. レッスンディレクトリを順に進む
3. 各レッスンのREADMEを読む
4. https://ff-quizzes.netlify.app/web/ で事前クイズを完了
5. レッスンフォルダ内のコード例を実践
6. 課題やチャレンジを完了
7. レッスン後のクイズを受ける
5. レッスンフォルダ内のコード例を実行
6. 課題やチャレンジを終える
7. 事後クイズを受ける
### ライブ開発
### Live Development
- **ドキュメント**: ルートで`docsify serve`を実行 (ポート3000)
- **クイズアプリ**: quiz-appディレクトリで`npm run dev`を実行
- **プロジェクト**: HTMLプロジェクトにはVS Code Live Server拡張機能を使用
- **APIプロジェクト**: 該当するAPIディレクトリで`npm start`を実行
- **Documentation**: ルートで `docsify serve` を実行（ポート3000）
- **Quiz App**: quiz-appディレクトリ内で `npm run dev` を実行
- **Projects**: HTMLプロジェクトはVS Code Live Server拡張機能を利用
- **API Projects**: 各APIディレクトリで `npm start` を実行
## テスト手順
## Testing Instructions
### クイズアプリのテスト
### Quiz App Testing
```bash
cd quiz-app
npm run lint # Check for code style issues
npm run build # Verify build succeeds
npm run lint # コードスタイルの問題をチェックする
npm run build # ビルドが成功することを確認する
```
### 銀行APIのテスト
### Bank API Testing
```bash
cd 7-bank-project/api
npm run lint # Check for code style issues
node server.js # Verify server starts without errors
npm run lint # コードスタイルの問題をチェックする
node server.js # サーバーがエラーなく起動するか確認する
```
### 一般的なテストアプローチ
### General Testing Approach
- このリポジトリは教育目的であり、包括的な自動テストは含まれていません
- 手動テストの焦点:
- コード例がエラーなく実行されること
- ドキュメント内のリンクが正しく動作すること
- プロジェクトのビルドが正常に完了すること
- 例がベストプラクティスに従っていること
- 教育用リポジトリのため包括的な自動テストは無し
- 手動テストの主なポイント：
- エラーなくコード例が実行されること
- ドキュメントのリンクが正しく機能すること
- プロジェクトのビルドが成功すること
- コード例がベストプラクティスに準拠していること
### 提出前のチェック
### Pre-submission Checks
- `npm run lint`をpackage.jsonがあるディレクトリで実行
- Markdownリンクが有効であることを確認
- ブラウザまたはNode.jsでコード例をテスト
- 翻訳が適切な構造を維持していることを確認
- package.jsonがあるディレクトリで `npm run lint` を実行
- Markdownリンクの有効性を検証
- ブラウザやNode.jsでコード例をテスト
- 翻訳が正しい構造を維持していることを確認
## コードスタイルガイドライン
## Code Style Guidelines
### JavaScript
- 最新のES6+構文を使用
- プロジェクトで提供される標準ESLint設定に従う
- 教育的な明確さのために意味のある変数名と関数名を使用
- 学習者向けに概念を説明するコメントを追加
- Prettierを使用してフォーマット（設定されている場合）
- モダンES6以降の構文を使用
- プロジェクトに提供された標準のESLint設定に従う
- 教育用に意味のある変数名、関数名を使用
- 学習者向けにコンセプトを説明するコメントを追加
- 設定された場合はPrettierでフォーマット
### HTML/CSS
- セマンティックHTML5要素
- セマンティックなHTML5要素を使用
- レスポンシブデザインの原則
- 明確なクラス命名規則
- 学習者向けにCSS技術を説明するコメント
- 学習者向けにCSS技術の説明コメントを付加
### Python
- PEP 8スタイルガイドライン
- 明確で教育的なコード例
- 学習に役立つ場合は型ヒントを追加
- PEP 8スタイルガイドラインを遵守
- 分かりやすく教育的なコード例
- 学習に役立つ場合は型ヒントを使用
### Markdownドキュメント
### Markdown Documentation
- 明確な見出し階層
- 言語指定付きのコードブロック
- 言語指定をしたコードブロック
- 追加リソースへのリンク
- `images/`ディレクトリ内のスクリーンショットと画像
- `images/`ディレクトリ内のスクリーンショットや画像
- アクセシビリティのための画像の代替テキスト
### ファイル構成
### File Organization
- レッスンは順番に番号付け（1-getting-started-lessons, 2-js-basicsなど）
- 各プロジェクトには`solution/`としばしば`start/`または`your-work/`ディレクトリが含まれる
- 画像はレッスン固有の`images/`フォルダに保存
- 翻訳は`translations/{language-code}/`構造に保存
- レッスンは連番で管理（1-getting-started-lessons、2-js-basicsなど）
- 各プロジェクトに `solution/` と多くの場合 `start/` または `your-work/` ディレクトリあり
- 画像はレッスンごとの `images/` フォルダに格納
- 翻訳は `translations/{language-code}/` 構造
## ビルドとデプロイ
## Build and Deployment
### クイズアプリのデプロイ (Azure Static Web Apps)
### Quiz App Deployment (Azure Static Web Apps)
クイズアプリはAzure Static Web Appsデプロイ用に設定されています:
quiz-appはAzure Static Web Apps向けに設定されています：
```bash
cd quiz-app
npm run build # Creates dist/ folder
# Deploys via GitHub Actions workflow on push to main
npm run build # dist/ フォルダを作成します
# main ブランチへのプッシュ時に GitHub Actions ワークフローを通じてデプロイします
```
Azure Static Web Appsの設定:
- **アプリの場所**: `/quiz-app`
- **出力場所**: `dist`
- **ワークフロー**: `.github/workflows/azure-static-web-apps-ashy-river-0debb7803.yml`
Azure Static Web Appsの設定：
- **App location**: `/quiz-app`
- **Output location**: `dist`
- **Workflow**: `.github/workflows/azure-static-web-apps-ashy-river-0debb7803.yml`
### ドキュメントPDF生成
### Documentation PDF Generation
```bash
npm install # Install docsify-to-pdf
npm run convert # Generate PDF from docs
npm install # docsify-to-pdfをインストールする
npm run convert # docsからPDFを生成する
```
### Docsifyドキュメント
### Docsify Documentation
```bash
npm install -g docsify-cli # Install Docsify globally
docsify serve # Serve on localhost:3000
npm install -g docsify-cli # Docsifyをグローバルにインストールする
docsify serve # localhost:3000で提供する
```
### プロジェクト固有のビルド
### Project-specific Builds
各プロジェクトディレクトリには独自のビルドプロセスがある場合があります:
- Vueプロジェクト: `npm run build`でプロダクションバンドルを作成
- 静的プロジェクト: ビルドステップなし、ファイルを直接提供
各プロジェクトディレクトリには独自のビルドプロセスがある場合があります：
- Vueプロジェクト： `npm run build` で本番用バンドル作成
- 静的プロジェクト： ビルドなしで直接ファイルを提供
## プルリクエストガイドライン
## Pull Request Guidelines
### タイトル形式
### Title Format
変更内容を明確に示すタイトルを使用:
- `[Quiz-app] Add new quiz for lesson X`
- `[Lesson-3] Fix typo in terrarium project`
- `[Translation] Add Spanish translation for lesson 5`
- `[Docs] Update setup instructions`
変更内容が分かりやすいタイトルを使用：
- `[Quiz-app] レッスンX用新規クイズ追加`
- `[Lesson-3] テラリウムプロジェクトの誤字修正`
- `[Translation] レッスン5のスペイン語翻訳追加`
- `[Docs] セットアップ手順更新`
### 必須チェック
### Required Checks
PRを送信する前に:
PR提出前に：
1. **コード品質**:
- 該当するプロジェクトディレクトリで`npm run lint`を実行
- すべてのリントエラーと警告を修正
1. **コード品質**：
- 影響のあるプロジェクトディレクトリで `npm run lint` 実行
- すべての警告・エラーを修正
2. **ビルド確認**:
- 該当する場合は`npm run build`を実行
- ビルドエラーがないことを確認
2. **ビルド確認**：
- 該当する場合は `npm run build` 実行
- ビルドエラーなしを確認
3. **リンク検証**:
3. **リンク検証**：
- すべてのMarkdownリンクをテスト
- 画像参照が正しく動作することを確認
- 画像参照が機能するか確認
4. **コンテンツレビュー**:
- スペルと文法を校正
- コード例が正確で教育的であることを確認
- 翻訳が元の意味を維持していることを確認
4. **内容チェック**：
- スペルや文法の校正
- コード例が正しく教育的であること
- 翻訳が原文の意味を維持していること
### 貢献要件
### Contribution Requirements
- Microsoft CLAに同意（最初のPRで自動チェック）
- Microsoft CLAに同意（最初のPR時に自動チェック）
- [Microsoft Open Source Code of Conduct](https://opensource.microsoft.com/codeofconduct/)に従う
- 詳細なガイドラインは[CONTRIBUTING.md](./CONTRIBUTING.md)を参照
- 該当する場合はPR説明に問題番号を記載
- 詳細は [CONTRIBUTING.md](./CONTRIBUTING.md) を参照
- PR説明に関連Issue番号を記載（該当時）
### レビュープロセス
### Review Process
- メンテナーとコミュニティによるPRレビュー
- 教育的な明確さを優先
- コード例は最新のベストプラクティスに従うべき
- 翻訳は正確性と文化的適切性を確認
- PRはメンテナーおよびコミュニティがレビュー
- 教育上の分かりやすさを優先
- コード例は最新のベストプラクティスに準拠していること
- 翻訳は正確さと文化的適合性を確認
## 翻訳システム
## Translation System
### 自動翻訳
### Automated Translation
- GitHub Actionsとco-op-translatorワークフローを使用
- GitHub Actionsのco-op-translatorワークフローを利用
- 50以上の言語に自動翻訳
- メインディレクトリ内のソースファイル
- 翻訳ファイルは`translations/{language-code}/`ディレクトリに保存
- ソースファイルは主要ディレクトリに配置
- 翻訳ファイルは `translations/{language-code}/` に配置
### 手動翻訳改善の追加
### Adding Manual Translation Improvements
1. `translations/{language-code}/`内のファイルを見つける
2. 構造を維持しながら改善を行う
3. コード例が機能することを確認
4. ローカライズされたクイズコンテンツをテスト
2. 構造を維持しつつ改善を行う
3. コード例が動作し続けることを保証
4. ローカライズしたクイズ内容をテスト
### 翻訳メタデータ
### Translation Metadata
翻訳ファイルにはメタデータヘッダーが含まれる:
翻訳ファイルにはメタデータヘッダーが含まれます：
```markdown
<!--
CO_OP_TRANSLATOR_METADATA:
@ -289,118 +289,120 @@ CO_OP_TRANSLATOR_METADATA:
-->
```
## デバッグとトラブルシューティング
## Debugging and Troubleshooting
### よくある問題
### Common Issues
**クイズアプリが起動しない**:
- Node.jsのバージョンを確認 (推奨: v14以上)
- `node_modules`と`package-lock.json`を削除し、再度`npm install`を実行
- ポート競合を確認 (デフォルト: Viteはポート5173を使用)
**Quiz appが起動しない場合**：
- Node.jsバージョンを確認（v14+推奨）
- `node_modules` と `package-lock.json` を削除して再度 `npm install`
- ポート競合を確認（デフォルトはViteのポート5173）
**APIサーバーが起動しない**:
- Node.jsのバージョンが最低要件を満たしていることを確認 (node >=10)
- ポートがすでに使用されていないか確認
- `npm install`ですべての依存関係がインストールされていることを確認
**APIサーバーが起動しない場合**：
- Node.jsバージョンが要件(node >=10)を満たしているか確認
- ポートが既に使用中でないかチェック
- 依存パッケージを `npm install` でインストール済みか確認
**ブラウザ拡張機能が読み込まれない**:
- manifest.jsonが正しくフォーマットされていることを確認
- ブラウザコンソールでエラーを確認
- ブラウザ固有の拡張機能インストール手順に従う
**ブラウザ拡張機能が読み込まれない場合**：
- manifest.jsonの形式が正しいか検証
- ブラウザのコンソールでエラーを確認
- ブラウザごとの拡張機能インストール手順に従う
**Pythonチャットプロジェクトの問題**:
- OpenAIパッケージがインストールされていることを確認: `pip install openai`
- GITHUB_TOKEN環境変数が設定されていることを確認
- GitHub Modelsのアクセス権限を確認
**Pythonチャットプロジェクトの問題**：
- OpenAIパッケージがインストール済みか確認：`pip install openai`
- GITHUB_TOKEN環境変数が設定されているか確認
- GitHub Modelsのアクセス権をチェック
**Docsifyがドキュメントを提供しない**:
- docsify-cliをグローバルにインストール: `npm install -g docsify-cli`
- リポジトリのルートディレクトリから実行
- `docs/_sidebar.md`が存在することを確認
**Docsifyがドキュメントを配信しない場合**：
- docsify-cliをグローバルにインストール：`npm install -g docsify-cli`
- リポジトリルートから実行
- `docs/_sidebar.md` が存在するか確認
### 開発環境のヒント
### Development Environment Tips
- HTMLプロジェクトにはVS CodeのLive Server拡張機能を使用
- 一貫したフォーマットのためにESLintとPrettier拡張機能をインストール
- JavaScriptのデバッグにはブラウザのDevToolsを使用
- VueプロジェクトにはVue DevToolsブラウザ拡張機能をインストール
- HTMLプロジェクトはVS CodeのLive Server拡張機能を使用
- 一貫したフォーマットのためESLintとPrettier拡張をインストール
- JavaScriptのデバッグにブラウザのDevToolsを活用
- VueプロジェクトにはVue DevToolsブラウザ拡張をインストール
### パフォーマンスの考慮事項
### Performance Considerations
- 翻訳ファイルが多い（50以上の言語）ため、完全なクローンはサイズが大きい
- コンテンツのみを操作する場合は浅いクローンを使用: `git clone --depth 1`
- 英語コンテンツを操作する際は翻訳を検索から除外
- 初回実行時のビルドプロセスは遅い場合がある（npm install、Vite build）
- 50以上の言語の大量翻訳ファイルによりフルクローンは大きい
- コンテンツのみ作業する場合は浅いクローンを使用：`git clone --depth 1`
- 英語コンテンツ作業時は翻訳を検索対象から除外
- 初回実行時はnpm installやViteビルドで遅延が発生することもある
## セキュリティの考慮事項
## Security Considerations
### 環境変数
### Environment Variables
- APIキーはリポジトリにコミットしない
- `.env`ファイルを使用（すでに`.gitignore`に含まれている）
- 必要な環境変数はプロジェクトREADMEに記載
- APIキーをリポジトリにコミットしてはいけません
- `.env` ファイルを使用（`.gitignore` に含まれています）
- 必要な環境変数はプロジェクトのREADMEに記述
### Pythonプロジェクト
### Python Projects
- 仮想環境を使用: `python -m venv venv`
- 仮想環境を使用する：`python -m venv venv`
- 依存関係を最新に保つ
- GitHubトークンは最小限の必要な権限を持つべき
- GitHubトークンは最小権限で管理
### GitHub Modelsのアクセス
### GitHub Models Access
- GitHub Modelsには個人アクセストークン（PAT）が必要
- トークンは環境変数として保存
- トークンや資格情報をコミットしない
- GitHub ModelsにはPersonal Access Tokens（PAT）が必要
- トークンは環境変数として管理
- トークンや認証情報を絶対にコミットしない
## 追加の注意事項
## Additional Notes
### 対象読者
### Target Audience
- ウェブ開発初心者
- 学生や自己学習者
- ウェブ開発の完全初心者
- 学習者および自主学習者
- 教室でカリキュラムを使用する教師
- コンテンツはアクセシビリティと段階的なスキル構築を重視
- アクセシビリティと段階的なスキルアップを重視した内容
### 教育哲学
### Educational Philosophy
- プロジェクトベースの学習アプローチ
- 頻繁な知識チェック（クイズ）
- 実践的なコーディング演習
- 実世界の応用例
- フレームワークよりも基礎に重点を置く
- フレームワーク前の基礎重視
### リポジトリの維持管理
### Repository Maintenance
- 学習者と貢献者の活発なコミュニティ
- 依存関係とコンテンツの定期的な更新
- メンテナーによる問題とディスカッションの監視
- GitHub Actionsによる翻訳の自動更新
- 活発な学習者と貢献者コミュニティ
- 依存関係やコンテンツの定期更新
- メンテナーによる課題と議論の監視
- GitHub Actionsを利用した翻訳更新の自動化
### 関連リソース
### Related Resources
- [Microsoft Learnモジュール](https://docs.microsoft.com/learn/)
- [Student Hubリソース](https://docs.microsoft.com/learn/student-hub/)
- 学習者向けに推奨される[GitHub Copilot](https://marketplace.visualstudio.com/items?itemName=GitHub.copilot)
- その他のコース: 生成AI、データサイエンス、ML、IoTカリキュラムが利用可能
- [Microsoft Learn modules](https://docs.microsoft.com/learn/)
- [Student Hub resources](https://docs.microsoft.com/learn/student-hub/)
- 学習者に推奨される [GitHub Copilot](https://marketplace.visualstudio.com/items?itemName=GitHub.copilot)
- その他のコース：生成AI、データサイエンス、機械学習、IoTカリキュラムなど
### 特定のプロジェクトの操作
### Working with Specific Projects
個々のプロジェクトに関する詳細な手順は以下のREADMEファイルを参照:
- `quiz-app/README.md` - Vue 3クイズアプリケーション
- `7-bank-project/README.md` - 認証付き銀行アプリケーション
個別プロジェクトの詳細な手順は以下のREADMEを参照：
- `quiz-app/README.md` - Vue 3のクイズアプリ
- `7-bank-project/README.md` - 認証付きバンキングアプリ
- `5-browser-extension/README.md` - ブラウザ拡張機能開発
- `6-space-game/README.md` - Canvasベースのゲーム開発
- `9-chat-project/README.md` - AIチャットアシスタントプロジェクト
### モノレポ構造
### Monorepo Structure
従来のモノレポではありませんが、このリポジトリには複数の独立したプロジェクトが含まれています:
伝統的なモノレポではないものの、このリポジトリは複数の独立プロジェクトを含みます：
- 各レッスンは自己完結型
- プロジェクトは依存関係を共有しない
- 個々のプロジェクトで作業しても他に影響を与えない
- カリキュラム全体を体験するにはリポジトリ全体をクローン
- プロジェクト間で依存関係を共有しない
- 個別プロジェクトを他に影響なく作業可能
- カリキュラム全体を体験するにはリポジトリ全体をクローンしてください
---
**免責事項**:
この文書は、AI翻訳サービス[Co-op Translator](https://github.com/Azure/co-op-translator)を使用して翻訳されています。正確性を追求しておりますが、自動翻訳には誤りや不正確な部分が含まれる可能性があります。元の言語で記載された文書を正式な情報源とみなしてください。重要な情報については、専門の人間による翻訳を推奨します。この翻訳の使用に起因する誤解や誤認について、当方は一切の責任を負いません。
<!-- CO-OP TRANSLATOR DISCLAIMER START -->
**免責事項**：
この文書は、AI翻訳サービス「Co-op Translator」（https://github.com/Azure/co-op-translator）を使用して翻訳されています。正確性を期しておりますが、自動翻訳には誤りや不正確な部分が含まれる可能性があることをご承知ください。原文が正式な情報源となります。重要な情報については、専門の人間による翻訳をお勧めします。本翻訳の利用により生じたいかなる誤解や誤訳についても、当方は責任を負いかねます。
<!-- CO-OP TRANSLATOR DISCLAIMER END -->

217
translations/ja/README.md
Unescape View File

@ -2,7 +2,7 @@
[![GitHub contributors](https://img.shields.io/github/contributors/microsoft/Web-Dev-For-Beginners.svg)](https://GitHub.com/microsoft/Web-Dev-For-Beginners/graphs/contributors/)
[![GitHub issues](https://img.shields.io/github/issues/microsoft/Web-Dev-For-Beginners.svg)](https://GitHub.com/microsoft/Web-Dev-For-Beginners/issues/)
[![GitHub pull-requests](https://img.shields.io/github/issues-pr/microsoft/Web-Dev-For-Beginners.svg)](https://GitHub.com/microsoft/Web-Dev-For-Beginners/pulls/)
[![PRs Welcome](https://img.shields.io/badge/PRs-welcome-brightgreen.svg?style=flat-square)](http://makeapullrequest.com)
[![PRs Welcome](https://img.shields.io/badge/PRs-welcome-brightgreen.svg?style=flat-square)](http://makeapullrequest.com)
[![GitHub watchers](https://img.shields.io/github/watchers/microsoft/Web-Dev-For-Beginners.svg?style=social&label=Watch&maxAge=2592000)](https://GitHub.com/microsoft/Web-Dev-For-Beginners/watchers/)
[![GitHub forks](https://img.shields.io/github/forks/microsoft/Web-Dev-For-Beginners.svg?style=social&label=Fork&maxAge=2592000)](https://GitHub.com/microsoft/Web-Dev-For-Beginners/network/)
@ -12,206 +12,209 @@
# 初心者向けウェブ開発 - カリキュラム
Microsoft Cloud Advocatesによる12週間の包括的なコースで、ウェブ開発の基礎を学びましょう。全24レッスンでは、JavaScript、CSS、HTMLを、テラリウム、ブラウザ拡張機能、宇宙ゲームなどの実践プロジェクトを通じて掘り下げます。クイズ、ディスカッション、実践課題にも参加しましょう。効果的なプロジェクトベースの教育法でスキルを高め、知識の定着を最適化します。今日からコーディングの旅を始めましょう！
Microsoft Cloud Advocatesによる12週間の総合コースでウェブ開発の基本を学びましょう。24のレッスンそれぞれで、テラリウム、ブラウザ拡張機能、宇宙ゲームなどの実践的なプロジェクトを通じてJavaScript、CSS、HTMLを掘り下げます。クイズ、ディスカッション、実践的な課題も用意。効果的なプロジェクトベースの教授法でスキルを向上し、知識の定着を最適化しましょう。今日からコーディングの旅を始めましょう！
Azure AI Foundry Discordコミュニティに参加しよう
Azure AI Foundry Discordコミュニティに参加
[![Microsoft Foundry Discord](https://dcbadge.limes.pink/api/server/nTYy5BXMWG)](https://discord.gg/nTYy5BXMWG)
これらのリソースを使い始めるには、以下の手順に従ってください：
1. **リポジトリをフォークする**：クリック [![GitHub forks](https://img.shields.io/github/forks/microsoft/Web-Dev-For-beginners.svg?style=social&label=Fork)](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)
これらのリソースを使い始める手順：
1. **リポジトリをフォーク**：クリック [![GitHub forks](https://img.shields.io/github/forks/microsoft/Web-Dev-For-beginners.svg?style=social&label=Fork)](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によるサポート（自動化＆常に最新）
#### GitHub Actionで対応（自動かつ常に最新）
<!-- CO-OP TRANSLATOR LANGUAGES TABLE START -->
[アラビア語](../ar/README.md) | [ベンガル語](../bn/README.md) | [ブルガリア語](../bg/README.md) | [ビルマ語（ミャンマー）](../my/README.md) | [中国語（簡体字）](../zh-CN/README.md) | [中国語（繁体字、香港）](../zh-HK/README.md) | [中国語（繁体字、マカオ）](../zh-MO/README.md) | [中国語（繁体字、台湾）](../zh-TW/README.md) | [クロアチア語](../hr/README.md) | [チェコ語](../cs/README.md) | [デンマーク語](../da/README.md) | [オランダ語](../nl/README.md) | [エストニア語](../et/README.md) | [フィンランド語](../fi/README.md) | [フランス語](../fr/README.md) | [ドイツ語](../de/README.md) | [ギリシャ語](../el/README.md) | [ヘブライ語](../he/README.md) | [ヒンディー語](../hi/README.md) | [ハンガリー語](../hu/README.md) | [インドネシア語](../id/README.md) | [イタリア語](../it/README.md) | [日本語](./README.md) | [カンナダ語](../kn/README.md) | [韓国語](../ko/README.md) | [リトアニア語](../lt/README.md) | [マレー語](../ms/README.md) | [マラヤーラム語](../ml/README.md) | [マラーティー語](../mr/README.md) | [ネパール語](../ne/README.md) | [ナイジェリア・ピジン](../pcm/README.md) | [ノルウェー語](../no/README.md) | [ペルシア語（ファルシ）](../fa/README.md) | [ポーランド語](../pl/README.md) | [ポルトガル語（ブラジル）](../pt-BR/README.md) | [ポルトガル語（ポルトガル）](../pt-PT/README.md) | [パンジャーブ語（グルムキー）](../pa/README.md) | [ルーマニア語](../ro/README.md) | [ロシア語](../ru/README.md) | [セルビア語（キリル）](../sr/README.md) | [スロバキア語](../sk/README.md) | [スロベニア語](../sl/README.md) | [スペイン語](../es/README.md) | [スワヒリ語](../sw/README.md) | [スウェーデン語](../sv/README.md) | [タガログ語（フィリピン）](../tl/README.md) | [タミル語](../ta/README.md) | [テルグ語](../te/README.md) | [タイ語](../th/README.md) | [トルコ語](../tr/README.md) | [ウクライナ語](../uk/README.md) | [ウルドゥー語](../ur/README.md) | [ベトナム語](../vi/README.md)
[Arabic](../ar/README.md) | [Bengali](../bn/README.md) | [Bulgarian](../bg/README.md) | [Burmese (Myanmar)](../my/README.md) | [Chinese (Simplified)](../zh-CN/README.md) | [Chinese (Traditional, Hong Kong)](../zh-HK/README.md) | [Chinese (Traditional, Macau)](../zh-MO/README.md) | [Chinese (Traditional, Taiwan)](../zh-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)](../pt-BR/README.md) | [Portuguese (Portugal)](../pt-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以上の言語翻訳が含まれているため、ダウンロードサイズが大幅に増加します。翻訳なしでクローンするには、スパースチェックアウトを使用してください：
> このリポジトリには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'
> ```
> これにより、より高速なダウンロードでコースを完成させるために必要なすべてが手に入ります。
> これにより、コース完了に必要なすべてがより高速にダウンロードできます。
<!-- CO-OP TRANSLATOR LANGUAGES TABLE END -->
**追加の翻訳言語が必要な場合は、[こちら](https://github.com/Azure/co-op-translator/blob/main/getting_started/supported-languages.md)をご覧ください。**
**追加翻訳言語の希望は[こちら](https://github.com/Azure/co-op-translator/blob/main/getting_started/supported-languages.md)で確認可能です**
[![Open in Visual Studio Code](https://img.shields.io/static/v1?logo=visualstudiocode&label=&message=Open%20in%20Visual%20Studio%20Code&labelColor=2c2c32&color=007acc&logoColor=007acc)](https://open.vscode.dev/microsoft/Web-Dev-For-Beginners)
[![Visual Studio Codeで開く](https://img.shields.io/static/v1?logo=visualstudiocode&label=&message=Open%20in%20Visual%20Studio%20Code&labelColor=2c2c32&color=007acc&logoColor=007acc)](https://open.vscode.dev/microsoft/Web-Dev-For-Beginners)
#### 🧑‍🎓 _学生ですか？_
#### 🧑‍🎓 _学生の方へ_
[**Student Hubページ**](https://docs.microsoft.com/learn/student-hub/?WT.mc_id=academic-77807-sagibbon)をご覧ください。初心者向けリソース、学生パック、無料証明書バウチャー取得方法などが見つかります。ここはブックマークして時々チェックしてください。毎月コンテンツが入れ替わります。
[**Student Hubページ**](https://docs.microsoft.com/learn/student-hub/?WT.mc_id=academic-77807-sagibbon)をご覧ください。初心者向けリソース、学生パック、無料の証明書バウチャー取得方法などがあります。月ごとにコンテンツが入れ替わるので、ブックマークして定期的にチェックすることをお勧めします。
### 📣 お知らせ - 新しいGitHub Copilot Agentモードのチャレンジ追加！
### 📣 お知らせ - 新しいGitHub Copilot Agentモードのチャレンジが追加されました！
ほとんどの章に「GitHub Copilot Agent Challenge 🚀」という新しいチャレンジが追加されました。これはGitHub CopilotとAgentモードを使って完了する新しいチャレンジです。Agentモードを使ったことがない場合は、テキスト生成だけでなく、ファイルの作成や編集、コマンドの実行なども可能です。
多くの章に「GitHub Copilot Agent Challenge 🚀」という新しいチャレンジがあります。GitHub CopilotとAgentモードを使って完了するチャレンジです。Agentモードはテキスト生成だけでなく、ファイル作成・編集、コマンド実行なども可能です。
### 📣 お知らせ - _生成AIを使った新プロジェクト_が登場
### 📣 お知らせ - _新しいGenerative AIを使ったプロジェクト_
新しいAIアシスタントプロジェクトが追加されました。ぜひご覧ください。[プロジェクト](./9-chat-project/README.md)
新しいAIアシスタントプロジェクトが追加されました。詳細は[プロジェクト](./9-chat-project/README.md)をご覧ください。
### 📣 お知らせ - _JavaScript向け生成AI_の新カリキュラムがリリースされました
### 📣 お知らせ - _生成AIを使ったJavaScript向けの新カリキュラムをリリース_
新しい生成AIカリキュラムをお見逃しなく！
新しい生成AIカリキュラムをぜひお見逃しなく！
開始はこちらへ：[https://aka.ms/genai-js-course](https://aka.ms/genai-js-course)
開始はこちら：[https://aka.ms/genai-js-course](https://aka.ms/genai-js-course)
![Background](../../translated_images/ja/background.148a8d43afde5730.webp)
- 基礎からRAGまでカバーするレッスン
- GenAIと専用アプリを使い歴史上の人物と対話可能
- 楽しく魅力的なストーリーでタイムトラベル体験！
- 基礎からRAGまでをカバーしたレッスン
- GenAIとコンパニオンアプリで歴史上のキャラクターと対話
- 楽しく魅力的なストーリーでタイムトラベル！
![character](../../translated_images/ja/character.5c0dd8e067ffd693.webp)
各レッスンには課題、知識チェック、チャレンジが含まれており、以下のトピックの学習をサポートします：
各レッスンには課題、理解度チェック、チャレンジが含まれ、以下のようなテーマの学習をサポートします：
- プロンプトとプロンプトエンジニアリング
- テキストおよび画像アプリ生成
- テキストと画像のアプリ生成
- 検索アプリ
開始はこちらへ：[https://aka.ms/genai-js-course](../../[https:/aka.ms/genai-js-course)
開始はこちら：[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)で歓迎します！
> **教師の方へ**、このカリキュラムの使い方について[いくつかの提案](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://aka.ms/student-page/?WT.mc_id=academic-77807-sagibbon)**は、各レッスンで事前クイズから始め、講義資料を読み、様々なアクティビティを完遂した後、事後クイズで理解度をチェックしましょう。
学習体験を向上させるために、仲間と一緒にプロジェクトに取り組みましょう！ディスカッションは[ディスカッションフォーラム](https://github.com/microsoft/Web-Dev-For-Beginners/discussions)で推奨しており、モデレーターチームが質問に答えます。
学習効果を高めるために、仲間とつながってプロジェクトを一緒に進めてください！質問は[ディスカッションフォーラム](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)の利用も強くお勧めします。
さらに学びを深めるために、[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)などのテキストエディタを使ってローカルPCでの実行を選べます。
このカリキュラムはすぐに使える開発環境が整っています！開始時には、[Codespace](https://github.com/features/codespaces/)（ブラウザベース、インストール不要）で実行するか、[Visual Studio Code](https://code.visualstudio.com/?WT.mc_id=academic-77807-sagibbon)などのテキストエディターを使ってローカル実行も可能です。
#### リポジトリの作成
作業を簡単に保存するため、ご自身のリポジトリコピーを作成することをお勧めします。ページ上部の**Use this template**ボタンをクリックすると、GitHubアカウント内にカリキュラムのコピーが新しいリポジトリとして作成されます。
作業を簡単に保存できるよう、このリポジトリのコピーを作成することをおすすめします。ページ上部の**Use this template**ボタンをクリックすると、あなたのGitHubアカウントにカリキュラムのコピーが新規リポジトリとして作成されます。
手順は以下の通り：
1. **リポジトリのフォーク**：右上の「Fork」ボタンをクリックします。
2. **リポジトリのクローン**： `git clone https://github.com/microsoft/Web-Dev-For-Beginners.git`
1. **リポジトリをフォーク**：ページ右上の「Fork」ボタンをクリック
2. **リポジトリをクローン**: `git clone https://github.com/microsoft/Web-Dev-For-Beginners.git`
#### Codespaceでのカリキュラム実行
#### Codespaceでカリキュラムを実行
作成したあなたのリポジトリコピーで、**Code**ボタンをクリックし、**Open with Codespaces**を選択。これで作業用の新しいCodespaceが作成されます。
作成したリポジトリのコピーで、**Code**ボタンをクリックし、**Open with Codespaces**を選択。新しいCodespaceが作成され、作業可能になります。
![Codespace](../../translated_images/ja/createcodespace.0238bbf4d7a8d955.webp)
#### ローカルPCでのカリキュラム実行
#### ローカルでカリキュラムを実行
ローカルPCで実行するには、テキストエディタ、ブラウザ、コマンドラインツールが必要です。最初のレッスン、[プログラミング言語とツールの紹介](../../1-getting-started-lessons/1-intro-to-programming-languages)では、これらツールの様々なオプションを紹介し、最適なものを選べるよう案内します。
ローカル実行にはテキストエディター、ブラウザ、コマンドラインツールが必要です。最初のレッスンである[プログラミング言語と開発ツールの紹介](../../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)からダウンロード可能です。
推奨は、エディターに[Visual Studio Code](https://code.visualstudio.com/?WT.mc_id=academic-77807-sagibbon)を使うことです。VS Codeには[ターミナル](https://code.visualstudio.com/docs/terminal/basics/?WT.mc_id=academic-77807-sagibbon)が内蔵されています。ダウンロードはこちら：
1. あなたのリポジトリをPCにクローンします。**Code**ボタンをクリックし、URLをコピーしてください。
[https://code.visualstudio.com/?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) 内で [Terminal](https://code.visualstudio.com/docs/terminal/basics/?WT.mc_id=academic-77807-sagibbon) を開き、以下のコマンドを実行します。`<your-repository-url>` は先ほどコピーしたURLに置き換えてください。
次に、[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でフォルダを開きます。これは**ファイル** > **フォルダーを開く** をクリックして、クローンしたばかりのフォルダを選択することで行えます。
2. Visual Studio Code でフォルダーを開きます。**ファイル** > **フォルダーを開く** をクリックして、先ほどクローンしたフォルダーを選択します。
> 推奨される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) - コードを書くスピードを上げるために役立ちます
> * [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フォルダに格納されており、各クイズは3問からなり、合計48問あります。[こちら](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 | [テラリウム](./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 APIについて学びます | [キャンバスへの描画](./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) | Webアプリの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 | [ブラウザ/VScodeコード](../../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 |
> **クイズについての注意**: すべてのクイズは Quiz-app フォルダーにあり、合計48のクイズで各クイズは3問あります。[こちら](https://ff-quizzes.netlify.app/web/)で利用可能で、クイズアプリはローカルで実行することも Azure にデプロイすることもできます。`quiz-app` フォルダーの指示に従ってください。
## 🗃️ レッスン一覧
| | プロジェクト名 | 教える概念 | 学習目標 | リンクされたレッスン | 著者 |
| :-: | :------------------------------------------------------: | :--------------------------------------------------------------------: | ---------------------------------------------------------------------------------------------------------------------- | :----------------------------------------------------------------------------------------------------------------------------: | :---------------------: |
| 01 | Getting Started | プログラミング入門と業務ツールの概要 | ほとんどのプログラミング言語の基本とプロの開発者が仕事をするのに助けとなるソフトウェアについて学ぶ | [プログラミング言語と業務ツール入門](./1-getting-started-lessons/1-intro-to-programming-languages/README.md) | Jasmine |
| 02 | Getting Started | GitHubの基本、チームでの作業方法 | プロジェクトでGitHubを使う方法、コードベースでの他者とのコラボレーション方法を学ぶ | [GitHub入門](./1-getting-started-lessons/2-github-basics/README.md) | Floor |
| 03 | Getting Started | アクセシビリティ | Webアクセシビリティの基本を学ぶ | [アクセシビリティ基礎](./1-getting-started-lessons/3-accessibility/README.md) | Christopher |
| 04 | JS Basics | JavaScriptのデータ型 | JavaScriptのデータ型の基礎を学ぶ | [データ型](./2-js-basics/1-data-types/README.md) | Jasmine |
| 05 | JS Basics | 関数とメソッド | アプリケーションのロジックフローを管理するための関数とメソッドについて学ぶ | [関数とメソッド](./2-js-basics/2-functions-methods/README.md) | Jasmine and Christopher |
| 06 | JS Basics | JavaScriptによる条件分岐 | 条件分岐メソッドを使ってコードに条件を作成する方法を学ぶ | [条件分岐](./2-js-basics/3-making-decisions/README.md) | Jasmine |
| 07 | JS Basics | 配列とループ | JavaScriptで配列とループを使ってデータを扱う | [配列とループ](./2-js-basics/4-arrays-loops/README.md) | Jasmine |
| 08 | [Terrarium](./3-terrarium/solution/README.md) | HTMLの実践 | オンラインテラリウムを作るHTML構築、レイアウト構築に注力 | [HTML入門](./3-terrarium/1-intro-to-html/README.md) | Jen |
| 09 | [Terrarium](./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による高度なゲーム開発 | クラスとコンポジション両方を使った継承とパブ/サブパターンの理解、ゲーム作成の準備として学ぶ | [高度なゲーム開発入門](./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) | 画面上の要素を動かす | 要素に動きをつけるための直交座標と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) | Webアプリにおける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 |
| 25 | [Browser/VScode Code](../../8-code-editor) | VSCodeの使い方 | コードエディターの使い方を学ぶ| [VSCodeコードエディターの使い方](./8-code-editor/1-using-a-code-editor/README.md) | Chris |
| 26 | [AI Assistants](./9-chat-project/README.md) | AIの活用 | 独自のAIアシスタントの作り方を学ぶ | [AIアシスタントプロジェクト](./9-chat-project/README.md) | Chris |
## 🏫 教育方針
当カリキュラムは2つの主要な教育原則に基づいて設計されています:
* プロジェクトベースの学習
当カリキュラムは以下の2つの教育原則を軸に設計されています:
* プロジェクトベース学習
* 頻繁なクイズ
本プログラムではJavaScript、HTML、CSSの基礎ならびに現代のウェブ開発者が使用する最新のツールと技術を教えます。受講生はタイピングゲーム、バーチャルテラリウム、エコフレンドリーなブラウザ拡張機能、スペースインベーダースタイルゲーム、ビジネス向けバンキングアプリを作成することで実践的な経験を積めます。シリーズの終わりには、ウェブ開発のしっかりした理解を得られます。
本プログラムはJavaScript、HTML、CSSの基本に加え、現代のウェブ開発者が使う最新のツールや技術を教えます。学生はタイピングゲーム、仮想テラリウム、環境にやさしいブラウザ拡張機能、スペースインベーダースタイルのゲーム、企業向けバンキングアプリ作成を通じて実践的な経験を積む機会を持てます。シリーズ終了時にはウェブ開発の確かな理解を得られます。
> 🎓 Microsoft Learnの[Learn Path](https://docs.microsoft.com/learn/paths/web-development-101/?WT.mc_id=academic-77807-sagibbon)として、本カリキュラムの最初の数レッスンを受講することができます！
> 🎓 このカリキュラムの最初の数レッスンは 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)」の動画チュートリアルを組み合わせました。その著者の一部も本カリキュラムに貢献しています。
コンテンツをプロジェクトに連動させることで、学習者の関与を高め、概念の定着を助けるように設計しています。また、JavaScript基礎のスターターレッスンをいくつか作成し、[Beginners Series to: JavaScript](https://channel9.msdn.com/Series/Beginners-Series-to-JavaScript/?WT.mc_id=academic-77807-sagibbon)動画チュートリアルコレクションの一部と組み合わせています。このシリーズの一部の著者も本カリキュラムに寄稿しています。
授業前の低リスクなクイズは学習意図を設定し、授業後のクイズはさらなる理解定着を促します。本カリキュラムは柔軟かつ楽しく受講でき、全体または一部のみ受講可能です。プロジェクトは小規模から始まり、12週間のサイクル終了時には複雑性が増します。
さらに、低難度のクラス前クイズで学習への意識を促し、クラス後の第2回クイズで深い定着を促進。フレキシブルで楽しく取り組めるように設計されており、12週間の期間中にプロジェクトが徐々に複雑化していきます。
JavaScriptフレームワークの導入は意図的に避け、ウェブ開発者に必要な基本スキルに集中しています。次のステップとしては、別の動画シリーズ「[Beginner Series to: Node.js](https://channel9.msdn.com/Series/Beginners-Series-to-Nodejs/?WT.mc_id=academic-77807-sagibbon)」でNode.jsの学習をおすすめします。
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)をご覧ください。建設的なフィードバックをお待ちしています！
> 当プロジェクトの[行動規範](CODE_OF_CONDUCT.md)および[貢献ガイドライン](CONTRIBUTING.md)をご覧ください。建設的なご意見を歓迎します！
## 🧭 オフラインアクセス
[Docsify](https://docsify.js.org/#/) を使って、このドキュメントをオフラインで閲覧できます。このリポジトリをフォークし、ローカルマシンに[Docsifyをインストール](https://docsify.js.org/#/quickstart)してください。次にこのリポジトリのルートフォルダで `docsify serve` を入力します。ウェブサイトはローカルホストのポート3000で配信されます：`localhost:3000`。
このドキュメントは [Docsify](https://docsify.js.org/#/) を使ってオフラインで閲覧できます。このリポジトリをフォークし、ローカル環境に [Docsifyをインストール](https://docsify.js.org/#/quickstart)してから、このリポジトリのルートフォルダーで `docsify serve` を実行すると、ウェブサイトがローカルホストの3000番ポートで提供されます: `localhost:3000`。
## 📘 PDF
すべてのレッスンのPDFはこちらから入手可能です: [here](https://microsoft.github.io/Web-Dev-For-Beginners/pdf/readme.pdf).
すべてのレッスンをまとめたPDFは[こちら](https://microsoft.github.io/Web-Dev-For-Beginners/pdf/readme.pdf)で入手できます。
## 🎒 他のコース
## 🎒 その他のコース
私たちのチームは他にもコースを制作しています！ぜひご覧ください：
<!-- CO-OP TRANSLATOR OTHER COURSES START -->
### LangChain
[![LangChain4j for Beginners](https://img.shields.io/badge/LangChain4j%20for%20Beginners-22C55E?style=for-the-badge&&labelColor=E5E7EB&color=0553D6)](https://aka.ms/langchain4j-for-beginners)
[![LangChain.js for Beginners](https://img.shields.io/badge/LangChain.js%20for%20Beginners-22C55E?style=for-the-badge&labelColor=E5E7EB&color=0553D6)](https://aka.ms/langchainjs-for-beginners?WT.mc_id=m365-94501-dwahlin)
[![LangChain for Beginners](https://img.shields.io/badge/LangChain%20for%20Beginners-22C55E?style=for-the-badge&labelColor=E5E7EB&color=0553D6)](https://github.com/microsoft/langchain-for-beginners?WT.mc_id=m365-94501-dwahlin)
---
### Azure / Edge / MCP / Agents
@ -222,7 +225,7 @@ JavaScriptフレームワークの導入は意図的に避け、ウェブ開発
---
### ジェネレーティブAIシリーズ
### Generative AI Series
[![Generative AI for Beginners](https://img.shields.io/badge/Generative%20AI%20for%20Beginners-8B5CF6?style=for-the-badge&labelColor=E5E7EB&color=8B5CF6)](https://github.com/microsoft/generative-ai-for-beginners?WT.mc_id=academic-105485-koreyst)
[![Generative AI (.NET)](https://img.shields.io/badge/Generative%20AI%20(.NET)-9333EA?style=for-the-badge&labelColor=E5E7EB&color=9333EA)](https://github.com/microsoft/Generative-AI-for-beginners-dotnet?WT.mc_id=academic-105485-koreyst)
[![Generative AI (Java)](https://img.shields.io/badge/Generative%20AI%20(Java)-C084FC?style=for-the-badge&labelColor=E5E7EB&color=C084FC)](https://github.com/microsoft/generative-ai-for-beginners-java?WT.mc_id=academic-105485-koreyst)
@ -230,7 +233,7 @@ JavaScriptフレームワークの導入は意図的に避け、ウェブ開発
---
### コアラーニング
### Core Learning
[![ML for Beginners](https://img.shields.io/badge/ML%20for%20Beginners-22C55E?style=for-the-badge&labelColor=E5E7EB&color=22C55E)](https://aka.ms/ml-beginners?WT.mc_id=academic-105485-koreyst)
[![Data Science for Beginners](https://img.shields.io/badge/Data%20Science%20for%20Beginners-84CC16?style=for-the-badge&labelColor=E5E7EB&color=84CC16)](https://aka.ms/datascience-beginners?WT.mc_id=academic-105485-koreyst)
[![AI for Beginners](https://img.shields.io/badge/AI%20for%20Beginners-A3E635?style=for-the-badge&labelColor=E5E7EB&color=A3E635)](https://aka.ms/ai-beginners?WT.mc_id=academic-105485-koreyst)
@ -241,7 +244,7 @@ JavaScriptフレームワークの導入は意図的に避け、ウェブ開発
---
### コパイロットシリーズ
### Copilot Series
[![Copilot for AI Paired Programming](https://img.shields.io/badge/Copilot%20for%20AI%20Paired%20Programming-FACC15?style=for-the-badge&labelColor=E5E7EB&color=FACC15)](https://aka.ms/GitHubCopilotAI?WT.mc_id=academic-105485-koreyst)
[![Copilot for C#/.NET](https://img.shields.io/badge/Copilot%20for%20C%23/.NET-FBBF24?style=for-the-badge&labelColor=E5E7EB&color=FBBF24)](https://github.com/microsoft/mastering-github-copilot-for-dotnet-csharp-developers?WT.mc_id=academic-105485-koreyst)
[![Copilot Adventure](https://img.shields.io/badge/Copilot%20Adventure-FDE68A?style=for-the-badge&labelColor=E5E7EB&color=FDE68A)](https://github.com/microsoft/CopilotAdventures?WT.mc_id=academic-105485-koreyst)
@ -249,21 +252,21 @@ JavaScriptフレームワークの導入は意図的に避け、ウェブ開発
## ヘルプを得る
AI アプリの構築で詰まったり、質問がある場合は MCP に関する学習者や経験豊富な開発者と一緒にディスカッションに参加しましょう。質問が歓迎され、知識が自由に共有される支援的なコミュニティです。
AIアプリの構築で行き詰まったり質問がある場合は、MCPに関する学習者や経験豊富な開発者と一緒にディスカッションに参加してください。質問が歓迎され、知識が自由に共有されるサポートのあるコミュニティです。
[![Microsoft Foundry Discord](https://dcbadge.limes.pink/api/server/nTYy5BXMWG)](https://discord.gg/nTYy5BXMWG)
製品のフィードバックや製品構築時のエラーがある場合は、以下をご覧ください：
製品のフィードバックや構築中のエラーについては、以下へお越しください：
[![Microsoft Foundry Developer Forum](https://img.shields.io/badge/GitHub-Microsoft_Foundry_Developer_Forum-blue?style=for-the-badge&logo=github&color=000000&logoColor=fff)](https://aka.ms/foundry/forum)
## ライセンス
このリポジトリは MIT ライセンスの下でライセンスされています。詳細は [LICENSE](../../LICENSE) ファイルをご参照ください。
このリポジトリはMITライセンスの下でライセンスされています。詳細は[LICENSE](../../LICENSE)ファイルをご覧ください。
---
<!-- CO-OP TRANSLATOR DISCLAIMER START -->
**免責事項**：
本書類はAI翻訳サービス「Co-op Translator」（https://github.com/Azure/co-op-translator）を使用して翻訳されました。正確性の向上に努めておりますが、自動翻訳には誤りや不正確な箇所が含まれる可能性があります。正式な内容については原文書を権威ある情報源としてご参照ください。重要な情報に関しては、専門の人間による翻訳を推奨いたします。本翻訳の利用により生じたいかなる誤解や解釈違いについても、当方は一切責任を負いかねます。
**免責事項**：
本書類はAI翻訳サービス [Co-op Translator](https://github.com/Azure/co-op-translator) を使用して翻訳されています。正確性には努めておりますが、自動翻訳には誤りや不正確な部分が含まれる可能性があります。正確な情報は原文の原言語の書類を正式な情報源としてご参照ください。重要な情報については、専門の人間翻訳をご利用いただくことを推奨します。本翻訳の利用によって生じたいかなる誤解や誤訳に対しても、当方は一切の責任を負いかねます。
<!-- CO-OP TRANSLATOR DISCLAIMER END -->

53
translations/ja/Roadmap.md
Unescape View File

@ -0,0 +1,53 @@
# MicrosoftのWeb-Dev-For-Beginnersリポジトリのロードマップ
**このリポジトリは、JavaScript、HTML、およびCSSに重点を置いたウェブ開発の基礎を学ぶためのロードマップを提供します。カリキュラムは柔軟で、24のレッスンを12週間にわたって全てまたは一部受講することができます。**
## 重要なマイルストーン
* **1〜3週目：**
* プログラミング言語とツールの紹介
* GitHubの基本
* アクセシビリティ
* JSの基本：データ型、関数とメソッド
* JSでの意思決定
* **4〜6週目：**
* 配列とループ
* テラリウム：HTMLの実践
* CSSの実践
* JavaScriptのクロージャー
* DOM操作
* **7〜9週目：**
* タイピングゲーム：イベント駆動型プログラミング
* グリーンブラウザ拡張機能：ブラウザの操作
* フォーム作成、API呼び出し、ローカルストレージへの変数保存
* ブラウザでのバックグラウンド処理
* ウェブパフォーマンス
* **10〜12週目：**
* スペースゲーム：JavaScriptによるより高度なゲーム開発
* キャンバスへの描画
* 画面上の要素の移動
* 衝突検出
* スコアの管理、ゲームの終了と再開
* バンキングアプリ：ウェブアプリにおけるHTMLテンプレートとルート
* ログインと登録フォームの構築
* データの取得と利用の方法
* 状態管理の概念
## 学習成果
**このロードマップを完了することで、受講者はタイピングゲーム、バーチャルテラリウム、エコフレンドリーブラウザ拡張機能、スペースインベーダースタイルのゲーム、およびビジネス向けバンキングアプリを作成する実践的な経験を積むことができます。また、ウェブ開発の基礎に関する確固たる理解を身につけます。**
## 追加リソース
* このリポジトリは、チュートリアル、コード例、チャレンジなど、さらなる学習のための豊富なリソースを提供します。
* Microsoft Learnプラットフォームでは、さまざまなウェブ開発コースと学習パスが提供されています。
* Stack OverflowやMDN Web Docsなどのオンラインコミュニティは、ウェブ開発者にとって貴重なサポートとリソースを提供します。
**このロードマップがあなたのウェブ開発の旅に役立つことを願っています！**
---
<!-- CO-OP TRANSLATOR DISCLAIMER START -->
**免責事項**：
本書類はAI翻訳サービス「Co-op Translator」（https://github.com/Azure/co-op-translator）を使用して翻訳されました。正確性の確保に努めておりますが、自動翻訳には誤りや不正確な箇所が含まれる場合があります。原文の言語によるオリジナル文書が公式な情報源となります。重要な情報については、専門の人間による翻訳を推奨いたします。本翻訳の使用により生じたいかなる誤解や誤訳についても、一切の責任を負いかねますのでご了承ください。
<!-- CO-OP TRANSLATOR DISCLAIMER END -->

12
translations/zh-HK/.co-op-translator.json
Unescape View File

@ -493,7 +493,7 @@
},
"AGENTS.md": {
"original_hash": "a362efd06d64d4134a0cfe8515a86d34",
"translation_date": "2025-10-03T11:17:40+00:00",
"translation_date": "2026-02-06T16:23:03+00:00",
"source_file": "AGENTS.md",
"language_code": "zh-HK"
},
@ -516,11 +516,17 @@
"language_code": "zh-HK"
},
"README.md": {
"original_hash": "490c83786552d7fab6390991517bef09",
"translation_date": "2026-01-29T17:50:10+00:00",
"original_hash": "6d6385fd098088cb2d690fb0a6cdaedc",
"translation_date": "2026-02-06T16:16:46+00:00",
"source_file": "README.md",
"language_code": "zh-HK"
},
"Roadmap.md": {
"original_hash": "28bf6185fd7f27b62ddc210514366192",
"translation_date": "2026-02-06T16:21:29+00:00",
"source_file": "Roadmap.md",
"language_code": "zh-HK"
},
"SECURITY.md": {
"original_hash": "4ecc3bf2e27983d4c780be6f26ee6228",
"translation_date": "2025-08-23T22:21:34+00:00",

462
translations/zh-HK/AGENTS.md
Unescape View File

@ -1,282 +1,282 @@
# AGENTS.md
## 項目概述
## Project Overview
這是一個教育課程資源庫，用於教授初學者網頁開發的基礎知識。課程是一個由 Microsoft Cloud Advocates 開發的全面 12 週課程，包含 24 節實踐課程，涵蓋 JavaScript、CSS 和 HTML。
這是一個教育課程倉庫，用於教授初學者網頁開發基礎。該課程由 Microsoft Cloud Advocates 開發，是一個為期12週的綜合課程，包含24堂實作課程，涵蓋 JavaScript、CSS 和 HTML。
### 主要組成部分
### Key Components
- **教育內容**：24 節結構化課程，按項目模塊組織
- **實踐項目**：包括生態瓶、打字遊戲、瀏覽器擴展、太空遊戲、銀行應用、代碼編輯器和 AI 聊天助手
- **互動測驗**：48 個測驗，每個測驗包含 3 個問題（課前/課後評估）
- **多語言支持**：通過 GitHub Actions 自動翻譯超過 50 種語言
- **技術**：HTML、CSS、JavaScript、Vue.js 3、Vite、Node.js、Express、Python（用於 AI 項目）
- **教育內容**：24堂結構化課程，組織成以專案為基礎的模組
- **實作專案**：溫室模擬器、打字遊戲、瀏覽器擴充功能、太空遊戲、銀行應用、程式碼編輯器及 AI 聊天助理
- **互動測驗**：48個測驗，每個3題（課前／課後評估）
- **多語言支援**：透過 GitHub Actions 自動翻譯超過50種語言
- **技術棧**：HTML、CSS、JavaScript、Vue.js 3、Vite、Node.js、Express、Python（用於 AI 專案）
### 架構
### Architecture
- 以課程為基礎的教育資源庫
- 每個課程文件夾包含 README、代碼示例和解決方案
- 獨立項目存放於單獨目錄（quiz-app、各課程項目）
- 以課程為基礎的教育倉庫結構
- 每堂課資料夾包含README、程式碼範例及解答
- 獨立專案位於不同目錄（quiz-app、多個課程專案）
- 使用 GitHub Actions 的翻譯系統（co-op-translator）
- 文檔通過 Docsify 提供並可生成 PDF
- 文件使用 Docsify 提供，並可匯出 PDF
## 設置命令
## Setup Commands
此資源庫主要用於教育內容的使用。針對特定項目操作：
此倉庫主要用於教育內容學習。若要操作特定專案：
### 主資源庫設置
### Main Repository Setup
```bash
git clone https://github.com/microsoft/Web-Dev-For-Beginners.git
cd Web-Dev-For-Beginners
```
### 測驗應用設置（Vue 3 + Vite）
### Quiz App Setup (Vue 3 + Vite)
```bash
cd quiz-app
npm install
npm run dev # Start development server
npm run build # Build for production
npm run lint # Run ESLint
npm run dev # 啟動開發伺服器
npm run build # 建置生產版本
npm run lint # 執行 ESLint
```
### 銀行項目 API（Node.js + Express）
### Bank Project API (Node.js + Express)
```bash
cd 7-bank-project/api
npm install
npm start # Start API server
npm run lint # Run ESLint
npm run format # Format with Prettier
npm start # 啟動 API 伺服器
npm run lint # 運行 ESLint
npm run format # 使用 Prettier 格式化
```
### 瀏覽器擴展項目
### Browser Extension Projects
```bash
cd 5-browser-extension/solution
npm install
# Follow browser-specific extension loading instructions
# 遵循瀏覽器專屬的擴充功能載入指引
```
### 太空遊戲項目
### Space Game Projects
```bash
cd 6-space-game/solution
npm install
# Open index.html in browser or use Live Server
# 於瀏覽器中開啟 index.html 或使用 Live Server
```
### 聊天項目（Python 後端）
### Chat Project (Python Backend)
```bash
cd 9-chat-project/solution/backend/python
pip install openai
# Set GITHUB_TOKEN environment variable
# 設定 GITHUB_TOKEN 環境變數
python api.py
```
## 開發工作流程
## Development Workflow
### 對於內容貢獻者
### For Content Contributors
1. **Fork 資源庫**到你的 GitHub 帳戶
2. **本地克隆你的 Fork**
3. **創建新分支**進行修改
4. 修改課程內容或代碼示例
5. 在相關項目目錄中測試代碼修改
6. 按照貢獻指南提交 Pull Request
1. **Fork 倉庫** 至您的 GitHub 帳號
2. **Clone 您的 fork** 至本地
3. **建立新分支** 以提交更改
4. 修改課程內容或程式碼範例
5. 在相關專案資料夾測試程式碼更動
6. 遵循貢獻指南提交 pull request
### 對於學習者
### For Learners
1. Fork 或克隆資源庫
2. 按順序進入課程目錄
3. 閱讀每節課的 README 文件
4. 完成課前測驗：https://ff-quizzes.netlify.app/web/
5. 在課程文件夾中完成代碼示例
6. 完成作業和挑戰
7. 完成課後測驗
1. Fork 或 clone 此倉庫
2. 依序瀏覽課程資料夾
3. 閱讀每課的 README 檔案
4. 在 https://ff-quizzes.netlify.app/web/ 完成課前測驗
5. 練習課程中的程式碼範例
6. 完成作業與挑戰
7. 參加課後測驗
### 實時開發
### Live Development
- **文檔**：在根目錄運行 `docsify serve`（端口 3000）
- **測驗應用**：在 quiz-app 目錄運行 `npm run dev`
- **項目**：使用 VS Code 的 Live Server 擴展運行 HTML 項目
- **API 項目**：在相關 API 目錄運行 `npm start`
- **文件**：在根目錄執行 `docsify serve`（預設埠號 3000）
- **測驗應用**：在 quiz-app 目錄執行 `npm run dev`
- **專案**：對 HTML 專案使用 VS Code 的 Live Server 擴充
- **API 專案**：在相應 API 目錄執行 `npm start`
## 測試說明
## Testing Instructions
### 測驗應用測試
### Quiz App Testing
```bash
cd quiz-app
npm run lint # Check for code style issues
npm run build # Verify build succeeds
npm run lint # 檢查代碼風格問題
npm run build # 確認建置成功
```
### 銀行 API 測試
### Bank API Testing
```bash
cd 7-bank-project/api
npm run lint # Check for code style issues
node server.js # Verify server starts without errors
npm run lint # 檢查代碼風格問題
node server.js # 確認伺服器啟動時無錯誤
```
### 一般測試方法
### General Testing Approach
- 此資源庫為教育用途，未包含全面的自動化測試
- 這是教育倉庫，沒有完整自動化測試
- 手動測試重點：
- 代碼示例無錯誤運行
- 文檔中的鏈接正確
- 項目成功構建
- 示例遵循最佳實踐
- 程式碼範例能正常執行
- 文件中的連結可正常使用
- 專案能成功建置
- 範例遵守最佳實踐
### 提交前檢查
### Pre-submission Checks
- 在包含 package.json 的目錄運行 `npm run lint`
- 確保 Markdown 鏈接有效
- 在瀏覽器或 Node.js 中測試代碼示例
- 確保翻譯保持正確結構
- 在有 package.json 的目錄執行 `npm run lint`
- 驗證 markdown 連結有效
- 在瀏覽器或 Node.js 中測試程式碼範例
- 確認翻譯結構正確
## 代碼風格指南
## Code Style Guidelines
### JavaScript
- 使用現代 ES6+ 語法
- 遵循項目提供的標準 ESLint 配置
- 使用有意義的變量和函數名稱以便教育清晰
- 添加注釋解釋概念以幫助學習者
- 在配置的地方使用 Prettier 格式化
- 遵循專案提供的 ESLint 標準配置
- 使用具意義的變數與函式名稱，利於教學理解
- 加入說明性註解方便學習者
- 在有設定的地方使用 Prettier 格式化
### HTML/CSS
- 使用語義化的 HTML5 元素
- 遵循響應式設計原則
- 清晰的類名命名規範
- 添加注釋解釋 CSS 技術以幫助學習者
- 使用語意化的 HTML5 元素
- 採用響應式設計原則
- 清晰的類別命名慣例
- 用註解說明 CSS 技巧便於學習
### Python
- 遵循 PEP 8 風格指南
- 提供清晰的教育代碼示例
- 在有助於學習的地方添加類型提示
- 遵守 PEP 8 風格指南
- 範例程式碼簡潔且具教育意義
- 必要時使用型別提示，輔助學習
### Markdown 文檔
### Markdown Documentation
- 清晰的標題層次結構
- 帶語言指定的代碼塊
- 提供額外資源的鏈接
- `images/` 目錄中的截圖和圖片
- 為圖片添加替代文字以提高可訪問性
- 清晰的標題結構層級
- 程式碼區塊標明語言
- 提供額外資源連結
- 在 `images/` 目錄放置截圖與圖片
- 圖片有替代文字以符合無障礙要求
### 文件組織
### File Organization
- 課程按順序編號（1-getting-started-lessons, 2-js-basics 等）
- 每個項目有 `solution/` 文件夾，通常還有 `start/` 或 `your-work/` 文件夾
- 圖片存放於課程專屬的 `images/` 文件夾
- 翻譯存放於 `translations/{language-code}/` 結構中
- 課程依序編號（1-getting-started-lessons、2-js-basics 等）
- 每個專案有 `solution/`，常見還有 `start/` 或 `your-work/` 目錄
- 圖片存放於各課獨立 `images/` 資料夾
- 翻譯置於 `translations/{language-code}/` 結構
## 構建和部署
## Build and Deployment
### 測驗應用部署（Azure Static Web Apps）
### Quiz App Deployment (Azure Static Web Apps)
測驗應用已配置為 Azure Static Web Apps 部署：
quiz-app 設定為 Azure Static Web Apps 部署：
```bash
cd quiz-app
npm run build # Creates dist/ folder
# Deploys via GitHub Actions workflow on push to main
npm run build # 建立 dist/ 資料夾
# 當推送至 main 時透過 GitHub Actions 工作流程部署
```
Azure Static Web Apps 配置：
- **應用位置**：`/quiz-app`
- **App 位置**：`/quiz-app`
- **輸出位置**：`dist`
- **工作流**：`.github/workflows/azure-static-web-apps-ashy-river-0debb7803.yml`
- **工作流程**：`.github/workflows/azure-static-web-apps-ashy-river-0debb7803.yml`
### 文檔 PDF 生成
### Documentation PDF Generation
```bash
npm install # Install docsify-to-pdf
npm run convert # Generate PDF from docs
npm install # 安裝 docsify-to-pdf
npm run convert # 從 docs 生成 PDF
```
### Docsify 文檔
### Docsify Documentation
```bash
npm install -g docsify-cli # Install Docsify globally
docsify serve # Serve on localhost:3000
npm install -g docsify-cli # 全域安裝 Docsify
docsify serve # 在 localhost:3000 提供服務
```
### 項目專屬構建
### Project-specific Builds
每個項目目錄可能有自己的構建過程：
- Vue 項目：`npm run build` 創建生產包
- 靜態項目：無需構建步驟，直接提供文件
各專案資料夾可能有自己的建置流程：
- Vue 專案：`npm run build` 產生生產封包
- 靜態專案：無建置步驟，直接提供檔案
## Pull Request 指南
## Pull Request Guidelines
### 標題格式
### Title Format
使用清晰、描述性的標題指示修改範圍：
- `[Quiz-app] 為課程 X 添加新測驗`
- `[Lesson-3] 修正生態瓶項目中的拼寫錯誤`
- `[Translation] 為課程 5 添加西班牙語翻譯`
- `[Docs] 更新設置說明`
使用清楚描述變更範圍的標題：
- `[Quiz-app] 新增第X課測驗`
- `[Lesson-3] 修正溫室模擬器專案中的錯字`
- `[Translation] 新增第5課西班牙文翻譯`
- `[Docs] 更新環境設定說明`
### 必需檢查
### Required Checks
提交 PR 前：
1. **代碼質量**：
- 在受影響的項目目錄運行 `npm run lint`
- 修復所有 lint 錯誤和警告
1. **程式碼品質**：
- 在受影響專案目錄執行 `npm run lint`
- 修正所有 lint 錯誤與警告
2. **構建驗證**：
- 如果適用，運行 `npm run build`
- 確保無構建錯誤
2. **建置驗證**：
- 如適用執行 `npm run build`
- 確保無建置錯誤
3. **鏈接驗證**：
- 測試所有 Markdown 鏈接
- 確保圖片引用正常
3. **連結檢查**：
- 測試所有 markdown 連結
- 確認圖片引用正常
4. **內容審核**：
- 校對拼寫和語法
- 確保代碼示例正確且具有教育性
- 確保翻譯保持原意
- 拼字與文法校對
- 確保程式碼範例正確且具教育意義
- 驗證翻譯維持原意
### 貢獻要求
### Contribution Requirements
- 同意 Microsoft CLA（首次 PR 時自動檢查）
- 遵循 [Microsoft 開源行為準則](https://opensource.microsoft.com/codeofconduct/)
- 詳細指南請參閱 [CONTRIBUTING.md](./CONTRIBUTING.md)
- 如果適用，在 PR 描述中引用問題編號
- 同意 Microsoft CLA（首次 PR 自動檢查）
- 遵守 [Microsoft 開源行為守則](https://opensource.microsoft.com/codeofconduct/)
- 詳細指南請見 [CONTRIBUTING.md](./CONTRIBUTING.md)
- 如有議題，請在 PR 說明中參考議題編號
### 審核流程
### Review Process
- PR 由維護者和社區審核
- 優先考慮教育清晰性
- 代碼示例應遵循當前最佳實踐
- 翻譯需審核準確性和文化適用性
- PR 由維護者與社群共同審核
- 優先考慮教學清晰度
- 程式碼範例應符合當前最佳實踐
- 翻譯審核準確且符合文化習慣
## 翻譯系統
## Translation System
### 自動翻譯
### Automated Translation
- 使用 GitHub Actions 和 co-op-translator 工作流
- 自動翻譯至 50+ 種語言
- 主目錄中的源文件
- 翻譯文件存放於 `translations/{language-code}/` 目錄
- 使用 GitHub Actions 搭配 co-op-translator 工作流程
- 自動翻譯超過50種語言
- 原始檔案在主目錄
- 翻譯檔在 `translations/{language-code}/`
### 添加手動翻譯改進
### Adding Manual Translation Improvements
1. 在 `translations/{language-code}/` 中找到文件
2. 在保持結構的情況下進行改進
3. 確保代碼示例仍然可用
4. 測試任何本地化的測驗內容
1. 找到 `translations/{language-code}/` 內檔案
2. 在保留結構的前提下改善翻譯
3. 確保程式碼範例功能正常
4. 測試當地化測驗內容
### 翻譯元數據
### Translation Metadata
翻譯文件包含元數據頭：
翻譯檔包含元資料標頭：
```markdown
<!--
CO_OP_TRANSLATOR_METADATA:
@ -289,118 +289,120 @@ CO_OP_TRANSLATOR_METADATA:
-->
```
## 調試和故障排除
## Debugging and Troubleshooting
### 常見問題
### Common Issues
**測驗應用無法啟動**：
- 檢查 Node.js 版本（建議 v14+）
- 刪除 `node_modules` 和 `package-lock.json`，重新運行 `npm install`
- 檢查端口衝突（默認：Vite 使用端口 5173）
**Quiz app 啟動失敗**：
- 檢查 Node.js 版本（建議 v14 以上）
- 刪除 `node_modules` 和 `package-lock.json` 後重新執行 `npm install`
- 檢查埠號衝突（預設: Vite 使用 5173 埠）
**API 服務器無法啟動**：
- 確保 Node.js 版本符合最低要求（node >=10）
- 檢查端口是否已被佔用
- 確保所有依賴已通過 `npm install` 安裝
**API 伺服器無法啟動**：
- 確認 Node.js 版本符合最低要求（node >=10）
- 確認埠號是否已被占用
- 確保已執行 `npm install` 安裝所有依賴
**瀏覽器擴展無法加載**：
- 確保 manifest.json 格式正確
- 檢查瀏覽器控制台中的錯誤
- 遵循瀏覽器特定的擴展安裝說明
**瀏覽器擴充功能無法載入**：
- 驗證 manifest.json 格式正確
- 檢查瀏覽器主控台錯誤訊息
- 遵守瀏覽器擴充安裝指引
**Python 聊天項目問題**：
- 確保已安裝 OpenAI 包：`pip install openai`
- 確保設置了 GITHUB_TOKEN 環境變量
- 檢查 GitHub Models 的訪問權限
**Python 聊天專案問題**：
- 確保已安裝 OpenAI 套件：`pip install openai`
- 確認 GITHUB_TOKEN 環境變數有設定
- 檢查 GitHub Models 存取權限
**Docsify 無法提供文檔**：
- 全局安裝 docsify-cli：`npm install -g docsify-cli`
- 從資源庫根目錄運行
- 確保 `docs/_sidebar.md` 存在
**Docsify 無法提供文件**：
- 全域安裝 docsify-cli：`npm install -g docsify-cli`
- 從倉庫根目錄執行
- 確認 `docs/_sidebar.md` 存在
### 開發環境提示
### Development Environment Tips
- 對於 HTML 項目，使用 VS Code 和 Live Server 擴展
- 安裝 ESLint 和 Prettier 擴展以保持一致的格式
- 使用瀏覽器開發工具調試 JavaScript
- 對於 Vue 項目，安裝 Vue DevTools 瀏覽器擴展
- HTML 專案使用 VS Code 搭配 Live Server 擴充
- 安裝 ESLint 和 Prettier 擴充以保持格式一致
- 使用瀏覽器開發工具除錯 JavaScript
- Vue 專案安裝 Vue DevTools 瀏覽器擴充
### 性能考量
### Performance Considerations
- 大量翻譯文件（50+ 種語言）導致完整克隆文件較大
- 如果僅處理內容，使用淺克隆：`git clone --depth 1`
- 在處理英文內容時排除翻譯文件的搜索
- 首次運行構建過程可能較慢（npm install, Vite build）
- 由於有大量翻譯檔（50+語言），完整 clone 檔案量大
- 如只需內容，使用淺層 clone：`git clone --depth 1`
- 在編輯英文內容時排除翻譯資料夾搜尋
- 初次執行建置流程較慢（npm install、Vite build）
## 安全考量
## Security Considerations
### 環境變量
### Environment Variables
- API 密鑰絕不可提交到資源庫
- 使用 `.env` 文件（已在 `.gitignore` 中）
- 在項目 README 中記錄所需的環境變量
- API 金鑰不可提交至倉庫
- 使用 `.env` 檔案（已在 `.gitignore` 中）
- 各專案 README 文檔需記錄必要環境變數
### Python 項目
### Python Projects
- 使用虛擬環境：`python -m venv venv`
- 保持依賴更新
- GitHub 令牌應具有最低必要權限
- 定期更新依賴套件
- GitHub Token 權限需最小化
### GitHub Models 訪問
### GitHub Models Access
- 需要個人訪問令牌（PAT）用於 GitHub Models
- 令牌應存儲為環境變量
- 絕不可提交令牌或憑據
- GitHub Models 需個人存取權杖（PAT）
- Token 應設為環境變數儲存
- 禁止提交 token 或憑證
## 附加說明
## Additional Notes
### 目標受眾
### Target Audience
- 完全初學者的網頁開發
- 學生和自學者
- 在課堂中使用課程的教師
- 內容設計以提高可訪問性和逐步技能提升
- 完全沒有網頁開發經驗者
- 學生與自學者
- 使用此課程的教師
- 內容設計注重無障礙與循序漸進技能養成
### 教育理念
### Educational Philosophy
- 基於項目的學習方法
- 頻繁的知識檢查（測驗）
- 實踐編碼練習
- 真實世界應用示例
- 在框架之前專注於基礎知識
- 以專案為主軸的學習方法
- 頻繁知識檢測（測驗）
- 實作程式練習
- 引入現實應用案例
- 以基礎為主、框架為輔
### 資源庫維護
### Repository Maintenance
- 活躍的學習者和貢獻者社區
- 定期更新依賴和內容
- 維護者監控問題和討論
- 通過 GitHub Actions 自動更新翻譯
- 積極的學習者與貢獻者社群
- 定期更新依賴與內容
- 維護者監控議題與討論
- 翻譯更新自動化透過 GitHub Actions
### 相關資源
### Related Resources
- [Microsoft Learn 模塊](https://docs.microsoft.com/learn/)
- [Microsoft Learn 模組](https://docs.microsoft.com/learn/)
- [學生中心資源](https://docs.microsoft.com/learn/student-hub/)
- [GitHub Copilot](https://marketplace.visualstudio.com/items?itemName=GitHub.copilot) 建議學習者使用
- 其他課程：生成式 AI、數據科學、機器學習、物聯網課程可用
- 推薦學習者使用 [GitHub Copilot](https://marketplace.visualstudio.com/items?itemName=GitHub.copilot)
- 額外課程：生成式 AI、資料科學、機器學習、物聯網課程皆可用
### 處理特定項目
### Working with Specific Projects
有關單個項目的詳細說明，請參閱以下目錄中的 README 文件：
詳細專案操作說明請見：
- `quiz-app/README.md` - Vue 3 測驗應用
- `7-bank-project/README.md` - 帶身份驗證的銀行應用
- `5-browser-extension/README.md` - 瀏覽器擴展開發
- `7-bank-project/README.md` - 含認證的銀行應用
- `5-browser-extension/README.md` - 瀏覽器擴充功能開發
- `6-space-game/README.md` - 基於 Canvas 的遊戲開發
- `9-chat-project/README.md` - AI 聊天助手項目
- `9-chat-project/README.md` - AI 聊天助理專案
### Monorepo 結構
### Monorepo Structure
雖然不是傳統的 Monorepo，此資源庫包含多個獨立項目：
- 每節課程是自包含的
- 項目之間不共享依賴
- 可單獨處理項目而不影響其他項目
- 克隆整個資源庫以獲得完整課程體驗
此倉庫非典型 monorepo，但包含多個獨立專案：
- 每堂課均自成一格
- 專案間無共享依賴
- 可分別開發不影響其他專案
- 若需完整課程體驗，請完整 clone 倉庫
---
**免責聲明**：
此文件使用 AI 翻譯服務 [Co-op Translator](https://github.com/Azure/co-op-translator) 進行翻譯。我們致力於提供準確的翻譯，但請注意，自動翻譯可能包含錯誤或不準確之處。應以原文文件為權威來源。如涉及關鍵資訊，建議尋求專業人工翻譯。我們對因使用此翻譯而引起的任何誤解或誤釋概不負責。
<!-- CO-OP TRANSLATOR DISCLAIMER START -->
**免責聲明**：
本文件使用 AI 翻譯服務 [Co-op Translator](https://github.com/Azure/co-op-translator) 進行翻譯。雖然我們力求準確，但請注意，自動翻譯可能包含錯誤或不準確之處。原始文件的母語版本應被視為權威來源。如涉及重要資訊，建議採用專業人工翻譯。我們對因使用本翻譯而產生的任何誤解或曲解概不負責。
<!-- CO-OP TRANSLATOR DISCLAIMER END -->

226
translations/zh-HK/README.md
Unescape View File

@ -2,7 +2,7 @@
[![GitHub contributors](https://img.shields.io/github/contributors/microsoft/Web-Dev-For-Beginners.svg)](https://GitHub.com/microsoft/Web-Dev-For-Beginners/graphs/contributors/)
[![GitHub issues](https://img.shields.io/github/issues/microsoft/Web-Dev-For-Beginners.svg)](https://GitHub.com/microsoft/Web-Dev-For-Beginners/issues/)
[![GitHub pull-requests](https://img.shields.io/github/issues-pr/microsoft/Web-Dev-For-Beginners.svg)](https://GitHub.com/microsoft/Web-Dev-For-Beginners/pulls/)
[![PRs Welcome](https://img.shields.io/badge/PRs-welcome-brightgreen.svg?style=flat-square)](http://makeapullrequest.com)
[![PRs Welcome](https://img.shields.io/badge/PRs-welcome-brightgreen.svg?style=flat-square)](http://makeapullrequest.com)
[![GitHub watchers](https://img.shields.io/github/watchers/microsoft/Web-Dev-For-Beginners.svg?style=social&label=Watch&maxAge=2592000)](https://GitHub.com/microsoft/Web-Dev-For-Beginners/watchers/)
[![GitHub forks](https://img.shields.io/github/forks/microsoft/Web-Dev-For-Beginners.svg?style=social&label=Fork&maxAge=2592000)](https://GitHub.com/microsoft/Web-Dev-For-Beginners/network/)
@ -10,206 +10,208 @@
[![Microsoft Foundry Discord](https://dcbadge.limes.pink/api/server/nTYy5BXMWG)](https://discord.gg/nTYy5BXMWG)
# 初學者網頁開發課程
# 入門網頁開發課程
透過由 Microsoft 雲端倡導者團隊提供的 12 週全方位課程，學習網頁開發的基礎知識。24 個課程單元深入探討 JavaScript、CSS 和 HTML，透過實作專案如生態缸、瀏覽器擴充功能和太空遊戲加深理解。參與測驗、討論與實務作業。透過我們有效的專案導向教學法提升技能並優化知識吸收。現在就開始你的程式設計旅程！
透過 Microsoft Cloud Advocates 主辦的 12 週全面課程，學習網頁開發的基礎。24 節課程中涵蓋了 JavaScript、CSS 和 HTML，並透過實作項目如玻璃容器、瀏覽器擴展程式及太空遊戲深入學習。參與測驗、討論及實務作業。透過有效的以專案為導向教學法，提高技能並優化知識吸收。立即開始您的程式設計之旅！
加入 Azure AI Foundry Discord 社群
[![Microsoft Foundry Discord](https://dcbadge.limes.pink/api/server/nTYy5BXMWG)](https://discord.gg/nTYy5BXMWG)
按照以下步驟開始使用這些資源：
1. **分支此儲存庫**：點擊 [![GitHub forks](https://img.shields.io/github/forks/microsoft/Web-Dev-For-beginners.svg?style=social&label=Fork)](https://GitHub.com/microsoft/Web-Dev-For-Beginners/fork)
2. **複製儲存庫**： `git clone https://github.com/microsoft/Web-Dev-For-Beginners.git`
按以下步驟開始使用這些資源：
1. **派生此儲存庫**：點擊 [![GitHub forks](https://img.shields.io/github/forks/microsoft/Web-Dev-For-beginners.svg?style=social&label=Fork)](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 支援（自動且隨時更新）
#### 透過 GitHub Action 支援（自動化及隨時更新）
<!-- CO-OP TRANSLATOR LANGUAGES TABLE START -->
[阿拉伯語](../ar/README.md) | [孟加拉語](../bn/README.md) | [保加利亞語](../bg/README.md) | [緬甸語（Myanmar）](../my/README.md) | [中文（簡體）](../zh-CN/README.md) | [中文（繁體，香港）](./README.md) | [中文（繁體，澳門）](../zh-MO/README.md) | [中文（繁體，台灣）](../zh-TW/README.md) | [克羅地亞語](../hr/README.md) | [捷克語](../cs/README.md) | [丹麥語](../da/README.md) | [荷蘭語](../nl/README.md) | [愛沙尼亞語](../et/README.md) | [芬蘭語](../fi/README.md) | [法語](../fr/README.md) | [德語](../de/README.md) | [希臘語](../el/README.md) | [希伯來語](../he/README.md) | [印地語](../hi/README.md) | [匈牙利語](../hu/README.md) | [印度尼西亞語](../id/README.md) | [義大利語](../it/README.md) | [日語](../ja/README.md) | [卡納達語](../kn/README.md) | [韓語](../ko/README.md) | [立陶宛語](../lt/README.md) | [馬來語](../ms/README.md) | [馬拉雅拉姆語](../ml/README.md) | [馬拉地語](../mr/README.md) | [尼泊爾語](../ne/README.md) | [奈及利亞皮欽語](../pcm/README.md) | [挪威語](../no/README.md) | [波斯語（法爾西語）](../fa/README.md) | [波蘭語](../pl/README.md) | [葡萄牙語（巴西）](../pt-BR/README.md) | [葡萄牙語（葡萄牙）](../pt-PT/README.md) | [旁遮普語（古魯穆奇文）](../pa/README.md) | [羅馬尼亞語](../ro/README.md) | [俄語](../ru/README.md) | [塞爾維亞語（西里爾字母）](../sr/README.md) | [斯洛伐克語](../sk/README.md) | [斯洛文尼亞語](../sl/README.md) | [西班牙語](../es/README.md) | [斯瓦希里語](../sw/README.md) | [瑞典語](../sv/README.md) | [他加祿語（菲律賓語）](../tl/README.md) | [泰米爾語](../ta/README.md) | [泰盧固語](../te/README.md) | [泰語](../th/README.md) | [土耳其語](../tr/README.md) | [烏克蘭語](../uk/README.md) | [烏爾都語](../ur/README.md) | [越南語](../vi/README.md)
[Arabic](../ar/README.md) | [Bengali](../bn/README.md) | [Bulgarian](../bg/README.md) | [Burmese (Myanmar)](../my/README.md) | [Chinese (Simplified)](../zh-CN/README.md) | [Chinese (Traditional, Hong Kong)](./README.md) | [Chinese (Traditional, Macau)](../zh-MO/README.md) | [Chinese (Traditional, Taiwan)](../zh-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](../ja/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)](../pt-BR/README.md) | [Portuguese (Portugal)](../pt-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 多種語言翻譯，極大增加下載大小。若希望不包含翻譯檔，請使用稀疏檢出：
> 此儲存庫含有 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'
> ```
> 這可讓你更快下載，並取得完成課程所需的所有資源。
> 這會讓您用更快的速度下載並取得完成課程所需的所有資源。
<!-- CO-OP TRANSLATOR LANGUAGES TABLE END -->
**若您希望加入其他支援語言，請參考[此處](https://github.com/Azure/co-op-translator/blob/main/getting_started/supported-languages.md)**
**若想支援額外的翻譯語言，請參考此處清單 [here](https://github.com/Azure/co-op-translator/blob/main/getting_started/supported-languages.md)**
[![Open in Visual Studio Code](https://img.shields.io/static/v1?logo=visualstudiocode&label=&message=Open%20in%20Visual%20Studio%20Code&labelColor=2c2c32&color=007acc&logoColor=007acc)](https://open.vscode.dev/microsoft/Web-Dev-For-Beginners)
#### 🧑‍🎓 _你是學生嗎？_
#### 🧑‍🎓 _您是學生嗎？_
請造訪[**學生中心頁面**](https://docs.microsoft.com/learn/student-hub/?WT.mc_id=academic-77807-sagibbon)，你將找到入門資源、學生套件，甚至取得免費證書憑證的方式。這個頁面值得收藏，並且隨時留意我們每月更新的內容。
請造訪 [**學生中心頁面**](https://docs.microsoft.com/learn/student-hub/?WT.mc_id=academic-77807-sagibbon)，在這裡您可以找到初學者資源、學生套件，甚至獲得免費證書兌換券的方法。這是您會想要書籤收藏並不時查看的頁面，我們會每月更新內容。
### 📣 公告 - 新增 GitHub Copilot Agent 模式挑戰！
### 📣 公告 - 新增 GitHub Copilot Agent 模式挑戰等你完成！
新增挑戰，請於大部分章節中尋找「GitHub Copilot Agent Challenge 🚀」，體驗使用 GitHub Copilot 與 Agent 模式完成的挑戰。如果你沒用過 Agent 模式，它不只能生成人工智慧文字，也能建立與編輯檔案、執行命令等等。
新增挑戰，請在大多數章節搜尋「GitHub Copilot Agent Challenge 🚀」。這是使用 GitHub Copilot 及 Agent 模式完成的新挑戰。如果您之前沒用過 Agent 模式，它不僅能產生文字，還能建立及編輯檔案、執行指令等多種功能。
### 📣 公告 - _新增使用生成式 AI 的專案_
### 📣 公告 - _新增使用生成式 AI 建置的專案_
最新 AI 助理專案已上線，請查看此[專案](./9-chat-project/README.md)
新增 AI 助手專案，請查看 [project](./9-chat-project/README.md)
### 📣 公告 - _全新生成式 AI JavaScript 課程_ 正式發布
### 📣 公告 - _全新課程_ 專注於 JavaScript 的生成式 AI 正式發布
千萬別錯過我們全新的生成式 AI 課程！
別錯過我們全新的生成式 AI 課程！
請造訪 [https://aka.ms/genai-js-course](https://aka.ms/genai-js-course) 開始學習！
請造訪 [https://aka.ms/genai-js-course](https://aka.ms/genai-js-course) 立即開始！
![Background](../../translated_images/zh-HK/background.148a8d43afde5730.webp)
- 課程涵蓋從基礎到 RAG（檢索擴充生成模型）
- 使用 GenAI 和配套應用與歷史人物互動
- 有趣且引人入勝的故事，帶你穿越時空！
- 課程涵蓋從基礎到 RAG。
- 使用 GenAI 與我們的伴侶應用程序互動，與歷史人物對話。
- 趣味且引人入勝的故事敘述，讓您穿越時空！
![character](../../translated_images/zh-HK/character.5c0dd8e067ffd693.webp)
每課包含作業、知識檢測與挑戰，帶領你學習以下主題：
- 提示詞及提示工程
- 文字與影像應用程式生成
- 搜索應用程式
請造訪 [https://aka.ms/genai-js-course](../../[https:/aka.ms/genai-js-course) 開始！
每節課包含一個作業、知識檢測及挑戰，指引您學習：
- 提示與提示工程
- 文字及圖片應用程式生成
- 搜尋應用程式
請造訪 [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)**，每堂課先做課前測驗，接著閱讀課程內容，完成各項活動，再透過課後測驗檢視學習成果。
> **教師們**，我們已在 [included some suggestions](for-teachers.md) 中提供如何使用此課程的建議。我們熱切期待您在 [討論區](https://github.com/microsoft/Web-Dev-For-Beginners/discussions/categories/teacher-corner) 的回饋！
為提升學習成效，請與同儕合作完成專案！我們鼓勵在[討論區](https://github.com/microsoft/Web-Dev-For-Beginners/discussions)交流，由我們的管理團隊隨時回答問題。
**[學生們](https://aka.ms/student-page/?WT.mc_id=academic-77807-sagibbon)**，每節課開始前請完成預習測驗，然後閱讀課程材料，完成各種活動，最後透過課後測驗檢查您的理解。
建議進一步深造者，探索[Microsoft Learn](https://learn.microsoft.com/users/wirelesslife/collections/p1ddcy5jwy0jkm?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 帳號中建立一個帶有課程副本的新儲存庫。
此課程已配置好開發環境！開始時，您可以選擇使用 [Codespace](https://github.com/features/codespaces/)（_基於瀏覽器、免安裝的環境_），或是使用像 [Visual Studio Code](https://code.visualstudio.com/?WT.mc_id=academic-77807-sagibbon) 的文字編輯器在本機電腦上執行。
操作步驟如下：
1. **分支儲存庫**：點擊頁面右上角的「Fork」按鈕。
2. **複製儲存庫**： `git clone https://github.com/microsoft/Web-Dev-For-Beginners.git`
#### 創建您的儲存庫
為方便儲存工作，建議創建本課程的複製版本。點選頁面頂端「Use this template」按鈕，即可在您的 GitHub 帳號中建立此課程的複本。
#### 在 Codespace 上執行課程
請照以下步驟：
1. **派生此儲存庫**：點擊本頁右上角的「Fork」按鈕。
2. **克隆此儲存庫**： `git clone https://github.com/microsoft/Web-Dev-For-Beginners.git`
在你的儲存庫副本中，點選 **Code** 按鈕並選擇 **Open with Codespaces**。這會為你建立一個新的 Codespace 工作環境。
#### 在 Codespace 內執行課程
在您建立的儲存庫複本內，點選 **Code** 按鈕，選取 **Open with Codespaces**。這會為您新建一個 Codespace 環境供開發使用。
![Codespace](../../translated_images/zh-HK/createcodespace.0238bbf4d7a8d955.webp)
#### 在本地電腦上執行課程
#### 在本機電腦上執行課程
要在本地電腦執行課程，你需要文字編輯器、瀏覽器和命令列工具。我們的第一堂課，[程式語言與工具入門](../../1-getting-started-lessons/1-intro-to-programming-languages)，會引導你了解這些工具各種選擇，幫助你決定最適合的工具。
若要在本機執行此課程，您需要安裝一個文字編輯器、瀏覽器及終端機工具。我們的第一堂課 [Introduction to Programming Languages and Tools of the Trade](../../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)下載 Visual Studio Code。
我們建議您使用 [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. 把你的儲存庫複製到電腦中。可點擊 **Code** 按鈕並複製網址：
1. 將您的儲存庫克隆到本機。於儲存庫首頁點選 **Code** 按鈕並複製 URL：
[CodeSpace](./images/createcodespace.png)
然後，在 [Visual Studio Code](https://code.visualstudio.com/?WT.mc_id=academic-77807-sagibbon) 裡面打開 [Terminal](https://code.visualstudio.com/docs/terminal/basics/?WT.mc_id=academic-77807-sagibbon)，並執行以下命令，將 `<your-repository-url>` 替換成你剛剛複製的 URL：
然後，在 [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)，並執行以下指令，將 `<your-repository-url>` 替換為你剛才複製的 URL：
```bash
git clone <your-repository-url>
```
2. 在 Visual Studio Code 中打開資料夾。你可以點擊 **File** > **Open Folder** 並選擇你剛剛 clone 的資料夾。
2. 在 Visual Studio Code 中開啟資料夾。你可以點擊 **檔案** > **開啟資料夾**，然後選擇你剛剛克隆的資料夾。
> 推薦的 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) - 幫助你更快寫程式碼
> * [Copilot](https://marketplace.visualstudio.com/items?itemName=GitHub.copilot&WT.mc_id=academic-77807-sagibbon) - 幫助你更快地撰寫程式碼
## 📂 每堂課包含：
- 選擇性的手繪筆記
- 選擇性的補充影片
- 課前熱身小測驗
- 課文
- 專案導向課程中，逐步指導如何建立專案
- 知識檢測
- 挑戰
- 補充閱讀材料
- 選擇性補充影片
- 課前暖身小測驗
- 文字授課內容
- 專案導向課程會有逐步引導如何建立專案
- 知識檢核
- 挑戰題
- 補充閱讀資料
- 作業
- [課後小測驗](https://ff-quizzes.netlify.app/web/)
> **有關小測驗的說明**：所有小測驗均包含在 Quiz-app 資料夾中，共 48 個小測驗，每個小測驗三題。它們可以在[此處](https://ff-quizzes.netlify.app/web/) 取得，測驗應用程式可在本地執行或部署於 Azure；請參考 `quiz-app` 資料夾內的說明。
## 🗃️ 課程列表
| | 專案名稱 | 教授的概念 | 學習目標 | 連結課程 | 作者 |
| :-: | :--------------------------------------------------: | :----------------------------------------------------------------: | ------------------------------------------------------------------------------------------------------------------------ | :-------------------------------------------------------------------------------------------------------------------------: | :-------------------: |
| 01 | Getting Started | 程式設計與開發工具介紹 | 了解大多數程式語言的基本原理，以及協助專業開發人員工作的軟體 | [程式語言與工具簡介](./1-getting-started-lessons/1-intro-to-programming-languages/README.md) | Jasmine |
| 02 | Getting Started | GitHub 基礎與團隊協作 | 如何在專案中使用 GitHub，及如何與他人協作撰寫程式碼 | [GitHub 簡介](./1-getting-started-lessons/2-github-basics/README.md) | Floor |
| 03 | Getting Started | 無障礙設計 | 了解網頁無障礙設計基礎 | [無障礙設計基礎](./1-getting-started-lessons/3-accessibility/README.md) | Christopher |
| 04 | JS Basics | JavaScript 資料型態 | JavaScript 資料型態基礎 | [資料型態](./2-js-basics/1-data-types/README.md) | Jasmine |
| 05 | JS Basics | 函式與方法 | 學習函式與方法，管理應用程式的邏輯流程 | [函式與方法](./2-js-basics/2-functions-methods/README.md) | Jasmine 和 Christopher |
| 06 | JS Basics | 使用 JS 做決策判斷 | 學習如何用判斷式創造條件流程 | [決策判斷](./2-js-basics/3-making-decisions/README.md) | Jasmine |
| 07 | JS Basics | 陣列與迴圈 | 使用 JavaScript 操作陣列與迴圈資料 | [陣列與迴圈](./2-js-basics/4-arrays-loops/README.md) | Jasmine |
| 08 | [Terrarium](./3-terrarium/solution/README.md) | HTML 實作 | 建構 HTML 來創建線上生態箱，重點在建立版面配置 | [HTML 簡介](./3-terrarium/1-intro-to-html/README.md) | Jen |
| 09 | [Terrarium](./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 呼叫與本地儲存 | 利用本地儲存變數撰寫瀏覽器擴充功能中的 JavaScript 元素，呼叫 API | [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 遊戲開發 | 學習使用類別與組成繼承以及發布/訂閱模式，為遊戲開發做準備 | [進階遊戲開發入門](./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) | 元素在畫面上移動 | 探索如何用笛卡爾坐標和 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 |
| 25 | [Browser/VScode Code](../../8-code-editor) | 使用 VScode | 學習如何使用程式碼編輯器 | [使用 VScode 程式碼編輯器](./8-code-editor/1-using-a-code-editor/README.md) | Chris |
| 26 | [AI Assistants](./9-chat-project/README.md) | 使用 AI | 學習如何建立自己的 AI 助理 | [AI 助理專案](./9-chat-project/README.md) | Chris |
- [課後測驗](https://ff-quizzes.netlify.app/web/)
> **關於小測驗的說明**：所有小測驗都包含在 Quiz-app 資料夾中，有 48 個小測驗，每個小測驗三題。它們可在這裡找到 [Quiz App](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 | [Terrarium](./3-terrarium/solution/README.md) | HTML 實作 | 建立 HTML 以組成線上生態箱，著重於佈局建立 | [HTML 入門](./3-terrarium/1-intro-to-html/README.md) | Jen |
| 09 | [Terrarium](./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 | [打字遊戲](./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 遊戲開發 | 學習類別繼承、組合與訂閱/發布模式，以準備開發遊戲 | [進階遊戲開發介紹](./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 | [瀏覽器/VScode 程式碼](../../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 的基礎知識，及當今網頁開發者使用的最新工具與技術。學生將有機會透過製作打字遊戲、虛擬生態箱、環保瀏覽器擴充功能、太空侵略者風格遊戲及企業銀行應用程式，累積實務經驗。完成整套課程後，學生將建立紮實的網頁開發基礎。
本課程教授 JavaScript、HTML 與 CSS 的基礎，以及當今網頁開發者使用的最新工具與技巧。學生將有機會透過實作打字遊戲、虛擬生態箱、環保瀏覽器擴充功能、太空入侵者遊戲及銀行業務應用程式來累積實務經驗。課程結束時，學生將對網頁開發有穩固的理解。
> 🎓 你可以將本課程的前幾堂課當作 Microsoft Learn 上的 [學習路徑](https://docs.microsoft.com/learn/paths/web-development-101/?WT.mc_id=academic-77807-sagibbon)！
> 🎓 你可以將本課程的前幾堂課視為 Microsoft Learn 上的 [學習路徑](https://docs.microsoft.com/learn/paths/web-development-101/?WT.mc_id=academic-77807-sagibbon)！
透過確保內容與專案對齊，讓學習過程對學生更具吸引力，且概念記憶更為深刻。我們也撰寫了多堂 JavaScript 基礎入門課程，搭配來自「[JavaScript 初學者系列](https://channel9.msdn.com/Series/Beginners-Series-to-JavaScript/?WT.mc_id=academic-77807-sagibbon)」影片教學，部分作者也參與了本課程的撰寫。
透過確保內容與專案對齊，學習過程更具吸引力且提高概念的記憶。我們也撰寫了多個 JavaScript 基礎入門課程，搭配由「[JavaScript 初學者系列](https://channel9.msdn.com/Series/Beginners-Series-to-JavaScript/?WT.mc_id=academic-77807-sagibbon)」影片教學系列製作，部分作者亦有參與本課程編寫。
此外，於上課前進行低風險的測驗，幫助學生設定學習主題的心態，而課後的第二次測驗則確保持續記憶。課程設計靈活且有趣，既可完整修習，也可部分選修。專案自小而簡單，隨著 12 週課程逐步變得更複雜。
此外，課前的低壓力小測驗幫助學生建立學習目標，課後小測驗則促進知識鞏固。本課程設計靈活有趣，可以全部參與或部分修習。專案從簡單開始，到 12 週結束時逐漸複雜化。
我們刻意避免介紹 JavaScript 框架，專注於網頁開發人員在採用框架前所需的基礎能力，完成本課程後的良好下一步是透過另一系列影片學習 Node.js：「[Node.js 初學者系列](https://channel9.msdn.com/Series/Beginners-Series-to-Nodejs/?WT.mc_id=academic-77807-sagibbon)」。
雖然我們刻意不介紹 JavaScript 框架，以專注於學習成為網頁開發者前的基本技能，完成本課程後的良好下一步是學習 Node.js，可參考另一個影片系列：「[Node.js 初學者系列](https://channel9.msdn.com/Series/Beginners-Series-to-Nodejs/?WT.mc_id=academic-77807-sagibbon)」。
> 請參閱我們的 [行為準則](CODE_OF_CONDUCT.md) 和 [貢獻指南](CONTRIBUTING.md)。歡迎您的寶貴建議！
> 請參閱我們的 [行為準則](CODE_OF_CONDUCT.md) 與 [貢獻指南](CONTRIBUTING.md)。我們歡迎你的建設性回饋！
## 🧭 離線瀏覽
## 🧭 離線存取
您可以使用 [Docsify](https://docsify.js.org/#/) 來離線執行此文件。請 fork 此 repo，在本機安裝 [Docsify](https://docsify.js.org/#/quickstart)，然後在此 repo 根目錄執行 `docsify serve`，網站將在本機的 3000 埠提供服務：`localhost:3000`。
你可以使用 [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)下載。
所有課程的 PDF 版本可在此取得 [點此前往](https://microsoft.github.io/Web-Dev-For-Beginners/pdf/readme.pdf)。
## 🎒 其他課程
我們團隊還製作其他課程！快來看看：
我們團隊還有其他課程！請查看：
<!-- CO-OP TRANSLATOR OTHER COURSES START -->
### LangChain
[![LangChain4j for Beginners](https://img.shields.io/badge/LangChain4j%20for%20Beginners-22C55E?style=for-the-badge&&labelColor=E5E7EB&color=0553D6)](https://aka.ms/langchain4j-for-beginners)
[![LangChain.js for Beginners](https://img.shields.io/badge/LangChain.js%20for%20Beginners-22C55E?style=for-the-badge&labelColor=E5E7EB&color=0553D6)](https://aka.ms/langchainjs-for-beginners?WT.mc_id=m365-94501-dwahlin)
[![LangChain for Beginners](https://img.shields.io/badge/LangChain%20for%20Beginners-22C55E?style=for-the-badge&labelColor=E5E7EB&color=0553D6)](https://github.com/microsoft/langchain-for-beginners?WT.mc_id=m365-94501-dwahlin)
---
### Azure / Edge / MCP / Agents
@ -220,7 +222,7 @@
---
### 生成式 AI 系列
### 產生式 AI 系列
[![Generative AI for Beginners](https://img.shields.io/badge/Generative%20AI%20for%20Beginners-8B5CF6?style=for-the-badge&labelColor=E5E7EB&color=8B5CF6)](https://github.com/microsoft/generative-ai-for-beginners?WT.mc_id=academic-105485-koreyst)
[![Generative AI (.NET)](https://img.shields.io/badge/Generative%20AI%20(.NET)-9333EA?style=for-the-badge&labelColor=E5E7EB&color=9333EA)](https://github.com/microsoft/Generative-AI-for-beginners-dotnet?WT.mc_id=academic-105485-koreyst)
[![Generative AI (Java)](https://img.shields.io/badge/Generative%20AI%20(Java)-C084FC?style=for-the-badge&labelColor=E5E7EB&color=C084FC)](https://github.com/microsoft/generative-ai-for-beginners-java?WT.mc_id=academic-105485-koreyst)
@ -245,23 +247,23 @@
[![Copilot Adventure](https://img.shields.io/badge/Copilot%20Adventure-FDE68A?style=for-the-badge&labelColor=E5E7EB&color=FDE68A)](https://github.com/microsoft/CopilotAdventures?WT.mc_id=academic-105485-koreyst)
<!-- CO-OP TRANSLATOR OTHER COURSES END -->
## 尋求幫助
## 尋求協助
如果你遇到困難或對建立 AI 應用有任何疑問，歡迎加入學習者與經驗豐富的開發者討論 MCP。這是一個支援性強的社群，歡迎提出問題並自由分享知識。
如果你遇到困難或對構建 AI 應用有任何疑問，歡迎加入與其他學習者及經驗豐富開發者討論 MCP。這是一個支持性社群，歡迎提出問題並自由分享知識。
[![Microsoft Foundry Discord](https://dcbadge.limes.pink/api/server/nTYy5BXMWG)](https://discord.gg/nTYy5BXMWG)
如果你在開發過程中有產品回饋或發現錯誤，請造訪：
如果你在開發過程中有產品反饋或錯誤，請訪問：
[![Microsoft Foundry Developer Forum](https://img.shields.io/badge/GitHub-Microsoft_Foundry_Developer_Forum-blue?style=for-the-badge&logo=github&color=000000&logoColor=fff)](https://aka.ms/foundry/forum)
## 授權條款
本倉庫採用 MIT 許可證。詳情請參見 [LICENSE](../../LICENSE) 檔案。
此存放庫採用 MIT 授權條款。更多資訊請參閱 [LICENSE](../../LICENSE) 檔案。
---
<!-- CO-OP TRANSLATOR DISCLAIMER START -->
**免責聲明**：
本文件由 AI 翻譯服務 [Co-op Translator](https://github.com/Azure/co-op-translator) 所翻譯。儘管我們致力於提供準確的翻譯，但請注意，自動翻譯可能會包含錯誤或不準確之處。原始語言版本的文件應視為權威來源。如涉及重要資訊，建議進行專業人工翻譯。我們對因使用此翻譯而引起的任何誤解或誤釋概不負責。
本文件經由 AI 翻譯服務 [Co-op Translator](https://github.com/Azure/co-op-translator) 進行翻譯。雖然我們致力於確保準確性，但請注意，自動翻譯可能包含錯誤或不準確之處。原始文件的母語版本應被視為權威來源。如涉及重要資訊，建議採用專業人工翻譯。我們不對因使用此翻譯而引起的任何誤解或錯誤詮釋承擔責任。
<!-- CO-OP TRANSLATOR DISCLAIMER END -->

53
translations/zh-HK/Roadmap.md
Unescape View File

@ -0,0 +1,53 @@
# Microsoft Web-Dev-For-Beginners 儲存庫的路線圖
**此儲存庫提供了一條學習網頁開發基礎的路線圖，專注於 JavaScript、HTML 和 CSS。課程靈活，可整體或部分參與，共有 24 課，分布於 12 週。**
## 主要里程碑
* **第 1-3 週：**
* 程式語言與開發工具介紹
* GitHub 基礎
* 無障礙設計
* JS 基礎：資料類型、函式與方法
* 使用 JS 做出決策
* **第 4-6 週：**
* 陣列與迴圈
* Terrarium：HTML 實踐
* CSS 實踐
* JavaScript 閉包
* DOM 操作
* **第 7-9 週：**
* 打字遊戲：事件驅動程式設計
* 綠色瀏覽器擴充功能：瀏覽器相關工作
* 建立表單、呼叫 API 及儲存變數於本地儲存
* 瀏覽器中的背景程序
* 網頁效能
* **第 10-12 週：**
* 太空遊戲：更進階的 JavaScript 遊戲開發
* 畫布繪圖
* 移動畫面上的元素
* 碰撞偵測
* 計分、遊戲結束與重新開始
* 銀行應用程式：網頁應用中的 HTML 範本與路由
* 建立登入及註冊表單
* 取得及使用資料的方法
* 狀態管理概念
## 學習成果
**完成此路線圖後，學生將可實作打字遊戲、虛擬生態瓶、環保瀏覽器擴充功能、太空入侵風格遊戲及商業銀行應用程式，並紮實掌握網頁開發基礎。**
## 額外資源
* 此儲存庫提供豐富的進階學習資源，包括教學、程式碼範例與練習。
* Microsoft Learn 平台提供多種網頁開發課程與學習路徑。
* 線上社群如 Stack Overflow 及 MDN Web Docs 為網頁開發者提供有價值的支援與資源。
**希望這條路線圖能助你踏上網頁開發之路！**
---
<!-- CO-OP TRANSLATOR DISCLAIMER START -->
**免責聲明**：
本文件乃使用人工智能翻譯服務 [Co-op Translator](https://github.com/Azure/co-op-translator) 進行翻譯。雖然我們致力於確保準確性，但請注意，自動翻譯可能存在錯誤或不準確之處。原始文件的母語版本應視為權威來源。對於重要資訊，建議採用專業人工翻譯。我們不對因使用此翻譯而產生的任何誤解或錯誤詮釋承擔責任。
<!-- CO-OP TRANSLATOR DISCLAIMER END -->

12
translations/zh-TW/.co-op-translator.json
Unescape View File

@ -493,7 +493,7 @@
},
"AGENTS.md": {
"original_hash": "a362efd06d64d4134a0cfe8515a86d34",
"translation_date": "2025-10-03T11:18:15+00:00",
"translation_date": "2026-02-06T16:24:11+00:00",
"source_file": "AGENTS.md",
"language_code": "zh-TW"
},
@ -516,11 +516,17 @@
"language_code": "zh-TW"
},
"README.md": {
"original_hash": "490c83786552d7fab6390991517bef09",
"translation_date": "2026-01-29T17:52:02+00:00",
"original_hash": "6d6385fd098088cb2d690fb0a6cdaedc",
"translation_date": "2026-02-06T16:19:00+00:00",
"source_file": "README.md",
"language_code": "zh-TW"
},
"Roadmap.md": {
"original_hash": "28bf6185fd7f27b62ddc210514366192",
"translation_date": "2026-02-06T16:21:42+00:00",
"source_file": "Roadmap.md",
"language_code": "zh-TW"
},
"SECURITY.md": {
"original_hash": "4ecc3bf2e27983d4c780be6f26ee6228",
"translation_date": "2025-08-23T22:21:23+00:00",

350
translations/zh-TW/AGENTS.md
Unescape View File

@ -2,43 +2,43 @@
## 專案概述
這是一個教育課程的資源庫，旨在教導初學者網頁開發的基礎知識。課程為期12週，由 Microsoft Cloud Advocates 開發，包含24個實作課程，涵蓋 JavaScript、CSS 和 HTML。
這是一個用於教導初學者網頁開發基礎的教學課程庫。該課程為期12週，由微軟雲端推廣者開發，包含24堂實作課程，涵蓋JavaScript、CSS及HTML。
### 主要組成部分
- **教育內容**：24個結構化課程，按專案模組組織
- **實作專案**：包括植物園、打字遊戲、瀏覽器擴充功能、太空遊戲、銀行應用程式、程式碼編輯器和 AI 聊天助理
- **互動測驗**：48個測驗，每個測驗包含3個問題（課前/課後評估）
- **多語言支援**：透過 GitHub Actions 自動翻譯成50多種語言
- **技術**：HTML、CSS、JavaScript、Vue.js 3、Vite、Node.js、Express、Python（用於 AI 專案）
- **教學內容**：24堂結構化課程，組織為專案模組
- **實務專案**：Terrarium、生字輸入遊戲、瀏覽器擴充功能、太空遊戲、銀行應用、程式碼編輯器以及AI聊天助理
- **互動測驗**：48份測驗，每份含3題（課前/課後評估）
- **多語言支持**：透過GitHub Actions自動翻譯超過50種語言
- **技術棧**：HTML、CSS、JavaScript、Vue.js 3、Vite、Node.js、Express、Python（用於AI專案）
### 架構
- 以課程為基礎的教育資源庫
- 每個課程資料夾包含 README、程式碼範例和解答
- 獨立專案存放於不同目錄（quiz-app、各課程專案）
- 使用 GitHub Actions 的翻譯系統（co-op-translator）
- 文件透過 Docsify 提供，並可下載 PDF 格式
- 教育資源庫，課程基於單元結構
- 每堂課資料夾包含README、程式碼範例及解答
- 獨立專案分布於不同目錄（quiz-app、各種課程專案）
- 利用GitHub Actions的翻譯系統（co-op-translator）
- 文件使用Docsify呈現，亦可另存為PDF
## 設置指令
此資源庫主要用於教育內容的使用。若需操作特定專案：
本倉庫主要用於教育內容瀏覽。若要操作特定專案：
### 主資源庫設置
### 主要倉庫設置
```bash
git clone https://github.com/microsoft/Web-Dev-For-Beginners.git
cd Web-Dev-For-Beginners
```
### 測驗應用程式設置（Vue 3 + Vite）
### 測驗應用設置（Vue 3 + Vite）
```bash
cd quiz-app
npm install
npm run dev # Start development server
npm run build # Build for production
npm run lint # Run ESLint
npm run dev # 啟動開發伺服器
npm run build # 建置生產環境
npm run lint # 執行 ESLint
```
### 銀行專案 API（Node.js + Express）
@ -46,9 +46,9 @@ npm run lint # Run ESLint
```bash
cd 7-bank-project/api
npm install
npm start # Start API server
npm run lint # Run ESLint
npm run format # Format with Prettier
npm start # 啟動 API 伺服器
npm run lint # 執行 ESLint
npm run format # 使用 Prettier 格式化
```
### 瀏覽器擴充功能專案
@ -56,7 +56,7 @@ npm run format # Format with Prettier
```bash
cd 5-browser-extension/solution
npm install
# Follow browser-specific extension loading instructions
# 遵循瀏覽器特定的擴充功能載入說明
```
### 太空遊戲專案
@ -64,7 +64,7 @@ npm install
```bash
cd 6-space-game/solution
npm install
# Open index.html in browser or use Live Server
# 在瀏覽器中打開 index.html 或使用 Live Server
```
### 聊天專案（Python 後端）
@ -72,123 +72,123 @@ npm install
```bash
cd 9-chat-project/solution/backend/python
pip install openai
# Set GITHUB_TOKEN environment variable
# 設定 GITHUB_TOKEN 環境變數
python api.py
```
## 開發工作流程
### 對於內容貢獻者
### 內容貢獻者
1. **Fork 資源庫**到您的 GitHub 帳戶
2. **將 Fork 的資源庫克隆**到本地
3. **建立新分支**以進行修改
1. **Fork 倉庫**到您的 GitHub 帳號
2. **本機 Clone** 您的 Fork
3. **建立新分支**以進行更改
4. 修改課程內容或程式碼範例
5. 在相關專案目錄中測試程式碼修改
6. 根據貢獻指南提交 Pull Request
5. 在相關專案目錄測試程式碼變更
6. 遵循貢獻指南提交 Pull Request
### 對於學習者
### 學習者
1. Fork 或克隆資源庫
2. 按順序進入課程目錄
3. 閱讀每個課程的 README 文件
4. 完成課前測驗：https://ff-quizzes.netlify.app/web/
5. 在課程資料夾中操作程式碼範例
6. 完成作業和挑戰
7. 完成課後測驗
1. Fork 或 Clone 倉庫
2. 按順序瀏覽課程目錄
3. 閱讀每堂課的 README 文件
4. 完成 https://ff-quizzes.netlify.app/web/ 的課前測驗
5. 練習課程資料夾中的程式碼範例
6. 完成作業和挑戰任務
7. 進行課後測驗
### 即時開發
- **文件**：在根目錄執行 `docsify serve`（埠 3000）
- **測驗應用程式**：在 quiz-app 目錄執行 `npm run dev`
- **專案**：使用 VS Code 的 Live Server 擴充功能開啟 HTML 專案
- **API 專案**：在相關 API 目錄執行 `npm start`
- **文件**：於根目錄執行 `docsify serve`（預設port 3000）
- **測驗應用**：於 quiz-app 目錄執行 `npm run dev`
- **專案**：使用 VS Code Live Server 擴充功能開啟 HTML 專案
- **API 專案**：於各 API 目錄執行 `npm start`
## 測試指引
## 測試說明
### 測驗應用程式測試
### 測驗應用測試
```bash
cd quiz-app
npm run lint # Check for code style issues
npm run build # Verify build succeeds
npm run lint # 檢查程式碼風格問題
npm run build # 驗證建置成功
```
### 銀行 API 測試
```bash
cd 7-bank-project/api
npm run lint # Check for code style issues
node server.js # Verify server starts without errors
npm run lint # 檢查程式碼風格問題
node server.js # 驗證伺服器啟動是否無錯誤
```
### 一般測試方法
### 一般測試方式
- 此資源庫為教育用途，未包含全面的自動化測試
- 手動測試重點：
- 程式碼範例無錯誤執行
- 文件中的連結正常運作
- 專案成功完成建置
- 範例遵循最佳實踐
- 本教育資源庫沒有完善的自動化測試
- 以手動測試為主：
- 程式碼範例執行無誤
- 文件中的連結正確可用
- 專案編譯成功
- 範例符合最佳實務
### 提交前檢查
- 在包含 package.json 的目錄執行 `npm run lint`
- 確認 Markdown 連結有效
- 在含有 package.json 的目錄執行 `npm run lint`
- 驗證 markdown 連結有效
- 在瀏覽器或 Node.js 中測試程式碼範例
- 確保翻譯保持正確結構
- 確認翻譯內容結構正確
## 程式碼風格指南
### JavaScript
- 使用現代 ES6+ 語法
- 遵循專案提供的標準 ESLint 配置
- 使用有意義的變數和函數名稱，便於教育
- 添加註解以解釋概念，方便學習者理解
- 在配置的地方使用 Prettier 格式化
- 遵循專案中預設的 ESLint 配置
- 使用有意義的變數及函式名稱以利教學
- 添加註解說明概念供學習者理解
- 有設定 Prettier 的地方使用其格式化
### HTML/CSS
- 使用語義化的 HTML5 元素
- 遵循響應式設計原則
- 清晰的類名命名規範
- 添加註解以解釋 CSS 技術，方便學習者理解
- 使用語義化 HTML5 元素
- 採用響應式設計原則
- 清晰的類別命名規範
- 添加註解說明 CSS 技巧給學習者
### Python
- 遵循 PEP 8 風格指南
- 提供清晰的教育性程式碼範例
- 在需要時添加型別提示，便於學習
- 清楚且具教學意義的程式碼範例
- 提供有助學習的類型標註
### Markdown 文件
- 清晰的標題層次結構
- 使用語言指定的程式碼區塊
- 提供額外資源的連結
- 將截圖和圖片存放於 `images/` 目錄
- 為圖片添加替代文字以提高可訪問性
- 條理分明的標題層級
- 指定語言的程式碼區塊
- 提供額外資源連結
- 在 `images/` 資料夾內附有截圖和圖片
- 圖片務必添加替代文字以利無障礙
### 文件組織
### 檔案組織
- 課程按順序編號（1-getting-started-lessons, 2-js-basics 等）
- 每個專案包含 `solution/`，通常還有 `start/` 或 `your-work/` 目錄
- 圖片存放於課程專屬的 `images/` 資料夾
- 翻譯存放於 `translations/{language-code}/` 結構中
- 課程以序號編排（1-getting-started-lessons、2-js-basics 等）
- 各專案擁有 `solution/` 以及通常的 `start/` 或 `your-work/` 目錄
- 圖片存放於課程專用的 `images/` 子資料夾
- 翻譯檔案位於 `translations/{language-code}/` 結構中
## 建置與部署
### 測驗應用程式部署（Azure 靜態網頁應用程式）
### 測驗應用部署（Azure 靜態網站）
測驗應用程式已配置為 Azure 靜態網頁應用程式部署：
quiz-app 已配置為 Azure 靜態網站部署：
```bash
cd quiz-app
npm run build # Creates dist/ folder
# Deploys via GitHub Actions workflow on push to main
npm run build # 建立 dist/ 資料夾
# 在推送到 main 時透過 GitHub Actions 工作流程部署
```
Azure 靜態網頁應用程式配置：
Azure 靜態網站配置：
- **應用程式位置**：`/quiz-app`
- **輸出位置**：`dist`
- **工作流程**：`.github/workflows/azure-static-web-apps-ashy-river-0debb7803.yml`
@ -196,87 +196,87 @@ Azure 靜態網頁應用程式配置：
### 文件 PDF 生成
```bash
npm install # Install docsify-to-pdf
npm run convert # Generate PDF from docs
npm install # 安裝 docsify-to-pdf
npm run convert # 從 docs 生成 PDF
```
### Docsify 文件
```bash
npm install -g docsify-cli # Install Docsify globally
docsify serve # Serve on localhost:3000
npm install -g docsify-cli # 全域安裝 Docsify
docsify serve # 在 localhost:3000 提供服務
```
### 專案特定建置
每個專案目錄可能有自己的建置流程：
- Vue 專案：`npm run build` 生成生產環境包
- 靜態專案：無需建置步驟，直接提供檔案
各專案資料夾可能有各自的建置流程：
- Vue 專案：使用 `npm run build` 建置生產版
- 靜態專案：無建置步驟，直接提供檔案服務
## Pull Request 指南
### 標題格式
使用清晰、描述性的標題，指明修改範圍：
- `[Quiz-app] 為課程 X 添加新測驗`
- `[Lesson-3] 修正植物園專案中的拼寫錯誤`
- `[Translation] 添加課程 5 的西班牙語翻譯`
- `[Docs] 更新設置指令`
使用清楚描述修改範圍的標題：
- `[Quiz-app] 新增第X課測驗`
- `[Lesson-3] 修正 terrarium 專案錯字`
- `[Translation] 新增第5課西班牙語翻譯`
- `[Docs] 更新設置說明`
### 必要檢查
提交 PR 前：
1. **程式碼品質**：
- 在受影響的專案目錄執行 `npm run lint`
- 在影響的專案目錄執行 `npm run lint`
- 修正所有 lint 錯誤和警告
2. **建置驗證**：
- 如果適用，執行 `npm run build`
- 執行 `npm run build`（若適用）
- 確保無建置錯誤
3. **連結驗證**：
- 測試所有 Markdown 連結
- 確認圖片引用正常運作
- 測試所有 markdown 連結
- 確認圖片路徑正確
4. **內容審查**：
4. **內容審校**：
- 校對拼寫和語法
- 確保程式碼範例正確且具有教育性
- 確認翻譯保持原意
- 確認程式碼範例正確且具教育意義
- 驗證翻譯維持原意
### 貢獻要求
### 貢獻條件
- 同意 Microsoft CLA（首次 PR 時自動檢查）
- 遵循 [Microsoft 開源行為準則](https://opensource.microsoft.com/codeofconduct/)
- 同意 Microsoft CLA（自動於首次 PR 檢查）
- 遵守 [Microsoft 開源行為守則](https://opensource.microsoft.com/codeofconduct/)
- 詳細指南請參閱 [CONTRIBUTING.md](./CONTRIBUTING.md)
- 如果適用，請在 PR 描述中引用問題編號
- 如有，於 PR 描述中引用議題編號
### 審查流程
- PR 由維護者和社群審查
- 優先考慮教育清晰度
- 程式碼範例應遵循當前最佳實踐
- 翻譯需審查準確性和文化適切性
- 由維護者與社群共同審查 PR
- 以教學清晰度為優先
- 程式碼範例須遵守最新最佳實務
- 翻譯需審核正確性與文化適應性
## 翻譯系統
### 自動翻譯
- 使用 GitHub Actions 和 co-op-translator 工作流程
- 自動翻譯成50多種語言
- 主目錄中的原始檔案
- 翻譯檔案存放於 `translations/{language-code}/` 目錄
- 透過 GitHub Actions 使用 co-op-translator 工作流程
- 自動翻譯超過50種語言
- 原始檔案於主目錄
- 翻譯檔案置於 `translations/{language-code}/` 目錄
### 添加手動翻譯改進
### 手動翻譯改進
1. 在 `translations/{language-code}/` 中找到檔案
2. 在保持結構的前提下進行改進
3. 確保程式碼範例仍然可用
4. 測試任何本地化的測驗內容
1. 找出 `translations/{language-code}/` 中的檔案
2. 改善內容同時保留結構
3. 確保程式碼範例仍可使用
4. 測試本地化後測驗內容
### 翻譯元數據
### 翻譯元資料
翻譯檔案包含元數據標頭：
翻譯檔包含元資料標頭：
```markdown
<!--
CO_OP_TRANSLATOR_METADATA:
@ -293,114 +293,116 @@ CO_OP_TRANSLATOR_METADATA:
### 常見問題
**測驗應用程式無法啟動**：
**測驗應用無法啟動**：
- 檢查 Node.js 版本（建議 v14+）
- 刪除 `node_modules` 和 `package-lock.json`，重新執行 `npm install`
- 檢查埠衝突（預設：Vite 使用埠 5173）
- 檢查埠號衝突（預設 Vite 使用 port 5173）
**API 伺服器無法啟動**：
- 確認 Node.js 版本符合最低要求（node >=10）
- 檢查埠是否已被佔用
- 確保所有依賴已使用 `npm install` 安裝
- 檢查埠號是否被占用
- 確保已安裝所有依賴（`npm install`）
**瀏覽器擴充功能無法載入**：
- 確認 manifest.json 格式正確
- 檢查瀏覽器主控台中的錯誤
- 遵循瀏覽器特定的擴充功能安裝指令
- 使用瀏覽器主控台查看錯誤
- 依照瀏覽器特定擴充功能安裝指引操作
**Python 聊天專案問題**：
- 確保已安裝 OpenAI 套件：`pip install openai`
- 確認已設置 GITHUB_TOKEN 環境變數
- 檢查 GitHub Models 的存取權限
- 確保安裝 OpenAI 套件：`pip install openai`
- 核實 GITHUB_TOKEN 環境變數已設定
- 檢查 GitHub Models 權限設定
**Docsify 無法提供文件**：
- 全域安裝 docsify-cli：`npm install -g docsify-cli`
- 從資源庫根目錄執行
- 於倉庫根目錄啟動
- 確認 `docs/_sidebar.md` 存在
### 開發環境提示
### 開發環境建議
- 使用 VS Code 和 Live Server 擴充功能開啟 HTML 專案
- 安裝 ESLint 和 Prettier 擴充功能以保持一致的格式
- 使用瀏覽器開發工具偵錯 JavaScript
- 對於 Vue 專案，安裝 Vue DevTools 瀏覽器擴充功能
- 使用 VS Code 並安裝 Live Server 擴充功能開啟 HTML 專案
- 安裝 ESLint 與 Prettier 擴充確保格式一致
- 利用瀏覽器的開發者工具除錯 JavaScript
- Vue 專案安裝 Vue DevTools 瀏覽器擴充功能
### 性能考量
- 大量翻譯檔案（50多種語言）導致完整克隆檔案較大
- 若僅需操作內容，使用淺克隆：`git clone --depth 1`
- 在處理英文內容時排除翻譯檔案的搜尋
- 首次執行建置流程可能較慢（npm install, Vite build）
- 翻譯檔案數量龐大（超過50種語言），完整 clone 會很大
- 若只處理內容，採用淺層 clone：`git clone --depth 1`
- 工作英文內容時可排除翻譯檔案搜尋
- 初次執行建置流程（npm install，Vite build）可能較慢
## 安全考量
### 環境變數
- API 金鑰絕不可提交到資源庫
- 使用 `.env` 檔案（已在 `.gitignore` 中）
- 在專案 README 中記錄所需的環境變數
- API 金鑰切勿提交至倉庫
- 使用 `.env` 檔案（已加入 `.gitignore`）
- 各專案 README 記錄必要環境變數
### Python 專案
- 使用虛擬環境：`python -m venv venv`
- 保持依賴更新
- GitHub Token 應具有最低必要權限
- 維持依賴套件更新
- GitHub token 僅需最低權限
### GitHub Models 存取
- 需要個人存取 Token（PAT）以使用 GitHub Models
- Token 應存放為環境變數
- 絕不可提交 Token 或憑證
- 使用個人存取權杖（PAT）存取 GitHub Models
- 將權杖存為環境變數
- 禁止提交權杖或憑證
## 附加說明
## 其他注意事項
### 目標受眾
- 完全初學者的網頁開發學習者
- 學生和自學者
- 在課堂中使用課程的教師
- 內容設計以提高可訪問性和逐步技能建設
- 完全初學網頁開發者
- 學生與自學者
- 教師用於課堂教學
- 內容設計注重可及性與逐步技能培養
### 教育理念
- 基於專案的學習方法
- 頻繁的知識檢查（測驗）
- 實作程式碼練習
- 真實世界應用範例
- 在框架之前專注於基礎知識
- 專案導向學習
- 經常性知識檢測（測驗）
- 實作編碼練習
- 真實生活應用範例
- 先掌握基礎再談框架
### 資源庫維護
### 倉庫維護
- 活躍的學習者和貢獻者社群
- 定期更新依賴和內容
- 維護者監控問題和討論
- 翻譯更新透過 GitHub Actions 自動化
- 活躍學習者與貢獻者社群
- 定期依賴與內容更新
- 由維護者監控議題與討論
- 翻譯更新自動化透過 GitHub Actions
### 相關資源
- [Microsoft Learn 模組](https://docs.microsoft.com/learn/)
- [學生中心資源](https://docs.microsoft.com/learn/student-hub/)
- [GitHub Copilot](https://marketplace.visualstudio.com/items?itemName=GitHub.copilot) 建議學習者使用
- 其他課程：生成式 AI、資料科學、機器學習、物聯網課程可用
- [推薦 GitHub Copilot](https://marketplace.visualstudio.com/items?itemName=GitHub.copilot) 給學習者
- 其他課程：生成式 AI、資料科學、機器學習、物聯網課程可取得
### 操作特定專案
有關個別專案的詳細指令，請參閱以下目錄中的 README 文件：
- `quiz-app/README.md` - Vue 3 測驗應用程式
- `7-bank-project/README.md` - 帶有身份驗證的銀行應用程式
詳細指引請參考下列專案目錄中的 README 文件：
- `quiz-app/README.md` - Vue 3 測驗應用
- `7-bank-project/README.md` - 銀行應用含驗證功能
- `5-browser-extension/README.md` - 瀏覽器擴充功能開發
- `6-space-game/README.md` - 基於 Canvas 的遊戲開發
- `6-space-game/README.md` - Canvas 遊戲開發
- `9-chat-project/README.md` - AI 聊天助理專案
### Monorepo 結構
雖然不是傳統的 Monorepo，此資源庫包含多個獨立專案：
- 每個課程都是自包含的
- 專案之間不共享依賴
- 可單獨操作個別專案而不影響其他專案
- 克隆整個資源庫以獲得完整課程體驗
雖非傳統 monorepo，本倉庫包含多個獨立專案：
- 每堂課皆自成一體
- 專案間不共用相依套件
- 可單獨作業不影響其他專案
- 若要完整課程體驗，請完整 clone 倉庫
---
<!-- CO-OP TRANSLATOR DISCLAIMER START -->
**免責聲明**：
本文件使用 AI 翻譯服務 [Co-op Translator](https://github.com/Azure/co-op-translator) 進行翻譯。我們致力於提供準確的翻譯，但請注意，自動翻譯可能包含錯誤或不準確之處。應以原始語言的文件作為權威來源。對於關鍵資訊，建議尋求專業人工翻譯。我們對於因使用本翻譯而引起的任何誤解或錯誤解讀概不負責。
本文件係使用 AI 翻譯服務 [Co-op Translator](https://github.com/Azure/co-op-translator) 進行翻譯。雖然我們力求準確，但請注意自動翻譯可能包含錯誤或不準確之處。原始文件之原文版本應視為權威資料。對於重要資訊，建議採用專業人工翻譯。我們不對因使用本翻譯版本所產生之任何誤解或誤用承擔責任。
<!-- CO-OP TRANSLATOR DISCLAIMER END -->

208
translations/zh-TW/README.md
Unescape View File

@ -2,7 +2,7 @@
[![GitHub contributors](https://img.shields.io/github/contributors/microsoft/Web-Dev-For-Beginners.svg)](https://GitHub.com/microsoft/Web-Dev-For-Beginners/graphs/contributors/)
[![GitHub issues](https://img.shields.io/github/issues/microsoft/Web-Dev-For-Beginners.svg)](https://GitHub.com/microsoft/Web-Dev-For-Beginners/issues/)
[![GitHub pull-requests](https://img.shields.io/github/issues-pr/microsoft/Web-Dev-For-Beginners.svg)](https://GitHub.com/microsoft/Web-Dev-For-Beginners/pulls/)
[![PRs Welcome](https://img.shields.io/badge/PRs-welcome-brightgreen.svg?style=flat-square)](http://makeapullrequest.com)
[![PRs Welcome](https://img.shields.io/badge/PRs-welcome-brightgreen.svg?style=flat-square)](http://makeapullrequest.com)
[![GitHub watchers](https://img.shields.io/github/watchers/microsoft/Web-Dev-For-Beginners.svg?style=social&label=Watch&maxAge=2592000)](https://GitHub.com/microsoft/Web-Dev-For-Beginners/watchers/)
[![GitHub forks](https://img.shields.io/github/forks/microsoft/Web-Dev-For-Beginners.svg?style=social&label=Fork&maxAge=2592000)](https://GitHub.com/microsoft/Web-Dev-For-Beginners/network/)
@ -10,209 +10,209 @@
[![Microsoft Foundry Discord](https://dcbadge.limes.pink/api/server/nTYy5BXMWG)](https://discord.gg/nTYy5BXMWG)
# 初學者網頁開發課程大綱
# 初學者網站開發 - 一套課程
透過 Microsoft Cloud Advocates 提供的 12 週全面課程，學習網頁開發的基礎知識。24 課程每堂結合 JavaScript、CSS 和 HTML，透過實作專案如生態瓶、瀏覽器擴充功能及太空遊戲深入學習。課程包含小測驗、討論及實作任務。運用我們有效的專案導向教學法，提升技能與知識吸收效率。即刻開始你的程式設計之旅！
透過微軟雲端推廣者的12週完整課程學習網站開發的基礎。這24堂課透過動手專案深入探索JavaScript、CSS和HTML，範例涵蓋玻璃箱生態瓶、瀏覽器擴充功能和太空遊戲。參與測驗、討論與實作作業。使用我們有效的專案導向教學法提升你的技能並優化知識吸收。立即開始你的程式碼學習旅程！
加入 Azure AI Foundry Discord 社群
[![Microsoft Foundry Discord](https://dcbadge.limes.pink/api/server/nTYy5BXMWG)](https://discord.gg/nTYy5BXMWG)
請依照以下步驟開始使用這些資源：
1. **分叉（Fork）此儲存庫**：點擊 [![GitHub forks](https://img.shields.io/github/forks/microsoft/Web-Dev-For-beginners.svg?style=social&label=Fork)](https://GitHub.com/microsoft/Web-Dev-For-Beginners/fork)
2. **複製（Clone）此儲存庫**： `git clone https://github.com/microsoft/Web-Dev-For-Beginners.git`
3. [**加入 Azure AI Foundry Discord，結識專家與其他開發者**](https://discord.com/invite/ByRwuEEgH4)
按照以下步驟開始使用這些資源：
1. **Fork 該程式庫**：點擊 [![GitHub forks](https://img.shields.io/github/forks/microsoft/Web-Dev-For-beginners.svg?style=social&label=Fork)](https://GitHub.com/microsoft/Web-Dev-For-Beginners/fork)
2. **Clone 該程式庫**： `git clone https://github.com/microsoft/Web-Dev-For-Beginners.git`
3. [**加入 Azure AI Foundry Discord，與專家及其他開發者交流**](https://discord.com/invite/ByRwuEEgH4)
### 🌐 多語言支援
#### 透過 GitHub Action 支援（自動且隨時更新）
#### 透過 GitHub Action 支援（自動且永遠最新）
<!-- CO-OP TRANSLATOR LANGUAGES TABLE START -->
[阿拉伯語](../ar/README.md) | [孟加拉語](../bn/README.md) | [保加利亞語](../bg/README.md) | [緬甸語](../my/README.md) | [中文 (簡體)](../zh-CN/README.md) | [中文 (繁體，香港)](../zh-HK/README.md) | [中文 (繁體，澳門)](../zh-MO/README.md) | [中文 (繁體，臺灣)](./README.md) | [克羅埃西亞語](../hr/README.md) | [捷克語](../cs/README.md) | [丹麥語](../da/README.md) | [荷蘭語](../nl/README.md) | [愛沙尼亞語](../et/README.md) | [芬蘭語](../fi/README.md) | [法語](../fr/README.md) | [德語](../de/README.md) | [希臘語](../el/README.md) | [希伯來語](../he/README.md) | [印地語](../hi/README.md) | [匈牙利語](../hu/README.md) | [印尼語](../id/README.md) | [義大利語](../it/README.md) | [日語](../ja/README.md) | [坎納達語](../kn/README.md) | [韓語](../ko/README.md) | [立陶宛語](../lt/README.md) | [馬來語](../ms/README.md) | [馬拉雅拉姆語](../ml/README.md) | [馬拉地語](../mr/README.md) | [尼泊爾語](../ne/README.md) | [奈及利亞皮欽語](../pcm/README.md) | [挪威語](../no/README.md) | [波斯語（法爾西語）](../fa/README.md) | [波蘭語](../pl/README.md) | [巴西葡萄牙語](../pt-BR/README.md) | [葡萄牙語（葡萄牙）](../pt-PT/README.md) | [旁遮普語（古爾穆奇）](../pa/README.md) | [羅馬尼亞語](../ro/README.md) | [俄語](../ru/README.md) | [塞爾維亞語（西里爾字母）](../sr/README.md) | [斯洛伐克語](../sk/README.md) | [斯洛文尼亞語](../sl/README.md) | [西班牙語](../es/README.md) | [斯瓦希里語](../sw/README.md) | [瑞典語](../sv/README.md) | [他加祿語（菲律賓語）](../tl/README.md) | [泰米爾語](../ta/README.md) | [泰盧固語](../te/README.md) | [泰語](../th/README.md) | [土耳其語](../tr/README.md) | [烏克蘭語](../uk/README.md) | [烏爾都語](../ur/README.md) | [越南語](../vi/README.md)
[阿拉伯語](../ar/README.md) | [孟加拉語](../bn/README.md) | [保加利亞語](../bg/README.md) | [緬甸語 (Myanmar)](../my/README.md) | [中文 (簡體)](../zh-CN/README.md) | [中文 (繁體, 香港)](../zh-HK/README.md) | [中文 (繁體, 澳門)](../zh-MO/README.md) | [中文 (繁體, 台灣)](./README.md) | [克羅埃西亞語](../hr/README.md) | [捷克語](../cs/README.md) | [丹麥語](../da/README.md) | [荷蘭語](../nl/README.md) | [愛沙尼亞語](../et/README.md) | [芬蘭語](../fi/README.md) | [法語](../fr/README.md) | [德語](../de/README.md) | [希臘語](../el/README.md) | [希伯來語](../he/README.md) | [印地語](../hi/README.md) | [匈牙利語](../hu/README.md) | [印尼語](../id/README.md) | [義大利語](../it/README.md) | [日語](../ja/README.md) | [卡納達語](../kn/README.md) | [韓語](../ko/README.md) | [立陶宛語](../lt/README.md) | [馬來語](../ms/README.md) | [馬拉雅拉姆語](../ml/README.md) | [馬拉地語](../mr/README.md) | [尼泊爾語](../ne/README.md) | [奈及利亞皮欽語](../pcm/README.md) | [挪威語](../no/README.md) | [波斯語 (Farsi)](../fa/README.md) | [波蘭語](../pl/README.md) | [葡萄牙語 (巴西)](../pt-BR/README.md) | [葡萄牙語 (葡萄牙)](../pt-PT/README.md) | [旁遮普語 (古爾穆奇體)](../pa/README.md) | [羅馬尼亞語](../ro/README.md) | [俄語](../ru/README.md) | [塞爾維亞語 (西里爾字母)](../sr/README.md) | [斯洛伐克語](../sk/README.md) | [斯洛維尼亞語](../sl/README.md) | [西班牙語](../es/README.md) | [斯瓦希里語](../sw/README.md) | [瑞典語](../sv/README.md) | [他加祿語 (菲律賓語)](../tl/README.md) | [泰米爾語](../ta/README.md) | [泰盧固語](../te/README.md) | [泰語](../th/README.md) | [土耳其語](../tr/README.md) | [烏克蘭語](../uk/README.md) | [烏爾都語](../ur/README.md) | [越南語](../vi/README.md)
> **偏好本地複製？**
> **想要本機 Clone？**
> 此儲存庫包含超過 50 種語言翻譯，會顯著增加下載大小。若要不包含翻譯進行複製，請使用 sparse checkout：
> 此程式庫包含50多種語言翻譯，將大幅增加下載大小。若想不帶翻譯下載，請使用 sparse checkout：
> ```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'
> ```
> 這樣你就可以更快速下載，並擁有完成課程所需的所有內容。
> 這可讓你以更快的速度取得完成課程所需的所有內容。
<!-- CO-OP TRANSLATOR LANGUAGES TABLE END -->
**如果你希望新增支援其他翻譯語言，列表請參考 [這裡](https://github.com/Azure/co-op-translator/blob/main/getting_started/supported-languages.md)**
**如需其他翻譯語言支援，請參考 [此處](https://github.com/Azure/co-op-translator/blob/main/getting_started/supported-languages.md)**
[![Open in Visual Studio Code](https://img.shields.io/static/v1?logo=visualstudiocode&label=&message=Open%20in%20Visual%20Studio%20Code&labelColor=2c2c32&color=007acc&logoColor=007acc)](https://open.vscode.dev/microsoft/Web-Dev-For-Beginners)
#### 🧑‍🎓 _你是學生嗎？_
請訪問 [**學生專區頁面**](https://docs.microsoft.com/learn/student-hub/?WT.mc_id=academic-77807-sagibbon)，你會找到初學者資源、學生包，甚至有取得免費證書代金券的方式。這是你想要書籤並不時查看的頁面，因為我們會每月更新內容。
造訪 [**學生中心頁面**](https://docs.microsoft.com/learn/student-hub/?WT.mc_id=academic-77807-sagibbon) 這裡有初學者資源、學生套件，甚至還有取得免費證書兌換券的方式。這個頁面非常值得收藏並定期查看，因為內容會每月更新。
### 📣 公告 - 新增 GitHub Copilot Agent 模式挑戰任務！
### 📣 公告 - 新增 GitHub Copilot Agent 模式挑戰可完成！
全新挑戰已新增，在多數章節尋找「GitHub Copilot Agent Challenge 🚀」。這是讓你使用 GitHub Copilot 與代理模式完成的新挑戰。如果你之前沒用過代理模式，它不僅能生成文字，也可以建立與編輯檔案、執行指令等功能。
新增挑戰，請在多數章節尋找「GitHub Copilot Agent Challenge 🚀」。這是利用 GitHub Copilot 和 Agent 模式完成的新挑戰。如果你還沒用過 Agent 模式，它不只會生成文字，還能建立及編輯檔案、執行命令等等。
### 📣 公告 - _新增用生成式 AI 建置的專案_
### 📣 公告 - _新專案使用生成式 AI 建構_
新 AI 助手專案剛加入，詳見 [專案](./9-chat-project/README.md)
剛新增 AI 助手專案，請查看 [專案](./9-chat-project/README.md)
### 📣 公告 - _最新 JavaScript 生成式 AI 課程_ 正式發布
### 📣 公告 - _新課程_ 針對 JavaScript 的生成式 AI 課程剛發布
別錯過我們的新生成式 AI 課程！
別錯過我們的生成式 AI 新課程！
造訪 [https://aka.ms/genai-js-course](https://aka.ms/genai-js-course) 開始學習！
請造訪 [https://aka.ms/genai-js-course](https://aka.ms/genai-js-course) 開始您的學習！
![Background](../../translated_images/zh-TW/background.148a8d43afde5730.webp)
- 課程涵蓋從基礎到檢索增強生成（RAG）。
- 使用生成 AI 與我們的伴隨應用與歷史人物互動。
- 有趣且吸引人的敘事，你將時空穿越！
- 課程範圍涵蓋從基礎到檢索增強生成（RAG）。
- 使用生成式 AI 和我們的伴侶應用與歷史人物互動。
- 有趣且引人入勝的敘事，你將穿越時空！
![character](../../translated_images/zh-TW/character.5c0dd8e067ffd693.webp)
每堂課都包含一個作業、知識檢核和挑戰，幫助你學習以下主題：
- 提示詞與提示詞工程
- 文字與圖像應用程式生成
每堂課包含作業、知識檢測和挑戰，協助你學習：
- 提示詞及提示詞工程
- 文本和圖片應用程式生成
- 搜尋應用程式
請造訪 [https://aka.ms/genai-js-course](../../[https:/aka.ms/genai-js-course) 開始學習！
請造訪 [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)提供反饋！
> **教師們**，我們已[提供一些建議](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://aka.ms/student-page/?WT.mc_id=academic-77807-sagibbon)**，每節課開始時先做課前測驗，接著閱讀課程內容，完成各項活動，最後以課後測驗檢視理解。
為了提升學習體驗，鼓勵你與同儕一起合作完成專案！在我們的[討論區](https://github.com/microsoft/Web-Dev-For-Beginners/discussions)參與討論，我們的管理團隊將隨時解答你的問題。
為了提升學習體驗，建議與同儕合作完成專案！鼓勵在我們的[討論區](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)以取得更多學習資源。
若想進階學習，我們強烈建議探索[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)。
此課程配備現成的開發環境！你可以選擇透過 [Codespace](https://github.com/features/codespaces/) 運行課程（基於瀏覽器，無需安裝任何軟體），或使用文字編輯器如 [Visual Studio Code](https://code.visualstudio.com/?WT.mc_id=academic-77807-sagibbon) 在本機電腦上執行。
#### 建立你的儲存庫
為方便保存你的作品，建議你建立此儲存庫的個人複本。你可以點擊頁面上方的 **Use this template** 按鈕，系統會在你的 GitHub 帳號建立新儲存庫，裡面包含課程內容。
#### 建立你的程式庫
為方便你保存作品，建議建立此程式庫的個人副本。可點選頁面頂端的 **Use this template** 按鈕，會在你的 GitHub 帳號建立一個使用此課程內容的新程式庫。
操作步驟如下：
1. **分叉（Fork）此儲存庫**：點擊本頁右上方的「Fork」按鈕。
2. **複製（Clone）此儲存庫**： `git clone https://github.com/microsoft/Web-Dev-For-Beginners.git`
請依照以下步驟操作：
1. **Fork 程式庫**：點擊本頁右上方的「Fork」按鈕。
2. **Clone 程式庫**： `git clone https://github.com/microsoft/Web-Dev-For-Beginners.git`
#### 在 Codespace 執行課程
#### 在 Codespace 中執行課程
在你建立的個人儲存庫中，點擊 **Code** 按鈕，選擇 **Open with Codespaces**。系統會為你建立新的 Codespace 開發環境。
於你建立的程式庫副本中，點擊 **Code** 按鈕並選擇 **Open with Codespaces**，將為你建立一個新的 Codespace 以便作業。
![Codespace](../../translated_images/zh-TW/createcodespace.0238bbf4d7a8d955.webp)
#### 在本機電腦執行課程
若要在你電腦本機執行此課程，你需要文字編輯器、瀏覽器跟命令列工具。第一堂課 [程式語言與開發工具入門](../../1-getting-started-lessons/1-intro-to-programming-languages) 會介紹各種選項，讓你挑選最適合自己的工具。
若要在本機執行此課程，你需要文字編輯器、瀏覽器和命令列工具。我們的第一堂課 [程式語言簡介與開發工具介紹](../../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)。
我們推薦使用 [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)下載 Visual Studio Code。
1. 將你的儲存庫複製到本機。你可以點擊 **Code** 按鈕並複製 URL：
1. 將你的程式庫 Clone 到電腦。可點擊 **Code** 按鈕並複製 URL：
[CodeSpace](./images/createcodespace.png)
接著，在 [Visual Studio Code](https://code.visualstudio.com/?WT.mc_id=academic-77807-sagibbon) 內打開 [Terminal](https://code.visualstudio.com/docs/terminal/basics/?WT.mc_id=academic-77807-sagibbon)，並執行以下指令，將 `<your-repository-url>` 替換成你剛才複製的 URL：
然後，在 [Visual Studio Code](https://code.visualstudio.com/?WT.mc_id=academic-77807-sagibbon) 中開啟 [Terminal](https://code.visualstudio.com/docs/terminal/basics/?WT.mc_id=academic-77807-sagibbon)，並執行以下指令，將 `<your-repository-url>` 替換為你剛剛複製的 URL：
```bash
git clone <your-repository-url>
```
2. 在 Visual Studio Code 中打開資料夾。你可以點選 **File** > **Open Folder**，然後選擇剛剛克隆的資料夾。
2. 在 Visual Studio Code 中開啟資料夾。你可以點選 **File** > **Open Folder**，選擇剛剛克隆的資料夾。
> 推薦的 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) - 協助你更快編寫程式碼
> * [Copilot](https://marketplace.visualstudio.com/items?itemName=GitHub.copilot&WT.mc_id=academic-77807-sagibbon) - 幫助你更快撰寫程式碼
## 📂 每堂課包含：
- 選擇性的手繪筆記
- 選擇性的補充影片
- 課前熱身測驗
- 選用的手繪筆記
- 選用的補充影片
- 課前熱身小測驗
- 書面課程內容
- 針對專案課程，提供逐步指引如何完成專案
- 對於專案導向課程，提供逐步指引說明如何完成專案
- 知識檢核
- 挑戰任務
- 補充閱讀
- 挑戰題
- 補充閱讀資料
- 作業
- [課後測驗](https://ff-quizzes.netlify.app/web/)
- [課後小測驗](https://ff-quizzes.netlify.app/web/)
> **關於測驗的說明**：所有測驗都集中在 Quiz-app 資料夾內，共有 48 個小考，每個小考包含三題問題。可在[此處](https://ff-quizzes.netlify.app/web/)取得，測驗應用程式可在本機執行或部署至 Azure；請參閱 `quiz-app` 資料夾中的說明。
> **關於測驗的說明**：所有測驗皆收錄於 Quiz-app 資料夾中，共有 48 組測驗，且每組包含三個問題。這些測驗可於 [此處](https://ff-quizzes.netlify.app/web/) 取得，測驗應用可在本機執行或部署至 Azure；請參照 `quiz-app` 資料夾中的說明。
## 🗃️ 課程列表
| | 專案名稱 | 教授概念 | 學習目標 | 連結課程 | 作者 |
| :-: | :------------------------------------------------------: | :--------------------------------------------------------------------: | ----------------------------------------------------------------------------------------------------------------------------------- | :----------------------------------------------------------------------------------------------------------------------------: | :---------------------: |
| 01 | Getting Started | 程式設計入門及工具介紹 | 了解多數程式語言的基本原理及協助專業開發人員完成工作之軟體 | [程式語言與工具介紹](./1-getting-started-lessons/1-intro-to-programming-languages/README.md) | Jasmine |
| 02 | Getting Started | GitHub 基礎及團隊協作 | 如何在專案中使用 GitHub，並與他人協作編輯程式碼 | [GitHub 入門](./1-getting-started-lessons/2-github-basics/README.md) | Floor |
| 03 | Getting Started | 無障礙網頁設計 | 了解網站無障礙性的基礎 | [無障礙設計基礎](./1-getting-started-lessons/3-accessibility/README.md) | Christopher |
| 04 | JS Basics | JavaScript 資料型態 | JavaScript 資料型態基礎 | [資料型態](./2-js-basics/1-data-types/README.md) | Jasmine |
| 05 | JS Basics | 函式與方法 | 認識函式與方法以管理應用程式的邏輯流程 | [函式與方法](./2-js-basics/2-functions-methods/README.md) | Jasmine 和 Christopher |
| 06 | JS Basics | 用 JS 做出決策 | 學習如何在程式碼中創建條件判斷 | [做出決策](./2-js-basics/3-making-decisions/README.md) | Jasmine |
| 07 | JS Basics | 陣列與迴圈 | 使用 JavaScript 的陣列與迴圈操作資料 | [陣列與迴圈](./2-js-basics/4-arrays-loops/README.md) | Jasmine |
| 08 | [Terrarium](./3-terrarium/solution/README.md) | HTML 實作 | 建立線上生態箱的 HTML，重點放在版面設計 | [HTML 入門](./3-terrarium/1-intro-to-html/README.md) | Jen |
| 09 | [Terrarium](./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 並使用本地儲存變數 | 撰寫瀏覽器擴充功能的 JavaScript 元素，使用本地儲存變數呼叫 API | [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 遊戲開發 | 學習繼承（Classes）、組合（Composition）及發佈/訂閱模式，為建立遊戲做準備 | [進階遊戲開發入門](./6-space-game/1-introduction/README.md) | Chris |
| 16 | [Space Game](./6-space-game/solution/README.md) | 畫布繪圖 | 了解 Canvas API，將元素繪製到畫面 | [畫布繪圖](./6-space-game/2-drawing-to-canvas/README.md) | Chris |
| 17 | [Space Game](./6-space-game/solution/README.md) | 在畫面上移動元素 | 探索如何使用笛卡爾座標與 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 |
| 25 | [Browser/VScode Code](../../8-code-editor) | 使用 VScode 編輯器 | 學習如何使用程式碼編輯器| [使用 VScode 程式碼編輯器](./8-code-editor/1-using-a-code-editor/README.md) | Chris |
| 26 | [AI Assistants](./9-chat-project/README.md) | 使用 AI | 學習如何建立自己的 AI 助手 | [AI 助理專案](./9-chat-project/README.md) | Chris |
| | 專案名稱 | 教授概念 | 學習目標 | 連結課程 | 作者 |
| :-: | :---------------------------------------------------: | :----------------------------------------------------------------: | ----------------------------------------------------------------------------------------------------------------------------- | :--------------------------------------------------------------------------------------------------------------------------: | :-----------------: |
| 01 | Getting Started | 程式設計入門與常用工具介紹 | 瞭解多數程式語言背後的基本原理，並認識協助專業開發者的軟體工具 | [Intro to Programming Languages and Tools of the Trade](./1-getting-started-lessons/1-intro-to-programming-languages/README.md) | Jasmine |
| 02 | Getting Started | GitHub 基礎與團隊協作教學 | 了解如何在專案中使用 GitHub，及如何與他人協同合作維護程式碼 | [Intro to GitHub](./1-getting-started-lessons/2-github-basics/README.md) | Floor |
| 03 | Getting Started | 無障礙設計 | 學習網頁無障礙設計的基礎 | [Accessibility Fundamentals](./1-getting-started-lessons/3-accessibility/README.md) | Christopher |
| 04 | JS Basics | JavaScript 資料類型 | JavaScript 資料類型的基礎知識 | [Data Types](./2-js-basics/1-data-types/README.md) | Jasmine |
| 05 | JS Basics | 函式與方法介紹 | 瞭解函式與方法如何管理應用程式邏輯流程 | [Functions and Methods](./2-js-basics/2-functions-methods/README.md) | Jasmine and Christopher |
| 06 | JS Basics | JavaScript 決策製作 | 學習如何使用決策結構在程式碼中建立條件 | [Making Decisions](./2-js-basics/3-making-decisions/README.md) | Jasmine |
| 07 | JS Basics | 陣列與迴圈 | 使用陣列與迴圈來操作資料 | [Arrays and Loops](./2-js-basics/4-arrays-loops/README.md) | Jasmine |
| 08 | [Terrarium](./3-terrarium/solution/README.md) | HTML 實作 | 建立 HTML 以打造線上生態瓶，專注於建立排版布局 | [Introduction to HTML](./3-terrarium/1-intro-to-html/README.md) | Jen |
| 09 | [Terrarium](./3-terrarium/solution/README.md) | CSS 實作 | 製作 CSS 以美化線上生態瓶，學習 CSS 基礎與響應式設計 | [Introduction to CSS](./3-terrarium/2-intro-to-css/README.md) | Jen |
| 10 | [Terrarium](./3-terrarium/solution/README.md) | JavaScript 閉包與 DOM 操作 | 撰寫 JavaScript 以實作拖放式生態瓶介面，專注於閉包及 DOM 操作 | [JavaScript Closures, DOM manipulation](./3-terrarium/3-intro-to-DOM-and-closures/README.md) | Jen |
| 11 | [Typing Game](./4-typing-game/solution/README.md) | 打字遊戲製作 | 學習如何使用鍵盤事件驅動 JavaScript 應用程式邏輯 | [Event-Driven Programming](./4-typing-game/typing-game/README.md) | Christopher |
| 12 | [Green Browser Extension](./5-browser-extension/solution/README.md) | 瀏覽器原理與操作 | 瞭解瀏覽器的工作原理與歷史，並搭建瀏覽器擴充功能的初始元件 | [About Browsers](./5-browser-extension/1-about-browsers/README.md) | Jen |
| 13 | [Green Browser Extension](./5-browser-extension/solution/README.md) | 製作表單、呼叫 API 並儲存至本地儲存空間 | 撰寫瀏覽器擴充功能中的 JavaScript 元素以呼叫 API，並使用變數存儲於本地儲存空間 | [APIs, Forms, and Local Storage](./5-browser-extension/2-forms-browsers-local-storage/README.md) | Jen |
| 14 | [Green Browser Extension](./5-browser-extension/solution/README.md) | 背景程序與網頁效能優化 | 利用瀏覽器背景程序管理擴充功能圖示，理解網頁效能並學習優化方法 | [Background Tasks and Performance](./5-browser-extension/3-background-tasks-and-performance/README.md) | Jen |
| 15 | [Space Game](./6-space-game/solution/README.md) | 進階 JavaScript 遊戲開發 | 瞭解繼承、類別與組合模式以及發布/訂閱模式，為遊戲開發做準備 | [Introduction to Advanced Game Development](./6-space-game/1-introduction/README.md) | Chris |
| 16 | [Space Game](./6-space-game/solution/README.md) | Canvas 繪圖 | 瞭解 Canvas API 以繪製螢幕上的元素 | [Drawing to Canvas](./6-space-game/2-drawing-to-canvas/README.md) | Chris |
| 17 | [Space Game](./6-space-game/solution/README.md) | 控制元素在螢幕上移動 | 探索如何利用直角座標系與 Canvas API 使元素產生運動 | [Moving Elements Around](./6-space-game/3-moving-elements-around/README.md) | Chris |
| 18 | [Space Game](./6-space-game/solution/README.md) | 碰撞偵測 | 實作元素之間的碰撞與反應，並透過按鍵觸發冷卻功能以確保遊戲效能 | [Collision Detection](./6-space-game/4-collision-detection/README.md) | Chris |
| 19 | [Space Game](./6-space-game/solution/README.md) | 計分系統 | 根據遊戲狀態與表現執行數學計算 | [Keeping Score](./6-space-game/5-keeping-score/README.md) | Chris |
| 20 | [Space Game](./6-space-game/solution/README.md) | 結束及重新開始遊戲 | 了解如何結束與重新啟動遊戲，包括清理資源與重設變數 | [The Ending Condition](./6-space-game/6-end-condition/README.md) | Chris |
| 21 | [Banking App](./7-bank-project/solution/README.md) | 網頁應用中的 HTML 範本與路由 | 學習如何使用路由與 HTML 範本來建立多頁網站架構 | [HTML Templates and Routes](./7-bank-project/1-template-route/README.md) | Yohan |
| 22 | [Banking App](./7-bank-project/solution/README.md) | 建立登入與註冊表單 | 認識表單建置及驗證流程 | [Forms](./7-bank-project/2-forms/README.md) | Yohan |
| 23 | [Banking App](./7-bank-project/solution/README.md) | 資料獲取與使用方法 | 瞭解資料如何流入與流出應用程式，包含取得、儲存與處理 | [Data](./7-bank-project/3-data/README.md) | Yohan |
| 24 | [Banking App](./7-bank-project/solution/README.md) | 狀態管理概念 | 學會應用程式如何保留狀態，以及如何以程式化方式管理狀態 | [State Management](./7-bank-project/4-state-management/README.md) | Yohan |
| 25 | [Browser/VScode Code](../../8-code-editor) | 使用 VScode | 學習如何使用程式碼編輯器 | [Use VScode Code Editor](./8-code-editor/1-using-a-code-editor/README.md) | Chris |
| 26 | [AI Assistants](./9-chat-project/README.md) | 使用 AI | 學習如何打造自己的 AI 助手 | [AI Assistant project](./9-chat-project/README.md) | Chris |
## 🏫 教學法
我們的課程設計基於兩大教學原則：
我們的課程設計基於兩個主要教學原則：
* 專案導向學習
* 經常性測驗
* 經常性的測驗
此課程教授 JavaScript、HTML、CSS 的基礎，以及現今網頁開發者使用的最新工具與技術。學生將有機會親自動手，打造打字遊戲、虛擬生態箱、環保瀏覽器擴充功能、太空入侵者風格遊戲與企業用銀行應用程式。課程結束後，學生將具備穩固的網頁開發知識。
本課程教授 JavaScript、HTML 與 CSS 的核心基礎，以及當今網頁開發人員使用的最新工具與技術。學員將有機會透過製作打字遊戲、虛擬生態瓶、環保瀏覽器擴充功能、太空入侵者風格遊戲與企業銀行應用程式等項目，累積實作經驗。系列課程結束後，學員將獲得扎實的網頁開發知識。
> 🎓 你可以將本課程前幾堂視為 Microsoft Learn 上的 [學習路徑](https://docs.microsoft.com/learn/paths/web-development-101/?WT.mc_id=academic-77807-sagibbon)！
> 🎓 你可以將本課程的前幾堂課作為 Microsoft Learn 上的 [學習路徑](https://docs.microsoft.com/learn/paths/web-development-101/?WT.mc_id=academic-77807-sagibbon)！
通過確保內容與專案相結合，學習過程更具吸引力，並且能提升概念理解與記憶力。我們也撰寫了數堂 JavaScript 基礎入門課，介紹基本概念，並搭配《[JavaScript 初學者系列](https://channel9.msdn.com/Series/Beginners-Series-to-JavaScript/?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 框架，以專注於網頁開發者採用框架前所需的基本技能，但完成本課程後的良好進階步驟，是透過另一套影片系列「[Node.js 初學者系列](https://channel9.msdn.com/Series/Beginners-Series-to-Nodejs/?WT.mc_id=academic-77807-sagibbon)」來學習 Node.js。
雖然我們刻意避免介紹 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)。我們歡迎您的建設性回饋！
> 請參閱我們的 [行為守則](CODE_OF_CONDUCT.md) 與 [貢獻指南](CONTRIBUTING.md)。非常歡迎您提供建設性的意見！
## 🧭 離線存取
你可以使用 [Docsify](https://docsify.js.org/#/) 離線瀏覽這份文件。將此倉庫 Fork，然後在本機安裝 [Docsify](https://docsify.js.org/#/quickstart)，然後在此倉庫根目錄輸入 `docsify serve`。網站將在本機端 3000 埠口啟動：`localhost:3000`。
你可以使用 [Docsify](https://docsify.js.org/#/) 離線瀏覽此文件。將此倉庫 fork 至你的本機，並安裝 [Docsify](https://docsify.js.org/#/quickstart)，然後在本倉庫根目錄執行 `docsify serve`。網站將在本地的 3000 端口啟動：`localhost:3000`。
## 📘 PDF
所有課程的 PDF 可於[此處](https://microsoft.github.io/Web-Dev-For-Beginners/pdf/readme.pdf)取得。
所有課程的 PDF 版本可在 [此處](https://microsoft.github.io/Web-Dev-For-Beginners/pdf/readme.pdf) 下載。
## 🎒 其他課程
我們的團隊還製作了其他課程！快來看看：
我們團隊還製作了其他課程！歡迎參考：
<!-- CO-OP TRANSLATOR OTHER COURSES START -->
### LangChain
[![LangChain4j for Beginners](https://img.shields.io/badge/LangChain4j%20for%20Beginners-22C55E?style=for-the-badge&&labelColor=E5E7EB&color=0553D6)](https://aka.ms/langchain4j-for-beginners)
[![LangChain.js for Beginners](https://img.shields.io/badge/LangChain.js%20for%20Beginners-22C55E?style=for-the-badge&labelColor=E5E7EB&color=0553D6)](https://aka.ms/langchainjs-for-beginners?WT.mc_id=m365-94501-dwahlin)
[![LangChain for Beginners](https://img.shields.io/badge/LangChain%20for%20Beginners-22C55E?style=for-the-badge&labelColor=E5E7EB&color=0553D6)](https://github.com/microsoft/langchain-for-beginners?WT.mc_id=m365-94501-dwahlin)
---
### Azure / Edge / MCP / Agents
@ -248,23 +248,23 @@
[![Copilot Adventure](https://img.shields.io/badge/Copilot%20Adventure-FDE68A?style=for-the-badge&labelColor=E5E7EB&color=FDE68A)](https://github.com/microsoft/CopilotAdventures?WT.mc_id=academic-105485-koreyst)
<!-- CO-OP TRANSLATOR OTHER COURSES END -->
## 尋求幫助
## 尋求協助
如果你遇到困難或對建立 AI 應用有任何問題，歡迎加入其他學習者及經驗豐富開發者的討論社群。這是一個支持性的社區，歡迎提出問題並自由分享知識。
如果您在構建 AI 應用程式時遇到困難或有任何問題，歡迎加入與 MCP 相關的討論，與其他學習者和經驗豐富的開發人員交流。這裡是一個友善的社群，歡迎提問並自由分享知識。
[![Microsoft Foundry Discord](https://dcbadge.limes.pink/api/server/nTYy5BXMWG)](https://discord.gg/nTYy5BXMWG)
如果你在開發中有產品回饋或錯誤，請訪問：
如果您有產品反饋或在構建過程中遇到錯誤，請訪問：
[![Microsoft Foundry Developer Forum](https://img.shields.io/badge/GitHub-Microsoft_Foundry_Developer_Forum-blue?style=for-the-badge&logo=github&color=000000&logoColor=fff)](https://aka.ms/foundry/forum)
## 授權
## 授權條款
此儲存庫採用 MIT 授權。詳情請見 [LICENSE](../../LICENSE) 文件。
本儲存庫採用 MIT 授權條款。更多資訊請參閱 [LICENSE](../../LICENSE) 檔案。
---
<!-- CO-OP TRANSLATOR DISCLAIMER START -->
**免責聲明**：
本文件使用 AI 翻譯服務 [Co-op Translator](https://github.com/Azure/co-op-translator) 進行翻譯。雖然我們努力確保準確性，但請注意自動翻譯可能包含錯誤或不準確之處。原始文件的母語版本應被視為權威來源。對於重要資訊，建議採用專業人工翻譯。對於因使用本翻譯而產生的任何誤解或誤譯，我們概不負責。
本文件係使用 AI 翻譯服務 [Co-op Translator](https://github.com/Azure/co-op-translator) 進行翻譯。雖然我們致力於確保準確性，但請注意自動翻譯可能包含錯誤或不準確之處。文件原文的原始語言版本應被視為權威來源。對於重要資訊，建議使用專業人工翻譯。我們不對因使用本翻譯所引起的任何誤解或曲解負責。
<!-- CO-OP TRANSLATOR DISCLAIMER END -->

53
translations/zh-TW/Roadmap.md
Unescape View File

@ -0,0 +1,53 @@
# Microsoft Web-Dev-For-Beginners 倉儲的學習路線圖
**此倉儲提供學習網頁開發基礎的路線圖，重點在 JavaScript、HTML 和 CSS。課程靈活，可全部參加或部分修習，共有 24 節課分布於 12 週內。**
## 主要里程碑
* **第 1-3 週：**
* 介紹程式語言與開發工具
* GitHub 基礎
* 無障礙設計
* JS 基礎：資料型態、函式與方法
* 使用 JS 作出決策
* **第 4-6 週：**
* 陣列與迴圈
* Terrarium：HTML 實作
* CSS 實作
* JavaScript 閉包
* DOM 操作
* **第 7-9 週：**
* 打字遊戲：事件驅動程式設計
* 綠色瀏覽器擴充套件：瀏覽器應用
* 建立表單、呼叫 API 及儲存變數至本地儲存
* 瀏覽器背景程序
* 網頁效能優化
* **第 10-12 週：**
* 太空遊戲：更進階的 JavaScript 遊戲開發
* 畫布繪圖
* 移動畫面元素
* 碰撞偵測
* 計分、結束及重新開始遊戲
* 銀行應用程式：網頁應用中的 HTML 範本與路由
* 建立登入與註冊表單
* 取用資料的方法
* 狀態管理概念
## 學習成果
**完成此路線圖後，學生將具備實作打字遊戲、虛擬生態箱、環保瀏覽器擴充套件、太空侵略者風格遊戲及企業銀行應用程式的經驗，並紮實掌握網頁開發基礎知識。**
## 其他資源
* 此倉儲提供豐富的額外學習資源，包括教學、程式範例及挑戰題。
* Microsoft Learn 平台提供多樣的網頁開發課程與學習路徑。
* Stack Overflow、MDN Web Docs 等線上社群為網頁開發者提供寶貴的支援與資源。
**希望此路線圖能助你一臂之力，順利踏上網頁開發之路！**
---
<!-- CO-OP TRANSLATOR DISCLAIMER START -->
**免責聲明**：
本文件係使用 AI 翻譯服務 [Co-op Translator](https://github.com/Azure/co-op-translator) 進行翻譯。雖然我們力求準確，但請注意自動翻譯可能包含錯誤或不準確之處。原始文件之母語版本應視為權威來源。對於重要資訊，建議聘請專業人工翻譯。我們不對因使用本翻譯所引起之任何誤解或誤譯負責。
<!-- CO-OP TRANSLATOR DISCLAIMER END -->
Write Preview
Loading…
Cancel
Save