アロー関数とは？JavaScriptでの書き方や従来関数との違いを解説

JavaScriptの開発において、モダンなコードを書くために欠かせない存在となっているのが「アロー関数」です。

アロー関数は、2015年に策定されたJavaScriptの仕様であるES2015（ES6）から導入された比較的新しい関数の記述方法です。

従来のfunctionキーワードを使った宣言に比べて、より簡潔に、かつ直感的にプログラムを記述できる点が大きな特徴です。

また、単に見た目が短くなるだけでなく、JavaScript特有の課題であった「thisの束縛」に関する挙動も改善されています。

現在では、ReactやVue.jsといった主要なフロントエンドフレームワークのコードでも、アロー関数が標準的に利用されています。

この記事では、アロー関数の基本的な書き方から、従来関数との決定的な違い、そして実際の開発で役立つ使い分けのポイントまでを詳しく解説します。

JavaScriptにおけるアロー関数とは

アロー関数とは、「=>（矢印）」という記号を用いて関数を定義する記法のことです。

この記号が「矢（Arrow）」のように見えることから、アロー関数という名称で呼ばれています。

アロー関数が登場する以前は、JavaScriptで関数を定義する際には必ずfunctionというキーワードを記述する必要がありました。

しかし、アロー関数を採用することで、コードの記述量を大幅に削減し、ソースコードの可読性を高めることが可能になります。

特に、高階関数と呼ばれる他の関数を引数に取るメソッド（mapやfilterなど）を扱う際に、その真価を発揮します。

IT用語辞典としての定義では、関数式をより短く書くための代替構文と位置づけられています。

ただし、アロー関数は単なる「短縮形」ではなく、内部的な動作（特にスコープやthisの扱い）において従来関数と明確に異なる点があるため、注意が必要です。

アロー関数の基本的な書き方

まずは、アロー関数の構文を従来の方法と比較しながら確認していきましょう。

従来の関数宣言では、以下のように記述していました。

// 従来の関数宣言
const double = function(num) {
    return num * 2;
};

console.log(double(10));

20

このコードをアロー関数に書き換えると、以下のようになります。

// アロー関数による定義
const double = (num) => {
    return num * 2;
};

console.log(double(10));

functionキーワードが消え、引数を受け取るカッコ()と、処理内容を示す波カッコ{}の間に=>が挿入されているのがわかります。

アロー関数には、特定の条件下でさらに記述を省略できる「省略記法」が存在します。

引数が1つの場合の省略

関数に渡す引数がちょうど1つだけの場合、引数を囲むカッコ()を省略することができます。

// 引数のカッコを省略
const double = num => {
    return num * 2;
};

ただし、引数がない場合や、引数が2つ以上ある場合には、カッコを省略することはできません。

処理が1行で終わる場合の省略

関数の処理内容が1つの式だけで構成されており、その結果をそのまま返したい（returnしたい）場合、波カッコ{}とreturnキーワードを同時に省略できます。

// returnと波カッコを省略（暗黙的返り値）
const double = num => num * 2;

console.log(double(5));

10

この書き方をすると、コードが非常にシンプルになり、ロジックが直感的に伝わりやすくなります。

このように、波カッコを使わずに値を返すことを「暗黙的な戻り値（Implicit Return）」と呼びます。

オブジェクトを返却する場合の注意点

暗黙的な戻り値を利用してオブジェクトリテラルを返したい場合は、少し注意が必要です。

JavaScriptにおいて、波カッコ{}は「関数のブロック」と「オブジェクトリテラル」の両方で使用されるためです。

// これはエラーになる例（波カッコが関数のブロックと見なされる）
const getUser = (name) => { name: name }; 

// 正しい書き方：オブジェクト全体を丸カッコで囲む
const getUser = (name) => ({ name: name });

console.log(getUser("田中"));

{ name: "田中" }

丸カッコ()で囲むことにより、インタープリタに対して「これは関数の処理ブロックではなく、返却するオブジェクトの値である」と明示的に伝えることができます。

従来関数（function）との決定的な違い

アロー関数は単に書き方が短いだけではなく、従来関数とは異なる重要な性質をいくつか持っています。

これらの違いを理解せずにアロー関数を多用すると、予期しないバグを招く可能性があります。

1. thisの束縛（レキシカルなthis）

アロー関数と従来関数の最大の違いは、「this」が何を指すかという挙動にあります。

従来のfunctionキーワードで定義された関数では、thisの値は「関数の呼び出し方」によって動的に決まります。

一方、アロー関数には独自のthisが存在せず、「関数が定義された場所の外側のスコープ」からthisを引き継ぎます。

これを「レキシカルなthis（Lexical this）」と呼びます。

例えば、オブジェクトのメソッド内で別の関数（コールバック）を呼び出す場面を考えてみましょう。

const timer = {
    count: 0,
    start: function() {
        // 従来の関数の場合
        setTimeout(function() {
            this.count++;
            console.log("従来関数:", this.count);
        }, 100);
    }
};

timer.start();

従来関数: NaN

上記のコードでは、setTimeoutの中にある従来関数内のthisが、グローバルオブジェクト（ブラウザならwindow）を指してしまい、意図したcountを更新できません。

