JavaScriptのアロー関数とは？functionとの違いを初心者向けに解説

JavaScriptを学習していて、 => という矢印のような記号を見かけたことはありませんか？これは「アロー関数」と呼ばれる、2015年（ES6）に登場した比較的新しい関数の書き方です。

現代のWeb制作現場、特にReactやVue.jsといったモダンなフレームワークを使った開発では、関数のほとんどがこのアロー関数で書かれています。

「これまでの function と何が違うの？」「どうしてわざわざ別の書き方をする必要があるの？」

そんな疑問を解消するために、本記事ではアロー関数の基本構文から、徹底的な省略ルール、そして従来の関数との決定的な違いまで、初心者向けに完全網羅して解説します。

アロー関数とは？モダンJavaScriptの象徴
1. 見た目の劇的な変化
アロー関数が「最強」と言われる理由：脅威の省略ルール
従来の関数 VS アロー関数：決定的な4つの違い
【実践編】アロー関数が最も輝く瞬間
1. map メソッドでの活用
2. filter メソッドでの活用
初心者が絶対にはまる「3つの落とし穴」
【応用】これからの使い分け戦略
まとめ：アロー関数は「意図」を伝えるツール

アロー関数とは？モダンJavaScriptの象徴

アロー関数は、関数の定義をより簡潔に記述するために生まれた構文です。その名の通り =>（アロー：矢印） を使って関数を定義します。

見た目の劇的な変化

従来の「関数宣言」と「アロー関数」の見た目の違いを確認しましょう。

【従来の書き方：関数宣言】

function multiply(a, b) {
  return a * b;
}

【モダンな書き方：アロー関数】

const multiply = (a, b) => {
  return a * b;
};

一見すると「少し書き方が変わっただけ」に見えるかもしれませんが、アロー関数は変数に代入する「関数式」の形をベースにしています。これにより、コードの柔軟性が大きく向上しました。

アロー関数が「最強」と言われる理由：脅威の省略ルール

アロー関数が開発者に愛されている最大の理由は、コードの「ノイズ」を徹底的に排除できる点にあります。状況に応じて、以下の3つのステップで記述を短縮できます。

引数が1つの場合：カッコ（）を省略できる

引数がちょうど1つだけの場合、引数を囲むカッコを省略できます。

// 標準
const square = (n) => { return n * n; };

// 省略形
const square = n => { return n * n; };

処理が1行の場合：波括弧 { } と return を消せる

これがアロー関数の真骨頂です。関数の処理が「ある値を計算して返すだけ」の1行であれば、波括弧と return キーワードを同時に省略できます。これを「簡潔文体」と呼びます。

// 究極の省略形
const square = n => n * n;

もはや「関数」という重苦しさはなく、数学の公式のような美しさがありますね。

「短いコード」こそが正義である理由

初心者のうちは「短く書くと分かりにくくなるのでは？」と心配になるかもしれません。しかし、プロの現場では逆です。アロー関数の省略形を使うことで、「何を受け取って何を返すか」という論理の本質だけが画面に残ります。 無駄なキーワード（functionやreturn）を読まなくて済むため、コード全体の流れを把握するスピードが劇的に上がるのです。

従来の関数 VS アロー関数：決定的な4つの違い

見た目以外にも、内部的には非常に重要な違いがあります。ここを理解していないと、実務で予期せぬバグに苦しむことになります。

thisの固定

JavaScriptで最も難解と言われる this の挙動が異なります。

従来の関数：呼び出し方によって this が「実行したオブジェクト」や「グローバルオブジェクト」にコロコロ変わります。
アロー関数：独自の this を持ちません。「定義された場所の外側のthis」をそのまま引き継ぎます。

argumentsオブジェクトの有無

従来の関数では、渡されたすべての引数を保持する arguments という特殊な変数がありましたが、アロー関数にはありません。現代では「スプレッド構文（…args）」を使うのが一般的なため、この制限が問題になることはほぼありません。

newによるインスタンス化ができない

アロー関数は「コンストラクタ」として使うことができません。つまり、new MyFunction() のように新しいオブジェクトを作ることは不可能です。

同じ名前の引数を使えない

従来の関数（非strictモード）では、function(a, a) {} のように同じ名前の引数が許されることがありましたが、アロー関数では厳格にエラーになります。

【実践編】アロー関数が最も輝く瞬間

アロー関数の恩恵を最も受けるのは、「コールバック関数」として使うときです。特に「配列メソッド」との相性は抜群です。

map メソッドでの活用

配列のすべての要素を加工して、新しい配列を作る map メソッドでの例です。

const prices = [100, 200, 300];

// 従来の書き方
const taxIncluded = prices.map(function(price) {
  return price * 1.1;
});

// アロー関数
const taxIncluded = prices.map(price => price * 1.1);

どうでしょうか？アロー関数版は、もはや「説明不要」なほど直感的ではありませんか？

【関連記事】

「JavaScriptのmapとは？forEachとの違いと配列を加工する方法を解説」

filter メソッドでの活用

条件に合う要素だけで抽出する filter です。

const scores = [45, 80, 60, 90, 30];
// 80点以上の高得点だけを抽出
const highScores = scores.filter(score => score >= 80);

初心者が絶対にはまる「3つの落とし穴」

アロー関数の便利さに慣れてきた頃、必ずと言っていいほど以下のエラーに遭遇します。

引数ゼロの時はカッコが必要

「引数が1つの時はカッコを消せる」というルールを拡大解釈して、引数がない時まで消してしまうミスです。

// ❌ エラー
const sayHi = => console.log("Hi");

// ⭕ 正解
const sayHi = () => console.log("Hi");

オブジェクトを返したい時の「丸カッコ」

「簡潔文体」でオブジェクト { key: value } を返そうとすると、コンピュータは { } を「関数の本体」だと勘違いします。

// ❌ undefinedが返る
const getUser = id => { id: id, name: "なると" };

// ⭕ 外側を ( ) で囲む
const getUser = id => ({ id: id, name: "なると" });

改行の入れ方に注意

アロー関数の => の直前で改行してしまうと、構文エラー（SyntaxError）になります。

// ❌ エラー
const func = (a)
  => a * 2;

【応用】これからの使い分け戦略

「全部アロー関数でいいの？」という問いに対し、現場での一般的な判断基準を紹介します。

シチュエーション	推奨される書き方	理由
トップレベルの関数	関数宣言（function）	ホイスティング（巻き上げ）が効き、コードの見通しが良くなる。
配列の操作（map, filterなど）	アロー関数	記述が簡潔になり、処理内容に集中できる。
メソッド（オブジェクトの機能）	メソッド記法	this を使ってオブジェクト自身を操作しやすいため。
Reactコンポーネント	アロー関数	現代のReact開発におけるデファクトスタンダード。