BUNCHO GAMES

Chapter 0a: 開発環境の準備

進捗:
00a/8

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

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

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

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

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

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

PhaserJS公式サンプル集をチェック 🎮

TypeScript + PhaserJSって何？

TypeScript

JavaScriptに型安全性を加えた言語 です。Microsoftが開発し、現在Web開発の標準となっています。

  • ✅ コード補完が強力
  • ✅ バグを事前に発見
  • ✅ 大規模開発に最適
  • ✅ JavaScriptの知識が活かせる

PhaserJS

2Dゲーム開発に特化したJavaScriptフレームワーク です。豊富な機能と分かりやすいAPIが特徴です。

  • ✅ 物理演算エンジン内蔵
  • ✅ アニメーション機能充実
  • ✅ 音声・画像処理対応
  • ✅ モバイル対応

🛠️ 開発環境の準備

1 Node.js のインストール

Node.jsは、サーバーサイドでJavaScriptを実行するためのランタイムです。今回は開発ツールとして利用します。

なぜNode.jsが必要なの？

TypeScriptのコンパイラーやPhaserJSライブラリを管理するnpmというツールがNode.jsに含まれているからです。

インストール手順：

  1. 1. Node.js公式サイト にアクセス
  2. 2. 「推奨版」(LTS版)をダウンロード
  3. 3. ダウンロードしたインストーラーを実行
  4. 4. 画面の指示に従ってインストール完了

インストール確認：

コマンドプロンプト（Windows）またはターミナル（Mac/Linux）を開いて、以下のコマンドを実行してください：

node --version
npm --version

✅ バージョン番号が表示されればインストール成功です！

2 Git のインストール

Gitは、プログラムのバージョン管理を行うツールです。コードの変更履歴を記録し、チームでの共同開発を可能にします。

なぜGitが必要なの？

コードのバックアップ、変更履歴の管理、GitHub等でのコード共有に必須のツールです。

インストール手順：

🪟 Windows の場合：
  1. 1. Git for Windows からダウンロード
  2. 2. インストーラーを実行（基本的にデフォルト設定でOK）
🍎 macOS の場合：
  1. 1. Homebrew をインストール（未インストールの場合）
  2. 2. ターミナルで brew install git を実行
🐧 Linux の場合：
sudo apt install git

（Ubuntu/Debianの場合）

インストール確認：

git --version

✅ バージョン番号が表示されればインストール成功です！

3 Visual Studio Code のインストール

Visual Studio Code（VSCode）は、Microsoftが開発した無料のコードエディターです。TypeScript開発に最適化されており、豊富な拡張機能が利用できます。

なぜVSCodeがおすすめ？

  • • TypeScriptの優秀なコード補完
  • • リアルタイムエラー検出
  • • 豊富なデバッグ機能
  • • 多彩な拡張機能

インストール手順：

  1. 1. Visual Studio Code公式サイト にアクセス
  2. 2. お使いのOSに応じたインストーラーをダウンロード
  3. 3. ダウンロードしたインストーラーを実行
  4. 4. インストール時のオプションは全てチェックを入れておくことを推奨

おすすめ拡張機能：

VSCodeインストール後、以下の拡張機能をインストールすることを強く推奨します：

  • • TypeScript Importer - TypeScriptの開発効率UP
  • • Prettier - コードの自動整形
  • • ES7+ React/Redux/React-Native snippets - コードスニペット
  • • Live Server - 開発用サーバー（重要！）

拡張機能は、VSCode左サイドバーの「拡張機能」アイコンから検索・インストールできます。

⚙️ 初期設定

Git の基本設定

Gitを使用する前に、ユーザー名とメールアドレスを設定しましょう：

git config --global user.name "あなたの名前"
git config --global user.email "あなたのメールアドレス"

ポイント： メールアドレスは、将来GitHubを使用する際のアカウントと同じものを使用することを推奨します。

🎉 環境構築完了！

お疲れさまでした！これで開発環境の準備が整いました。

✅ Node.js

開発ツールの基盤

✅ Git

バージョン管理

✅ VSCode

開発エディター

次章では、実際にTypeScript + PhaserJSプロジェクトを作成していきます！