diff --git "a/docs/ENV_01_\347\222\260\345\242\203\346\247\213\347\257\211\343\203\273\346\212\200\350\241\223\343\202\271\343\202\277\343\203\203\343\202\257.txt" "b/docs/ENV_01_\347\222\260\345\242\203\346\247\213\347\257\211\343\203\273\346\212\200\350\241\223\343\202\271\343\202\277\343\203\203\343\202\257.txt" index ec0e55c..eda4c22 100644 --- "a/docs/ENV_01_\347\222\260\345\242\203\346\247\213\347\257\211\343\203\273\346\212\200\350\241\223\343\202\271\343\202\277\343\203\203\343\202\257.txt" +++ "b/docs/ENV_01_\347\222\260\345\242\203\346\247\213\347\257\211\343\203\273\346\212\200\350\241\223\343\202\271\343\202\277\343\203\203\343\202\257.txt" @@ -49,10 +49,11 @@ └── packages/ └── shared/ # 共通ロジック (Shared Library) ├── src/ + │ ├── index.ts # エントリーポイント (必須: tsupのビルド対象) │ ├── constants.ts # 定数 (マップサイズ，速度，FPS) │ ├── types.ts # 型定義 (パケット構造，ステート) │ ├── physics.ts # 物理・移動判定ロジック - │ └── schema.proto # Protocol Buffers 定義 + │ └── binary.ts # バイナリシリアライズ処理 (DataView Wrappers) └── tsup.config.ts # ビルド設定 ※ shared は client/server 両方から import して使用する． @@ -65,9 +66,9 @@ ・Runtime: Node.js (v20 LTS 以上) ・Package Manager: pnpm ・Build Tool: tsup (高速で軽量なTypeScriptバンドラ) - ・Serialization: protobufjs (Google Protocol Buffers) - - 採用理由: 通信量削減（仕様書要件: 下り30KB/s以下）のため，JSONではなくバイナリを使用． - - 用途: 座標データの圧縮，イベント通信． + ・Serialization: Custom Binary (Standard DataView API) + - 採用理由: ライブラリ依存をなくし、仕様書要件（30KB/s以下）を満たす最適化を行うため。 + - 用途: 座標データ、入力情報の圧縮通信。 3-2. フロントエンド (Client) ・Build Tool: Vite diff --git "a/docs/ENV_02_\347\222\260\345\242\203\346\247\213\347\257\211\346\211\213\351\240\206\346\233\270.txt" "b/docs/ENV_02_\347\222\260\345\242\203\346\247\213\347\257\211\346\211\213\351\240\206\346\233\270.txt" index abe6e4e..e42dba8 100644 --- "a/docs/ENV_02_\347\222\260\345\242\203\346\247\213\347\257\211\346\211\213\351\240\206\346\233\270.txt" +++ "b/docs/ENV_02_\347\222\260\345\242\203\346\247\213\347\257\211\346\211\213\351\240\206\346\233\270.txt" @@ -14,15 +14,22 @@ 開発を開始する前に，以下のツールをインストールしバージョンを確認する． 1. Node.js (v20.x LTS) - ・公式サイトよりLTS版をインストールする． + ・Nodesource リポジトリを使用してインストールする． + # リポジトリのセットアップとインストール + $ curl -fsSL https://deb.nodesource.com/setup_20.x | sudo -E bash - + $ sudo apt-get install -y nodejs + ・確認コマンド: - $ node -v + $ node -v # v20.x.x と表示されること 2. pnpm (Package Manager) ・Node.js 標準の npm ではなく pnpm を使用する． - ・Corepack (Node.js同梱) を有効化するか，スタンドアロンでインストールする． + ・Corepack (Node.js同梱) を有効化してインストールする． + $ sudo corepack enable + $ corepack prepare pnpm@latest --activate + ・確認コマンド: - $ pnpm -v + $ pnpm -v 2. プロジェクト初期化 (Project Initialization) @@ -78,24 +85,36 @@ 1. 初期化とビルドツール導入 $ cd packages/shared $ pnpm init - $ pnpm add -D typescript tsup protobufjs + $ pnpm add -D typescript tsup 2. 設定ファイルの調整 (package.json) ・name: "@repo/shared" と命名する（推奨）． ・main: "./dist/index.js", types: "./dist/index.d.ts" を指定する． ・scripts: "build": "tsup src/index.ts --format cjs,esm --dts" を追加する． + 3. エントリーポイントの作成 (追加手順) + tsupがビルド対象とするファイルを作成する． + + $ mkdir src + $ touch src/index.ts + + ※ 現時点では空ファイルでよいが，将来的に constants.ts 等を export する記述を行う． + (例: export * from './constants';) + 3-2. フロントエンド (apps/client) Vite プロジェクトとして初期化を行う． 1. プロジェクト作成 $ cd ../../apps/client $ pnpm create vite . --template preact-ts + ※ 実行中に表示される選択肢には以下のように回答すること： + ? Use rolldown-vite (Experimental)? » No + ? Install with pnpm and start now? » No 2. 依存ライブラリのインストール - ・Pixi.js (描画エンジン) と protobufjs (通信) を追加する． + ・Pixi.js (描画エンジン) を追加する． ・共通ライブラリへの依存を追加する． - $ pnpm add pixi.js protobufjs + $ pnpm add pixi.js $ pnpm add @repo/shared --workspace 3-3. バックエンド (apps/server) @@ -106,12 +125,25 @@ $ pnpm init 2. 依存ライブラリのインストール - ・ws (WebSocket), protobufjs (通信) を追加する． + ・ws (WebSocket) を追加する． ・開発用ツール (tsx, typescript, @types/node, @types/ws) を追加する． ・共通ライブラリへの依存を追加する． - $ pnpm add ws protobufjs + $ pnpm add ws $ pnpm add -D tsx typescript @types/node @types/ws $ pnpm add @repo/shared --workspace + + 3. サーバー用ディレクトリとファイルの作成 + tsxが実行対象とするエントリーポイントを作成する． + $ mkdir src + $ touch src/index.ts + + 4. 実行スクリプトの定義 + package.json にサーバー起動用のコマンドを追加する． + ・編集ファイル: apps/server/package.json + ・内容: + "scripts": { + "dev": "tsx watch src/index.ts" + } 4. 開発ツール設定 (Dev Tools Setup) @@ -153,10 +185,38 @@ ※ shared のビルドが成功することを確認する． 5-2. 開発サーバー起動 - それぞれのディレクトリで開発サーバーが起動することを確認する． + モノレポ構成のため，個別のディレクトリに移動せず，プロジェクトルートから + --filter オプションを使用して各アプリを起動する． + ※ ターミナルを2つ開き，両方を同時に起動した状態で開発を進めることを推奨． - ・Client: - $ pnpm --filter client dev + 1．Client (フロントエンド) の動作確認 + ・ルートディレクトリにて以下のコマンドを実行する． + $ pnpm --filter client dev + + ・ブラウザでの確認: + ターミナルに「➜ Local: http://localhost:5173/」と表示されたら， + Google Chrome等のブラウザを開き，アドレスバーに上記URLを貼り付けて実行する． + + ・正常動作の判断基準: + 画面に「Vite + Preact」のロゴと「Vite + Preact + TypeScript」といった + テキストが表示されていれば，フロントエンドの環境構築は成功である． - ・Server: - $ pnpm --filter server dev (package.json にスクリプト設定後) \ No newline at end of file + 2. Server (バックエンド) の動作確認 + ・テスト用コードの作成: + 動作確認用のエントリーポイントを作成する． + $ touch apps/server/src/index.ts + + ファイルに以下の内容を記述する． + console.log("Server is running!"); + + ・コマンド: + $ pnpm --filter server dev + + ・正常動作の判断基準: + ターミナルに「Server is running!」と出力されれば構築成功である． + + 3．終了方法 (重要) + ・動作確認を終了し，開発サーバーを停止させる場合は，ターミナル上で + 「Ctrl + C」を押下する． + ・停止後はブラウザでURLにアクセスしても接続不可となるが，再度起動 + コマンドを実行すればいつでも再開可能である． \ No newline at end of file