アロー関数とは何か？
JavaScriptを学び始めると必ず出会うのが「関数」です。これまで多くの初心者が使ってきた「function」というキーワードを使った書き方に代わり、モダンな開発現場で主流となっているのが「アロー関数」です。見た目が矢印（=>）に似ていることからそう呼ばれます。まずは、従来の関数との書き方の違いを見てみましょう。
従来の書き方
function sayHello(name) {
return “こんにちは、” + name + “さん”;
}
アロー関数での書き方
const sayHello = (name) => {
return “こんにちは、” + name + “さん”;
};
なぜアロー関数を使うのか？
最大のメリットは「コードの簡潔さ」です。実は、アロー関数には処理が1行しかない場合に限り、波括弧{}とreturnを省略できるという強力なルールがあります。
const sayHello = (name) => “こんにちは、” + name + “さん”;
このように、たった1行で関数が書けてしまいます。特に、配列のデータを加工する「map」や「filter」といったメソッドと組み合わせる際、コードの可読性が格段に上がります。例えば、数値のリストを2倍にする処理も、アロー関数を使えば直感的に記述できます。
初心者が注意すべき「this」の罠
アロー関数が便利なのは間違いありませんが、一つだけ注意点があります。それは「this」というキーワードの扱いが従来の関数とは異なることです。
従来の関数では、呼び出された場所によって「this」が指し示す対象が変わるという複雑なルールがありました。しかし、アロー関数は「定義された場所のthisをそのまま引き継ぐ」という性質を持っています。
例えば、ボタンをクリックした時に何かのアクションを起こす処理を書く際、従来の関数ではthisが意図しない要素を指してしまいバグになることがよくありました。アロー関数を使えば、この「thisの迷子」問題が解決されるため、現代のReactなどのフレームワークでは、ほとんどのケースでアロー関数が推奨されています。
まとめ：まずは「短く書く」ことから始めよう
アロー関数は、単にコードを短くするためだけの道具ではありません。コードの意図を明確にし、複雑なバグを防ぐための強力な武器です。
まずは簡単な関数をアロー関数に書き換える練習から始めてみてください。最初は違和感があるかもしれませんが、慣れてくると「なぜ今まで長いコードを書いていたんだろう？」と感じるはずですよ。ぜひ、日々のコーディングに取り入れてみてください。