ゼロ・アロケーションを体感しよう

滑らかなアニメーションやゲームを作る時、一番の敵は「画面のカクつき（スパイク）」です。
これは多くの場合、プログラムが一時的なデータを大量に作り、後からまとめて捨てる「お掃除（ガベージコレクション）」が発生するために起こります。
最初から必要な枠を用意し、中身だけを入れ替えて「使い回す」技術、それがゼロ・アロケーションです。

通常 (都度生成＆破棄)

ゴミが溜まると定期的なお掃除（カクつき）が発生します

FPS: 60
お掃除中... (画面停止)
メモリ使用量 (イメージ)

ギザギザのグラフは、メモリを作っては捨てている証拠です。

ゼロ・アロケーション

最初から枠を用意し、中身を書き換えて使い回します

FPS: 60
メモリ使用量 (イメージ)

グラフが平坦なのは、一度確保したメモリをずっと使い回しているからです。

コードの違いを見てみよう

❌ 毎回作り直すアプローチ（スパイクの原因）

毎フレーム new で新しいデータを作り、不要になったら配列から取り除きます。裏でゴミが大量に発生します。

let particles = []; // 配列

function update() {
  // 1. 毎回新しいオブジェクトを作る（メモリ確保）
  particles.push(new Particle());

  // 2. 更新処理
  particles.forEach(p => p.move());

  // 3. 不要なものを捨てる（ここでゴミが出る）
  particles = particles.filter(p => p.isAlive);
}

✅ ゼロ・アロケーション（固定長プール）

最初に決まった数の平坦な配列（型付き配列）を用意し、中身の数値だけを直接書き換えて再利用します。一切ゴミが出ません。

// 1. 最初から全員分の「枠」を確保しておく
const MAX_PARTICLES = 10000;
// x, y, 寿命 などを平坦な数字の配列で一括管理
const pool = new Float32Array(MAX_PARTICLES * 3); 

function update() {
  // 2. 新しく作るのではなく、空いている場所の「数値を上書き」する
  spawnParticleInEmptySlot(pool);

  // 3. メモリを捨てず、見えないフラグ（寿命など）を操作するだけ
  updateAllParticles(pool); 
}