TypeScript & Phaser.js 開発基礎ガイド（解説付き・3時間集中版）

 

このガイドは、

  • WEBアプリをPhaser.js + TypeScriptで開発する

  • 既にHTML/CSS/JavaScriptの基礎を理解している

  • React + TypeScriptプロジェクトを進める予定

という前提で構成しています。


🛠️ VSCode + TypeScript + Phaser.js 環境構築完全ガイド

✅ 【0. Node.js インストール】

🎯 目的

TypeScript開発にはNode.jsが必須。

▶️ インストール手順

  1. Node.js公式サイト にアクセス

  2. 「推奨版 LTS」をダウンロード

  3. インストーラーの指示に従いインストール

  4. インストール確認

node -v
npm -v

例: node v18.x.x, npm 9.x.x などが表示されれば成功。

✅ 【1. VSCode のインストール】

  1. Visual Studio Code公式サイト からダウンロード

  2. インストーラーでセットアップ

  3. 起動後、以下の拡張機能を導入

    • ESLint

    • Prettier

    • TypeScript Hero（任意）

✅ 【2. プロジェクト作成（最短ルート）】

▶️ Step 1. Vite + TypeScript テンプレート作成

bash
npm create vite@latest phaser-math-game -- --template vanilla-ts
cd phaser-math-game

これで、TypeScript + Vite 構成の雛形が数秒で生成されます。

▶️ Step 2. Phaser.js をインストール

bash
npm install phaser

▶️ Step 3. VSCode でフォルダを開く（VSCodeのターミナルで作業していたら不要です）

bash
code .

✅ 【3. Phaser.js ゲームコード作成】

▶️ src/main.ts を編集

以下は最小構成の動作確認コードです。

ts
import Phaser from 'phaser';

class MathGame extends Phaser.Scene {
  create() {
    this.add.text(100, 100, 'Phaser Math Game Start!', { fontSize: '32px' });
  }
}

const config: Phaser.Types.Core.GameConfig = {
  type: Phaser.AUTO,
  width: 1000,
  height: 400,
  backgroundColor: '#444',
  scene: MathGame,
};

new Phaser.Game(config);

✅ 【4. 開発サーバ起動】

bash
npm run dev

ブラウザで http://localhost:5173 を開くと、ゲーム画面が表示されます。

✅ 【5. ビルド】

公開用にビルドする場合は、

bash
npm run build

  • dist/ フォルダにHTML/JS/CSSが出力され、Bloggerへの埋め込みやFirebase Hostingで公開可能。

🕒 ここからの学習計画

時間内容到達目標
0:00 – 0:30TypeScript基礎型定義と主要構文を理解する
0:30 – 1:30React + TypeScript実装で型付けできる
1:30 – 2:00Phaser.js概念理解ゲームエンジンの構造を理解
2:00 – 3:00Phaser.jsハンズオン簡易ゲームを動かす

✅ 1. TypeScript基礎（30分）

🎯 学習目標

TypeScript（TS）とは？
JavaScriptに型定義を加えた言語です。型エラーをコンパイル時に検知できるため、開発効率とバグ防止に役立ちます。

▶️ 1.1 型アノテーション

型アノテーションとは、変数や関数に型を指定することです。

ts
let count: number = 10; // 数値型
let username: string = "ゆたか"; // 文字列型
let isCorrect: boolean = true; // 真偽値型

✅ 型を指定することで、意図しない代入ミスを防ぎます。

▶️ 1.2 関数の型定義

関数には引数と戻り値に型を付けます。

ts
function add(a: number, b: number): number {
  return a + b;
}

✅ 上記では、aとbは数値型、戻り値も数値型と指定しています。

▶️ 1.3 オブジェクト型（interface）

TypeScriptの強力な機能のひとつがinterfaceです。

ts
interface User {
  name: string;
  age: number;
}

const user: User = { name: "ゆたか", age: 35 };

✅ interfaceにより、オブジェクト構造を定義・統一でき、拡張性も高まります。

▶️ 1.4 配列型・ジェネリクス

ジェネリクスは、汎用的に型を扱うための仕組みです。

ts
let scores: number[] = [80, 90, 100];

function identity<T>(arg: T): T {
  return arg;
}

console.log(identity<string>("hello"));

✅ <T>により、呼び出し側で型を指定可能。Reactでも頻用します。

💡 学習ポイント

