イミュータブル

scene の四角を動かしたい。box.x を書き換える代わりに、x だけ変えた新しい box を作って差し替える。元のオブジェクトは触らない。これをイミュータブル（不変）な扱いと呼ぶ。

Object.freeze をかけると、そのオブジェクトは書き換えられなくなる（代入しても無視される）。動かすには moved(box, 4) で { ...box, x: box.x + 4 } という新しい box を作る。...box は中身をコピーして、x だけ上書きする書き方。

const box = Object.freeze({ x: 40, y: 40, size: 64 })

box.x = 100 // freeze しているので、この代入は無視される
// box.x は 40 のまま

const next = { ...box, x: 100 } // 動かすなら新しいオブジェクトを作る

ここまでの絵は一度描けば終わりだった。動かすには、毎フレーム走る関数を return する。下は毎フレーム box を作り直して右へ流す。box.x を直接いじる所はなく、moved が次の box を返すだけ。薄い黒を全面に重ねて、軌跡を残している。moved(box, 4) の 4 を増やすと速くなる。