diff --git a/translations/ja/.co-op-translator.json b/translations/ja/.co-op-translator.json index b6769a766..b95d8e542 100644 --- a/translations/ja/.co-op-translator.json +++ b/translations/ja/.co-op-translator.json @@ -493,7 +493,7 @@ }, "AGENTS.md": { "original_hash": "a362efd06d64d4134a0cfe8515a86d34", - "translation_date": "2025-10-03T11:18:51+00:00", + "translation_date": "2026-02-06T07:55:59+00:00", "source_file": "AGENTS.md", "language_code": "ja" }, @@ -516,8 +516,8 @@ "language_code": "ja" }, "README.md": { - "original_hash": "490c83786552d7fab6390991517bef09", - "translation_date": "2026-01-29T17:54:08+00:00", + "original_hash": "805cd399757df19e886e86f0891a1374", + "translation_date": "2026-02-06T07:51:53+00:00", "source_file": "README.md", "language_code": "ja" }, diff --git a/translations/ja/AGENTS.md b/translations/ja/AGENTS.md index f0432f87c..1e0cf7f77 100644 --- a/translations/ja/AGENTS.md +++ b/translations/ja/AGENTS.md @@ -2,27 +2,27 @@ ## プロジェクト概要 -このリポジトリは、初心者向けにウェブ開発の基礎を教える教育カリキュラムです。Microsoft Cloud Advocatesによって開発された包括的な12週間のコースで、JavaScript、CSS、HTMLを扱う24の実践的なレッスンが含まれています。 +これは初心者にウェブ開発の基礎を教えるための教育カリキュラムリポジトリです。カリキュラムはMicrosoft Cloud Advocatesによって開発された包括的な12週間のコースで、JavaScript、CSS、HTMLをカバーする24の実践的なレッスンで構成されています。 ### 主な構成要素 -- **教育コンテンツ**: プロジェクトベースのモジュールに整理された24の構造化されたレッスン -- **実践プロジェクト**: テラリウム、タイピングゲーム、ブラウザ拡張機能、スペースゲーム、銀行アプリ、コードエディタ、AIチャットアシスタント -- **インタラクティブクイズ**: 各レッスンの前後に3問ずつの48のクイズ -- **多言語対応**: GitHub Actionsを使用した50以上の言語への自動翻訳 -- **使用技術**: HTML、CSS、JavaScript、Vue.js 3、Vite、Node.js、Express、Python（AIプロジェクト用） +- **教育コンテンツ**：プロジェクトベースのモジュールに整理された24の構造化されたレッスン +- **実践プロジェクト**：テラリウム、タイピングゲーム、ブラウザ拡張機能、スペースゲーム、銀行アプリ、コードエディター、AIチャットアシスタント +- **インタラクティブクイズ**：それぞれ3問の質問を含む48のクイズ（レッスン前後の評価） +- **多言語サポート**：GitHub Actionsを利用した50以上の言語への自動翻訳 +- **技術スタック**：HTML、CSS、JavaScript、Vue.js 3、Vite、Node.js、Express、Python（AIプロジェクト用） ### アーキテクチャ -- レッスンベースの構造を持つ教育リポジトリ -- 各レッスンフォルダにはREADME、コード例、解答が含まれる -- 独立したプロジェクトは別ディレクトリに配置（quiz-app、各レッスンプロジェクト） +- レッスンベースの教育リポジトリ構造 +- 各レッスンフォルダーにはREADME、コード例、解答例を含む +- 独立したプロジェクトは個別ディレクトリに配置（quiz-app、各種レッスンプロジェクト） - GitHub Actionsを使用した翻訳システム（co-op-translator） -- Docsifyで提供され、PDFとしても利用可能なドキュメント +- Docsifyでドキュメントを配信し、PDFとしても利用可能 ## セットアップコマンド -このリポジトリは主に教育コンテンツの利用を目的としています。特定のプロジェクトを操作する場合: +このリポジトリは主に教育コンテンツの利用を目的としています。特定プロジェクトで作業する場合： ### メインリポジトリのセットアップ @@ -31,14 +31,14 @@ git clone https://github.com/microsoft/Web-Dev-For-Beginners.git cd Web-Dev-For-Beginners ``` -### クイズアプリのセットアップ (Vue 3 + Vite) +### Quiz App セットアップ (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,211 +72,211 @@ npm install ```bash cd 9-chat-project/solution/backend/python pip install openai -# Set GITHUB_TOKEN environment variable +# GITHUB_TOKEN 環境変数を設定する python api.py ``` ## 開発ワークフロー -### コンテンツ貢献者向け +### コンテンツ提供者向け -1. **リポジトリをフォーク**してGitHubアカウントにコピー -2. **フォークをローカルにクローン** -3. **変更用の新しいブランチを作成** -4. レッスンコンテンツやコード例を変更 -5. 関連するプロジェクトディレクトリでコード変更をテスト -6. 貢献ガイドラインに従ってプルリクエストを送信 +1. GitHubアカウントにリポジトリを**フォーク**する +2. フォークしたリポジトリをローカルに**クローン**する +3. 変更用の**新しいブランチ**を作成する +4. レッスンコンテンツやコード例に変更を加える +5. 関連プロジェクトディレクトリでコード変更をテストする +6. 貢献ガイドラインに従いプルリクエストを提出する ### 学習者向け -1. リポジトリをフォークまたはクローン -2. レッスンディレクトリを順番に進む +1. リポジトリをフォークまたはクローンする +2. レッスンディレクトリを順に進む 3. 各レッスンのREADMEファイルを読む -4. https://ff-quizzes.netlify.app/web/ で事前クイズを完了 -5. レッスンフォルダ内のコード例を実践 -6. 課題やチャレンジを完了 +4. https://ff-quizzes.netlify.app/web/ でレッスン前のクイズを完了する +5. レッスンフォルダ内のコード例に取り組む +6. 課題やチャレンジを完了する 7. レッスン後のクイズを受ける ### ライブ開発 -- **ドキュメント**: ルートで`docsify serve`を実行 (ポート3000) -- **クイズアプリ**: quiz-appディレクトリで`npm run dev`を実行 -- **プロジェクト**: HTMLプロジェクトにはVS Code Live Server拡張機能を使用 -- **APIプロジェクト**: 該当するAPIディレクトリで`npm start`を実行 +- **ドキュメント**：ルートで `docsify serve` を実行 (ポート3000) +- **Quiz App**：quiz-appディレクトリで `npm run dev` を実行 +- **プロジェクト**：HTMLプロジェクトはVS CodeのLive Server拡張機能を使用 +- **APIプロジェクト**：該当のAPIディレクトリで `npm start` を実行 ## テスト手順 -### クイズアプリのテスト +### Quiz App テスト ```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のテスト +### 銀行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 # サーバーがエラーなく起動することを確認する ``` -### 一般的なテストアプローチ +### 一般的なテスト方針 -- このリポジトリは教育目的であり、包括的な自動テストは含まれていません -- 手動テストの焦点: - - コード例がエラーなく実行されること - - ドキュメント内のリンクが正しく動作すること +- 教育用リポジトリのため包括的な自動テストはなし +- 手動テストの重点： + - コード例がエラーなく動作すること + - ドキュメント内のリンクが正しく機能すること - プロジェクトのビルドが正常に完了すること - - 例がベストプラクティスに従っていること + - 例がベストプラクティスに則っていること -### 提出前のチェック +### 提出前チェック -- `npm run lint`をpackage.jsonがあるディレクトリで実行 -- Markdownリンクが有効であることを確認 +- package.jsonがあるディレクトリで `npm run lint` を実行 +- Markdownリンクの有効性を確認 - ブラウザまたはNode.jsでコード例をテスト -- 翻訳が適切な構造を維持していることを確認 +- 翻訳が正しい構造を維持していることを確認 ## コードスタイルガイドライン ### JavaScript - 最新のES6+構文を使用 -- プロジェクトで提供される標準ESLint設定に従う -- 教育的な明確さのために意味のある変数名と関数名を使用 -- 学習者向けに概念を説明するコメントを追加 -- Prettierを使用してフォーマット（設定されている場合） +- プロジェクトで提供されている標準のESLint設定に従う +- 教育的な明快さのため意味のある変数名・関数名を使用 +- 学習者のために概念を説明するコメントを追加 +- 設定がある場合はPrettierでフォーマット ### HTML/CSS -- セマンティックHTML5要素 +- セマンティックなHTML5要素 - レスポンシブデザインの原則 - 明確なクラス命名規則 -- 学習者向けにCSS技術を説明するコメント +- 学習者向けのCSS技術を説明するコメント ### Python -- PEP 8スタイルガイドライン -- 明確で教育的なコード例 -- 学習に役立つ場合は型ヒントを追加 +- PEP 8スタイルガイドラインに準拠 +- 分かりやすく教育的なコード例 +- 学習のために有用な場所には型ヒントを追加 -### Markdownドキュメント +### 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 Static Web Apps) +### Quiz Appのデプロイ (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の設定： +- **アプリ場所**：`/quiz-app` +- **出力場所**：`dist` +- **ワークフロー**：`.github/workflows/azure-static-web-apps-ashy-river-0debb7803.yml` ### ドキュメント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ドキュメント +### 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` で本番用バンドルを作成 +- 静的プロジェクト：ビルドステップなし、ファイルを直接配信 ## プルリクエストガイドライン -### タイトル形式 +### タイトルフォーマット -変更内容を明確に示すタイトルを使用: -- `[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] セットアップ手順の更新` ### 必須チェック -PRを送信する前に: +PR提出前に： -1. **コード品質**: - - 該当するプロジェクトディレクトリで`npm run lint`を実行 - - すべてのリントエラーと警告を修正 +1. **コード品質**： + - 該当プロジェクトディレクトリで `npm run lint` 実行 + - すべてのリンティングエラーと警告を修正 -2. **ビルド確認**: - - 該当する場合は`npm run build`を実行 +2. **ビルド確認**： + - 必要に応じて `npm run build` 実行 - ビルドエラーがないことを確認 -3. **リンク検証**: +3. **リンク検証**： - すべてのMarkdownリンクをテスト - - 画像参照が正しく動作することを確認 + - 画像参照が機能することを確認 -4. **コンテンツレビュー**: - - スペルと文法を校正 - - コード例が正確で教育的であることを確認 - - 翻訳が元の意味を維持していることを確認 +4. **内容レビュー**： + - スペルと文法の校正 + - コード例が正しく教育目的に適していること + - 翻訳が原文の意味を維持していることを確認 -### 貢献要件 +### 貢献条件 - Microsoft CLAに同意（最初のPRで自動チェック） -- [Microsoft Open Source Code of Conduct](https://opensource.microsoft.com/codeofconduct/)に従う -- 詳細なガイドラインは[CONTRIBUTING.md](./CONTRIBUTING.md)を参照 -- 該当する場合はPR説明に問題番号を記載 +- [Microsoft Open Source Code of Conduct](https://opensource.microsoft.com/codeofconduct/)の遵守 +- 詳細は[CONTRIBUTING.md](./CONTRIBUTING.md)参照 +- 該当する場合はPR説明にIssue番号を記載 -### レビュープロセス +### レビュー体制 -- メンテナーとコミュニティによるPRレビュー -- 教育的な明確さを優先 -- コード例は最新のベストプラクティスに従うべき -- 翻訳は正確性と文化的適切性を確認 +- メンテナおよびコミュニティによるレビュー +- 教育的な明快さを優先 +- コード例は現行のベストプラクティスに従うこと +- 翻訳は正確さと文化的適合性を持つか確認 ## 翻訳システム ### 自動翻訳 -- GitHub Actionsとco-op-translatorワークフローを使用 +- GitHub Actionsでco-op-translatorワークフローを利用 - 50以上の言語に自動翻訳 -- メインディレクトリ内のソースファイル -- 翻訳ファイルは`translations/{language-code}/`ディレクトリに保存 +- ソースファイルはメインディレクトリ内にあり +- 翻訳ファイルは `translations/{language-code}/` に配置 -### 手動翻訳改善の追加 +### 手動での翻訳改善追加 1. `translations/{language-code}/`内のファイルを見つける -2. 構造を維持しながら改善を行う -3. コード例が機能することを確認 -4. ローカライズされたクイズコンテンツをテスト +2. 構造を維持しつつ改善を加える +3. コード例が動作し続けることを確認 +4. ローカライズされたクイズコンテンツのテストを行う ### 翻訳メタデータ -翻訳ファイルにはメタデータヘッダーが含まれる: +翻訳ファイルにはメタデータヘッダーを含む： ```markdown +**免責事項**： +本書類はAI翻訳サービス［Co-op Translator］(https://github.com/Azure/co-op-translator)を使用して翻訳されました。正確性を期していますが、自動翻訳には誤りや不正確な部分が含まれる場合があります。原文の言語による文書が権威ある情報源とみなされるべきです。重要な情報については、専門の翻訳者による翻訳を推奨します。本翻訳の利用により生じた誤解や解釈違いについて、一切の責任を負いかねます。 + \ No newline at end of file diff --git a/translations/ja/README.md b/translations/ja/README.md index f958999b7..315cb998d 100644 --- a/translations/ja/README.md +++ b/translations/ja/README.md @@ -10,208 +10,206 @@ [![Microsoft Foundry Discord](https://dcbadge.limes.pink/api/server/nTYy5BXMWG)](https://discord.gg/nTYy5BXMWG) -# 初心者向けウェブ開発 - カリキュラム +# 初心者のためのWeb開発 - カリキュラム -Microsoft Cloud Advocatesによる12週間の包括的なコースで、ウェブ開発の基礎を学びましょう。全24レッスンでは、JavaScript、CSS、HTMLを、テラリウム、ブラウザ拡張機能、宇宙ゲームなどの実践プロジェクトを通じて掘り下げます。クイズ、ディスカッション、実践課題にも参加しましょう。効果的なプロジェクトベースの教育法でスキルを高め、知識の定着を最適化します。今日からコーディングの旅を始めましょう！ +Microsoft Cloud Advocatesによる12週間の包括的なコースでWeb開発の基本を学びましょう。全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 Actionsでサポート（自動かつ常に最新） -[アラビア語](../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' > ``` -> これにより、より高速なダウンロードでコースを完成させるために必要なすべてが手に入ります。 +> これでより速いダウンロードでコースを完了に必要なものがすべて揃います。 -**追加の翻訳言語が必要な場合は、[こちら](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) #### 🧑‍🎓 _学生ですか？_ -[**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_の新カリキュラムがリリースされました +### 📣 お知らせ - JavaScript向けGenerative AIの新カリキュラム公開 -新しい生成AIカリキュラムをお見逃しなく！ +私たちの新しいGenerative 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までのレッスン +- Generative AIと専用アプリで歴史上の人物と交流 +- 楽しく魅力的なストーリーでタイムトラベル！ ![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)などのテキストエディターを使いローカルのPC上で実行することを選べます。 #### リポジトリの作成 -作業を簡単に保存するため、ご自身のリポジトリコピーを作成することをお勧めします。ページ上部の**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)では、これらツールの様々なオプションを紹介し、最適なものを選べるよう案内します。 +このカリキュラムをローカルPCで実行するには、テキストエディター、ブラウザ、コマンドラインツールが必要です。最初のレッスン、[プログラミング言語とツールの紹介](../../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)も利用可能です。Visual Studio Codeはこちらからダウンロードできます：[Visual Studio Code](https://code.visualstudio.com/?WT.mc_id=academic-77807-sagibbon) -1. あなたのリポジトリをPCにクローンします。**Code**ボタンをクリックし、URLをコピーしてください。 + +1. ご自身のリポジトリをPCにクローンします。**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) を開き、以下のコマンドを実行します。`` は先ほどコピーした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で `` を置き換えて、次のコマンドを実行します： ```bash git clone ``` -2. Visual Studio Codeでフォルダを開きます。これは**ファイル** > **フォルダーを開く** をクリックして、クローンしたばかりのフォルダを選択することで行えます。 - +2. Visual Studio Codeでフォルダーを開きます。これは、**ファイル** > **フォルダーを開く** をクリックし、クローンしたばかりのフォルダーを選択することで行えます。 > 推奨されるVisual Studio Code拡張機能: > > * [Live Server](https://marketplace.visualstudio.com/items?itemName=ritwickdey.LiveServer&WT.mc_id=academic-77807-sagibbon) - Visual Studio Code内でHTMLページをプレビューするため -> * [Copilot](https://marketplace.visualstudio.com/items?itemName=GitHub.copilot&WT.mc_id=academic-77807-sagibbon) - コードを書くスピードを上げるために役立ちます +> * [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 | - -## 🏫 教育方針 - -当カリキュラムは2つの主要な教育原則に基づいて設計されています: -* プロジェクトベースの学習 +- [事後クイズ](https://ff-quizzes.netlify.app/web/) + +> **クイズについての注意**：すべてのクイズはQuiz-appフォルダーに収められており、合計48問それぞれ3問のクイズがあります。[こちら](https://ff-quizzes.netlify.app/web/)で利用可能で、クイズアプリはローカルで実行するかAzureにデプロイできます。詳しくは`quiz-app`フォルダー内の指示に従ってください。 + +## 🗃️ レッスン一覧 + +| | プロジェクト名 | 教えられる概念 | 学習目標 | 関連レッスン | 著者 | +| :-: | :------------------------------------------------------: | :--------------------------------------------------------------------: | ----------------------------------------------------------------------------------------------------------------------------------- | :----------------------------------------------------------------------------------------------------------------------------: | :---------------------: | +| 01 | はじめに | プログラミングとツールの基礎 | ほとんどのプログラミング言語の基本的な基盤と、プロの開発者が仕事で使用するソフトウェアについて学ぶ | [プログラミング言語とツールの紹介](./1-getting-started-lessons/1-intro-to-programming-languages/README.md) | Jasmine | +| 02 | はじめに | GitHubの基本、チームでの作業 | プロジェクトでGitHubを使う方法、コードベースでの共同作業の仕方 | [GitHubの紹介](./1-getting-started-lessons/2-github-basics/README.md) | Floor | +| 03 | はじめに | アクセシビリティ | ウェブアクセシビリティの基礎を学ぶ | [アクセシビリティの基本](./1-getting-started-lessons/3-accessibility/README.md) | Christopher | +| 04 | JS基礎 | JavaScriptのデータ型 | JavaScriptのデータ型の基礎 | [データ型](./2-js-basics/1-data-types/README.md) | Jasmine | +| 05 | JS基礎 | 関数とメソッド | アプリケーションのロジックフローを管理する関数とメソッドについて学ぶ | [関数とメソッド](./2-js-basics/2-functions-methods/README.md) | JasmineとChristopher | +| 06 | JS基礎 | JavaScriptでの条件分岐 | 条件分岐の手法を使ってコードの中で条件を作る方法を学ぶ | [条件分岐](./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) | ウェブアプリの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 | + +## 🏫 教育方法 + +当カリキュラムは次の2つの重要な教育理念に基づいて設計されています： +* プロジェクトベース学習 * 頻繁なクイズ -本プログラムではJavaScript、HTML、CSSの基礎ならびに現代のウェブ開発者が使用する最新のツールと技術を教えます。受講生はタイピングゲーム、バーチャルテラリウム、エコフレンドリーなブラウザ拡張機能、スペースインベーダースタイルゲーム、ビジネス向けバンキングアプリを作成することで実践的な経験を積めます。シリーズの終わりには、ウェブ開発のしっかりした理解を得られます。 - -> 🎓 Microsoft Learnの[Learn Path](https://docs.microsoft.com/learn/paths/web-development-101/?WT.mc_id=academic-77807-sagibbon)として、本カリキュラムの最初の数レッスンを受講することができます！ +このプログラムでは、JavaScript、HTML、およびCSSの基礎と、現代のウェブ開発者が使う最新ツールや技術を教えます。学生はタイピングゲーム、仮想テラリウム、環境に優しいブラウザ拡張、スペースインベーダースタイルのゲーム、ビジネス向けの銀行アプリの構築を通じて実践的な経験を積む機会があります。シリーズの最後には、ウェブ開発の確かな理解を得られます。 -内容がプロジェクトと連動していることで、学生の関心を引きつけ、概念の保持が増強されます。またJavaScriptの基礎を導入するスターターレッスンを複数作成し、さらに「[Beginners Series to: JavaScript](https://channel9.msdn.com/Series/Beginners-Series-to-JavaScript/?WT.mc_id=academic-77807-sagibbon)」の動画チュートリアルを組み合わせました。その著者の一部も本カリキュラムに貢献しています。 +> 🎓 これらの最初の数レッスンは、Microsoft Learnの[学習パス](https://docs.microsoft.com/learn/paths/web-development-101/?WT.mc_id=academic-77807-sagibbon)として受講できます！ -授業前の低リスクなクイズは学習意図を設定し、授業後のクイズはさらなる理解定着を促します。本カリキュラムは柔軟かつ楽しく受講でき、全体または一部のみ受講可能です。プロジェクトは小規模から始まり、12週間のサイクル終了時には複雑性が増します。 +内容をプロジェクトと連携させることで、学生の興味が高まり、概念の定着が促進されます。また、JavaScript基礎の入門レッスンを数多く用意し、[Beginners Series to: JavaScript](https://channel9.msdn.com/Series/Beginners-Series-to-JavaScript/?WT.mc_id=academic-77807-sagibbon) ビデオチュートリアルのいくつかと併用しました。このシリーズの著者の一部も当カリキュラムに貢献しています。 -JavaScriptフレームワークの導入は意図的に避け、ウェブ開発者に必要な基本スキルに集中しています。次のステップとしては、別の動画シリーズ「[Beginner Series to: Node.js](https://channel9.msdn.com/Series/Beginners-Series-to-Nodejs/?WT.mc_id=academic-77807-sagibbon)」でNode.jsの学習をおすすめします。 +さらに、授業前の低ストレスなクイズで学習の意図を設置し、授業後の2回目のクイズで理解の定着を図っています。このカリキュラムは柔軟かつ楽しく設計されており、全体を通しても一部だけでも受講可能です。プロジェクトは小規模から始まり、12週間のコース終了時には徐々に複雑になります。 -> [行動規範](CODE_OF_CONDUCT.md)と[貢献ガイドライン](CONTRIBUTING.md)をご覧ください。建設的なフィードバックをお待ちしています！ +JavaScriptのフレームワークにあえて触れず、ウェブ開発者として必要な基本スキルに集中していますが、このカリキュラムの次のステップとしては、別の動画シリーズ "[Beginner Series to: Node.js](https://channel9.msdn.com/Series/Beginners-Series-to-Nodejs/?WT.mc_id=academic-77807-sagibbon)" でNode.jsについて学ぶことをお勧めします。 +> 当プロジェクトの[行動規範](CODE_OF_CONDUCT.md)と[貢献ガイド](CONTRIBUTING.md)をご覧ください。建設的なフィードバックを歓迎します！ ## 🧭 オフラインアクセス -[Docsify](https://docsify.js.org/#/) を使って、このドキュメントをオフラインで閲覧できます。このリポジトリをフォークし、ローカルマシンに[Docsifyをインストール](https://docsify.js.org/#/quickstart)してください。次にこのリポジトリのルートフォルダで `docsify serve` を入力します。ウェブサイトはローカルホストのポート3000で配信されます：`localhost:3000`。 +[Docsify](https://docsify.js.org/#/) を使用してこのドキュメントをオフラインで実行できます。リポジトリをフォークし、ローカルマシンに [Docsifyをインストール](https://docsify.js.org/#/quickstart) し、このリポジトリのルートフォルダーで `docsify serve` と入力します。ウェブサイトはlocalhostのポート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)で入手できます。 - -## 🎒 他のコース -私たちのチームは他にもコースを制作しています！ぜひご覧ください： +## 🎒 その他のコース +私たちのチームは他のコースも制作しています！ぜひご覧ください： ### 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 +220,7 @@ JavaScriptフレームワークの導入は意図的に避け、ウェブ開発 --- -### ジェネレーティブ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) @@ -247,23 +245,23 @@ JavaScriptフレームワークの導入は意図的に避け、ウェブ開発 [![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) -## ヘルプを得る +## ヘルプを得るには -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)ファイルをご覧ください。 --- **免責事項**： -本書類はAI翻訳サービス「Co-op Translator」（https://github.com/Azure/co-op-translator）を使用して翻訳されました。正確性の向上に努めておりますが、自動翻訳には誤りや不正確な箇所が含まれる可能性があります。正式な内容については原文書を権威ある情報源としてご参照ください。重要な情報に関しては、専門の人間による翻訳を推奨いたします。本翻訳の利用により生じたいかなる誤解や解釈違いについても、当方は一切責任を負いかねます。 +本書類はAI翻訳サービス「Co-op Translator」（https://github.com/Azure/co-op-translator）を使用して翻訳されています。正確性には努めておりますが、自動翻訳には誤りや不正確な部分が含まれる可能性があることをご了承ください。原文が正式な内容の根拠となります。重要な情報については、専門の翻訳者による翻訳を推奨します。本翻訳の利用により生じた誤解や解釈の相違について、当方は一切責任を負いかねます。 \ No newline at end of file diff --git a/translations/zh-HK/.co-op-translator.json b/translations/zh-HK/.co-op-translator.json index 093d2a030..cee83d95a 100644 --- a/translations/zh-HK/.co-op-translator.json +++ b/translations/zh-HK/.co-op-translator.json @@ -493,7 +493,7 @@ }, "AGENTS.md": { "original_hash": "a362efd06d64d4134a0cfe8515a86d34", - "translation_date": "2025-10-03T11:17:40+00:00", + "translation_date": "2026-02-06T07:53:18+00:00", "source_file": "AGENTS.md", "language_code": "zh-HK" }, @@ -516,8 +516,8 @@ "language_code": "zh-HK" }, "README.md": { - "original_hash": "490c83786552d7fab6390991517bef09", - "translation_date": "2026-01-29T17:50:10+00:00", + "original_hash": "805cd399757df19e886e86f0891a1374", + "translation_date": "2026-02-06T07:47:33+00:00", "source_file": "README.md", "language_code": "zh-HK" }, diff --git a/translations/zh-HK/AGENTS.md b/translations/zh-HK/AGENTS.md index fc6b93e70..581ffca7a 100644 --- a/translations/zh-HK/AGENTS.md +++ b/translations/zh-HK/AGENTS.md @@ -1,282 +1,282 @@ # AGENTS.md -## 項目概述 +## 專案概述 -這是一個教育課程資源庫，用於教授初學者網頁開發的基礎知識。課程是一個由 Microsoft Cloud Advocates 開發的全面 12 週課程，包含 24 節實踐課程，涵蓋 JavaScript、CSS 和 HTML。 +這是一個用於教導初學者網頁開發基礎的教育課程資源庫。此課程是一個完整的為期12週的課程，由 Microsoft Cloud Advocates 開發，包含24個實作課程，涵蓋 JavaScript、CSS 和 HTML。 ### 主要組成部分 -- **教育內容**：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 專案） ### 架構 - 以課程為基礎的教育資源庫 -- 每個課程文件夾包含 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） +### 銀行專案 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 格式化 ``` -### 瀏覽器擴展項目 +### 瀏覽器擴充功能專案 ```bash cd 5-browser-extension/solution npm install -# Follow browser-specific extension loading instructions +# 遵循瀏覽器特定的擴充功能載入指示 ``` -### 太空遊戲項目 +### 太空遊戲專案 ```bash cd 6-space-game/solution npm install -# Open index.html in browser or use Live Server +# 在瀏覽器中打開 index.html 或使用 Live Server ``` -### 聊天項目（Python 後端） +### 聊天專案（Python 後端） ```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. **創建新分支**進行修改 -4. 修改課程內容或代碼示例 -5. 在相關項目目錄中測試代碼修改 -6. 按照貢獻指南提交 Pull Request +1. **分支複製（fork）** 本資源庫至你的 GitHub 帳號 +2. **本地複製（clone）** 你的分支 +3. **建立新分支** 進行修改 +4. 編輯課程內容或程式碼範例 +5. 在相關專案資料夾測試程式碼變更 +6. 按貢獻指南提交拉取請求（pull request） -### 對於學習者 +### 學習者指南 -1. Fork 或克隆資源庫 -2. 按順序進入課程目錄 -3. 閱讀每節課的 README 文件 -4. 完成課前測驗：https://ff-quizzes.netlify.app/web/ -5. 在課程文件夾中完成代碼示例 +1. Fork 或 Clone 資源庫 +2. 依序瀏覽課程目錄 +3. 閱讀每課的 README 檔案 +4. 完成 https://ff-quizzes.netlify.app/web/ 的課前測驗 +5. 操作課程資料夾中的程式碼範例 6. 完成作業和挑戰 -7. 完成課後測驗 +7. 參加課後測驗 -### 實時開發 +### 即時開發 -- **文檔**：在根目錄運行 `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` +- **專案**：使用 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 鏈接有效 -- 在瀏覽器或 Node.js 中測試代碼示例 -- 確保翻譯保持正確結構 +- 於含 package.json 資料夾執行 `npm run lint` +- 確認 markdown 連結有效 +- 在瀏覽器或 Node.js 測試程式碼範例 +- 檢查翻譯是否保有原有結構 -## 代碼風格指南 +## 程式碼風格指南 ### JavaScript - 使用現代 ES6+ 語法 -- 遵循項目提供的標準 ESLint 配置 -- 使用有意義的變量和函數名稱以便教育清晰 -- 添加注釋解釋概念以幫助學習者 -- 在配置的地方使用 Prettier 格式化 +- 遵循專案中的標準 ESLint 設定 +- 為教育清晰使用具意義的變數、函式名稱 +- 添加注釋說明概念，方便學習 +- 在配置 Prettier 的地方使用格式化 ### HTML/CSS -- 使用語義化的 HTML5 元素 -- 遵循響應式設計原則 -- 清晰的類名命名規範 -- 添加注釋解釋 CSS 技術以幫助學習者 +- 使用語義化 HTML5 元素 +- 採用響應式設計原則 +- 明確的類別命名規範 +- 添加解釋 CSS 技巧的注釋 ### Python - 遵循 PEP 8 風格指南 -- 提供清晰的教育代碼示例 -- 在有助於學習的地方添加類型提示 +- 清晰且具有教育意義的程式碼範例 +- 在有助於學習處添加型別提示 -### Markdown 文檔 +### 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 Static Web Apps） +### 測驗應用程式部署（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` +- **應用程式路徑**：`/quiz-app` +- **輸出路徑**：`dist` +- **工作流程**：`.github/workflows/azure-static-web-apps-ashy-river-0debb7803.yml` -### 文檔 PDF 生成 +### 文件 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 文檔 +### 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] 修正溫室專案錯字` +- `[Translation] 新增第 5 课西班牙語翻譯` +- `[Docs] 更新設定說明` -### 必需檢查 +### 必要檢查 提交 PR 前： -1. **代碼質量**： - - 在受影響的項目目錄運行 `npm run lint` - - 修復所有 lint 錯誤和警告 +1. **程式碼品質**： + - 於受影響的專案資料夾執行 `npm run lint` + - 修正所有錯誤與警告 -2. **構建驗證**： - - 如果適用，運行 `npm run build` - - 確保無構建錯誤 +2. **建置驗證**： + - 如適用執行 `npm run build` + - 確認無建置錯誤 -3. **鏈接驗證**： - - 測試所有 Markdown 鏈接 - - 確保圖片引用正常 +3. **連結驗證**： + - 測試所有 markdown 連結 + - 確保圖片引用正確 -4. **內容審核**： - - 校對拼寫和語法 - - 確保代碼示例正確且具有教育性 - - 確保翻譯保持原意 +4. **內容審查**： + - 校對拼寫及文法 + - 保證程式碼範例正確且具教育意義 + - 確認翻譯維持原意 -### 貢獻要求 +### 貢獻規範 -- 同意 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 描述中如適用請附上相關議題編號 ### 審核流程 -- 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 ``` -## 調試和故障排除 +## 除錯與故障排除 ### 常見問題 -**測驗應用無法啟動**： -- 檢查 Node.js 版本（建議 v14+） -- 刪除 `node_modules` 和 `package-lock.json`，重新運行 `npm install` -- 檢查端口衝突（默認：Vite 使用端口 5173） +**測驗應用程式無法啟動**： +- 檢查 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` 存在 -### 開發環境提示 +### 開發環境建議 -- 對於 HTML 項目，使用 VS Code 和 Live Server 擴展 -- 安裝 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多種語言的翻譯檔案會造成完整複製資料庫龐大 +- 若只處理內容，可使用淺複製：`git clone --depth 1` +- 在處理英文內容時排除翻譯資料夾搜尋 +- 初次執行建置流程可能較慢（npm install、Vite build） ## 安全考量 -### 環境變量 +### 環境變數 -- API 密鑰絕不可提交到資源庫 -- 使用 `.env` 文件（已在 `.gitignore` 中） -- 在項目 README 中記錄所需的環境變量 +- API 密鑰嚴禁提交至資源庫 +- 使用 `.env` 檔（已加入 `.gitignore`） +- 於專案 README 中記錄必要環境變數 -### Python 項目 +### Python 專案 - 使用虛擬環境：`python -m venv venv` -- 保持依賴更新 -- GitHub 令牌應具有最低必要權限 +- 保持依賴套件更新 +- GitHub 訪問代幣應具備最小必要權限 -### GitHub Models 訪問 +### GitHub Models 存取 -- 需要個人訪問令牌（PAT）用於 GitHub Models -- 令牌應存儲為環境變量 -- 絕不可提交令牌或憑據 +- 需要個人存取權杖（PAT） +- 代幣應妥善存放為環境變數 +- 禁止提交代幣或憑證 ## 附加說明 ### 目標受眾 -- 完全初學者的網頁開發 -- 學生和自學者 -- 在課堂中使用課程的教師 -- 內容設計以提高可訪問性和逐步技能提升 +- 網頁開發完全初學者 +- 學生及自學者 +- 教師用於班級教學 +- 內容設計兼顧無障礙與逐步技能養成 ### 教育理念 -- 基於項目的學習方法 -- 頻繁的知識檢查（測驗） -- 實踐編碼練習 -- 真實世界應用示例 -- 在框架之前專注於基礎知識 +- 專案導向學習 +- 經常性知識檢核（測驗） +- 實作程式練習 +- 真實世界應用範例 +- 聚焦基礎，再談框架 ### 資源庫維護 -- 活躍的學習者和貢獻者社區 -- 定期更新依賴和內容 -- 維護者監控問題和討論 -- 通過 GitHub Actions 自動更新翻譯 +- 活躍的學習者與貢獻者社群 +- 定期更新依賴套件和內容 +- 維護者監控議題與討論 +- 翻譯更新自動化透過 GitHub Actions ### 相關資源 -- [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、數據科學、機器學習、物聯網課程 -### 處理特定項目 +### 專案操作說明 -有關單個項目的詳細說明，請參閱以下目錄中的 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 聊天助手項目 +個別專案詳細指南請參考 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 結構 -雖然不是傳統的 Monorepo，此資源庫包含多個獨立項目： -- 每節課程是自包含的 -- 項目之間不共享依賴 -- 可單獨處理項目而不影響其他項目 -- 克隆整個資源庫以獲得完整課程體驗 +此資源庫非傳統 monorepo，但包含多個獨立專案： +- 每課程獨自成章 +- 專案不共用依賴 +- 可獨立操作各專案不互相影響 +- 如需完整課程體驗請 clone 整個資源庫 --- + **免責聲明**： -此文件使用 AI 翻譯服務 [Co-op Translator](https://github.com/Azure/co-op-translator) 進行翻譯。我們致力於提供準確的翻譯，但請注意，自動翻譯可能包含錯誤或不準確之處。應以原文文件為權威來源。如涉及關鍵資訊，建議尋求專業人工翻譯。我們對因使用此翻譯而引起的任何誤解或誤釋概不負責。 \ No newline at end of file +本文件使用 AI 翻譯服務 [Co-op Translator](https://github.com/Azure/co-op-translator) 進行翻譯。雖然我們致力於準確性，但請注意，自動翻譯可能包含錯誤或不準確之處。原始文件的母語版本應被視為權威來源。對於重要資訊，建議尋求專業人工翻譯。我們對因使用本翻譯而引起的任何誤解或誤釋不承擔任何責任。 + \ No newline at end of file diff --git a/translations/zh-HK/README.md b/translations/zh-HK/README.md index 02c76640f..222f23384 100644 --- a/translations/zh-HK/README.md +++ b/translations/zh-HK/README.md @@ -10,197 +10,197 @@ [![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` -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 支援（自動且持續最新） -[阿拉伯語](../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' > ``` -> 這可讓你更快下載，並取得完成課程所需的所有資源。 +> 這樣可以快速取得課程所需的全部內容，下載速度更快。 -**若您希望加入其他支援語言，請參考[此處](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 Challenge 🚀」，體驗使用 GitHub Copilot 與 Agent 模式完成的挑戰。如果你沒用過 Agent 模式，它不只能生成人工智慧文字，也能建立與編輯檔案、執行命令等等。 +已新增挑戰，請在大多數章節中尋找 “GitHub Copilot Agent Challenge 🚀”。這是運用 GitHub Copilot 和 Agent 模式的新挑戰。如果您從未使用過 Agent 模式，它不僅能生成文本，還能建立與編輯檔案、執行指令等功能。 -### 📣 公告 - _新增使用生成式 AI 的專案_ +### 📣 公告 - _使用生成式 AI 建立的新專案_ -最新 AI 助理專案已上線，請查看此[專案](./9-chat-project/README.md) +剛新增 AI 助手專案，歡迎查看 [專案](./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)**，每堂課先做課前測驗，接著閱讀課程內容，完成各項活動，再透過課後測驗檢視學習成果。 +## 🌱 入門指南 -為提升學習成效，請與同儕合作完成專案！我們鼓勵在[討論區](https://github.com/microsoft/Web-Dev-For-Beginners/discussions)交流，由我們的管理團隊隨時回答問題。 +> **教師們**，我們提供了 [使用本課程的一些建議](for-teachers.md)。歡迎在 [討論區](https://github.com/microsoft/Web-Dev-For-Beginners/discussions/categories/teacher-corner) 留下寶貴意見！ -建議進一步深造者，探索[Microsoft Learn](https://learn.microsoft.com/users/wirelesslife/collections/p1ddcy5jwy0jkm?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) 交流，我們的版主團隊將隨時回答你的問題。 -本課程已備妥開發環境！開始時可選擇在 [Codespace](https://github.com/features/codespaces/)（瀏覽器運行、免安裝環境）或本地電腦使用文字編輯器，例如 [Visual Studio Code](https://code.visualstudio.com/?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) 本機執行。 #### 建立你的儲存庫 -為方便儲存作品，我們建議你建立本儲存庫的個人副本。點擊頁面頂部的 **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/zh-HK/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) 功能。你可以從[這裡](https://code.visualstudio.com/?WT.mc_id=academic-77807-sagibbon)下載 Visual Studio Code。 +我們推薦使用有內建 [終端機](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)。 -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)，並執行以下命令，將 `` 替換成你剛剛複製的 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)，並運行以下指令，將 `` 替換成剛剛複製的 URL： ```bash git clone ``` -2. 在 Visual Studio Code 中打開資料夾。你可以點擊 **File** > **Open Folder** 並選擇你剛剛 clone 的資料夾。 - +2. 在 Visual Studio Code 中開啟資料夾。你可以點擊 **File** > **Open Folder**，然後選擇剛剛克隆的資料夾。 > 推薦的 Visual Studio Code 擴充功能： > -> * [Live Server](https://marketplace.visualstudio.com/items?itemName=ritwickdey.LiveServer&WT.mc_id=academic-77807-sagibbon) - 在 Visual Studio Code 中預覽 HTML 頁面 +> * [Live Server](https://marketplace.visualstudio.com/items?itemName=ritwickdey.LiveServer&WT.mc_id=academic-77807-sagibbon) - 在 Visual Studio Code 內預覽 HTML 頁面 > * [Copilot](https://marketplace.visualstudio.com/items?itemName=GitHub.copilot&WT.mc_id=academic-77807-sagibbon) - 幫助你更快寫程式碼 ## 📂 每堂課包含： -- 選擇性的手繪筆記 -- 選擇性的補充影片 +- 選修的手繪筆記 +- 選修的補充影片 - 課前熱身小測驗 -- 課文 -- 專案導向課程中，逐步指導如何建立專案 -- 知識檢測 -- 挑戰 -- 補充閱讀材料 +- 文字課程內容 +- 針對專案導向課程，如何一步步建立專案的指導 +- 知識檢核 +- 挑戰題 +- 補充閱讀資料 - 作業 - [課後小測驗](https://ff-quizzes.netlify.app/web/) -> **有關小測驗的說明**：所有小測驗均包含在 Quiz-app 資料夾中，共 48 個小測驗，每個小測驗三題。它們可以在[此處](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 遊戲開發 | 學習使用類別與組成繼承以及發布/訂閱模式，為遊戲開發做準備 | [進階遊戲開發入門](./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 | +| | 專案名稱 | 教授概念 | 學習目標 | 相關課程 | 作者 | +| :-: | :------------------------------------------------------: | :--------------------------------------------------------------------: | ----------------------------------------------------------------------------------------------------------------------------------- | :----------------------------------------------------------------------------------------------------------------------------: | :---------------------: | +| 01 | 入門入手 | 程式設計與工具基礎介紹 | 了解大多數程式語言的基本原理以及協助專業開發者工作的軟體工具 | [程式設計語言與工具入門](./1-getting-started-lessons/1-intro-to-programming-languages/README.md) | Jasmine | +| 02 | 入門入手 | GitHub 基礎與團隊協作 | 如何在專案中使用 GitHub，如何與他人協同維護程式碼庫 | [GitHub 入門](./1-getting-started-lessons/2-github-basics/README.md) | Floor | +| 03 | 入門入手 | 無障礙 | 了解網頁無障礙設計的基本概念 | [無障礙基礎](./1-getting-started-lessons/3-accessibility/README.md) | Christopher | +| 04 | JS 基礎 | JavaScript 資料型別 | JavaScript 資料型別基礎 | [資料型別](./2-js-basics/1-data-types/README.md) | Jasmine | +| 05 | JS 基礎 | 函式與方法 | 了解函式與方法以管理應用程式的邏輯流 | [函式與方法](./2-js-basics/2-functions-methods/README.md) | Jasmine 和 Christopher | +| 06 | JS 基礎 | 使用 JS 進行決策 | 了解如何在程式碼中使用決策控制結構 | [決策](./2-js-basics/3-making-decisions/README.md) | Jasmine | +| 07 | JS 基礎 | 陣列與迴圈 | 使用 JavaScript 陣列和迴圈操作資料 | [陣列與迴圈](./2-js-basics/4-arrays-loops/README.md) | Jasmine | +| 08 | [Terrarium](./3-terrarium/solution/README.md) | HTML 實作 | 建構 HTML 來設計線上 terrarium，專注於版面配置 | [HTML 入門](./3-terrarium/1-intro-to-html/README.md) | Jen | +| 09 | [Terrarium](./3-terrarium/solution/README.md) | CSS 實作 | 建構 CSS 來美化線上 terrarium，著重於 CSS 基礎並讓頁面響應式 | [CSS 入門](./3-terrarium/2-intro-to-css/README.md) | Jen | +| 10 | [Terrarium](./3-terrarium/solution/README.md) | JavaScript 括號、DOM 操作 | 建構 JavaScript 讓 terrarium 具備拖曳功能，著重於閉包與 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 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) | 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 | [瀏覽器/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 的基礎，並涵蓋現今 Web 開發者使用的最新工具與技巧。學生將有機會通過製作打字遊戲、虛擬 terrarium、生態友善的瀏覽器擴充功能、太空入侵者風格遊戲，以及企業銀行應用，來獲得實務經驗。系列課程結束時，學生將擁有紮實的網頁開發概念。 -> 🎓 你可以將本課程的前幾堂課當作 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 初學者系列](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/#/) 離線瀏覽這份文件。將此 repo fork，並於本機安裝 [Docsify](https://docsify.js.org/#/quickstart)，接著在此 repo 根目錄輸入 `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)下載。 ## 🎒 其他課程 我們團隊還製作其他課程！快來看看： @@ -209,7 +209,7 @@ ### 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 @@ -247,21 +247,21 @@ ## 尋求幫助 -如果你遇到困難或對建立 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) 文件。 --- -**免責聲明**： -本文件由 AI 翻譯服務 [Co-op Translator](https://github.com/Azure/co-op-translator) 所翻譯。儘管我們致力於提供準確的翻譯，但請注意，自動翻譯可能會包含錯誤或不準確之處。原始語言版本的文件應視為權威來源。如涉及重要資訊，建議進行專業人工翻譯。我們對因使用此翻譯而引起的任何誤解或誤釋概不負責。 +**免責聲明**： +本文件由 AI 翻譯服務 [Co-op Translator](https://github.com/Azure/co-op-translator) 翻譯而成。儘管我們致力於確保準確性，請注意自動翻譯可能包含錯誤或不準確之處。原始語言版本的文件應被視為權威來源。對於重要資訊，建議使用專業人工翻譯。對於因使用本翻譯而引起的任何誤解或誤譯，我們概不負責。 \ No newline at end of file diff --git a/translations/zh-TW/.co-op-translator.json b/translations/zh-TW/.co-op-translator.json index 42cf634a5..5a3f7f3a6 100644 --- a/translations/zh-TW/.co-op-translator.json +++ b/translations/zh-TW/.co-op-translator.json @@ -493,7 +493,7 @@ }, "AGENTS.md": { "original_hash": "a362efd06d64d4134a0cfe8515a86d34", - "translation_date": "2025-10-03T11:18:15+00:00", + "translation_date": "2026-02-06T07:54:41+00:00", "source_file": "AGENTS.md", "language_code": "zh-TW" }, @@ -516,8 +516,8 @@ "language_code": "zh-TW" }, "README.md": { - "original_hash": "490c83786552d7fab6390991517bef09", - "translation_date": "2026-01-29T17:52:02+00:00", + "original_hash": "805cd399757df19e886e86f0891a1374", + "translation_date": "2026-02-06T07:49:37+00:00", "source_file": "README.md", "language_code": "zh-TW" }, diff --git a/translations/zh-TW/AGENTS.md b/translations/zh-TW/AGENTS.md index 8d86f7d0b..6d43280ec 100644 --- a/translations/zh-TW/AGENTS.md +++ b/translations/zh-TW/AGENTS.md @@ -1,62 +1,62 @@ # AGENTS.md -## 專案概述 +## 專案概覽 -這是一個教育課程的資源庫，旨在教導初學者網頁開發的基礎知識。課程為期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堂結構化課程，以專案為基礎的模組安排 +- **實務專案**：溫室生態缸、打字遊戲、瀏覽器擴充套件、太空遊戲、銀行應用程式、程式碼編輯器及 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） +### 銀行專案 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 格式化 ``` -### 瀏覽器擴充功能專案 +### 瀏覽器擴充套件專案 ```bash cd 5-browser-extension/solution npm install -# Follow browser-specific extension loading instructions +# 遵循瀏覽器特定的擴充功能載入指示 ``` ### 太空遊戲專案 @@ -64,45 +64,45 @@ npm install ```bash cd 6-space-game/solution npm install -# Open index.html in browser or use Live Server +# 在瀏覽器中打開 index.html 或使用 Live Server ``` -### 聊天專案（Python 後端） +### 聊天專案 (Python 後端) ```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. **建立新分支**以進行修改 -4. 修改課程內容或程式碼範例 -5. 在相關專案目錄中測試程式碼修改 -6. 根據貢獻指南提交 Pull Request +1. **Fork 此資源庫** 到你的 GitHub 帳號 +2. **在本地端 clone 你的 fork** +3. **建立新的分支** 來做修改 +4. 修改課程內容或者範例程式 +5. 在相關專案目錄測試程式碼 +6. 按照貢獻指南提交 Pull Requests -### 對於學習者 +### 給學習者 -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） +- **文件**：在根目錄執行 `docsify serve` （預設3000埠） - **測驗應用程式**：在 quiz-app 目錄執行 `npm run dev` -- **專案**：使用 VS Code 的 Live Server 擴充功能開啟 HTML 專案 -- **API 專案**：在相關 API 目錄執行 `npm start` +- **專案**：使用 VS Code 的 Live Server 延伸套件開啟 HTML 專案 +- **API 專案**：在對應 API 目錄執行 `npm start` ## 測試指引 @@ -110,173 +110,173 @@ python api.py ```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 連結有效 -- 在瀏覽器或 Node.js 中測試程式碼範例 -- 確保翻譯保持正確結構 +- 在有 package.json 的目錄執行 `npm run lint` +- 確認 markdown 連結有效 +- 在瀏覽器或 Node.js 中測試範例程式 +- 確保翻譯內容維持正確結構 -## 程式碼風格指南 +## 程式碼風格指引 ### JavaScript - 使用現代 ES6+ 語法 -- 遵循專案提供的標準 ESLint 配置 -- 使用有意義的變數和函數名稱，便於教育 -- 添加註解以解釋概念，方便學習者理解 -- 在配置的地方使用 Prettier 格式化 +- 遵循專案所提供的 ESLint 標準設定 +- 使用具意義的變數與函式名稱以利教學 +- 添加說明概念的註解協助學習者 +- 在配置 Prettier 的環境下格式化程式碼 ### HTML/CSS -- 使用語義化的 HTML5 元素 -- 遵循響應式設計原則 -- 清晰的類名命名規範 -- 添加註解以解釋 CSS 技術，方便學習者理解 +- 使用語意化的 HTML5 元素 +- 採用響應式設計原則 +- 採用清晰的類別命名規則 +- 加入說明 CSS 技術的註解幫助學習者理解 ### Python -- 遵循 PEP 8 風格指南 -- 提供清晰的教育性程式碼範例 -- 在需要時添加型別提示，便於學習 +- 遵守 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 靜態網頁應用程式部署： +測驗應用程式已設定用於 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` +- **輸出目錄**：`dist` - **工作流程**：`.github/workflows/azure-static-web-apps-ashy-river-0debb7803.yml` -### 文件 PDF 生成 +### 文件 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 指南 +## Pull Request 準則 ### 標題格式 -使用清晰、描述性的標題，指明修改範圍： -- `[Quiz-app] 為課程 X 添加新測驗` -- `[Lesson-3] 修正植物園專案中的拼寫錯誤` -- `[Translation] 添加課程 5 的西班牙語翻譯` -- `[Docs] 更新設置指令` +請用清楚描述更動範圍的標題： +- `[Quiz-app] 新增第 X 課測驗` +- `[Lesson-3] 修正溫室專案錯字` +- `[Translation] 新增第 5 課西班牙語翻譯` +- `[Docs] 更新安裝說明` -### 必要檢查 +### 必須檢查事項 提交 PR 前： 1. **程式碼品質**： - - 在受影響的專案目錄執行 `npm run lint` - - 修正所有 lint 錯誤和警告 + - 在影響的專案目錄執行 `npm run lint` + - 修正所有錯誤及警告 2. **建置驗證**： - - 如果適用，執行 `npm run build` - - 確保無建置錯誤 + - 如適用，執行 `npm run build` + - 確保建置無錯誤 3. **連結驗證**： - - 測試所有 Markdown 連結 - - 確認圖片引用正常運作 + - 測試所有 markdown 連結 + - 確認圖片路徑有效 -4. **內容審查**： - - 校對拼寫和語法 - - 確保程式碼範例正確且具有教育性 - - 確認翻譯保持原意 +4. **內容審核**： + - 校對拼字及文法 + - 確認範例程式正確且具教學性 + - 確保翻譯保持原意 ### 貢獻要求 -- 同意 Microsoft CLA（首次 PR 時自動檢查） -- 遵循 [Microsoft 開源行為準則](https://opensource.microsoft.com/codeofconduct/) -- 詳細指南請參閱 [CONTRIBUTING.md](./CONTRIBUTING.md) -- 如果適用，請在 PR 描述中引用問題編號 +- 同意微軟 CLA（第一次 PR 會自動檢查） +- 遵守 [Microsoft 開源行為準則](https://opensource.microsoft.com/codeofconduct/) +- 詳細指引請見 [CONTRIBUTING.md](./CONTRIBUTING.md) +- 如適用，於 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 ``` -## 偵錯與故障排除 +## 除錯與問題排解 ### 常見問題 **測驗應用程式無法啟動**： -- 檢查 Node.js 版本（建議 v14+） +- 檢查 Node.js 版本（建議 v14 以上） - 刪除 `node_modules` 和 `package-lock.json`，重新執行 `npm install` -- 檢查埠衝突（預設：Vite 使用埠 5173） +- 檢查埠號衝突（Vite 預設使用 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 無法提供文件服務**： - 全域安裝 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種語言翻譯檔案多，完整克隆相當龐大 +- 若只工作於內容可用淺度克隆：`git clone --depth 1` +- 編輯英文內容時可排除翻譯檔搜尋 +- 初次執行建置流程可能較慢（npm 安裝、Vite 建置） ## 安全考量 ### 環境變數 -- 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) +- 將 token 儲存在環境變數 +- 切勿提交 token 或認證資訊 -## 附加說明 +## 附註 -### 目標受眾 +### 目標對象 -- 完全初學者的網頁開發學習者 -- 學生和自學者 -- 在課堂中使用課程的教師 -- 內容設計以提高可訪問性和逐步技能建設 +- 完全初學網頁開發者 +- 學生與自學者 +- 教師用於課堂教學 +- 內容設計兼顧可及性與循序漸進培養技能 -### 教育理念 +### 教育哲學 -- 基於專案的學習方法 -- 頻繁的知識檢查（測驗） -- 實作程式碼練習 +- 專案導向學習 +- 頻繁的知識檢核（測驗） +- 實務程式練習 - 真實世界應用範例 -- 在框架之前專注於基礎知識 +- 先著重基礎，再談框架 ### 資源庫維護 -- 活躍的學習者和貢獻者社群 -- 定期更新依賴和內容 -- 維護者監控問題和討論 -- 翻譯更新透過 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、資料科學、機器學習、物聯網課程可用 +- [Student Hub 資源](https://docs.microsoft.com/learn/student-hub/) +- 推薦學習者使用 [GitHub Copilot](https://marketplace.visualstudio.com/items?itemName=GitHub.copilot) +- 其他課程：生成式 AI、資料科學、機器學習、物聯網課程可參考 -### 操作特定專案 +### 操作特定專案說明 -有關個別專案的詳細指令，請參閱以下目錄中的 README 文件： +各專案詳細說明請參閱對應 README： - `quiz-app/README.md` - Vue 3 測驗應用程式 -- `7-bank-project/README.md` - 帶有身份驗證的銀行應用程式 -- `5-browser-extension/README.md` - 瀏覽器擴充功能開發 -- `6-space-game/README.md` - 基於 Canvas 的遊戲開發 +- `7-bank-project/README.md` - 包含驗證的銀行應用程式 +- `5-browser-extension/README.md` - 瀏覽器擴充套件開發 +- `6-space-game/README.md` - 基於 canvas 的遊戲開發 - `9-chat-project/README.md` - AI 聊天助理專案 -### Monorepo 結構 +### 多專案資源庫結構 -雖然不是傳統的 Monorepo，此資源庫包含多個獨立專案： -- 每個課程都是自包含的 -- 專案之間不共享依賴 -- 可單獨操作個別專案而不影響其他專案 -- 克隆整個資源庫以獲得完整課程體驗 +雖非傳統 monorepo，內含多個獨立專案： +- 每堂課獨立完整 +- 專案間無依賴共享 +- 可獨立作業不影響其他專案 +- 若需完整課程體驗可整個資源庫 clone --- + **免責聲明**： -本文件使用 AI 翻譯服務 [Co-op Translator](https://github.com/Azure/co-op-translator) 進行翻譯。我們致力於提供準確的翻譯，但請注意，自動翻譯可能包含錯誤或不準確之處。應以原始語言的文件作為權威來源。對於關鍵資訊，建議尋求專業人工翻譯。我們對於因使用本翻譯而引起的任何誤解或錯誤解讀概不負責。 \ No newline at end of file +本文件係使用 AI 翻譯服務 [Co-op Translator](https://github.com/Azure/co-op-translator) 進行翻譯。雖然我們力求準確，但請注意自動翻譯可能包含錯誤或不精確之處。原始文件之母語版本應視為權威來源。對於重要資訊，建議採用專業人工翻譯。我們不對因使用本翻譯而造成之任何誤解或誤譯負責。 + \ No newline at end of file diff --git a/translations/zh-TW/README.md b/translations/zh-TW/README.md index f693d56ad..69f873b6b 100644 --- a/translations/zh-TW/README.md +++ b/translations/zh-TW/README.md @@ -10,209 +10,207 @@ [![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. **分叉此儲存庫**：點擊 [![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 支援（自動且隨時更新） -[阿拉伯語](../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) | [緬甸語](../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) -> **偏好本地複製？** +> **想本機複製？** -> 此儲存庫包含超過 50 種語言翻譯，會顯著增加下載大小。若要不包含翻譯進行複製，請使用 sparse checkout： +> 本儲存庫含有 50 多種語言的翻譯，會顯著增加下載大小。若想不含翻譯內容複製，請使用稀疏檢出： > ```bash > git clone --filter=blob:none --sparse https://github.com/microsoft/Web-Dev-For-Beginners.git > cd Web-Dev-For-Beginners > git sparse-checkout set --no-cone '/*' '!translations' '!translated_images' > ``` -> 這樣你就可以更快速下載，並擁有完成課程所需的所有內容。 +> 如此可快速下載，且含有完成課程所需的全部內容。 -**如果你希望新增支援其他翻譯語言，列表請參考 [這裡](https://github.com/Azure/co-op-translator/blob/main/getting_started/supported-languages.md)** +**若想新增其他翻譯語言，請參考此列表 [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 與代理模式完成的新挑戰。如果你之前沒用過代理模式，它不僅能生成文字，也可以建立與編輯檔案、執行指令等功能。 +已新增挑戰，請於各章節尋找標題「GitHub Copilot Agent Challenge 🚀」。這是使用 GitHub Copilot Agent 模式完成的新挑戰。如果你還沒用過 Agent 模式，它不僅能產生文字，還能創建及編輯檔案、執行命令等功能。 -### 📣 公告 - _新增用生成式 AI 建置的專案_ +### 📣 公告 - _新增以生成式 AI 建置的專案_ -新 AI 助手專案剛加入，詳見 [專案](./9-chat-project/README.md) +剛新增 AI 助理專案，請查看 [project](./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 的所有課程。 +- 使用 GenAI 與我們的伴隨應用與歷史人物互動。 +- 趣味且引人入勝的故事敘述，一起穿越時空旅行！ ![character](../../translated_images/zh-TW/character.5c0dd8e067ffd693.webp) -每堂課都包含一個作業、知識檢核和挑戰，幫助你學習以下主題： -- 提示詞與提示詞工程 -- 文字與圖像應用程式生成 -- 搜尋應用程式 +每堂課包含作業、知識檢測與挑戰，引導你學習： +-_prompting_ 及提示工程 +- 文字與圖像應用生成 +- 搜尋應用 請造訪 [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 帳號建立新儲存庫，裡面包含課程內容。 +#### 建立您的儲存庫 +為了方便保存您的工作，建議您建立此儲存庫的個人副本。可點擊頁面頂端的 **用此範本建立** 按鈕，即可在您的 GitHub 帳號中建立一份課程副本。 -操作步驟如下： -1. **分叉（Fork）此儲存庫**：點擊本頁右上方的「Fork」按鈕。 -2. **複製（Clone）此儲存庫**： `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 執行課程 -在你建立的個人儲存庫中，點擊 **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)。您可以在此下載 Visual Studio Code：[連結](https://code.visualstudio.com/?WT.mc_id=academic-77807-sagibbon)。 - -1. 將你的儲存庫複製到本機。你可以點擊 **Code** 按鈕並複製 URL： +1. 將儲存庫複製到本機電腦。可點選 **Code** 按鈕，並複製網址： [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)，並執行以下指令，將 `` 替換成你剛才複製的 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： ```bash git clone ``` -2. 在 Visual Studio Code 中打開資料夾。你可以點選 **File** > **Open Folder**，然後選擇剛剛克隆的資料夾。 +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 資料夾內，共有 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 | 起步導覽 | 程式設計與工具的介紹 | 了解大部分程式語言的基本架構以及幫助專業開發者完成工作的軟體工具 | [程式語言與工具介紹](./1-getting-started-lessons/1-intro-to-programming-languages/README.md) | Jasmine | +| 02 | 起步導覽 | GitHub 基礎與團隊合作 | 如何在專案中使用 GitHub，及如何與他人協作管理程式碼 | [GitHub 介紹](./1-getting-started-lessons/2-github-basics/README.md) | Floor | +| 03 | 起步導覽 | 無障礙設計 | 了解網頁無障礙設計的基礎 | [無障礙設計基礎](./1-getting-started-lessons/3-accessibility/README.md) | Christopher | +| 04 | JS 基礎 | JavaScript 資料型別 | JavaScript 資料型別的基礎 | [資料型別](./2-js-basics/1-data-types/README.md) | Jasmine | +| 05 | JS 基礎 | 函式與方法 | 了解函式與方法，管理應用程式邏輯流程 | [函式與方法](./2-js-basics/2-functions-methods/README.md) | Jasmine 和 Christopher | +| 06 | JS 基礎 | 使用 JS 製作條件判斷 | 學習如何在程式碼中建立條件判斷 | [製作條件判斷](./2-js-basics/3-making-decisions/README.md) | Jasmine | +| 07 | JS 基礎 | 陣列與迴圈 | 使用陣列與迴圈處理 JavaScript 中的資料 | [陣列與迴圈](./2-js-basics/4-arrays-loops/README.md) | Jasmine | +| 08 | [生態箱](./3-terrarium/solution/README.md) | HTML 實作 | 建構 HTML 以製作線上生態箱，重點在建立佈局 | [HTML 介紹](./3-terrarium/1-intro-to-html/README.md) | Jen | +| 09 | [生態箱](./3-terrarium/solution/README.md) | CSS 實作 | 編寫 CSS 以裝飾線上生態箱，重點為 CSS 基礎及響應式網頁製作 | [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、使用本地儲存 | 撰寫瀏覽器擴充功能的 JavaScript 元素，使用本地儲存的變數呼叫 API | [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 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) | 網頁應用的 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 的基礎，以及現今網頁開發者使用的最新工具與技術。學生將有機會親自動手，打造打字遊戲、虛擬生態箱、環保瀏覽器擴充功能、太空入侵者風格遊戲與企業用銀行應用程式。課程結束後，學生將具備穩固的網頁開發知識。 +* 頻繁的測驗 -> 🎓 你可以將本課程前幾堂視為 Microsoft Learn 上的 [學習路徑](https://docs.microsoft.com/learn/paths/web-development-101/?WT.mc_id=academic-77807-sagibbon)！ +本課程教授 JavaScript、HTML 及 CSS 的基本原理，並介紹現今網頁開發者所使用的最新工具與技術。學生將有機會透過製作打字遊戲、虛擬生態箱、環保瀏覽器擴充功能、太空入侵者風格遊戲及企業用銀行應用程式，累積實務經驗。完成本系列課程後，學生將對網頁開發有扎實的理解。 -通過確保內容與專案相結合，學習過程更具吸引力，並且能提升概念理解與記憶力。我們也撰寫了數堂 JavaScript 基礎入門課，介紹基本概念，並搭配《[JavaScript 初學者系列](https://channel9.msdn.com/Series/Beginners-Series-to-JavaScript/?WT.mc_id=academic-77807-sagibbon)》這部影片教學集，其中部分作者也參與了本課程的編寫。 +> 🎓 你可以在 Microsoft Learn 上以[學習路徑](https://docs.microsoft.com/learn/paths/web-development-101/?WT.mc_id=academic-77807-sagibbon)形式開始這個課程的前幾堂課！ -此外，透過課前低壓力測驗，為學生設置學習目標；而課後第二次測驗則有助於加深記憶。本課程設計靈活且有趣，可整套或分段修習。專案從簡至繁，隨著 12 週課程循環逐步加深。 +透過確保內容與專案同步，讓學習過程對學生更具吸引力，且能加強概念記憶。 我們也撰寫了多堂 JavaScript 基礎入門課程，搭配 "[JavaScript 初學者系列](https://channel9.msdn.com/Series/Beginners-Series-to-JavaScript/?WT.mc_id=academic-77807-sagibbon)" 的影片教學，其中部分作者同時為本課程的貢獻者。 -雖然我們刻意避免引入 JavaScript 框架，以專注於網頁開發者採用框架前所需的基本技能，但完成本課程後的良好進階步驟，是透過另一套影片系列「[Node.js 初學者系列](https://channel9.msdn.com/Series/Beginners-Series-to-Nodejs/?WT.mc_id=academic-77807-sagibbon)」來學習 Node.js。 +此外，課前的低壓力測驗可以設定學生學習主題的意圖，課後的測驗則確保進一步記憶。此課程設計靈活且充滿趣味，可全程或部分學習。專案從簡單開始，於 12 週結束時逐漸加深難度。 -> 請參閱我們的 [行為守則](CODE_OF_CONDUCT.md) 與 [貢獻指南](CONTRIBUTING.md)。我們歡迎您的建設性回饋！ +雖然本課程故意避免介紹 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)。我們歡迎您提供建設性回饋！ ## 🧭 離線存取 -你可以使用 [Docsify](https://docsify.js.org/#/) 離線瀏覽這份文件。將此倉庫 Fork，然後在本機安裝 [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 可於[此處](https://microsoft.github.io/Web-Dev-For-Beginners/pdf/readme.pdf)取得。 - +所有課程的 PDF 檔案可在[此處](https://microsoft.github.io/Web-Dev-For-Beginners/pdf/readme.pdf)下載。 ## 🎒 其他課程 -我們的團隊還製作了其他課程！快來看看： +我們團隊還製作其他課程！請查看： ### 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 +246,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) -## 尋求幫助 +## 獲得協助 -如果你遇到困難或對建立 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) 檔案。 --- **免責聲明**： -本文件使用 AI 翻譯服務 [Co-op Translator](https://github.com/Azure/co-op-translator) 進行翻譯。雖然我們努力確保準確性，但請注意自動翻譯可能包含錯誤或不準確之處。原始文件的母語版本應被視為權威來源。對於重要資訊，建議採用專業人工翻譯。對於因使用本翻譯而產生的任何誤解或誤譯，我們概不負責。 +本文件使用 AI 翻譯服務 [Co-op Translator](https://github.com/Azure/co-op-translator) 進行翻譯。雖然我們致力於確保翻譯的準確性，但請注意，自動翻譯可能包含錯誤或不準確之處。原始文件的原文版本應被視為權威來源。對於重要資訊，建議採用專業人工翻譯。我們不對因使用本翻譯而產生的任何誤解或誤譯負責。 \ No newline at end of file