Copilotでゲーム開発を始める：VS Codeの設定から最初の1本まで

Copilotを使う前に決めること

Copilotのサブスクリプションはいくつかのプランに分かれており、個人向けの無料枠と有料プランでは月あたりの補完回数やチャット機能の制限が異なります。料金や上限は変わりやすいため、GitHubの公式サイトで現在の条件を確認してからアカウントを作成してください。

VS Codeのバージョンは、Copilot拡張機能が安定して動作する最新の安定版（Stable）を使うのが基本です。Insiders版は機能が先行する反面、拡張機能との相性問題が起きやすいため、ゲーム制作の用途では避けた方が無難です。

VS Codeへの導入手順

1. 拡張機能のインストール

VS Codeの拡張機能パネル（Ctrl+Shift+X）で「GitHub Copilot」を検索し、インストールします。合わせて「GitHub Copilot Chat」もインストールしておきます。この2つはセットで動作し、インラインの補完と対話型チャットの両方が使えるようになります。

インストール後、GitHubアカウントでサインインするよう求められます。VS Codeの右下にCopilotのアイコンが表示され、スピナーが止まれば接続完了です。アイコンに斜線が入っている場合は、サインアウト状態か補完が一時停止されています。

2. ゲーム開発向けの設定調整

デフォルト設定のままでも補完は動きますが、次の2点を調整すると体験が変わります。

自動補完のトリガー遅延を短くするsettings.json（Ctrl+, → 右上のアイコンで直接編集）に以下を追加します。

"editor.inlineSuggest.enabled": true,
"github.copilot.editor.enableAutoCompletions": true

デフォルトではすでに有効ですが、明示的に書いておくと他のPCへの設定移行時に迷いません。

言語モードをHTMLに固定するブラウザゲームをHTML+JavaScriptで作る場合、ファイルの拡張子が.htmlであれば自動的に認識されます。JavaScriptのロジック部分を.jsファイルに分けている場合は、ファイルごとに言語モードが切り替わるため補完の文脈も変わります。単一のHTMLファイルで作り始める場合は、<script>タグ内でも補完が効くため特別な設定は不要です。

3. ワークスペースのコンテキストを整える

Copilotはカーソルの周辺コードと、同じワークスペース内の開いているファイルを文脈として参照します。つまり、ゲームのフォルダを開いた状態で作業することが重要です。フォルダを開かずに単一ファイルだけを開いている場合、参照できる文脈が狭くなり、提案の一貫性が下がります。

ゲームプロジェクトを始めるときは、先にフォルダを作り（例：my-game）、その中にindex.htmlとgame.jsを置いてからファイル → フォルダを開くで開始するのが基本の流れです。

最初のゲームコードを引き出すプロンプトの作り方

Copilotの補完は「次のトークンを予測する」という仕組みのため、曖昧なコメントより意図が明確なコメントの方が精度が上がります。

コメントで設計を先に書く

コードを書く前に、JavaScriptの先頭にコメントで仕様を書きます。以下は例です。

// キャンバスサイズ: 480x320
// プレイヤーは左右キーで移動、スペースキーでジャンプ
// 床に落ちたらゲームオーバー
// スコアは画面左上に表示

このコメントを書いた後で改行すると、Copilotがそれに続く変数宣言やゲームループの骨格を提案し始めます。提案が出たらTabで確定し、次の行に進むと続きが補完されます。

チャットで骨格を一度に生成する

Copilot Chatのパネル（Ctrl+Alt+I）を開き、次のような形式で依頼します。

HTML+JavaScriptで動くブラウザ用のシンプルなシューティングゲームを書いてください。
条件：
- 単一のHTMLファイルに収める
- Canvas APIを使う
- プレイヤーは左右に移動して弾を撃つ
- 敵は上から降ってくる
- スコアとゲームオーバー表示を含む
- 外部ライブラリは使わない

「外部ライブラリは使わない」と明示することで、CDNへの依存がない自己完結したコードが返ってきます。ブラウザで直接開けること、そのままZIPに固めてアップロードできることを考えると、依存関係のないコードから始める方が後工程が楽です。

チャットで生成されたコードは、index.htmlにコピーしてブラウザで開き、動作を確認します。うまく動かない部分は、エラーメッセージをそのままチャットに貼り付けて「このエラーを直してください」と聞くのが最短ルートです。

提案がズレているときの対処

Copilotの補完が意図と違う方向に進むことはよくあります。原因のほとんどは次の3つです。

1. コメントが短すぎる：「// ゲーム」より「// Canvas上で動くパズルゲーム。タイルをクリックして隣と交換する。」の方が具体的な補完が返ります。
2. 変数名が汎用的すぎる：dataやobjといった名前は文脈が薄い。playerX、enemyList、tileGridのようにゲームの要素が名前から伝わると、続くコードの予測精度が上がります。
3. 補完が長くなりすぎている：一度に大きなブロックを補完させると途中でロジックが崩れることがあります。関数単位でコメントを書き、関数ごとに補完・確認するサイクルにすると安定します。

生成したコードをゲームとして整える

チャットで骨格を作った後、完成に向けて詰めていく段階があります。ここでもCopilotは有効ですが、使い方が変わります。

インラインコメントで局所的に修正を指示するすでにあるコードの該当行に// ここで当たり判定を追加とコメントを書くと、その位置に挿入される補完が提案されます。既存コードを上書きせずに機能を追加したいときに使います。

リファクタリングはチャットの「/explain」と「/fix」を使うコードを選択してチャットに貼り、/explainと入力すると動作の説明が返ります。理解した上で構造を変えたい場合は/fixや自然言語で依頼します。「この関数を分割して読みやすくしてください」という依頼で、長くなった関数を整理してもらえます。

スマホ対応のタッチ操作は後から追加しやすいキーボード操作が動いた後、「タッチ操作も追加してください。スマートフォンで左半分タップで左移動、右半分タップで右移動」とチャットで依頼すると、既存のキーボードイベントに並べてtouchstartとtouchendの処理が追加されます。最初から両対応にしようとするより、段階的に追加する方がCopilotの提案も安定します。

次の行動

VS Codeに「GitHub Copilot」と「GitHub Copilot Chat」の2つの拡張機能を入れ、ゲームのフォルダを作ってから開く習慣を最初につけてください。最初の1本はチャットで骨格を生成し、動作確認してから細部を補完で詰める流れが最も早く完成に近づきます。完成したHTMLファイルやZIPは、アソバース（https://aso-verse.com）にそのまま投稿して公開できます。

参考資料

• GitHub Copilot 公式ドキュメント（GitHub Docs）
• Visual Studio Code 公式ドキュメント — Copilot in VS Code