|
|
|
|
@ -2,46 +2,46 @@
|
|
|
|
|
|
|
|
|
|
## プロジェクト概要
|
|
|
|
|
|
|
|
|
|
これは初心者にウェブ開発の基礎を教えるための教育カリキュラムリポジトリです。カリキュラムはMicrosoft Cloud Advocatesによって開発された包括的な12週間のコースで、JavaScript、CSS、HTMLをカバーする24の実践的なレッスンで構成されています。
|
|
|
|
|
これは初心者に対してウェブ開発の基礎を教えるための教育カリキュラムリポジトリです。カリキュラムはMicrosoft Cloud Advocatesによって開発された包括的な12週間のコースで、JavaScript、CSS、HTMLをカバーする24の実践的なレッスンが含まれています。
|
|
|
|
|
|
|
|
|
|
### 主な構成要素
|
|
|
|
|
### 主要コンポーネント
|
|
|
|
|
|
|
|
|
|
- **教育コンテンツ**：プロジェクトベースのモジュールに整理された24の構造化されたレッスン
|
|
|
|
|
- **実践プロジェクト**：テラリウム、タイピングゲーム、ブラウザ拡張機能、スペースゲーム、銀行アプリ、コードエディター、AIチャットアシスタント
|
|
|
|
|
- **インタラクティブクイズ**：それぞれ3問の質問を含む48のクイズ（レッスン前後の評価）
|
|
|
|
|
- **多言語サポート**：GitHub Actionsを利用した50以上の言語への自動翻訳
|
|
|
|
|
- **実践プロジェクト**：テラリウム、タイピングゲーム、ブラウザー拡張機能、スペースゲーム、バンキングアプリ、コードエディタ、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形式での利用可能
|
|
|
|
|
|
|
|
|
|
## セットアップコマンド
|
|
|
|
|
|
|
|
|
|
このリポジトリは主に教育コンテンツの利用を目的としています。特定プロジェクトで作業する場合：
|
|
|
|
|
|
|
|
|
|
### メインリポジトリのセットアップ
|
|
|
|
|
### メインリポジトリセットアップ
|
|
|
|
|
|
|
|
|
|
```bash
|
|
|
|
|
git clone https://github.com/microsoft/Web-Dev-For-Beginners.git
|
|
|
|
|
cd Web-Dev-For-Beginners
|
|
|
|
|
```
|
|
|
|
|
|
|
|
|
|
### Quiz App セットアップ (Vue 3 + Vite)
|
|
|
|
|
### Quiz App セットアップ（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
|
|
|
|
|
# ブラウザ固有の拡張機能の読み込み手順に従ってください
|
|
|
|
|
# ブラウザ固有の拡張機能の読み込み手順に従う
|
|
|
|
|
```
|
|
|
|
|
|
|
|
|
|
### スペースゲームプロジェクト
|
|
|
|
|
@ -64,10 +64,10 @@ npm install
|
|
|
|
|
```bash
|
|
|
|
|
cd 6-space-game/solution
|
|
|
|
|
npm install
|
|
|
|
|
# index.html をブラウザで開くか、Live Server を使用してください
|
|
|
|
|
# index.htmlをブラウザで開くか、Live Serverを使用してください
|
|
|
|
|
```
|
|
|
|
|
|
|
|
|
|
### チャットプロジェクト (Pythonバックエンド)
|
|
|
|
|
### チャットプロジェクト（Python バックエンド）
|
|
|
|
|
|
|
|
|
|
```bash
|
|
|
|
|
cd 9-chat-project/solution/backend/python
|
|
|
|
|
@ -78,43 +78,43 @@ python api.py
|
|
|
|
|
|
|
|
|
|
## 開発ワークフロー
|
|
|
|
|
|
|
|
|
|
### コンテンツ提供者向け
|
|
|
|
|
### コンテンツ寄稿者向け
|
|
|
|
|
|
|
|
|
|
1. GitHubアカウントにリポジトリを**フォーク**する
|
|
|
|
|
2. フォークしたリポジトリをローカルに**クローン**する
|
|
|
|
|
3. 変更用の**新しいブランチ**を作成する
|
|
|
|
|
4. レッスンコンテンツやコード例に変更を加える
|
|
|
|
|
5. 関連プロジェクトディレクトリでコード変更をテストする
|
|
|
|
|
6. 貢献ガイドラインに従いプルリクエストを提出する
|
|
|
|
|
1. リポジトリを自身のGitHubアカウントにフォークする
|
|
|
|
|
2. フォークをローカルにクローンする
|
|
|
|
|
3. 変更用の新しいブランチを作成する
|
|
|
|
|
4. レッスン内容やコード例を変更する
|
|
|
|
|
5. 関連するプロジェクトディレクトリでコード変更をテストする
|
|
|
|
|
6. コントリビューションガイドラインに従いプルリクエストを送る
|
|
|
|
|
|
|
|
|
|
### 学習者向け
|
|
|
|
|
|
|
|
|
|
1. リポジトリをフォークまたはクローンする
|
|
|
|
|
2. レッスンディレクトリを順に進む
|
|
|
|
|
3. 各レッスンのREADMEファイルを読む
|
|
|
|
|
4. https://ff-quizzes.netlify.app/web/ でレッスン前のクイズを完了する
|
|
|
|
|
5. レッスンフォルダ内のコード例に取り組む
|
|
|
|
|
6. 課題やチャレンジを完了する
|
|
|
|
|
7. レッスン後のクイズを受ける
|
|
|
|
|
3. 各レッスンのREADMEを読む
|
|
|
|
|
4. https://ff-quizzes.netlify.app/web/ でレッスン前クイズを完了する
|
|
|
|
|
5. レッスンフォルダ内のコード例を実践する
|
|
|
|
|
6. 課題やチャレンジに取り組む
|
|
|
|
|
7. レッスン後クイズを受ける
|
|
|
|
|
|
|
|
|
|
### ライブ開発
|
|
|
|
|
|
|
|
|
|
- **ドキュメント**：ルートで `docsify serve` を実行 (ポート3000)
|
|
|
|
|
- **Quiz App**：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`
|
|
|
|
|
|
|
|
|
|
## テスト手順
|
|
|
|
|
|
|
|
|
|
### Quiz App テスト
|
|
|
|
|
### クイズアプリテスト
|
|
|
|
|
|
|
|
|
|
```bash
|
|
|
|
|
cd quiz-app
|
|
|
|
|
npm run lint # コードスタイルの問題を確認する
|
|
|
|
|
npm run lint # コードスタイルの問題をチェックする
|
|
|
|
|
npm run build # ビルドが成功することを確認する
|
|
|
|
|
```
|
|
|
|
|
|
|
|
|
|
### 銀行APIテスト
|
|
|
|
|
### バンクAPIテスト
|
|
|
|
|
|
|
|
|
|
```bash
|
|
|
|
|
cd 7-bank-project/api
|
|
|
|
|
@ -124,73 +124,73 @@ node server.js # サーバーがエラーなく起動することを確認
|
|
|
|
|
|
|
|
|
|
### 一般的なテスト方針
|
|
|
|
|
|
|
|
|
|
- 教育用リポジトリのため包括的な自動テストはなし
|
|
|
|
|
- 手動テストの重点：
|
|
|
|
|
- コード例がエラーなく動作すること
|
|
|
|
|
- ドキュメント内のリンクが正しく機能すること
|
|
|
|
|
- 本リポジトリは包括的な自動テストはありません
|
|
|
|
|
- 手動テストでは以下を重視：
|
|
|
|
|
- コード例がエラーなく実行されること
|
|
|
|
|
- ドキュメント内リンクが正しく動作すること
|
|
|
|
|
- プロジェクトのビルドが正常に完了すること
|
|
|
|
|
- 例がベストプラクティスに則っていること
|
|
|
|
|
- コード例がベストプラクティスに沿っていること
|
|
|
|
|
|
|
|
|
|
### 提出前チェック
|
|
|
|
|
### 提出前のチェック
|
|
|
|
|
|
|
|
|
|
- package.jsonがあるディレクトリで `npm run lint` を実行
|
|
|
|
|
- Markdownリンクの有効性を確認
|
|
|
|
|
- ブラウザまたはNode.jsでコード例をテスト
|
|
|
|
|
- 翻訳が正しい構造を維持していることを確認
|
|
|
|
|
- マークダウンリンクの有効性を確認
|
|
|
|
|
- ブラウザやNode.jsでコード例をテスト
|
|
|
|
|
- 翻訳が構造を保持していることをチェック
|
|
|
|
|
|
|
|
|
|
## コードスタイルガイドライン
|
|
|
|
|
|
|
|
|
|
### JavaScript
|
|
|
|
|
|
|
|
|
|
- 最新のES6+構文を使用
|
|
|
|
|
- プロジェクトで提供されている標準のESLint設定に従う
|
|
|
|
|
- 教育的な明快さのため意味のある変数名・関数名を使用
|
|
|
|
|
- 学習者のために概念を説明するコメントを追加
|
|
|
|
|
- 設定がある場合はPrettierでフォーマット
|
|
|
|
|
- モダンなES6+構文を使用
|
|
|
|
|
- 各プロジェクト提供の標準ESLint設定に準拠
|
|
|
|
|
- 教育的に分かりやすい意味のある変数名、関数名を使う
|
|
|
|
|
- 学習者向けに概念を説明するコメントを追加
|
|
|
|
|
- Prettierが設定されている場合は整形を行う
|
|
|
|
|
|
|
|
|
|
### HTML/CSS
|
|
|
|
|
|
|
|
|
|
- セマンティックなHTML5要素
|
|
|
|
|
- レスポンシブデザインの原則
|
|
|
|
|
- セマンティックなHTML5要素を使用
|
|
|
|
|
- レスポンシブデザイン原則を適用
|
|
|
|
|
- 明確なクラス命名規則
|
|
|
|
|
- 学習者向けのCSS技術を説明するコメント
|
|
|
|
|
- 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}/` 構造で配置
|
|
|
|
|
|
|
|
|
|
## ビルドおよびデプロイ
|
|
|
|
|
## ビルドとデプロイ
|
|
|
|
|
|
|
|
|
|
### Quiz Appのデプロイ (Azure Static Web Apps)
|
|
|
|
|
### クイズアプリのデプロイ（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`
|
|
|
|
|
Azure Static Web Apps設定：
|
|
|
|
|
- **アプリ位置**：`/quiz-app`
|
|
|
|
|
- **出力位置**：`dist`
|
|
|
|
|
- **ワークフロー**：`.github/workflows/azure-static-web-apps-ashy-river-0debb7803.yml`
|
|
|
|
|
|
|
|
|
|
### ドキュメントPDF生成
|
|
|
|
|
@ -200,83 +200,83 @@ npm install # docsify-to-pdf をインストールする
|
|
|
|
|
npm run convert # docs から PDF を生成する
|
|
|
|
|
```
|
|
|
|
|
|
|
|
|
|
### Docsifyドキュメンテーション
|
|
|
|
|
### Docsifyドキュメント
|
|
|
|
|
|
|
|
|
|
```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のスペイン語翻訳を追加`
|
|
|
|
|
明確で変更内容がわかるタイトルを使用：
|
|
|
|
|
- `[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. **リンク検証**：
|
|
|
|
|
- すべてのMarkdownリンクをテスト
|
|
|
|
|
- 画像参照が機能することを確認
|
|
|
|
|
- 全マークダウンリンクの検証
|
|
|
|
|
- 画像参照の動作確認
|
|
|
|
|
|
|
|
|
|
4. **内容レビュー**：
|
|
|
|
|
- スペルと文法の校正
|
|
|
|
|
- コード例が正しく教育目的に適していること
|
|
|
|
|
- 翻訳が原文の意味を維持していることを確認
|
|
|
|
|
4. **コンテンツレビュー**：
|
|
|
|
|
- 誤字脱字の校正
|
|
|
|
|
- コード例が正確で教育的であること
|
|
|
|
|
- 翻訳が原文の意味を保っていること
|
|
|
|
|
|
|
|
|
|
### 貢献条件
|
|
|
|
|
### 寄稿条件
|
|
|
|
|
|
|
|
|
|
- Microsoft CLAに同意（最初のPRで自動チェック）
|
|
|
|
|
- [Microsoft Open Source Code of Conduct](https://opensource.microsoft.com/codeofconduct/)の遵守
|
|
|
|
|
- Microsoft CLAに同意（初回PRで自動チェック）
|
|
|
|
|
- [Microsoftオープンソース行動規範](https://opensource.microsoft.com/codeofconduct/)に従う
|
|
|
|
|
- 詳細は[CONTRIBUTING.md](./CONTRIBUTING.md)参照
|
|
|
|
|
- 該当する場合はPR説明にIssue番号を記載
|
|
|
|
|
- 可能であればPR説明に関連Issue番号を記載
|
|
|
|
|
|
|
|
|
|
### レビュー体制
|
|
|
|
|
### レビュー手順
|
|
|
|
|
|
|
|
|
|
- メンテナおよびコミュニティによるレビュー
|
|
|
|
|
- 教育的な明快さを優先
|
|
|
|
|
- コード例は現行のベストプラクティスに従うこと
|
|
|
|
|
- 翻訳は正確さと文化的適合性を持つか確認
|
|
|
|
|
- メンテナとコミュニティによるレビュー
|
|
|
|
|
- 教育的明瞭性を重視
|
|
|
|
|
- コード例は最新のベストプラクティスに従うこと
|
|
|
|
|
- 翻訳は正確性と文化的適合性をチェック
|
|
|
|
|
|
|
|
|
|
## 翻訳システム
|
|
|
|
|
|
|
|
|
|
### 自動翻訳
|
|
|
|
|
|
|
|
|
|
- GitHub Actionsでco-op-translatorワークフローを利用
|
|
|
|
|
- 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:
|
|
|
|
|
|
|
|
|
|
### よくある問題
|
|
|
|
|
|
|
|
|
|
**Quizアプリが起動しない**：
|
|
|
|
|
**クイズアプリが起動しない**：
|
|
|
|
|
- Node.jsのバージョンを確認（v14以上推奨）
|
|
|
|
|
- `node_modules` と `package-lock.json` を削除し、`npm install` を再実行
|
|
|
|
|
- ポートの競合を確認（デフォルト：Viteはポート5173使用）
|
|
|
|
|
- `node_modules` と `package-lock.json` を削除し、再度 `npm install` 実行
|
|
|
|
|
- ポート競合を確認（デフォルトはViteの5173番）
|
|
|
|
|
|
|
|
|
|
**APIサーバーが起動しない**：
|
|
|
|
|
- Node.jsのバージョンが要件を満たしているか確認（node >=10）
|
|
|
|
|
- ポートがすでに使用されていないかチェック
|
|
|
|
|
- すべての依存関係が `npm install` でインストールされているか確認
|
|
|
|
|
- Node.jsのバージョンが最低限(node >=10)を満たすか確認
|
|
|
|
|
- ポート利用状況をチェック
|
|
|
|
|
- `npm install` で依存関係が全てインストールされているか確認
|
|
|
|
|
|
|
|
|
|
**ブラウザ拡張機能が読み込まれない**：
|
|
|
|
|
- manifest.json のフォーマットが正しいか確認
|
|
|
|
|
- ブラウザコンソールのエラーをチェック
|
|
|
|
|
- ブラウザ固有の拡張機能インストール手順に従う
|
|
|
|
|
**ブラウザー拡張機能が読み込まれない**：
|
|
|
|
|
- manifest.jsonのフォーマットを確認
|
|
|
|
|
- ブラウザのコンソールログでエラーを調査
|
|
|
|
|
- ブラウザ固有の拡張機能インストール手順を確認
|
|
|
|
|
|
|
|
|
|
**Pythonチャットプロジェクトの問題**：
|
|
|
|
|
- OpenAIパッケージがインストールされているか確認：`pip install openai`
|
|
|
|
|
- OpenAIパッケージがインストールされているか： `pip install openai`
|
|
|
|
|
- GITHUB_TOKEN環境変数が設定されているか確認
|
|
|
|
|
- GitHub Modelsへのアクセス権をチェック
|
|
|
|
|
- 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ブラウザ拡張をインストール
|
|
|
|
|
- HTMLプロジェクトではVS CodeのLive Server拡張を使用
|
|
|
|
|
- 一貫した整形のためESLintとPrettier拡張をインストール
|
|
|
|
|
- JavaScriptのデバッグにはブラウザのDevToolsを利用
|
|
|
|
|
- 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）が必要
|
|
|
|
|
- トークンは環境変数として保管
|
|
|
|
|
- トークンや認証情報は決してコミットしない
|
|
|
|
|
|
|
|
|
|
## 追加の注意事項
|
|
|
|
|
## 追加ノート
|
|
|
|
|
|
|
|
|
|
### 対象ユーザー
|
|
|
|
|
|
|
|
|
|
- ウェブ開発初心者全般
|
|
|
|
|
- 学生や独学者
|
|
|
|
|
- 教育現場でカリキュラムを使う教師
|
|
|
|
|
- コンテンツはアクセシビリティと段階的なスキル習得を考慮して設計
|
|
|
|
|
- ウェブ開発の完全な初心者
|
|
|
|
|
- 学習者や自学者
|
|
|
|
|
- 教室でカリキュラムを使う教師
|
|
|
|
|
- アクセシビリティと段階的スキル向上を意識したコンテンツ設計
|
|
|
|
|
|
|
|
|
|
### 教育哲学
|
|
|
|
|
### 教育方針
|
|
|
|
|
|
|
|
|
|
- プロジェクトベースの学習アプローチ
|
|
|
|
|
- 頻繁な知識チェック（クイズ）
|
|
|
|
|
- 頻繁な知識確認（クイズ）
|
|
|
|
|
- 実践的なコーディング演習
|
|
|
|
|
- 現実世界の応用例
|
|
|
|
|
- フレームワークより基礎の習得に重点
|
|
|
|
|
- 実世界の応用例
|
|
|
|
|
- フレームワーク前の基礎重視
|
|
|
|
|
|
|
|
|
|
### リポジトリのメンテナンス
|
|
|
|
|
### リポジトリ運用
|
|
|
|
|
|
|
|
|
|
- 学習者と貢献者の活発なコミュニティ
|
|
|
|
|
- 依存関係とコンテンツの定期的な更新
|
|
|
|
|
- メンテナによるIssueやディスカッションの監視
|
|
|
|
|
- GitHub Actionsを介した自動翻訳更新
|
|
|
|
|
- 活発な学習者と寄稿者コミュニティ
|
|
|
|
|
- 依存関係やコンテンツは定期的に更新
|
|
|
|
|
- メンテナによる問題監視と議論管理
|
|
|
|
|
- 翻訳の更新はGitHub Actionsで自動化
|
|
|
|
|
|
|
|
|
|
### 関連リソース
|
|
|
|
|
|
|
|
|
|
- [Microsoft Learn モジュール](https://docs.microsoft.com/learn/)
|
|
|
|
|
- [Student Hub リソース](https://docs.microsoft.com/learn/student-hub/)
|
|
|
|
|
- 学習者向けに推奨される[GitHub Copilot](https://marketplace.visualstudio.com/items?itemName=GitHub.copilot)
|
|
|
|
|
- 追加コース：生成AI、データサイエンス、ML、IoTカリキュラムあり
|
|
|
|
|
- [Student Hubリソース](https://docs.microsoft.com/learn/student-hub/)
|
|
|
|
|
- 学習者に推奨される[GitHub Copilot](https://marketplace.visualstudio.com/items?itemName=GitHub.copilot)
|
|
|
|
|
- 他のコース：生成AI、データサイエンス、機械学習、IoTカリキュラムも利用可能
|
|
|
|
|
|
|
|
|
|
### 各プロジェクトの作業方法
|
|
|
|
|
### 特定プロジェクトの作業方法
|
|
|
|
|
|
|
|
|
|
個別プロジェクトの詳細な手順は以下のREADMEを参照：
|
|
|
|
|
各プロジェクトの詳細な手順は以下のREADMEを参照：
|
|
|
|
|
- `quiz-app/README.md` - Vue 3クイズアプリケーション
|
|
|
|
|
- `7-bank-project/README.md` - 認証付き銀行アプリ
|
|
|
|
|
- `5-browser-extension/README.md` - ブラウザ拡張機能開発
|
|
|
|
|
- `7-bank-project/README.md` - 認証付きバンキングアプリ
|
|
|
|
|
- `5-browser-extension/README.md` - ブラウザー拡張開発
|
|
|
|
|
- `6-space-game/README.md` - Canvasベースゲーム開発
|
|
|
|
|
- `9-chat-project/README.md` - AIチャットアシスタント
|
|
|
|
|
- `9-chat-project/README.md` - AIチャットアシスタントプロジェクト
|
|
|
|
|
|
|
|
|
|
### モノレポ構造について
|
|
|
|
|
### モノレポ構成
|
|
|
|
|
|
|
|
|
|
従来型のモノレポではありませんが、このリポジトリは複数の独立したプロジェクトを含みます：
|
|
|
|
|
- 各レッスンは自己完結型
|
|
|
|
|
- プロジェクト間で依存関係は共有しない
|
|
|
|
|
- 個別プロジェクトに影響なく作業可能
|
|
|
|
|
- フルカリキュラム体験のためにリポジトリ全体をクローン推奨
|
|
|
|
|
伝統的なモノレポではありませんが複数の独立プロジェクトを含みます：
|
|
|
|
|
- 各レッスンは独立済み
|
|
|
|
|
- プロジェクト間で依存関係共有なし
|
|
|
|
|
- 個別プロジェクトの作業が他に影響を与えない
|
|
|
|
|
- フルカリキュラム体験のためには全リポジトリのクローン推奨
|
|
|
|
|
|
|
|
|
|
---
|
|
|
|
|
|
|
|
|
|
<!-- 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]
6 months ago