アロー関数

アロー関数は、=> を使った関数の短い書き方です。
矢印（アロー）のような見た目から、この名前がつきました。

基本の書き方

従来の関数とアロー関数を比較してみましょう。

// 従来の関数
function add(a, b) {
  return a + b;
}
 
// アロー関数
const add = (a, b) => {
  return a + b;
};

function キーワードの代わりに => を使います。

通常の関数との違い

アロー関数と通常の関数には、見た目以外にも重要な違いがあります。

従来の関数とアロー関数にはもっとたくさんの違いがありますが、端的に説明すると...

コンストラクタやオブジェクトのメソッドには従来の関数、コールバックや配列メソッドにはアローを使う

というのが一般的な使い分けです。

ただし、Reactなど最近のモダンなフロントエンド開発では関数コンポーネントが主流で、 クラスやthisをほとんど使いません。そのためアロー関数が積極的に使われています。

一方、少し古いシステムでは従来の関数で書かれていたり、 チームの方針で書き方が統一されていたりと、現場によって異なります。

よく使う場面

アロー関数は、他の関数に渡す関数としてよく使われます。

配列のメソッド

const numbers = [1, 2, 3, 4, 5];
 
// 各要素を2倍にする
const doubled = numbers.map(n => n * 2);
// → [2, 4, 6, 8, 10]
 
// 偶数だけ抽出する
const evens = numbers.filter(n => n % 2 === 0);
// → [2, 4]

イベントリスナー

button.addEventListener('click', () => {
  console.log('クリックされました');
});

他の言語にもある概念

「アロー関数」という名前はJavaScript特有ですが、同じ概念はラムダ式として多くの言語に存在します。

C#もJavaScriptと同じ => を使いますが、C#では「ラムダ式」と呼ぶのが一般的です。

まとめ