アロー関数｜基礎を学ぶ - チョットデキル

このレッスンで分かること

(args) => expr で関数を 1 行で書く ES6 構文

this を 自身では持たず、外側スコープの this をそのまま使う (レキシカル this)

引数 1 個なら () 省略、本体 1 式なら {} + return 省略

new で呼べない (コンストラクタにできない)、arguments も持たない

アロー関数とは

アロー関数の書き方と、従来の関数との違い（特にthisの扱い）を学ぼう。本レッスンでは、アロー関数の基本から実際の使いどころまでを整理し、現場で迷わず使える形に落とし込みます。

アロー関数

ES6で導入されたアロー関数（=>）は、関数をより短く書ける構文です。

基本構文

JavaScript

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

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

省略記法

アロー関数にはさらに短い書き方があります。

JavaScript

// 本体が1つの式なら {} と return を省略できる
const double = (x) => x * 2;

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

// 引数がないなら () は必須
const greet = () => "Hello!";

// オブジェクトを返す場合は () で囲む
const makeObj = (name) => ({ name: name, active: true });

thisの違い（重要！）

アロー関数と通常の関数で最も大きな違いはthisの扱いです。

JavaScript

const timer = {
  seconds: 0,

  //  function: thisがtimerを指さない
  startBad() {
    setInterval(function() {
      this.seconds++; // thisはwindow/undefinedを指す！
    }, 1000);
  },

  //  アロー関数: 外側のthisをそのまま使う
  startGood() {
    setInterval(() => {
      this.seconds++; // thisはtimerを指す！
    }, 1000);
  }
};

アロー関数は自分自身のthisを持たず、外側のスコープのthisをそのまま使います（レキシカルthis）。

コールバック関数での活用

配列メソッドのコールバックで特に便利です。

JavaScript

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

// 従来の書き方
const doubled1 = numbers.map(function(n) {
  return n * 2;
});

// アロー関数で簡潔に
const doubled2 = numbers.map(n => n * 2);

// filterとの組み合わせ
const evens = numbers.filter(n => n % 2 === 0);

使い分けのガイドライン

ケース	推奨	理由
コールバック	アロー関数	簡潔に書ける
オブジェクトのメソッド	通常の関数	thisが正しく動く
constructorとして	通常の関数	アロー関数はnewで使えない

実務で遭遇するパターン

中級レッスンで学んだことが、実際の業務コードでどう登場するかを整理します。

配列メソッドのコールバック ─ .map(n => n * 2) .filter(x => x > 0) の定番
Promise の .then / .catch ─ .then(result => doSomething(result))
React のイベントハンドラ ─ onClick={() => handleClick(item)} でクロージャを作る
setTimeout / setInterval ─ setTimeout(() => refresh(), 1000) で this を期待通りに保つ

コードレビューで指摘されがちなポイント

PR を出すとシニアから入りやすい指摘です。先回りで身につけておけばレビューが一発で通ります。

オブジェクトのメソッドにアロー関数 ─ { greet: () => this.name } だと this が外側になる、greet() の短縮記法を使う
コールバックが長すぎる ─ 3 行を超えるアロー関数は名前付き関数に切り出す
括弧の省略しすぎ ─ n => n * 2 は OK だが、ESLint で括弧必須にしているチームもある
return を省略してオブジェクト返却 ─ n => { value: n } は文として解釈される、n => ({ value: n }) が正解

パフォーマンス考慮事項

通常の関数と同等の速度 ─ V8 / SpiderMonkey ともに最適化
this バインドが不要 ─ bind(this) のオーバーヘッドを節約
メモリ使用量はわずかに少ない ─ prototype を持たないため
インライン化されやすい ─ コールバックの典型形は JIT が積極的に最適化

この章のポイント

ここまでの要点 アロー関数は短くて this がレキシカル。コールバック向き、メソッド定義は短縮記法。new 不可、arguments 不可。

まとめ

アロー関数は=>を使った短い関数の書き方
引数1つなら()省略、本体1式なら{}とreturn省略が可能
thisは外側のスコープのものを使う（最重要ポイント）
コールバック関数で特に便利

よくある質問

Q. アロー関数と function 宣言はどう違いますか？

A. アロー関数は this を自身で持たず、外側の this をそのまま参照します。コールバック内で this を保ちたいときに便利です。一方、メソッド定義やコンストラクタとして使うなら従来の function や class の方が適しています。

Q. 1 行と複数行で書き方は変わりますか？

A. 1 式なら (x) => x * 2 のように { } を省略でき、戻り値の return も自動です。複数行なら (x) => { ... return result; } のように波括弧と return を明示します。オブジェクトを返したい場合は () で包んで (x) => ({ value: x }) と書きます。

Q. アロー関数に arguments は使えますか？

A. 使えません。代わりにレスト引数 (...args) => ... を使ってください。これは this を持たないのと同様、アロー関数を「軽量な関数式」として扱う設計思想に基づいています。引数全部を扱いたいケースで間違えやすいポイントです。

次のレッスン

次は スプレッド構文とレスト構文 で、アロー関数の書き方と、従来の関数との違い（特にthisの扱い）を学ぼうを学びます。

事前確認 — 進む前に次の 3 つができることを確認しましょう。

アロー関数の要点を自分の言葉で説明できる
このレッスンの最小コード (または操作手順) を見ずに書ける
練習問題やクイズで間違えた箇所を読み直して理解した

理解度チェック (30 秒)

Q. アロー関数とは何か、1 文で説明してください。

この章のポイント

A. 本文の「このレッスンで分かること」または冒頭の説明文を見直し、自分の言葉で要約できれば OK。詰まったら本レッスンの最初の H2 セクションを読み返してみましょう。

関連レッスン