TypeScript公式ハンドブックを5-10分で斜め読みしておくと理解が深まります。

🔗 TypeScript公式 Handbook

✅ 2. React + TypeScript（60分）

🎯 学習目標

Reactコンポーネントに型を付けることで、propsやstateのエラーを未然に防ぎます。

▶️ 2.1 Functional Component

Reactではtypeやinterfaceでprops型を定義します。

tsx
type GreetingProps = { name: string }

const Greeting = ({ name }: GreetingProps) => {
  return <h1>Hello, {name}!</h1>
}

✅ これにより、nameが必須であることが明示され、補完も効きます。

▶️ 2.2 useState型指定

useStateで初期値から型推論されますが、明示指定する場合：

tsx
import { useState } from 'react';

const Counter = () => {
  const [count, setCount] = useState<number>(0);
  return (
    <div>
      <p>Count: {count}</p>
      <button onClick={() => setCount(count + 1)}>+1</button>
    </div>
  )
}

✅ 特にnull許容や複合オブジェクトの場合、型指定が重要です。

💡 学習ポイント

TypeScriptを導入すると、IDEの補完・型エラー表示が大幅に向上し、コーディング効率と品質が上がります。

✅ 3. Phaser.js概念理解（30分）

🎯 学習目標

Phaser.jsとは、HTML5対応の2Dゲームエンジンです。ブラウザ上で高速にスプライトアニメーションや物理演算を扱えます。

▶️ 3.1 概要

  • Scene（シーン）: ゲーム画面や状態の単位

  • Sprite（スプライト）: 画像やキャラクター

  • update(): 毎フレーム呼ばれる処理

▶️ 3.2 最小構成例

ts
import Phaser from 'phaser';

const config: Phaser.Types.Core.GameConfig = {
  type: Phaser.AUTO,
  width: 800,
  height: 600,
  scene: {
    preload,
    create,
    update,
  },
};

new Phaser.Game(config);

function preload(this: Phaser.Scene) {
  this.load.image('logo', 'logo.png');
}

function create(this: Phaser.Scene) {
  this.add.image(400, 300, 'logo');
}

function update(this: Phaser.Scene) {
  // フレームごとの更新処理
}

💡 学習ポイント

✅ this: Phaser.Scene を付けると型補完が有効
✅ Phaser 公式Examplesを動かすと理解が早まります。

✅ 4. Phaser.jsハンズオン（60分）

🎯 学習目標

Phaser.jsで

  • スプライトを表示

  • クリックイベントを実装

  • フレーム更新で回転アニメーション

を習得します。

▶️ 4.1 セットアップ

bash
npm install phaser

▶️ 4.2 クラスベースシーン例

ts
import Phaser from 'phaser';

class MyGame extends Phaser.Scene {
  logo!: Phaser.GameObjects.Image;

  constructor() {
    super('scene-key');
  }

  preload() {
    this.load.image('logo', 'logo.png');
  }

  create() {
    this.logo = this.add.image(400, 300, 'logo');
    this.input.on('pointerdown', () => {
      this.logo.setScale(1.5); // クリックで拡大
    });
  }

  update() {
    this.logo.rotation += 0.01; // 毎フレーム回転
  }
}

const config: Phaser.Types.Core.GameConfig = {
  type: Phaser.AUTO,
  width: 800,
  height: 600,
  scene: MyGame,
};

new Phaser.Game(config);

💡 学習ポイント

✅ create()内でスプライト配置
✅ update()で毎フレーム動かす
✅ input.onでイベント処理

✅ 5. 学習後の次ステップ

  1. 算数問題画面とゲーム画面を統合

  2. TypeScriptでデータ構造を設計

  3. お仕事シミュレーションシナリオ作成

  4. テストユーザーに試験運用しUI/UX改善

🎯 まとめ

TypeScriptで型安全なフロントエンドを構築し、Phaser.jsでゲームロジックを実装することで、今回の算数タイムアタックお仕事シミュレーションWEBアプリは堅牢かつ拡張可能になります。

✅ 最終章: Phaser.jsで作る簡単な算数ゲーム

🎯 ゴール

  • 小学4年生向けの掛け算クイズゲームを作成する

  • クリックだけで進行できる構造にする

  • ゲーム性（得点とタイムアタック風表示）を取り入れる

