プロジェクト作成
ボイラープレート活用
TypeScript設定の複雑さを回避！1分でプロジェクトを開始しよう
なぜボイラープレートを使うの？
❌ 自力で設定する場合
- • TypeScript設定ファイル（tsconfig.json）の作成
- • Webpack/Viteなどのバンドラー設定
- • PhaserJSライブラリのインストール
- • 開発サーバーの設定
- • ファイル構造の設計
⏰ 所要時間：1-2時間 （初心者は3-4時間）
✅ ボイラープレートを使う場合
- • 既に最適化された設定ファイル
- • 必要なライブラリが全て含まれている
- • 推奨されるフォルダ構造
- • サンプルコード付き
- • すぐに開発開始可能
⏰ 所要時間：1-2分
初心者にとって、設定ファイルの調整は最も挫折しやすいポイントです。ボイラープレートを使うことで、 本質的なゲーム開発 にすぐに集中できます。
📦 ボイラープレートとは？
ボイラープレート（Boilerplate）とは、 プロジェクトのひな型 のことです。料理で言えば「調理済みの材料セット」のようなもので、面倒な下準備を省いてすぐに本格的な調理（開発）を始められます。
今回使用するボイラープレート
template-webpack-ts
TypeScript + PhaserJS開発に最適化された、GitHubで公開されている公式テンプレートです。
GitHubリポジトリを確認する🛠️ プロジェクト作成手順
1 プロジェクト用フォルダの作成
まず、プロジェクトを保存するフォルダを作成しましょう。
推奨フォルダ構造：
Documents/
├── GameDev/ ← ゲーム開発全般
├── my-first-game/ ← 今回作成するプロジェクト
├── puzzle-game/ ← 将来の2作目
└── action-game/ ← 将来の3作目
作成手順：
🪟 Windows（エクスプローラー）の場合：
- 1. エクスプローラーを開く
- 2. ドキュメントフォルダに移動
- 3. 右クリック → 新規作成 → フォルダー
- 4. 「GameDev」と名前を付ける
- 5. GameDevフォルダ内に「my-first-game」フォルダを作成
🍎 macOS（Finder）の場合：
- 1. Finderを開く
- 2. 書類フォルダに移動
- 3. 右クリック → 新規フォルダ
- 4. 「GameDev」と名前を付ける
- 5. GameDevフォルダ内に「my-first-game」フォルダを作成
💻 コマンドライン（全OS共通）の場合：
2 ボイラープレートのダウンロード
gitコマンドを使ってボイラープレートをダウンロードします。
重要： 事前に作成した「my-first-game」フォルダ内で以下のコマンドを実行してください。
ダウンロードコマンド：
⚠️ コマンドが失敗する場合：
- • my-first-gameフォルダにいることを確認
- • フォルダが空であることを確認
- • インターネット接続を確認
- • 最後の「.」（ピリオド）を忘れずに
3 依存関係のインストール
プロジェクトに必要なライブラリ（PhaserJS、TypeScriptコンパイラーなど）をインストールします。
インストールコマンド：
このコマンドで何が起こる？
- • package.jsonを読み込み
- • 必要なライブラリを自動ダウンロード
- • node_modulesフォルダに保存
- • 開発に必要なツールも一括インストール
⏰ 所要時間： 30秒〜2分程度（インターネット速度による）
4 VSCodeでプロジェクトを開く
作成したプロジェクトをVSCodeで開きましょう。
開く方法：
方法1：コマンドライン
現在のフォルダをVSCodeで開く
方法2：VSCodeから
- 1. VSCodeを起動
- 2. ファイル → フォルダーを開く
- 3. my-first-gameフォルダを選択
方法3：ドラッグ&ドロップ
my-first-gameフォルダをVSCodeのウィンドウにドラッグ&ドロップ
📁 プロジェクト構造の理解
ファイル・フォルダの役割
my-first-game/ ├── src/ ← ソースコード（あなたが編集するファイル） │ ├── main.ts ← アプリケーションのブートストラップ │ └── game/ ← ゲームコードフォルダ │ ├── main.ts ← ゲームエントリーポイント │ └── scenes/ ← ゲームシーン（画面）ごとのファイル ├── public/ ← 静的ファイル（画像、音声など） │ ├── index.html ← HTMLファイル │ ├── assets/ ← ゲーム素材 │ └── style.css ← スタイルシート ├── webpack/ ← Webpack設定ファイル ├── dist/ ← ビルド後のファイル（自動生成） ├── node_modules/ ← ライブラリ（npm install で作成） ├── package.json ← プロジェクト設定 └── tsconfig.json ← TypeScript設定
重要なフォルダ
- src/game/ - メインの作業場所
- public/assets/ - 画像・音声素材
- dist/ - 完成品（自動生成）
⚠️ 触らないフォルダ
- node_modules/ - ライブラリ
- webpack/ - ビルドツール設定
開発サーバーの起動
ゲームを実行してみよう！
ボイラープレートには既にサンプルゲームが含まれています。まずは動作確認をしてみましょう。
起動コマンド：
✅ 成功時の表示例：
ブラウザで確認：
- 1. ブラウザを開く
-
2.
http://localhost:8080/にアクセス - 3. PhaserJSのロゴとサンプル画面が表示されれば成功！
開発サーバーとは？
TypeScriptファイルを自動でJavaScriptに変換し、ブラウザで実行できる形でホストするローカルサーバーです。ファイルを保存すると自動でブラウザが更新されます。
🔧 よくあるトラブルと解決法
❌ git cloneができない
- • Gitがインストールされているか確認
- • フォルダが空であることを確認
- • インターネット接続を確認
❌ npm installができない
- • Node.jsがインストールされているか確認
- • プロジェクトフォルダにいることを確認
- • package.jsonが存在することを確認
❌ npm run devが動かない
- • npm installが完了しているか確認
- • ポート5173が他のアプリで使用されていないか確認
- • ターミナルを再起動してみる
❌ ブラウザに何も表示されない
- • URLが正しいか確認（localhost:5173）
- • ブラウザのキャッシュをクリア
- • F12で開発者ツールを開いてエラーを確認
🎉 プロジェクト作成完了！
お疲れさまでした！これで本格的なゲーム開発の準備が整いました。
✅ プロジェクト作成
ボイラープレート活用
✅ 開発環境
VSCode + 開発サーバー
動作確認
サンプルゲーム実行
次章では、プログラミングの基礎である「変数」について学習します！