========================================================================
SkillSemiWebGame - 環境構築ガイド (Environment Setup Guide)
========================================================================
1. 事前準備 (Prerequisites)
------------------------------------------------------------------------
1-0. 目的
本ドキュメントは，「SkillSemiWebGame」のMonorepo構成による開発環境を構築
[cite_start]するための手順書である． [cite: 1]
[cite_start]※ 本プロジェクトは Node.js v20 LTS 以上を必須とする． [cite: 8, 14]
1-1. 必須ツールのインストール
[cite_start]開発を開始する前に，以下のツールをインストールしバージョンを確認する． [cite: 14]
1. [cite_start]Node.js (v20.x LTS) [cite: 8, 14]
・公式サイトよりLTS版をインストールする．
・確認コマンド:
[cite_start]$ node -v [cite: 14]
2. [cite_start]pnpm (Package Manager) [cite: 1, 8, 14]
[cite_start]・Node.js 標準の npm ではなく pnpm を使用する． [cite: 1, 8]
[cite_start]・Corepack (Node.js同梱) を有効化するか，スタンドアロンでインストールする． [cite: 14]
・確認コマンド:
[cite_start]$ pnpm -v [cite: 14]
2. プロジェクト初期化 (Project Initialization)
------------------------------------------------------------------------
2-1. ディレクトリ作成と初期化
1. プロジェクトルートの作成
任意の場所にプロジェクトフォルダを作成し，移動する．
$ mkdir SkillSemiWebGame
$ cd SkillSemiWebGame
2. Gitの初期化
$ git init
3. pnpm の初期化
$ pnpm init
2-2. ワークスペース設定 (Monorepo Setup)
[cite_start]ルートディレクトリに以下の設定ファイルを作成し，モノレポ構成を定義する． [cite: 1, 5]
1. [cite_start]pnpm-workspace.yaml [cite: 5]
[cite_start]・packages/shared を共通ライブラリとし，apps 配下にアプリを配置する． [cite: 5, 7]
・内容:
packages:
- 'apps/*'
- [cite_start]'packages/*' [cite: 5]
2. [cite_start].npmrc [cite: 5]
[cite_start]・依存関係解決の設定を行う (shamefully-hoist=true 推奨)． [cite: 5]
・内容:
[cite_start]shamefully-hoist=true [cite: 5]
2-3. ディレクトリ構造の構築
[cite_start]以下の構成になるようにディレクトリを作成する． [cite: 5]
root/
├── apps/
[cite_start]│ ├── client/ # フロントエンド (Browser) [cite: 5, 9]
[cite_start]│ └── server/ # バックエンド (Node.js) [cite: 5, 11]
└── packages/
[cite_start]└── shared/ # 共通ロジック (Shared Library) [cite: 6, 7]
・作成コマンド例:
[cite_start]$ mkdir -p apps/client apps/server packages/shared [cite: 5, 6]
3. パッケージ・ライブラリ導入 (Dependency Installation)
------------------------------------------------------------------------
3-1. 共通ライブラリ (packages/shared)
[cite_start]共通ロジック用のパッケージ設定を行う． [cite: 6]
1. 初期化とビルドツール導入
$ cd packages/shared
$ pnpm init
[cite_start]$ pnpm add -D typescript tsup protobufjs [cite: 8]
2. 設定ファイルの調整 (package.json)
・name: "@repo/shared" と命名する（推奨）．
・main: "./dist/index.js", types: "./dist/index.d.ts" を指定する．
[cite_start]・scripts: "build": "tsup src/index.ts --format cjs,esm --dts" を追加する． [cite: 8]
3-2. フロントエンド (apps/client)
[cite_start]Vite プロジェクトとして初期化を行う． [cite: 9]
1. プロジェクト作成
$ cd ../../apps/client
$ pnpm create vite . [cite_start]--template preact-ts [cite: 9, 10]
2. 依存ライブラリのインストール
[cite_start]・Pixi.js (描画エンジン) と protobufjs (通信) を追加する． [cite: 8, 9]
[cite_start]・共通ライブラリへの依存を追加する． [cite: 7]
$ pnpm add pixi.js protobufjs
$ pnpm add @repo/shared --workspace
3-3. バックエンド (apps/server)
[cite_start]Node.js アプリケーションとして初期化を行う． [cite: 11]
1. 初期化
$ cd ../../apps/server
$ pnpm init
2. 依存ライブラリのインストール
[cite_start]・ws (WebSocket), protobufjs (通信) を追加する． [cite: 8, 11]
[cite_start]・開発用ツール (tsx, typescript, @types/node, @types/ws) を追加する． [cite: 11]
[cite_start]・共通ライブラリへの依存を追加する． [cite: 7]
$ pnpm add ws protobufjs
$ pnpm add -D tsx typescript @types/node @types/ws
$ pnpm add @repo/shared --workspace
4. 開発ツール設定 (Dev Tools Setup)
------------------------------------------------------------------------
4-1. [cite_start]VS Code 拡張機能 [cite: 14]
[cite_start]推奨エディタである VS Code に以下の拡張機能をインストールする． [cite: 14]
[cite_start]■ 必須拡張機能 [cite: 14]
[cite_start]・ESLint [cite: 13, 14]
[cite_start]・Prettier - Code formatter [cite: 13, 14]
[cite_start]・EditorConfig for VS Code [cite: 14]
[cite_start]■ 推奨拡張機能 [cite: 14]
[cite_start]・Hex Editor (バイナリパケットのデバッグ用・Microsoft公式) [cite: 14]
[cite_start]・GitHub Copilot [cite: 14]
4-2. [cite_start]AI アシスタント設定 [cite: 15]
[cite_start]開発効率化のため，以下のAIツールのアカウント設定を確認する． [cite: 3, 13, 15]
1. [cite_start]Gemini Pro [cite: 3, 13, 15]
[cite_start]・学校提供ライセンスでのアクセス権限を確認する． [cite: 3, 15]
2. [cite_start]GitHub Copilot Pro [cite: 3, 13, 15]
[cite_start]・Student Developer Pack が有効化されているか確認する． [cite: 3, 15]
[cite_start]・VS Code 右下のアイコンからログイン状態を確認する． [cite: 14]
5. 動作確認 (Verification)
------------------------------------------------------------------------
5-1. ビルド確認
ルートディレクトリから全体の依存関係をインストールし，ビルドを試行する．
$ cd ../../
$ pnpm install
$ pnpm --filter @repo/shared build
[cite_start]※ shared のビルドが成功することを確認する． [cite: 7, 8]
5-2. 開発サーバー起動
それぞれのディレクトリで開発サーバーが起動することを確認する．
・Client:
$ pnpm --filter client dev
・Server:
$ pnpm --filter server dev (package.json にスクリプト設定後)
