ループ設計パターン比較：壊れないアニメーションの作り方

#07 アニメーション設計まとめ では「アニメーション設計の全体像」を整理しました。

今回は一段階踏み込みます。

ループは“どう書くか”で安定性が変わります。

同じ requestAnimationFrame を使っていても、
設計の型によって拡張性・バグ耐性がまったく違います。

今日は初心者が通る3つのループ構造を比較します。

1. パターン① ナイーブ型（最初に書きがちな形）

let x = 0;

function loop() {
  x += 2;
  box.style.transform = `translateX(${x}px)`;
  requestAnimationFrame(loop);
}

requestAnimationFrame(loop);

特徴

• シンプル
• すぐ動く
• 1ファイルで完結

問題点

• ロジックと描画が混ざる
• 何をしているか分かりにくい
• 拡張すると崩れる

小規模ならOKですが、
複数オブジェクトや入力処理を足すと一気に破綻します。

2. パターン② 分離型（update / render）

次の段階です。

let x = 0;
let lastTime = 0;

function update(dt) {
  x += 100 * dt;
}

function render() {
  box.style.transform = `translateX(${x}px)`;
}

function loop(currentTime) {
  const dt = (currentTime - lastTime) / 1000;
  lastTime = currentTime;

  update(dt);
  render();

  requestAnimationFrame(loop);
}

requestAnimationFrame(loop);

改善点

• 状態変更と描画を分離
• テストしやすい
• Canvas移行が簡単

ここで重要なのは、

状態と見た目を分ける

という考え方です。

#07 アニメーション設計まとめ で触れた設計思想が、ここで具体化されます。

3. パターン③ 管理型（構造を持つループ）

規模が少し大きくなると、
ループを「構造」として持たせます。

class Game {
  constructor() {
    this.x = 0;
  }

  update(dt) {
    this.x += 100 * dt;
  }

  render() {
    box.style.transform = `translateX(${this.x}px)`;
  }
}

const game = new Game();
let lastTime = 0;

function loop(currentTime) {
  const dt = (currentTime - lastTime) / 1000;
  lastTime = currentTime;

  game.update(dt);
  game.render();

  requestAnimationFrame(loop);
}

requestAnimationFrame(loop);

何が変わった？

• 状態がクラスに閉じ込められた
• 拡張しやすい
• SceneやState管理に進化できる

これは #10「状態管理統合」への入り口です。

4. ループ設計で起きやすい事故

ここが重要です。

❌ 多重起動

ボタンを連打 → ループが増殖
→ CPU爆発

❌ dt爆発

タブ復帰後に dt が大きくなり一瞬で移動

❌ 描画停止バグ

updateは動くがrenderが止まる

ループ設計は、
「動くかどうか」ではなく

「壊れないかどうか」

で考える必要があります。

5. ループは進化する

流れを整理するとこうなります。

ナイーブ型
  ↓
分離型
  ↓
管理型
  ↓
Fixed Time Step（次回）

#09 Fixed Time Step では「時間制御」を導入し、
さらに安定させます。

6. 実験：3種類のループを体感する

👇 まずはこれを触ってください。

🔘 切り替えられるモード

1. Naive（全部1つ）
2. Separate（update / render 分離）
3. Managed（構造管理型）

🔎 観察ポイント

① Naive

• フレーム依存
• 拡張が難しい
• 小規模向き

② Separate

• 状態と描画が分離
• 安定する
• Canvasにも移行可能

③ Managed

• 状態を構造で持つ
• 拡張性が高い
• Scene管理へ進化できる

💡 重要な理解ポイント

「動く」は設計ではない

大事なのは、

• 事故が起きにくい
• 拡張できる
• 責務が分離されている

かどうかです。

7.まとめ

✅ ループには段階がある
✅ 最初は混ざる、次に分ける、最後に管理する
✅ 安定設計は“型”から生まれる

次回：

#09 Fixed Time Step

時間制御を導入し、
「完全に安定するループ」へ進みます。

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