アロー関数｜コードで実践

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

(引数) => 式 でコンパクトに関数を書けます (return 省略可)

関数宣言と違って巻き上げされず、this は外側スコープを引き継ぎます

最小例は const double = (n) => n * 2;

アロー関数とは

アロー関数 (=>) で簡潔に関数を書く。本レッスンでは、アロー関数の基本から実際の使いどころまでを整理し、現場で迷わず使える形に落とし込みます。

アロー関数で短く書く

前のレッスンでは function キーワードを使った 関数宣言 を学びました。 JavaScript にはもう一つ、とてもよく使われる関数の書き方があります。 ES2015 で追加された アロー関数 です。 => という矢印を使うのが特徴で、コールバックや map 、 filter などとセットで日常的に登場します。

アロー関数は 関数式 の短縮版です。 function (x) { return x * 2 } を (x) => x * 2 のように書けます。

最近の JavaScript コードでは、ほとんどの関数がアロー関数で書かれていると言っても過言ではありません。短く書ける反面、 this の扱いが関数宣言と違うなど少し癖もあるので、文法だけでなく 使い分け まで意識して学んでいきましょう。

アロー関数の文法

アロー関数の基本形は次のとおりです。

JavaScript

// 引数 1 つ・本体 1 行
const double = (n) => n * 2;

// 引数 2 つ・本体 1 行
const add = (a, b) => a + b;

// 本体が複数行の場合は {} と return が必要
const greet = (name) => {
  const message = `Hello, ${name}!`;
  return message;
};

ポイントは次の通りです。 (引数) => 式 の形なら return を書かなくても式の値が戻り値になります。本体に {} を付けたら、関数宣言と同じように return で値を返す必要があります。

書き方	戻り値
`(n) => n * 2`	`n * 2` (式の値)
`(n) => { return n * 2; }`	`n * 2`
`(n) => { n * 2; }`	`undefined` (return がない)
`() => ({ id: 1 })`	`{ id: 1 }` (オブジェクト)

動きを追ってみる

アロー関数を使って double を書き直してみます。

JavaScript

const double = (n) => n * 2;

console.log(double(3));   // 6
console.log(double(10));  // 20

見た目はぐっと短くなりましたが、振る舞いは function を使ったバージョンとほぼ同じです。引数を渡し、戻り値を受け取るインターフェースは同じだと考えていいでしょう。

アロー関数は const や let に代入して使うのが基本です。 関数宣言 のような巻き上げはされないので、定義より前で使うとエラーになります。

引数 1 つなら丸括弧も省略できる

小さな書き方の差ですが、引数が 1 つだけのアロー関数は () を省略できます。

JavaScript

const square = n => n * n;
const greet = name => `Hello, ${name}!`;

プロジェクトによっては eslint などで () を必ず付けるルールに統一していることもあります。読みやすさ重視なら (n) => n * n のように常に括弧付きで書くのも有りです。

JavaScript

// 関数宣言版 (再掲)
function doubleFn (n) { return n * 2; }

// アロー関数版
const doubleArrow = (n) => n * 2;

diagram (will load when visible)

図の流れを順序リストで書き直すと、次の通りです。

double(3) を呼び出す
引数 n に 3 が入る
n * 2 の式を評価する
式の値 6 がそのまま戻り値になる (return 不要)
呼び出し元で 6 を受け取る

アロー関数と関数宣言の違い

以下のとおりです。

巻き上げ → 関数宣言はファイル先頭から使える、アロー関数は const 宣言の後から
this の扱い → アロー関数は外側のスコープの this を引き継ぐ
arguments オブジェクト → アロー関数では使えない (代わりに後で学ぶ残余引数を使う)
構文の長さ → アロー関数のほうが短い

多くの場合アロー関数で十分ですが、 クラスのメソッド やオブジェクトの メソッド として this を使いたいときは関数宣言や function 式のほうが安全です。

よくある間違い

アロー関数でよくあるつまずきは次のとおりです。

本体に {} を付けたのに return を書かない → undefined が返る
(a, b) => の , を忘れて (a b) と書いて SyntaxError
const fn = () => { obj: 1 } のようにオブジェクトを返したつもりが、 {} が関数本体として解釈される (本当にオブジェクトを返したいなら () => ({ obj: 1 }) と丸括弧で囲む)

JavaScript

// NG — {} がブロックとして読まれる
const bad = () => { id: 1 };

// OK — オブジェクトリテラルを返したいなら括弧で囲む
const good = () => ({ id: 1 });

オブジェクトを直接返したいときは ({ ... }) のパターンを覚えておきましょう。慣れるまではここで詰まる人が多い部分です。

この章のポイント

ここまでの要点 (引数) => 式 は return 省略可、{} を書いたら return が必要。オブジェクトリテラルを返すときは ({ ... }) で囲む。

やってみよう

引数 n を受け取り、 n の 2 倍を返すアロー関数 double を書いてみましょう。本体は 1 行で書けば return を省略できます。代入先は const を使うのが定番です。書き終えたら、関数宣言版とアロー関数版の 見た目の差 を眺めて、どちらが読みやすいか自分なりに感想を持ってみると、今後のコードレビューでも判断軸になります。

よくある質問

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 を持たないのと同様、アロー関数を「軽量な関数式」として扱う設計思想に基づいています。引数全部を扱いたいケースで間違えやすいポイントです。

次のレッスン

次は デフォルト引数 で、アロー関数 (=>) で簡潔に関数を書くを学びます。

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

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

理解度チェック (30 秒)

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

この章のポイント

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

関連レッスン

アロー関数

アロー関数で短く書く

アロー関数の文法

動きを追ってみる

引数 1 つなら丸括弧も省略できる

アロー関数と関数宣言の違い

よくある間違い

やってみよう

よくある質問

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

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

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

次のレッスン

要件

入出力例

ヒント

メモ