TypeScript設定の複雑さを回避！1分でゲーム開発を始めよう
TypeScriptでゲーム開発を始めようとすると、実際にコードを書き始める前に、こんなにたくさんの設定ファイルが必要になります：
tsconfig.json -
TypeScriptコンパイラの設定
package.json -
プロジェクト情報とパッケージ管理
webpack.config.js
- モジュールバンドラーの設定
babel.config.js
- JavaScriptトランスパイラーの設定
.gitignore -
Gitで無視するファイルの指定
これらの設定を一つずつ理解して作るのは、上級者でも30分〜1時間かかる作業です！
ボイラープレート（雛形・テンプレート）とは、上記のような面倒な設定をすべて済ませた「プロジェクトの出発点」のことです。
親切な開発者が「TypeScript + PhaserJS でゲーム開発したい人向け」に、すべての設定を完璧に整えて、GitHubで公開してくれています。
📦 つまり...
複雑な設定 = 30分〜1時間 → たった1分！
今回は、photonstorm/phaser3-typescript-project-template という、Phaser公式が推奨するテンプレートを使います。
まず、ゲームプロジェクトを保存する場所を決めましょう。Windowsなら、ドキュメントフォルダの下に「games」フォルダを作るのがおすすめです。
💡 これで、gamesフォルダの場所でターミナルが開きます。
git clone
コマンドを使って、テンプレートプロジェクトを自分のPCにコピーします。
「my-first-game」の部分は、あなたの好きなプロジェクト名に変更できます。
このコマンドを実行すると、すべての設定が完了したプロジェクトが「my-first-game」フォルダとして作成されます！
作成されたプロジェクトフォルダに移動しましょう。
これで、ターミナルの作業位置が、新しく作成されたプロジェクトフォルダの中に変わります。
ダウンロードしたボイラープレートには、package.jsonというファイルに「このプロジェクトに必要なパッケージリスト」が記載されています。これらのパッケージを一括でインストールします。
このコマンドは、package.json
に記載されているすべての必要なパッケージを自動でダウンロード・インストールしてくれます。つまり、ボイラープレートの作者が「これらが必要です」と指定したパッケージを、一度に全部インストールする作業です。
⏰ 時間について：
初回は数分かかることがありますが、これは完全に正常です。数十個のパッケージをインターネットからダウンロードしているため、コーヒーでも飲みながら待ちましょう！
インストールが完了したら、VSCodeでプロジェクトを開きましょう。
このコマンドで、現在のフォルダ（プロジェクトフォルダ）がVSCodeで開きます。
💡 別の方法：
VSCodeを直接起動して、「ファイル」→「フォルダーを開く」から、プロジェクトフォルダを選択してもOKです。
いよいよ、ゲームをブラウザで確認してみましょう！VSCodeのターミナル（Ctrl+@）で以下のコマンドを実行します。
成功すると、以下のようなメッセージが表示され、ブラウザが自動で開いてサンプルゲームが動作します！
VSCodeでプロジェクトを開くと、左側のエクスプローラーに以下のようなファイル構造が表示されます：
ゲーム開発中は、開発サーバーを起動して作業します。これは、コードを変更するたびに自動でブラウザをリロードしてくれる、非常に便利な機能です。
ゲームが完成したら、本番用のビルドを作成します。これは、実際にWebサイトで公開するための、最適化されたファイル群を生成する作業です。
実行が完了すると、dist
フォルダが作成され、公開用のファイルが生成されます。
開発サーバー起動
npm run dev でサーバーを起動
コード編集
VSCodeで
src/ フォルダ内のTypeScriptファイルを編集
自動リロード
ファイル保存と同時にブラウザが自動更新
ゲーム確認
ブラウザで変更結果をすぐに確認
ビルド & 公開
完成したら npm run build で公開用ファイルを生成
🎉 おめでとうございます！ これで開発環境の準備が完了しました。 次の章では、プログラミングの基礎から学習を始めましょう：
原因： Gitが正しくインストールされていない、またはPATHが設定されていない。
解決法： 前の章の手順に戻って、Gitを再インストールしてください。インストール後は、ターミナルを一度閉じて、新しく開き直してください。
原因： Node.jsが正しくインストールされていない。
解決法：
前の章の手順に戻って、Node.jsを再インストールしてください。node -v
と
npm -v
の両方でバージョンが表示されることを確認してください。
原因： VSCodeのコマンドラインツールが有効になっていない。
解決法： VSCodeを直接起動して「ファイル」→「フォルダーを開く」からプロジェクトフォルダを選択するか、エクスプローラーでプロジェクトフォルダを右クリック→「Code で開く」を選択してください。
原因： インターネット回線の問題、またはnpmのサーバーが混雑している。
解決法：
数分〜10分程度待ってみてください。それでも終わらない場合は、Ctrl+C
で中断して、もう一度 npm install を実行してください。
原因： ポートが既に使用されている、または依存関係に問題がある。
解決法：
npm install を再実行原因： 開発サーバーが正常に起動していない。
解決法：
npm run dev を実行