前回の第13回「モーションブラーと弾むアニメーション」で，ひとまずお題の表現はできた（第13回コード2⁠）⁠。マウスポインタの動きに合わせて，つぎつぎにつくられるスプライトアニメーションのオブジェクトが落ちて弾み，それらの残像にモーションブラーがかかる（図1⁠）⁠。今回はこのアニメーションにふたつ手を加えたい。表題のとおり，ひとつはオブジェクトを使い回すようにすること。そしてもうひとつは，スプライトシートアニメーションの素材を差し替えてみる。

ガベージコレクションを減らす

第13回コード2「ステージ下端まで落ちたオブジェクトを弾ませる」では，Stage.stagemousemoveイベントのリスナー関数（addInstance()）で，マウスを動かすたびにSpriteインスタンスがSprite.clone()メソッドによりひたすらつくられる。そのために，メモリが費やされたり，処理が重くなったりしないだろうか。

stage.addEventListener("stagemousemove", addInstance);

function addInstance(eventObject) {
  createInstance(stage.mouseX, stage.mouseY, 15);

}

function createInstance(x, y, halfSpeed) {

  var instance = animation.clone();

}

もちろん，インスタンスをつくりっ放しではない。アニメーションさせるTicker.tickイベントのリスナー関数（animate()）では，ステージから見えなくなったオブジェクトは，Container.removeChildAt()メソッドでStageオブジェクトの表示リストから除いている。ただ，ことさらメモリから消すという操作はしていない。

createjs.Ticker.addEventListener("tick", animate);

function animate(eventObject) {
  var count = stage.getNumChildren() - 1;

  for (var i = count; i > -1; i--) {
    var child = stage.getChildAt(i);

    if (newAlpha <= 0 || newX > stageWidth || newX < 0) {
      stage.removeChildAt(i);
    }

  }

}

実は，JavaScriptは，要らなくなったオブジェクトを自動的にメモリから消し去ってくれる。この仕組みを「ガベージコレクション」という（※1⁠）⁠。自動的にゴミを探して吸い取ってくれるロボット掃除機のようだ。もっとも，楽なのはスクリプティングする人間の側だけで，掃除機（⁠「⁠ガベージコレクタ」と呼ばれる）にとっては手間のかかる仕事になる。

プログラマはメモリの扱いはとくに気にすることなく，JavaScriptのコードを書けばよい。けれど，JavaScriptはその処理の合間をぬって，メモリの片づけをしなければならない。なお，オブジェクトが要らなくなったということは，その参照が残っているかどうかで確かめている。

人気料理店のランチタイムを思い浮かべてもらうとよい。注文をとって料理を運ぶのが店員の仕事だ。しかし，食べ終えた客の皿を片づけなければつぎの客が入れられない。つまり，無駄なメモリが費やされる。片づけに追われると，料理を運ぶのが遅れがちになる。処理の負荷が上がってしまうのだ。

熱狂的なファンをもつある人気ラーメン店では，食べ終わった客が丼を片づけてテーブルを拭くという。それなら，店員の手間が省ける。このアイデアをいただこう。ただし，協力してもらうのはつぎの客だ。要らなくなったオブジェクトは，消さずにとっておく。オブジェクトが必要になったら，とっておいたオブジェクトがあればそれを使ってもらい，新たにはつくらない。

こうすれば，ガベージコレクタの手は煩わせずに済む。それだけではない。一般に，オブジェクトを新たにつくるより，すでにあるオブジェクトの設定をし直す方が負荷は低い。第13回コード2をそのように書直してみよう。

※1）

ガベージコレクションについて詳しくは，Wikipedia「ガベージコレクション」を参照してほしい。