以前はこの問題を回避するために、const self = this;のように変数を退避させたり、.bind(this)を使ったりする必要がありました。

しかし、アロー関数を使えばこの問題は自然に解決します。

const timer = {
    count: 0,
    start: function() {
        // アロー関数の場合
        setTimeout(() => {
            this.count++;
            console.log("アロー関数:", this.count);
        }, 100);
    }
};

timer.start();

アロー関数: 1

アロー関数はstartメソッド内のthis（つまりtimerオブジェクト）をそのまま引き継ぐため、正しく動作します。

2. argumentsオブジェクトの不在

従来関数では、関数に渡されたすべての引数を保持するargumentsという特殊な配列風オブジェクトが利用可能でした。

しかし、アロー関数にはargumentsオブジェクトが存在しません。

アロー関数内でargumentsを参照しようとすると、外部スコープにある同名の変数を探してしまいます。

可変長引数を扱いたい場合は、アロー関数ではES6で導入された「残余引数（Rest Parameters）」を使用するのが一般的です。

// 残余引数を使ったアロー関数の例
const sum = (...args) => {
    return args.reduce((acc, curr) => acc + curr, 0);
};

console.log(sum(1, 2, 3, 4));

10

3. コンストラクタとしての利用不可

アロー関数は、newキーワードを使ってインスタンスを生成するための「コンストラクタ」として使用することはできません。

アロー関数にはprototypeプロパティも存在しないため、オブジェクト指向的なクラスの基盤として使うことは設計上想定されていません。

無理にnewを使ってアロー関数を呼び出そうとすると、実行時にTypeErrorが発生します。

アロー関数の主なメリット

アロー関数を積極的に採用することで得られるメリットは多岐にわたります。

コードの可読性向上

最大のメリットは、何と言ってもコードが簡潔になることです。

特に、配列操作のメソッドと組み合わせた際にその恩恵を強く感じることができます。

const numbers = [1, 2, 3, 4, 5];

// 従来関数
const squaresOld = numbers.map(function(n) {
    return n * n;
});

// アロー関数
const squaresNew = numbers.map(n => n * n);

アロー関数を使うことで、本来注力すべき「ロジック（nをnの2乗にする）」が際立ち、余計なキーワードに目を奪われることがなくなります。

スコープの安全な管理

前述したthisの性質により、非同期処理やイベントリスナーの中でスコープの混乱を防ぐことができます。

初心者が陥りやすい「thisがundefinedになる」「thisが予期せぬオブジェクトを指している」というミスを、構文レベルで回避できるのは大きな利点です。

アロー関数を使わないほうがよい場面

非常に便利なアロー関数ですが、すべてを置き換えれば良いというわけではありません。

アロー関数の特性が裏目に出てしまう「アンチパターン」も存在します。

オブジェクトのメソッド定義

オブジェクト内でそのオブジェクト自身を参照するメソッドを定義する場合、アロー関数は不向きです。

const person = {
    name: "田中",
    sayName: () => {
        // ここでのthisはpersonではなく外側のスコープ（windowなど）を指す
        console.log(this.name);
    }
};

person.sayName();

undefined

このようなケースでは、従来通りのメソッド記法（sayName() { ... }）を使用すべきです。

DOMイベントリスナー内でのthis利用

DOM要素にイベントを設定し、クリックされた要素自体（event.currentTarget）をthisで参照したい場合も注意が必要です。

アロー関数を使うと、thisがイベント発生源の要素ではなく、グローバルスコープなどを指してしまいます。

要素自身にアクセスしたい場合は、第一引数のeventオブジェクトからevent.targetを参照するか、従来関数を使う必要があります。

実践的な使い分けのポイント

モダンなJavaScript開発における推奨される使い分けは、以下の通りです。

まず、基本的なコールバック関数にはすべてアロー関数を使う方針で問題ありません。

map、filter、reduce、forEach、そしてPromiseの.then()などは、アロー関数が最も適している場所です。

一方で、クラスのメソッドやオブジェクトのリテラル内の関数については、アロー関数ではなく、ES6のメソッド定義構文を優先的に使いましょう。

また、関数の巻き上げ（Hoisting）を利用したい場合には、functionキーワードによる関数宣言が必要になります。

アロー関数は変数に代入する形式（関数式）をとるため、定義する前に呼び出すことはできないからです。

まとめ

アロー関数は、JavaScriptのコードを現代的で洗練されたものにするための強力な武器です。

=>という簡潔な記法により、開発者はよりロジックに集中したプログラミングが可能になります。

特にthisの扱いが直感的になったことで、コールバック処理でのバグが劇的に減少したことは、言語の進化において非常に重要な一歩でした。

一方で、argumentsオブジェクトを持たない点や、コンストラクタとして機能しない点など、従来関数とは明確に異なる仕様も存在します。

これらを正しく理解し、適材適所で使い分けることが、プロフェッショナルなエンジニアへの第一歩です。

まずは日々の開発の中で、配列操作のメソッドからアロー関数を取り入れて、その利便性を体感してみてください。

正しく使いこなすことができれば、あなたの書くJavaScriptコードはより美しく、保守性の高いものへと変わっていくはずです。