JavaScriptアニメーション設計の基本構造まとめ

ここまで、

• requestAnimationFrame
• deltaTime
• easing
• フレームレート
• cancelAnimationFrame
• 減速ルーレット

を学んできました。

でももしかすると、

「結局どう組み立てればいいの？」

と感じているかもしれません。

今回は、
JavaScriptアニメーションの“全体構造”を整理します。

1. アニメーションは3つの役割でできている

どんなアニメーションも、基本はこの3つです。

① ループ
② 更新（update）
③ 描画（render）

① ループ（時間を回す）

まず必要なのは「時間を回す仕組み」。

それが：

requestAnimationFrame()

ブラウザの描画タイミングに合わせて
1フレームずつ呼び出されます。

② update（状態を変える）

ここでやることは1つ。

「数値を変える」

例：

x += speed * dt;

位置・角度・透明度などを
時間に応じて変化させます。

③ render（見た目を変える）

更新された値を
DOMやCanvasに反映します。

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

ここでは計算はしません。

表示だけです。

2. 最小構造はこうなる

let lastTime = 0;

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

  update(dt);
  render();

  requestAnimationFrame(loop);
}

requestAnimationFrame(loop);

そして：

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

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

3. なぜ分けるの？

初心者が一番疑問に思うところです。

なぜこう分けるのか？

理由は3つあります。

理由① バグが減る

計算と描画が混ざると、

• どこで値が壊れた？
• なぜ止まらない？

が分からなくなります。

理由② ゲーム的拡張が可能

• シーン管理
• 状態管理
• 入力処理

すべてこの構造に乗せられます。

理由③ パフォーマンス管理がしやすい

• updateが重いのか？
• renderが重いのか？

切り分けできます。

4. これまでの6記事は全部ここに繋がる

つまりこのシリーズは、

「設計にたどり着くための分解」

だったわけです。

5. アニメーションが“なんとなく”から“設計”になる瞬間

初心者の頃は：

• とりあえず動けばOK

になります。

でも設計を理解すると：

• どこに何を書くか分かる
• 止め方が分かる
• 拡張できる
• 崩れない

になります。

これが

アニメーションを書く
から
アニメーションを設計する

への変化です。

6.実験：updateを止めたらどうなる？

初心者が混乱しやすいポイント：

• 「updateとrenderって何が違うの？」
• 「結局どっちで何してるの？」

👀 観察ポイント

✅ Normal

• 四角が動く
• 数値も増える

✅ Stop Update

• 四角が止まる
• 数値も止まる

👉 updateが止まると世界は変わらない

✅ Stop Render

• 四角は止まって見える
• でも数値は増え続ける

👉 renderが止まっても、内部では動いている

7. ここから先は？

ここからは

• Fixed Time Step
• 状態管理統合
• Scene管理
• Canvas描画

など、よりゲームエンジン的構造へ進めます。

でも土台は変わりません。

loop → update → render

これがすべての基本です。

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