|
|
|
|
@ -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や他の様々なレッスンプロジェクトは独立したディレクトリ
|
|
|
|
|
- GitHub Actions（co-op-translator）を使った翻訳システム
|
|
|
|
|
- Docsifyによるドキュメント提供とPDF形式での利用可能
|
|
|
|
|
- レッスンベースの構造を持つ教育用リポジトリ
|
|
|
|
|
- 各レッスンフォルダにはREADME、コード例、解答例を含む
|
|
|
|
|
- 独立したプロジェクトは別ディレクトリ（quiz-app、各種レッスンプロジェクト）
|
|
|
|
|
- GitHub Actions（co-op-translator）を用いた翻訳システム
|
|
|
|
|
- Docsifyで提供され、PDFでも利用可能なドキュメント
|
|
|
|
|
|
|
|
|
|
## セットアップコマンド
|
|
|
|
|
|
|
|
|
|
このリポジトリは主に教育コンテンツの利用を目的としています。特定プロジェクトで作業する場合：
|
|
|
|
|
このリポジトリは主に教育コンテンツの閲覧用です。特定のプロジェクトを扱う場合は以下を参照してください。
|
|
|
|
|
|
|
|
|
|
### メインリポジトリセットアップ
|
|
|
|
|
|
|
|
|
|
@ -31,17 +31,17 @@ git clone https://github.com/microsoft/Web-Dev-For-Beginners.git
|
|
|
|
|
cd Web-Dev-For-Beginners
|
|
|
|
|
```
|
|
|
|
|
|
|
|
|
|
### Quiz App セットアップ（Vue 3 + Vite）
|
|
|
|
|
### クイズアプリセットアップ (Vue 3 + Vite)
|
|
|
|
|
|
|
|
|
|
```bash
|
|
|
|
|
cd quiz-app
|
|
|
|
|
npm install
|
|
|
|
|
npm run dev # 開発サーバーを起動
|
|
|
|
|
npm run build # 本番用にビルド
|
|
|
|
|
npm run lint # 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
|
|
|
|
|
@ -51,12 +51,12 @@ npm run lint # ESLintを実行する
|
|
|
|
|
npm run format # Prettierでフォーマットする
|
|
|
|
|
```
|
|
|
|
|
|
|
|
|
|
### ブラウザー拡張プロジェクト
|
|
|
|
|
### ブラウザー拡張機能プロジェクト
|
|
|
|
|
|
|
|
|
|
```bash
|
|
|
|
|
cd 5-browser-extension/solution
|
|
|
|
|
npm install
|
|
|
|
|
# ブラウザ固有の拡張機能の読み込み手順に従う
|
|
|
|
|
# ブラウザ固有の拡張機能読み込み手順に従ってください
|
|
|
|
|
```
|
|
|
|
|
|
|
|
|
|
### スペースゲームプロジェクト
|
|
|
|
|
@ -67,7 +67,7 @@ npm install
|
|
|
|
|
# index.htmlをブラウザで開くか、Live Serverを使用してください
|
|
|
|
|
```
|
|
|
|
|
|
|
|
|
|
### チャットプロジェクト（Python バックエンド）
|
|
|
|
|
### チャットプロジェクト (Pythonバックエンド)
|
|
|
|
|
|
|
|
|
|
```bash
|
|
|
|
|
cd 9-chat-project/solution/backend/python
|
|
|
|
|
@ -80,29 +80,29 @@ python api.py
|
|
|
|
|
|
|
|
|
|
### コンテンツ寄稿者向け
|
|
|
|
|
|
|
|
|
|
1. リポジトリを自身のGitHubアカウントにフォークする
|
|
|
|
|
2. フォークをローカルにクローンする
|
|
|
|
|
3. 変更用の新しいブランチを作成する
|
|
|
|
|
4. レッスン内容やコード例を変更する
|
|
|
|
|
5. 関連するプロジェクトディレクトリでコード変更をテストする
|
|
|
|
|
6. コントリビューションガイドラインに従いプルリクエストを送る
|
|
|
|
|
1. **リポジトリをフォーク**し、ご自身のGitHubアカウントに
|
|
|
|
|
2. **フォークしたリポジトリをクローン**
|
|
|
|
|
3. **変更用の新しいブランチを作成**
|
|
|
|
|
4. レッスンコンテンツやコード例を編集
|
|
|
|
|
5. 関連プロジェクトディレクトリでコード変更をテスト
|
|
|
|
|
6. 寄稿ガイドラインに従いプルリクエストを提出
|
|
|
|
|
|
|
|
|
|
### 学習者向け
|
|
|
|
|
|
|
|
|
|
1. リポジトリをフォークまたはクローンする
|
|
|
|
|
1. リポジトリをフォークまたはクローン
|
|
|
|
|
2. レッスンディレクトリを順に進む
|
|
|
|
|
3. 各レッスンのREADMEを読む
|
|
|
|
|
4. https://ff-quizzes.netlify.app/web/ でレッスン前クイズを完了する
|
|
|
|
|
5. レッスンフォルダ内のコード例を実践する
|
|
|
|
|
6. 課題やチャレンジに取り組む
|
|
|
|
|
7. レッスン後クイズを受ける
|
|
|
|
|
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ディレクトリで `npm run dev`
|
|
|
|
|
- **プロジェクト**: HTMLプロジェクトはVS Code Live Server拡張使用推奨
|
|
|
|
|
- **APIプロジェクト**: それぞれのAPIディレクトリで `npm start`
|
|
|
|
|
|
|
|
|
|
## テスト手順
|
|
|
|
|
|
|
|
|
|
@ -119,79 +119,79 @@ npm run build # ビルドが成功することを確認する
|
|
|
|
|
```bash
|
|
|
|
|
cd 7-bank-project/api
|
|
|
|
|
npm run lint # コードスタイルの問題をチェックする
|
|
|
|
|
node server.js # サーバーがエラーなく起動することを確認する
|
|
|
|
|
node server.js # エラーなしでサーバーが起動するか確認する
|
|
|
|
|
```
|
|
|
|
|
|
|
|
|
|
### 一般的なテスト方針
|
|
|
|
|
### 一般的なテストアプローチ
|
|
|
|
|
|
|
|
|
|
- 本リポジトリは包括的な自動テストはありません
|
|
|
|
|
- 手動テストでは以下を重視：
|
|
|
|
|
- コード例がエラーなく実行されること
|
|
|
|
|
- ドキュメント内リンクが正しく動作すること
|
|
|
|
|
- プロジェクトのビルドが正常に完了すること
|
|
|
|
|
- コード例がベストプラクティスに沿っていること
|
|
|
|
|
- 本リポジトリは包括的な自動テストを備えていません
|
|
|
|
|
- 手動テストは以下に焦点を当てています：
|
|
|
|
|
- コード例がエラーなく動作すること
|
|
|
|
|
- ドキュメント内のリンクが正常に機能すること
|
|
|
|
|
- プロジェクトのビルドが成功すること
|
|
|
|
|
- 例がベストプラクティスに従っていること
|
|
|
|
|
|
|
|
|
|
### 提出前のチェック
|
|
|
|
|
### プルリク前チェック
|
|
|
|
|
|
|
|
|
|
- package.jsonがあるディレクトリで `npm run lint` を実行
|
|
|
|
|
- マークダウンリンクの有効性を確認
|
|
|
|
|
- ブラウザやNode.jsでコード例をテスト
|
|
|
|
|
- 翻訳が構造を保持していることをチェック
|
|
|
|
|
- package.jsonのあるディレクトリで `npm run lint` を実行
|
|
|
|
|
- マークダウンリンクの検証
|
|
|
|
|
- ブラウザまたはNode.jsでコード例をテスト
|
|
|
|
|
- 翻訳が正しい構造を維持しているか確認
|
|
|
|
|
|
|
|
|
|
## コードスタイルガイドライン
|
|
|
|
|
|
|
|
|
|
### JavaScript
|
|
|
|
|
|
|
|
|
|
- モダンなES6+構文を使用
|
|
|
|
|
- 各プロジェクト提供の標準ESLint設定に準拠
|
|
|
|
|
- 教育的に分かりやすい意味のある変数名、関数名を使う
|
|
|
|
|
- 学習者向けに概念を説明するコメントを追加
|
|
|
|
|
- Prettierが設定されている場合は整形を行う
|
|
|
|
|
- 最新のES6+構文を使用
|
|
|
|
|
- 各プロジェクトの標準ESLint設定に従う
|
|
|
|
|
- 教育目的で意味の明確な変数・関数名を使用
|
|
|
|
|
- 学習者向けに概念説明のコメントを付記
|
|
|
|
|
- Prettierでフォーマット（設定がある場合）
|
|
|
|
|
|
|
|
|
|
### HTML/CSS
|
|
|
|
|
|
|
|
|
|
- セマンティックなHTML5要素を使用
|
|
|
|
|
- レスポンシブデザイン原則を適用
|
|
|
|
|
- 明確なクラス命名規則
|
|
|
|
|
- CSS技法を説明するコメントを記述
|
|
|
|
|
- セマンティックHTML5要素の使用
|
|
|
|
|
- レスポンシブデザイン原則
|
|
|
|
|
- 明確なクラス名付け規則
|
|
|
|
|
- CSS技術の説明コメントを追加
|
|
|
|
|
|
|
|
|
|
### Python
|
|
|
|
|
|
|
|
|
|
- PEP 8スタイルガイドに従う
|
|
|
|
|
- 分かりやすい教育的コード例
|
|
|
|
|
- 学習の助けとなる型ヒントを適宜使用
|
|
|
|
|
- PEP 8スタイルガイドライン準拠
|
|
|
|
|
- 教育的で分かりやすいコード例
|
|
|
|
|
- 学習に役立つ場合はタイプヒントを使用
|
|
|
|
|
|
|
|
|
|
### マークダウンドキュメント
|
|
|
|
|
### Markdownドキュメント
|
|
|
|
|
|
|
|
|
|
- 明確な見出し階層
|
|
|
|
|
- 言語指定されたコードブロック
|
|
|
|
|
- 追加リソースへのリンク
|
|
|
|
|
- `images/` ディレクトリ内のスクリーンショット等の画像
|
|
|
|
|
- 画像にはアクセシビリティのための代替テキストを設定
|
|
|
|
|
- `images/`フォルダ内のスクリーンショットや画像
|
|
|
|
|
- 画像のアクセシビリティ用altテキスト
|
|
|
|
|
|
|
|
|
|
### ファイル構成
|
|
|
|
|
|
|
|
|
|
- レッスンは連番付き（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向けに設定されています：
|
|
|
|
|
quiz-appはAzure Static Web Apps用に構成されています：
|
|
|
|
|
|
|
|
|
|
```bash
|
|
|
|
|
cd quiz-app
|
|
|
|
|
npm run build # dist/ フォルダーを作成します
|
|
|
|
|
# main ブランチへのプッシュ時に GitHub Actions ワークフローでデプロイします
|
|
|
|
|
# main ブランチへのプッシュ時に GitHub Actions ワークフローを通じてデプロイします
|
|
|
|
|
```
|
|
|
|
|
|
|
|
|
|
Azure Static Web Apps設定：
|
|
|
|
|
- **アプリ位置**：`/quiz-app`
|
|
|
|
|
- **出力位置**：`dist`
|
|
|
|
|
- **ワークフロー**：`.github/workflows/azure-static-web-apps-ashy-river-0debb7803.yml`
|
|
|
|
|
Azure Static Web Appsの構成：
|
|
|
|
|
- **App location**: `/quiz-app`
|
|
|
|
|
- **Output location**: `dist`
|
|
|
|
|
- **Workflow**: `.github/workflows/azure-static-web-apps-ashy-river-0debb7803.yml`
|
|
|
|
|
|
|
|
|
|
### ドキュメントPDF生成
|
|
|
|
|
|
|
|
|
|
@ -204,59 +204,59 @@ npm run convert # docs から PDF を生成する
|
|
|
|
|
|
|
|
|
|
```bash
|
|
|
|
|
npm install -g docsify-cli # Docsifyをグローバルにインストールする
|
|
|
|
|
docsify serve # localhost:3000でサービスを提供する
|
|
|
|
|
docsify serve # localhost:3000でサーブする
|
|
|
|
|
```
|
|
|
|
|
|
|
|
|
|
### プロジェクト別ビルド
|
|
|
|
|
|
|
|
|
|
各プロジェクトディレクトリには独自のビルド手順がある場合あり：
|
|
|
|
|
- Vueプロジェクト：`npm run build` でプロダクションバンドル生成
|
|
|
|
|
- 静的プロジェクト：ビルド不要、ファイルを直接提供
|
|
|
|
|
各プロジェクトディレクトリに固有のビルド手順がある場合があります：
|
|
|
|
|
- Vueプロジェクト：`npm run build` で本番用バンドル作成
|
|
|
|
|
- 静的プロジェクト：ビルド不要で直接ファイル提供
|
|
|
|
|
|
|
|
|
|
## プルリクエストガイドライン
|
|
|
|
|
|
|
|
|
|
### タイトル形式
|
|
|
|
|
### タイトルフォーマット
|
|
|
|
|
|
|
|
|
|
明確で変更内容がわかるタイトルを使用：
|
|
|
|
|
- `[Quiz-app] レッスンXの新クイズ追加`
|
|
|
|
|
- `[Lesson-3] テラリウムプロジェクトの誤字修正`
|
|
|
|
|
- `[Translation] レッスン5のスペイン語翻訳追加`
|
|
|
|
|
- `[Docs] セットアップ手順の更新`
|
|
|
|
|
変更箇所が分かりやすい明確なタイトルを使用：
|
|
|
|
|
- `[Quiz-app] レッスンXの新クイズを追加`
|
|
|
|
|
- `[Lesson-3] テラリウムプロジェクトのタイプミス修正`
|
|
|
|
|
- `[Translation] レッスン5のスペイン語翻訳を追加`
|
|
|
|
|
- `[Docs] セットアップ手順を更新`
|
|
|
|
|
|
|
|
|
|
### 必須チェック
|
|
|
|
|
|
|
|
|
|
PR提出前に以下を実行：
|
|
|
|
|
PR提出前に以下を確認：
|
|
|
|
|
|
|
|
|
|
1. **コード品質**：
|
|
|
|
|
- 影響を受けるプロジェクトディレクトリで `npm run lint`
|
|
|
|
|
- すべての警告・エラーを修正
|
|
|
|
|
- 変更対象プロジェクトディレクトリで `npm run lint`
|
|
|
|
|
- すべてのエラーと警告を修正
|
|
|
|
|
|
|
|
|
|
2. **ビルド検証**：
|
|
|
|
|
- 必要に応じて `npm run build`
|
|
|
|
|
- ビルドエラーがないことを確認
|
|
|
|
|
2. **ビルド確認**：
|
|
|
|
|
- 必要に応じて `npm run build` 実行
|
|
|
|
|
- ビルドエラーなしを確認
|
|
|
|
|
|
|
|
|
|
3. **リンク検証**：
|
|
|
|
|
- 全マークダウンリンクの検証
|
|
|
|
|
- すべてのマークダウンリンクをテスト
|
|
|
|
|
- 画像参照の動作確認
|
|
|
|
|
|
|
|
|
|
4. **コンテンツレビュー**：
|
|
|
|
|
- 誤字脱字の校正
|
|
|
|
|
- 誤字脱字チェック
|
|
|
|
|
- コード例が正確で教育的であること
|
|
|
|
|
- 翻訳が原文の意味を保っていること
|
|
|
|
|
- 翻訳が原文の意味を維持していること
|
|
|
|
|
|
|
|
|
|
### 寄稿条件
|
|
|
|
|
### 寄稿要件
|
|
|
|
|
|
|
|
|
|
- Microsoft CLAに同意（初回PRで自動チェック）
|
|
|
|
|
- [Microsoftオープンソース行動規範](https://opensource.microsoft.com/codeofconduct/)に従う
|
|
|
|
|
- 詳細は[CONTRIBUTING.md](./CONTRIBUTING.md)参照
|
|
|
|
|
- 可能であればPR説明に関連Issue番号を記載
|
|
|
|
|
- [Microsoft Open Source Code of Conduct](https://opensource.microsoft.com/codeofconduct/) に従う
|
|
|
|
|
- 詳細は [CONTRIBUTING.md](./CONTRIBUTING.md) を参照
|
|
|
|
|
- 可能な場合はPR説明にIssue番号を記載
|
|
|
|
|
|
|
|
|
|
### レビュー手順
|
|
|
|
|
|
|
|
|
|
- メンテナとコミュニティによるレビュー
|
|
|
|
|
- 教育的明瞭性を重視
|
|
|
|
|
- コード例は最新のベストプラクティスに従うこと
|
|
|
|
|
- 翻訳は正確性と文化的適合性をチェック
|
|
|
|
|
- 守備者とコミュニティによるレビュー
|
|
|
|
|
- 教育的明瞭さを最優先
|
|
|
|
|
- コード例は最新のベストプラクティスに準拠
|
|
|
|
|
- 翻訳は正確さと文化的適切さをチェック
|
|
|
|
|
|
|
|
|
|
## 翻訳システム
|
|
|
|
|
|
|
|
|
|
@ -264,19 +264,19 @@ PR提出前に以下を実行：
|
|
|
|
|
|
|
|
|
|
- GitHub Actionsのco-op-translatorワークフローを使用
|
|
|
|
|
- 50以上の言語に自動翻訳
|
|
|
|
|
- メインディレクトリのソースファイルを翻訳
|
|
|
|
|
- 翻訳ファイルは `translations/{language-code}/` ディレクトリに置かれる
|
|
|
|
|
- ソースファイルはメインディレクトリ
|
|
|
|
|
- 翻訳ファイルは `translations/{language-code}/` 配下
|
|
|
|
|
|
|
|
|
|
### 手動による翻訳改善の追加
|
|
|
|
|
### 手動翻訳改善の追加
|
|
|
|
|
|
|
|
|
|
1. `translations/{language-code}/` 内のファイルを見つける
|
|
|
|
|
2. 構造を保持しつつ改善を行う
|
|
|
|
|
3. コード例が動作する状態を維持
|
|
|
|
|
4. ローカライズされたクイズ内容もテスト
|
|
|
|
|
1. `translations/{language-code}/` 内のファイルを特定
|
|
|
|
|
2. 構造を維持したまま改善
|
|
|
|
|
3. コード例は機能したままであることを確認
|
|
|
|
|
4. ローカライズされたクイズもテスト
|
|
|
|
|
|
|
|
|
|
### 翻訳メタデータ
|
|
|
|
|
|
|
|
|
|
翻訳ファイルにはメタデータヘッダーが含まれる：
|
|
|
|
|
翻訳ファイルにはメタデータヘッダーを含みます：
|
|
|
|
|
```markdown
|
|
|
|
|
<!--
|
|
|
|
|
CO_OP_TRANSLATOR_METADATA:
|
|
|
|
|
@ -293,116 +293,116 @@ CO_OP_TRANSLATOR_METADATA:
|
|
|
|
|
|
|
|
|
|
### よくある問題
|
|
|
|
|
|
|
|
|
|
**クイズアプリが起動しない**：
|
|
|
|
|
- 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へのアクセス権限をチェック
|
|
|
|
|
- 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のデバッグにはブラウザのDevToolsを利用
|
|
|
|
|
- VueプロジェクトではVue DevToolsブラウザ拡張を入れる
|
|
|
|
|
- HTMLプロジェクトにはVS CodeのLive Server拡張を使用
|
|
|
|
|
- ESLintとPrettier拡張をインストールしてコード整形を統一
|
|
|
|
|
- ブラウザのDevToolsでJavaScriptをデバッグ
|
|
|
|
|
- VueプロジェクトにはVue DevToolsブラウザ拡張を使用
|
|
|
|
|
|
|
|
|
|
### パフォーマンスの注意点
|
|
|
|
|
### パフォーマンス関連
|
|
|
|
|
|
|
|
|
|
- 50以上の言語の翻訳ファイルが多いため完全クローンは大容量
|
|
|
|
|
- コンテンツ作業のみなら浅いクローンを利用： `git clone --depth 1`
|
|
|
|
|
- 英語コンテンツ作業時は翻訳を検索から除外推奨
|
|
|
|
|
- npm installやViteビルドは初回が遅い可能性がある
|
|
|
|
|
- 50以上の言語の翻訳ファイルがあるため、完全クローンは大きい
|
|
|
|
|
- コンテンツ作業のみなら浅いクローン推奨：`git clone --depth 1`
|
|
|
|
|
- 英語コンテンツ作業時は翻訳を検索対象から除外推奨
|
|
|
|
|
- 初回のビルド処理（npm installやViteビルド）は遅いことがある
|
|
|
|
|
|
|
|
|
|
## セキュリティの注意点
|
|
|
|
|
## セキュリティに関する注意
|
|
|
|
|
|
|
|
|
|
### 環境変数
|
|
|
|
|
|
|
|
|
|
- APIキーをリポジトリにコミットしないこと
|
|
|
|
|
- `.env` ファイルを使用（.gitignoreに含まれている）
|
|
|
|
|
- 必要な環境変数は各プロジェクトのREADMEでドキュメント化
|
|
|
|
|
- APIキーはリポジトリにコミットしない
|
|
|
|
|
- `.env`ファイルを使用（.gitignoreに含まれている）
|
|
|
|
|
- 必要な環境変数はプロジェクトのREADMEに記載
|
|
|
|
|
|
|
|
|
|
### Pythonプロジェクト
|
|
|
|
|
|
|
|
|
|
- 仮想環境を使用： `python -m venv venv`
|
|
|
|
|
- 依存関係を常に最新に保つ
|
|
|
|
|
- GitHubトークンは必要最小限の権限に設定する
|
|
|
|
|
- 仮想環境の使用を推奨： `python -m venv venv`
|
|
|
|
|
- 依存関係は最新に保つ
|
|
|
|
|
- GitHubトークンは最小限の権限で管理
|
|
|
|
|
|
|
|
|
|
### GitHub Modelsアクセス
|
|
|
|
|
|
|
|
|
|
- GitHub Modelsにはパーソナルアクセストークン（PAT）が必要
|
|
|
|
|
- トークンは環境変数として保管
|
|
|
|
|
- GitHub Modelsには個人アクセストークン（PAT）が必要
|
|
|
|
|
- トークンは環境変数として管理
|
|
|
|
|
- トークンや認証情報は決してコミットしない
|
|
|
|
|
|
|
|
|
|
## 追加ノート
|
|
|
|
|
## 付加情報
|
|
|
|
|
|
|
|
|
|
### 対象ユーザー
|
|
|
|
|
|
|
|
|
|
- ウェブ開発の完全な初心者
|
|
|
|
|
- 学習者や自学者
|
|
|
|
|
- ウェブ開発完全初心者
|
|
|
|
|
- 学生や独学者
|
|
|
|
|
- 教室でカリキュラムを使う教師
|
|
|
|
|
- アクセシビリティと段階的スキル向上を意識したコンテンツ設計
|
|
|
|
|
- アクセシビリティと段階的な学習設計のコンテンツ
|
|
|
|
|
|
|
|
|
|
### 教育方針
|
|
|
|
|
### 教育理念
|
|
|
|
|
|
|
|
|
|
- プロジェクトベースの学習アプローチ
|
|
|
|
|
- プロジェクトベースの学習手法
|
|
|
|
|
- 頻繁な知識確認（クイズ）
|
|
|
|
|
- 実践的なコーディング演習
|
|
|
|
|
- 実世界の応用例
|
|
|
|
|
- フレームワーク前の基礎重視
|
|
|
|
|
- 現実世界の応用例
|
|
|
|
|
- フレームワークより基礎の重視
|
|
|
|
|
|
|
|
|
|
### リポジトリ運用
|
|
|
|
|
### リポジトリのメンテナンス
|
|
|
|
|
|
|
|
|
|
- 活発な学習者と寄稿者コミュニティ
|
|
|
|
|
- 依存関係やコンテンツは定期的に更新
|
|
|
|
|
- メンテナによる問題監視と議論管理
|
|
|
|
|
- 翻訳の更新はGitHub Actionsで自動化
|
|
|
|
|
- 活発な学習者と寄稿者のコミュニティ
|
|
|
|
|
- 依存関係とコンテンツは定期的に更新
|
|
|
|
|
- イシューやディスカッションは管理者監視
|
|
|
|
|
- 翻訳更新はGitHub Actionsで自動化
|
|
|
|
|
|
|
|
|
|
### 関連リソース
|
|
|
|
|
|
|
|
|
|
- [Microsoft Learn モジュール](https://docs.microsoft.com/learn/)
|
|
|
|
|
- [Student Hubリソース](https://docs.microsoft.com/learn/student-hub/)
|
|
|
|
|
- [Student Hub リソース](https://docs.microsoft.com/learn/student-hub/)
|
|
|
|
|
- 学習者に推奨される[GitHub Copilot](https://marketplace.visualstudio.com/items?itemName=GitHub.copilot)
|
|
|
|
|
- 他のコース：生成AI、データサイエンス、機械学習、IoTカリキュラムも利用可能
|
|
|
|
|
- その他コース：生成AI、データサイエンス、ML、IoTカリキュラム
|
|
|
|
|
|
|
|
|
|
### 特定プロジェクトの作業方法
|
|
|
|
|
### 個別プロジェクトの利用方法
|
|
|
|
|
|
|
|
|
|
各プロジェクトの詳細な手順は以下の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チャットアシスタントプロジェクト
|
|
|
|
|
|
|
|
|
|
### モノレポ構成
|
|
|
|
|
### モノレポ構造について
|
|
|
|
|
|
|
|
|
|
伝統的なモノレポではありませんが複数の独立プロジェクトを含みます：
|
|
|
|
|
- 各レッスンは独立済み
|
|
|
|
|
- プロジェクト間で依存関係共有なし
|
|
|
|
|
- 個別プロジェクトの作業が他に影響を与えない
|
|
|
|
|
- フルカリキュラム体験のためには全リポジトリのクローン推奨
|
|
|
|
|
伝統的なモノレポではありませんが、本リポジトリは複数の独立プロジェクトを含みます：
|
|
|
|
|
- 各レッスンは自己完結型
|
|
|
|
|
- プロジェクト間で依存関係を共有しない
|
|
|
|
|
- 個別プロジェクトに影響なく作業可能
|
|
|
|
|
- 全カリキュラム体験用にリポジトリ全体をクローン可能
|
|
|
|
|
|
|
|
|
|
---
|
|
|
|
|
|
|
|
|
|
<!-- CO-OP TRANSLATOR DISCLAIMER START -->
|
|
|
|
|
**免責事項**：
|
|
|
|
|
本書類はAI翻訳サービス[Co-op Translator](https://github.com/Azure/co-op-translator)を使用して翻訳されています。正確さを目指しておりますが、自動翻訳には誤りや不正確な部分が含まれる可能性があることをご留意ください。原文が権威ある情報源として優先されるべきです。重要な情報につきましては、専門の人間による翻訳を推奨します。本翻訳の利用により発生した誤解や誤訳について、当方は一切の責任を負いかねます。
|
|
|
|
|
本書類はAI翻訳サービス「Co-op Translator」（https://github.com/Azure/co-op-translator）を使用して翻訳されています。正確性を期しておりますが、自動翻訳には誤りや不正確な部分が含まれる場合があります。原文の言語による文書が正式な情報源とみなされるべきです。重要な情報については、専門の人間による翻訳を推奨します。本翻訳の利用により生じた誤解や誤訳について、当方は一切の責任を負いかねます。
|
|
|
|
|
<!-- CO-OP TRANSLATOR DISCLAIMER END -->
|
localizeflow[bot]
3 weeks ago