JavaScriptのアロー関数入門：=>構文とthisの挙動

関数をもっと短く書く方法

JavaScriptのアロー関数は、関数をより簡潔に書くための構文です。ES2015で導入されて以来、小さなインライン関数の書き方としてすっかり定番になりました。特に、配列メソッドに渡すコールバックや、Promiseのハンドラー、イベントリスナーなどでよく使われます。

書き方はシンプルで、引数、=>、本体の順に並べるだけです。

const add = (a, b) => {
    return a + b;
};

console.log(add(2, 3));
console.log(add(10, 7));

クラシックな書き方と同じ結果になります。

const add = function (a, b) {
    return a + b;
};

タイピングが減るのもうれしいポイントですが、アロー関数を使う本当の理由は暗黙のreturnと**thisの扱い方**にあります。どちらもこのあと順番に見ていきましょう。

アロー関数の暗黙のreturn

関数の中身が1つの式だけなら、波カッコと return を省略できます。書いた式の値が自動的に返される仕組みです:

const double = x => x * 2;
const square = x => x * x;
const greet = name => `こんにちは、${name}`;

console.log(double(5));
console.log(square(4));
console.log(greet("Rosa"));

アロー関数の魅力がいちばん発揮されるのがここ。1行で書ける変換処理は、まるで数式のようにスッと読めます。

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

const doubled = numbers.map(n => n * 2);
const evens = numbers.filter(n => n % 2 === 0);
const total = numbers.reduce((sum, n) => sum + n, 0);

console.log(doubled);
console.log(evens);
console.log(total);

複数の処理をまとめて書きたくなった瞬間、中かっこと明示的な return の出番に戻ります。

const describe = n => {
    const label = n >= 0 ? "正の数" : "負の数";
    return `${n} は ${label} です`;
};

console.log(describe(7));
console.log(describe(-3));

波括弧の中で return を書き忘れるのは、アロー関数で一番よくあるミスです。x => { x * 2 } は undefined を返してしまいます。波括弧で囲んだ瞬間に中身はブロック扱いになり、式の結果はそのまま捨てられてしまうからです。

引数のカッコ

引数がちょうど1つのときは、カッコを省略できます:

const shout = message => message.toUpperCase();
console.log(shout("hello"));

引数が 0 個、もしくは 2 個以上あるときは、括弧が必須になります。

const now = () => Date.now();
const add = (a, b) => a + b;

console.log(now());
console.log(add(3, 4));

チームによっては、統一感を重視して常に括弧を付けるスタイルを好むこともあります。どちらでも構わないので、どちらかに決めたら一貫して使いましょう。

オブジェクトリテラルを返すとき

ここでよくハマるポイントがあります。オブジェクトを暗黙のreturnで返そうとすると、波括弧が関数本体と解釈されてしまうのです。

const makeUser = name => { name: name };
console.log(makeUser("Ada"));

これだと undefined が出力されてしまいます。JavaScriptは { name: name } をオブジェクトリテラルではなく、ラベル付き文を含むブロックとして解釈してしまうからです。オブジェクトを丸カッコで囲んで式として扱わせましょう。

const makeUser = name => ({ name: name });
console.log(makeUser("Ada"));

{ ... } を () で囲むのが正解です。これはしっかり覚えておいてください。アロー関数を使い始めて1週間以内に必ずぶつかるポイントです。

レキシカル this とは

アロー関数が存在する本当の理由は、記法が短くなるからではありません。自分自身の this を持たず、外側のスコープから this を受け継ぐという点にあります。

なぜこれが重要なのか。通常の関数をコールバックとして使った例を見てみましょう。

const counter = {
    count: 0,
    start() {
        setInterval(function () {
            this.count++;
            console.log(this.count);
        }, 100);
    },
};

// counter.start();  // NaN が繰り返しログ出力される — コールバック内の `this` は `counter` ではない

setInterval に渡した function () { ... } の中では、this は counter を指しません。通常の関数は呼び出され方によって独自の this を持つので、setInterval からコールバックが呼ばれるときの this は undefined(strict モードの場合)か、もしくはグローバルオブジェクトになってしまうんです。

一方、アロー関数なら外側のメソッドの this をそのまま引き継いでくれます。

const counter = {
    count: 0,
    start() {
        setInterval(() => {
            this.count++;
            console.log(this.count);
        }, 100);
    },
};

counter.start();
setTimeout(() => clearInterval(), 350);

アロー関数の中でも this は counter のままです。アロー関数は自分自身の this を持たないからですね。アロー関数が登場する前は、const self = this; や .bind(this) でこの問題を回避するのが定番でした。今でも使える書き方ではありますが、ほぼ出番はなくなりました。

アロー関数が「持たないもの」

レキシカルthisの挙動は、実はもっと大きな特徴の一部です。アロー関数は、通常の function が持っているいくつかの機能をあえて持っていません。

• 自分の this を持たない — 外側のスコープから引き継ぎます。
• arguments オブジェクトを持たない — 代わりにレストパラメータ（...args）を使います。
• new で呼び出せない — コンストラクタとしては使えません。
• prototype プロパティを持たない — new で呼べない以上、当然と言えます。

const sum = (...args) => args.reduce((total, n) => total + n, 0);
console.log(sum(1, 2, 3, 4));

const Greeter = name => `Hi, ${name}`;
try {
    new Greeter("Ada");
} catch (err) {
    console.log(err.message);
}

...args を使えば「任意の個数の引数を受け取る」という arguments と同じことができて、しかも受け取ったものがちゃんとした配列になるというオマケ付きです。new Greeter(...) の呼び出しがエラーになるのは、アロー関数がコンストラクタとして使えないためです。

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

コールバックを書くときはアロー関数が第一候補になりますが、次のようなケースでは向いていません。

const user = {
    name: "Ada",
    // 間違い: `this` は user オブジェクトを指しません。
    greetArrow: () => `Hi, ${this?.name}`,
    // 正解: 通常のメソッドは独自の `this` を持ちます。
    greet() {
        return `Hi, ${this.name}`;
    },
};

console.log(user.greetArrow());
console.log(user.greet());

アロー関数でオブジェクトのメソッドを定義すると、this はそのオブジェクトにバインドされません。オブジェクトリテラルが書かれた場所（たいていはモジュールやグローバルスコープ）の this をそのまま引き継いでしまいます。メソッドを定義するときは、メソッドの短縮構文（greet() { ... }）を使いましょう。

クラスのプロトタイプメソッド、this が要素を指してほしいイベントハンドラ、それから new で呼び出すつもりの関数についても同じ話です。こうした場面では、普通の function が正解です。

ざっくりした使い分けの目安

• 短いコールバックで、式がひとつだけ？ → アロー関数。
• this を外側のスコープのまま保ちたい？ → アロー関数。
• オブジェクトやクラスのプロトタイプにメソッドを定義する？ → 通常の関数（もしくはメソッド短縮構文）。
• コンストラクタを書く？ → 通常の関数、あるいはそれよりも class を使うのがおすすめ。

現場の JavaScript コードを読めば、どちらのスタイルも当たり前に出てきます。どっちがフィットするかの感覚は、他人のコードを数週間読んでいるうちに自然と身につき、そのあとは意識しなくても選べるようになります。

次は: 引数とデフォルト値

引数まわりの機能——デフォルト値、レストパラメータ、分割代入された引数など——は、アロー関数でも通常の関数でも同じように使えます。次のページで扱うテーマですが、ここまでに見てきたすべての関数の書き方に共通する内容です。