JSとrequestAnimationFrameでマウスストーカーを作りたい

###JavaSCriptとrequestAnimationFrameでマウスストーカーを作りたい

書籍をもとに、JavaScriptでマウスストーカーを作っています（「JavaScriptコードレシピ集」という本です）。requestAnimationFrame()メソッドを使って書きたいのですが、下記のコードではうんともすんとも言いません。

JavaScript
1 const el = document.querySelector('.stalker');
2
3    let mouseX = 0;
4    let mouseY = 0;
5    let currentX = 0;
6    let currentY = 0;
7  
8  document.body.addEventListener('mousemove', (event) => {
9    mouseX = event.clientX;
10    mouseY = event.clientY;
11  });
12    console.log(mouseX);
13
14  tick();
15  function tick() {
16    requestAnimationFrame(tick);
17
18    currentX += (mouseX - currentX) * 0.1;
19    currentY += (mouseY - currentY) * 0.1;
20
21    el.style.transform = 'translate(${currentX}px, ${currentY}px)';
22  }

HTML
1<div class="stalker"></div>

CSS
1.stoker {
2  position: fixed;
3  top: 0;
4  left: 0;
5  width: 20px;
6  height: 20px;
7  background: red;
8  border-radius: 50%;
9}

試したことその１

下記のようなprefixをつけてみましたが、変化はありませんでした。caniuseを見ましたがquestAnimationFrameの対応状況はIE9以下でなければ問題なさそうです。

prefix
1(function() {
2    var requestAnimationFrame = window.requestAnimationFrame || 
3　　　　　　　　　　　　　　　　　　window.mozRequestAnimationFrame ||
4                              　window.webkitRequestAnimationFrame || 
5　　　　　　　　　　　　　　　　　　window.msRequestAnimationFrame;
6    window.requestAnimationFrame = requestAnimationFrame;
7})();

試したことその２

上から６行目の
document.body.addEventListener
を
window.addEventintener
に書き換えましたが変化なしでした。

どなたかご教授いただければと思います。よろしくお願いします。

行動規範の内容に同意します

回答1件

ベストアンサー

diff
1document.body.addEventListener('mousemove', (event) => {
2  mouseX = event.clientX;
3  mouseY = event.clientY;
4+ console.log(mouseX);
5+ tick();
6});
7- console.log(mouseX);
8- tick();

投稿2019/10/04 05:00

og24715

総合スコア832

hayamin1111

2019/10/04 05:24

ご回答ありがとうございます！console.logは確認で書いたものを消し忘れていました＾＾；教えていただいたようにtick();をなくしてみましたが、どうも動いてくれません。試しにconsole.log(currentX);をtick関数内に書いてみました。ディベロッパーツールで見ると、tick();があるとcurretXの値(0)が表示されるのですが、tick();を外すとコンソールに何も表示されなってしまうので、tick();は必要なのかなと思います・・・