TypeScript + PhaserJS
ゲーム開発はじめの一歩 🚀

VSCodeを使ったモダンなゲーム開発環境を構築しよう！

🤔 どんなゲームが作れるの？

TypeScriptとPhaserJSの組み合わせは、Webブラウザで動作する2Dゲームを作るための強力なタッグです。つまり、ユーザーはアプリをインストールすることなく、PCやスマートフォンのブラウザでURLにアクセスするだけであなたのゲームを遊べます。

作れるゲームのジャンルは非常に幅広く、あなたのアイデア次第で様々なものが実現可能です。

百聞は一見に如かず。具体的にどんなものが作れるのかは、公式サイトの豊富なサンプル集を見るのが一番です。

公式ゲームサンプル集を見てみる

ようこそ！

このチュートリアルでは、VSCodeを使ってTypeScriptとPhaserJSでゲームを作り始めるための「開発環境の準備」を解説します。プログラミング自体が初めての方でも分かりやすいように、必要なツールのインストールから丁寧に説明していきます。

0. メインエディタ VSCodeをインストールしよう

まず、コードを書くためのメインツールである「Visual Studio Code（ビジュアル・スタジオ・コード）」をインストールします。これは世界中の多くの開発者に使われている、高機能で使いやすいテキストエディタです。

  1. VSCode公式サイトにアクセスし、お使いのOS（Windows）用のインストーラーをダウンロードします。
  2. ダウンロードしたインストーラーを起動し、指示に従って進めます。基本的には、すべてデフォルト設定のまま「次へ」をクリックして問題ありません。
  3. インストールが完了したら、VSCodeを起動してみましょう。

はじめに：ターミナルに慣れよう

これからの作業では、「コマンドプロンプト」や「ターミナル」と呼ばれる黒い画面を使います。これは、キーボードで命令（コマンド）を打ち込んで、PCに直接指示を出すためのツールです。難しそうに見えますが、決まった文字を打ち込むだけなので、すぐに慣れますよ。

ターミナルの開き方 (Windows)

  • スタートメニューから: スタートボタンを押し、`cmd` と入力してEnterキーを押す。
  • エクスプローラから: フォルダを開き、上部のアドレスバーに `cmd` と入力してEnterキーを押す。（そのフォルダの場所でターミナルが開きます）

おすすめ: VSCode内蔵ターミナル

VSCodeには、このターミナルが内蔵されていてとても便利です。エディタ画面の下部にターミナルを開くには、以下の方法があります。

  • メニューから: 上部メニューバーで `ターミナル` > `新しいターミナル` を選択。
  • ショートカットキーで: Ctrl + @ を押す。(Macの場合は ⌃ control + ⇧ shift + `)

💡 コマンドの入力方法

  • 手入力： チュートリアルのコマンドをそのまま手で入力
  • コピー&ペースト： チュートリアルのコマンドをコピーして、ターミナルで右クリックでペースト
  • 注意： Ctrl+V でのペーストは使えません！必ず右クリックを使ってください

今後のコマンド入力は、すべてこのVSCode内のターミナルで行うとスムーズです。

1. 開発ツールをインストールしよう

Node.js (npm) のインストール

  1. Node.js公式サイトにアクセスします。LTS版（推奨版）と書かれたものが2つありますが、左側の緑色のボタン「Windows インストーラー (.msi)」をクリックしてダウンロードするのが簡単です。
  2. ダウンロードしたインストーラーを起動し、指示に従って進めます。
    重要: 「Automatically install the necessary tools.」のチェックボックスが表示されたら、必ずチェックを入れてください。
  3. インストール完了後、VSCodeのターミナルで以下のコマンドを実行し、バージョン番号が表示されるか確認します。
    node -v
    npm -v

    例: `v20.11.0` のようなバージョンが表示されればOKです。

Git のインストールと便利な使い方

  1. Git公式サイトにアクセスし、Windows版をダウンロードします。
  2. インストーラーを起動します。設定項目がたくさんありますが、基本的にはすべてデフォルト設定のまま「Next」で進めて大丈夫です。
  3. インストール完了後、以下のコマンドでバージョンを確認します。
    git --version

    例: `git version 2.44.0.windows.1` のように表示されれば成功です。

便利な使い方：開発の「雛形」をもらおう

Gitの強力な機能の一つに、他の人が作ったプロジェクトを丸ごとコピーしてこれる「クローン(clone)」というものがあります。

特にTypeScriptでゲーム開発を始める時、TypeScriptをブラウザで動くJavaScriptに変換したり、Phaserを正しく読み込んだりするための、たくさんの設定ファイルが最初に必要になります。これをゼロから作るのは、初心者にはとても大変な作業です。

そこで役立つのが、「開発の雛形（ひながた）」や「スターターキット」です。これは、親切な開発者たちが「面倒な初期設定は全部やっておいたから、ここからゲーム作りに集中していいよ！」と用意してくれた、プロジェクトのテンプレートです。

この「雛形」はGitのリポジトリ（保管場所）として公開されていることが多く、`git clone` コマンド一つで自分のPCにコピーできます。これにより、あなたは最も楽しい「ゲームのロジックを考える」部分から開発をスタートできるのです。

2. VSCode をパワーアップしよう

VSCodeをさらに使いやすくするために、便利な「拡張機能」をインストールしましょう。左側の拡張機能アイコン（四角が4つ並んだマーク）から、以下の名前を検索してインストールしてください。

  • ▶
    Japanese Language Pack for Visual Studio Code

    VSCodeのメニューなどを日本語化します。

  • ▶
    ESLint

    コードの間違いや、書き方が統一されていない部分を指摘してくれます。

  • ▶
    Prettier - Code formatter

    バラバラな書き方のコードを、ボタン一つで綺麗に整えてくれます。

  • ▶
    Live Server

    作成中のゲームをブラウザでリアルタイムに確認できます。コードを保存するたびに自動でリロードされるので非常に便利です。

3. Windowsの作法：PATHを理解しよう

🤔 PATHって何？

ひと言でいうと、「コマンドのショートカットをOSに登録すること」です。

PCは、`node` や `git` といったコマンドがどこに保存されているかを直接は知りません。PATHを設定することで、「`node`というコマンドが入力されたら、`C:\Program Files\nodejs\node.exe` を実行してね」とPCに教えてあげることができます。

これにより、どのフォルダで作業していても、短いコマンド名だけでプログラムを呼び出せるようになります。

ご安心ください！ 今回インストールしたNode.jsとGitは、インストーラーが自動でPATHを設定してくれているため、ご自身で何か作業する必要はありません。