アロー関数とは｜書き方・thisの違い・使えない場面

アロー関数とは

アロー関数は、=> を使って関数を短く書ける記法で、ES2015で追加されました。コールバック関数を書く場面で特に重宝します。単なる省略記法ではなく、自分自身の this を持たない（外側の this を引き継ぐ）という性質があり、通常の function とは挙動が異なる点が重要です。

基本（構文・仕組み）

// 通常の関数式
const add1 = function (a, b) { return a + b; };

// アロー関数
const add2 = (a, b) => { return a + b; };

// 式が1つなら { } と return を省略できる
const add3 = (a, b) => a + b;

// 引数が1つなら () も省略できる
const sq = x => x * x;

// 引数なしは () が必要
const hello = () => 'hello';

サンプルコード（実行結果つき）

基本の書き方

const add = (a, b) => a + b;
console.log(add(2, 3)); // 5
const sq = x => x * x;
console.log(sq(4));     // 16

オブジェクトを返すときは丸括弧で包む

const mk  = () => ({ id: 1 });
console.log(mk());  // { id: 1 }

const bad = () => { id: 1 };
console.log(bad()); // undefined

{ id: 1 } を { } だけで書くと、ブロックと解釈されてラベル付きの式になり、何も返りません。オブジェクトリテラルを返すときは ({ ... }) にします。

thisの違い

const obj = {
  name: 'A',
  reg() { return [1].map(function () { return this && this.name; }); },
  arr() { return [1].map(() => this.name); }
};
console.log(obj.reg(), obj.arr()); // [ undefined ] [ 'A' ]

通常の関数のコールバックでは this が obj になりません。アロー関数は外側（arr メソッド）の this をそのまま使うため 'A' が取れます。

メソッドにアロー関数を使うと困る例

const o2 = { name: 'B', f: () => typeof this, g() { return this.name; } };
console.log(o2.f(), o2.g()); // object B

f のアロー関数の this は o2 ではなく外側のものです（Node.js の CommonJS ファイル直下では module.exports（空オブジェクト）、ブラウザの通常のスクリプトでは window です。ES Modules では undefined になり、typeof this は 'undefined' になるため、結果は環境で変わります）。o2.g() のように短縮メソッド記法を使えば this は o2 を指します。

newとargumentsの制限

try { new (() => {}); } catch (e) { console.log(e.name + ': ' + e.message); }
// TypeError: (intermediate value) is not a constructor

function h() { const inner = () => arguments[0]; return inner(99); }
console.log(h(7)); // 7（外側の関数の arguments を参照している）

動作確認（検証環境と結果）

• 環境: Node.js v24.19.0（Windows 11）
• 実行: node で上記を実行し、5 / 16 / { id: 1 } / undefined / [ undefined ] [ 'A' ] / object B / TypeError: ... is not a constructor / 7 を確認
• 検証ログ: C:Tempks2techtestsjs-arrow-function.md
• ブラウザでの this（window）の挙動は今回は未検証です。

アロー関数の注意点

• アロー関数は匿名になりがちで、スタックトレースが読みにくくなることがあります。変数に代入すれば名前が推論されます。
• オブジェクトのメソッドやイベントハンドラで this に要素やオブジェクト自身を期待する場合、アロー関数は不向きです。
• call・apply・bind で this を指定しても、アロー関数の this は変わりません。

アロー関数でよくあるミス

• オブジェクトを返したいのに () => { ... } と書いて undefined になる。
• イベントリスナーで this を要素として使おうとして、アロー関数にして動かなくなる（event.currentTarget を使えば解決します）。
• コンストラクタやプロトタイプメソッドをアロー関数で書いてしまう。
• 複数行の本体で return を書き忘れる。

ブラウザ対応・バージョン

アロー関数は現行の主要ブラウザで利用できます。Internet Explorer は非対応です。対応バージョンは MDN の「ブラウザーの互換性」で最新を確認してください。

アロー関数のチェックリスト

• [ ] コールバックの this が外側を指してほしいときにアロー関数を使った
• [ ] オブジェクトを返す式は ({ }) で包んだ
• [ ] メソッド・コンストラクタには通常の関数（または短縮記法）を使った
• [ ] arguments の代わりに ...args を使った

アロー関数のFAQ（よくある質問）

Q. 全部アロー関数で書いてよいですか？
A. トップレベルの関数宣言まで置き換える必要はありません。読みやすさを基準に、コールバックはアロー、メソッドや巻き上げが欲しい関数は function と使い分けるのが無難です。

Q. return は省略してよい？
A. 本体が1つの式なら省略できます。複数行になるなら { } と return を明示した方が読みやすいです。

Q. なぜ引数1つで括弧を省略できるのに、書く人が多いのですか？
A. 引数を増やすときの手直しが減る、型注釈を付けやすいなどの理由でチームの規約にすることがあります。好みの範囲です。

アロー関数の関連項目

• this
• map・filter・reduce
• let・const・var
• プログラムを簡潔にする、関数とは？【JavaScript入門】
• スプレッド構文