アロー関数 => に
慣れるまでの道のり

function って書かないの？

関数といえば function() {} だと覚えていたのですが、最近のJavaScriptでは () => {} という書き方（アロー関数）が頻繁に使われます。

最初は「暗号みたいで読みにくいな…」と思っていました。

// 昔の書き方
btn.onclick = function(event) {
    console.log("クリックされました");
};

// 今の書き方（アロー関数）
btn.onclick = (event) => {
    console.log("クリックされました");
};

短く書けるだけじゃなかった

勉強していくうちに、アロー関数はただの「functionの省略形」ではないことが分かりました。一番の違いは this というキーワードの扱いです。

昔の関数は、呼ばれた場所によって this の中身（自分自身が誰なのか）がコロコロ変わってしまい、バグの温床になっていたそうです。アロー関数は this を固定化してくれるため、直感的にコードが書けるようになります。

今ではすっかり矢印の虜に

「猫の手貸し」のコードでも、イベント（クリックされた時など）の処理にはすべてアロー関数を使っています。コードの見通しが良くなり、タイピング量も減るので、最初は抵抗があった記号も、今では「こっちの方が絶対いい！」と思えるようになりました。