📝 1. ゲーム概要

  • ルール: かけ算の問題が1問表示され、選択肢（ボタン）をクリックして解答する。

  • 仕様:

    • 正解で得点 +10pt

    • 不正解は±0pt

    • 制限時間は30秒

    • 終了後スコア表示

⚙️ 2. コード全体構造

以下は、TypeScript + Phaser.jsでシンプルに構築する例です。

▶️ 2.1 package.json に phaser をインストール

bash
npm install phaser

▶️ 2.2 index.ts (または main.ts)

ts
import Phaser from 'phaser';

class MathGame extends Phaser.Scene {
  score: number = 0;
  timeLeft: number = 30;
  questionText!: Phaser.GameObjects.Text;
  choices: Phaser.GameObjects.Text[] = [];
  timerEvent!: Phaser.Time.TimerEvent;

  correctAnswer: number = 0;

  constructor() {
    super('math-game');
  }

  preload() {
    // フォントや画像があればここで読み込む
  }

  create() {
    this.add.text(20, 20, '掛け算チャレンジ', { fontSize: '32px' });

    this.questionText = this.add.text(20, 80, '', { fontSize: '28px' });

    // 選択肢ボタンを生成
    for (let i = 0; i < 4; i++) {
      const choice = this.add.text(20, 150 + i * 50, '', { fontSize: '24px', backgroundColor: '#ccc' })
        .setInteractive()
        .on('pointerdown', () => this.checkAnswer(i));
      this.choices.push(choice);
    }

    // タイマー
    this.timerEvent = this.time.addEvent({
      delay: 1000,
      callback: this.updateTimer,
      callbackScope: this,
      loop: true
    });

    this.generateQuestion();
  }

  generateQuestion() {
    const a = Phaser.Math.Between(1, 9);
    const b = Phaser.Math.Between(1, 9);
    this.correctAnswer = a * b;
    this.questionText.setText(`${a} x ${b} = ?`);

    // 正解位置をランダムに
    const correctIndex = Phaser.Math.Between(0, 3);
    const usedAnswers = [this.correctAnswer];

    for (let i = 0; i < 4; i++) {
      if (i === correctIndex) {
        this.choices[i].setText(String(this.correctAnswer));
      } else {
        let wrongAnswer;
        do {
          wrongAnswer = Phaser.Math.Between(1, 81);
        } while (usedAnswers.includes(wrongAnswer));
        usedAnswers.push(wrongAnswer);
        this.choices[i].setText(String(wrongAnswer));
      }
    }
  }

  checkAnswer(index: number) {
    const selected = parseInt(this.choices[index].text);
    if (selected === this.correctAnswer) {
      this.score += 10;
    }
    this.generateQuestion();
  }

  updateTimer() {
    this.timeLeft -= 1;
    if (this.timeLeft <= 0) {
      this.timerEvent.remove(false);
      this.endGame();
    }
  }

  endGame() {
    this.questionText.setText(`終了！スコア: ${this.score}`);
    this.choices.forEach(c => c.disableInteractive().setText(''));
  }
}

const config: Phaser.Types.Core.GameConfig = {
  type: Phaser.AUTO,
  width: 400,
  height: 400,
  scene: MathGame,
  parent: 'game-container',
  backgroundColor: '#fff'
};

new Phaser.Game(config);

▶️ 2.3 HTMLファイル例

html
<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8" />
  <title>掛け算チャレンジ</title>
  <style>
    body { margin: 0; }
    #game-container { width: 400px; height: 400px; margin: auto; }
    canvas { display: block; }
  </style>
</head>
<body>
  <div id="game-container"></div>
  <script src="bundle.js"></script>
</body>
</html>

※ bundler（ViteやWebpackなど）でbundle.jsを生成する必要があります。

💡 解説

  • Phaser.Sceneを継承してゲーム画面を構築

  • setInteractive() でクリックイベントを登録

  • Phaser.Math.Between でランダム値を生成

  • TimerEvent で制限時間を管理

  • 状態管理（スコア、残り時間、正解値）はクラス変数で保持

🎮 応用ポイント

この構造を拡張し、

  • 足し算・引き算・割り算モード切替

  • 正解率や履歴保存

  • お仕事シミュレーション風UI（例: お客さんから注文 → 計算 → 提供）

  • FirebaseやSupabaseでランキング保存

を追加することで、教育 × ゲーミフィケーションの完成度を高められます。