Scene管理の進化｜JavaScriptで設計する画面構造の拡張

画面が増えたとき、コードはどう設計する？

ここまでで私たちは、

• ループ設計
• Fixed Time Step
• 状態管理統合
• Interpolation
• Canvas統合
• Input設計

まで作ってきました。

でも、ここで必ず出てくる問題があります。

「タイトル画面とゲーム画面って、どうやって切り替えるの？」

これが Scene管理（シーン管理） です。

1. Sceneってなに？

Sceneとは、

「今、どの画面を動かしているか」

のことです。

例えば：

• TitleScene（タイトル画面）
• GameScene（ゲーム本編）
• ResultScene（結果画面）
• PauseScene（ポーズ画面）

ゲームやアプリは、実は
1つの画面を切り替えながら動いているだけです。

2. Scene管理がないとどうなる？

初心者がよくやる構造はこうです：

if (mode === "title") {
  // タイトル処理
}

if (mode === "game") {
  // ゲーム処理
}

これが増えていくとどうなるでしょう？

• ifが増える
• updateもrenderも分岐だらけ
• inputも分岐だらけ
• どこで何が動いているのか分からない

地獄です。

3. Sceneをオブジェクトにする

解決方法はシンプルです。

Sceneを「クラス」にする

class Scene {
  update(dt) {}
  render(ctx) {}
}

そして、それを継承して作ります。

class TitleScene extends Scene {
  update(dt) {
    // タイトル用処理
  }

  render(ctx) {
    ctx.fillText("TITLE", 100, 100);
  }
}

class GameScene extends Scene {
  update(dt) {
    // ゲーム用処理
  }

  render(ctx) {
    ctx.fillText("GAME", 100, 100);
  }
}

4. SceneManagerを作る

Sceneを管理するのがSceneManagerです。

class SceneManager {
  constructor(initialScene) {
    this.current = initialScene;
  }

  change(scene) {
    this.current = scene;
  }

  update(dt) {
    this.current.update(dt);
  }

  render(ctx) {
    this.current.render(ctx);
  }
}

Gameクラスに組み込みます。

class Game {
  constructor() {
    this.sceneManager = new SceneManager(new TitleScene());
  }

  update(dt) {
    this.sceneManager.update(dt);
  }

  render(ctx) {
    this.sceneManager.render(ctx);
  }
}

これで、

「今のSceneだけが動く」

状態になります。

5. Scene切り替え

例えば、タイトル画面でクリックされたらゲームへ。

class TitleScene extends Scene {
  constructor(manager) {
    super();
    this.manager = manager;
  }

  update(dt) {
    if (this.startRequested) {
      this.manager.change(new GameScene(this.manager));
    }
  }
}

これで画面が切り替わります。

6. Scene管理が進化すると何が起きる？

ここが重要です。

Sceneを分離すると：

• updateの責任が分かれる
• renderの責任が分かれる
• input処理もSceneごとにできる
• 大規模化しても壊れにくい

つまり、

アプリが「拡張できる構造」になる

これが「Scene管理進化」です。

7.実験：Sceneを切り替えてみよう

実験内容

クリックで画面が切り替わるミニデモを作ります。

🔎 観察ポイント

1. update / render は一切分岐していない
2. SceneManagerは「現在のScene」を持っているだけ
3. クリックすると「別のオブジェクト」に置き換わる

つまり、

画面は切り替えているのではなく
「動かすオブジェクトを入れ替えている」だけ

これが設計の本質です。

8.まとめ

Scene管理とは、

• if文を消す設計
• 責任を分離する設計
• 拡張できる構造を作る設計

そして次の記事 #15 では、

Scene間をどうやって連携させるのか？

Event設計に進みます。

ここから、システムはさらに進化します。

🔎 このラボの全体像はこちら
→ UI Architecture Roadmap