JavaScriptの矢印関数（アロー関数）入門：基本構文からthisの性質、実務での使い分けまで解説

2026年5月16日

関数

JavaScriptのプログラミングにおいて、矢印関数（アロー関数）は今や欠かすことのできない重要な構文となりました。

2015年に登場したECMAScript 2015（ES6）で導入されて以来、その簡潔な書き方と独特な性質により、多くの開発現場で採用されています。

しかし、単に「短く書ける関数」という理解だけでは、予期せぬバグを引き起こす可能性があるのも事実です。

本記事では、矢印関数の基本的な書き方から、初心者から中級者へステップアップするために不可欠な「this」の振る舞い、そして実務での最適な使い分けについて詳しく解説します。

モダンなJavaScript開発において、矢印関数をマスターすることは、読みやすくメンテナンス性の高いコードを書くための第一歩となります。

目次 [ close ]

矢印関数（アロー関数）の基本構文

矢印関数とは、その名の通り「=>」という矢印のような記号を使って関数を定義する構文です。

従来のfunctionキーワードを使った関数宣言や関数式に比べて、記述を大幅に省略できるのが最大の特徴です。

まずは、従来の関数と矢印関数の書き方の違いをコードで比較してみましょう。

JavaScript

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

// 矢印関数（アロー関数）
const arrowAdd = (a, b) => {
    return a + b;
};

console.log(traditionalAdd(5, 3));
console.log(arrowAdd(5, 3));

実行結果

8
8

このように、functionというキーワードを記述する必要がなくなり、引数の後に矢印を置くことで関数を定義できます。

これだけでも十分にシンプルですが、矢印関数には特定の条件下でさらに記述を省略できるルールが存在します。

引数の省略ルール

矢印関数では、引数の数に応じて括弧()を省略できる場合があります。

引数がちょうど1つの場合に限り、引数を囲む括弧を省略することが可能です。

JavaScript

// 引数が1つの場合（括弧を省略可能）
const square = x => {
    return x * x;
};

// 引数がない場合（括弧は必須）
const sayHello = () => {
    console.log("Hello!");
};

// 引数が2つ以上の場合（括弧は必須）
const multiply = (a, b) => {
    return a * b;
};

ただし、近年の開発現場で使用されるPrettierなどのコード整形ツールでは、一貫性を保つために「常に括弧を付ける」設定が推奨されることもあります。

プロジェクトのコーディング規約に合わせて、柔軟に対応できるようにしておきましょう。

戻り値の省略ルール（簡潔文体）

矢印関数の真価を発揮するのが、関数の中身が「単一の式」である場合の省略記法です。

関数の本体が1行の式で終わる場合、波括弧{}とreturnキーワードを同時に省略できます。

JavaScript

// 通常の書き方
const double = (n) => {
    return n * 2;
};

// 省略した書き方（暗黙的な返却：Implicit Return）
const doubleShort = n => n * 2;

console.log(doubleShort(10));

実行結果

この書き方を「簡潔文体（Concise Body）」と呼び、mapやfilterといった配列の操作メソッドと組み合わせて多用されます。

ただし、波括弧を省略した場合は「その式の評価結果が自動的に返される」という点に注意してください。

もし波括弧を記述した場合は、明示的にreturnを書かなければ戻り値がundefinedになってしまいます。

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

簡潔文体を使ってオブジェクトリテラルを返したい場合は、少し特殊な書き方が必要です。

なぜなら、JavaScriptエンジンにとって{}は「関数のブロック」なのか「オブジェクトの波括弧」なのか区別がつかないからです。

JavaScript

// 誤った書き方（エラーまたは意図しない挙動になる）
// const getUser = id => { id: id, name: "Guest" }; 

// 正しい書き方（括弧で囲む）
const getUser = id => ({ id: id, name: "Guest" });

console.log(getUser(1));

実行結果

{ id: 1, name: "Guest" }

オブジェクトを一行で返したいときは、オブジェクト全体を丸括弧()で囲むというルールを覚えておきましょう。

矢印関数と「this」の性質

矢印関数が導入された最大の理由は、単なる記述の簡略化だけではありません。

実は、「this」の扱いの違いこそが、矢印関数と従来の関数の決定的な差となります。

従来の関数におけるthisの挙動

従来のfunctionで定義された関数におけるthisは、「その関数がどのように呼び出されたか」によって動的に決まります。

例えば、オブジェクトのメソッドとして呼び出されればそのオブジェクトを指しますが、コールバック関数として渡されるとthisが意図せずグローバルオブジェクトやundefined（厳格モード）を指してしまう問題がありました。

JavaScript

const timer = {
    count: 0,
    start: function() {
        // ここでのthisはtimerオブジェクトを指す
        setTimeout(function() {
            // ここは従来の関数のため、thisはグローバルオブジェクト等を指す
            this.count++;
            console.log("Traditional:", this.count);
        }, 1000);
    }
};

timer.start();

実行結果

Traditional: NaN

この例では、setTimeout内の関数が別のコンテキストで実行されるため、this.countが期待通りに動作しません。

以前はこの問題を解決するために、var self = this;と変数を保存したり、.bind(this)を使ったりする必要がありました。

矢印関数による「Lexical this」

一方で、矢印関数は自分自身のthisを持ちません。

矢印関数の内部でのthisは、その関数が定義された外側のスコープのthisをそのまま継承します。

これを「Lexical this（静的スコープのthis）」と呼びます。

JavaScript

const timerArrow = {
    count: 0,
    start: function() {
        // 矢印関数を使用
        setTimeout(() => {
            // 外側のstartメソッドのthis（timerArrow）を継承する
            this.count++;
            console.log("Arrow:", this.count);
        }, 1000);
    }
};

timerArrow.start();

実行結果

Arrow: 1

矢印関数を使うことで、面倒なバインド操作なしに直感的なコードが書けるようになります。

これが、現代のフロントエンド開発（特にReactなどのフレームワーク）で矢印関数が好まれる大きな理由の一つです。

矢印関数が使えない・適さないケース

非常に便利な矢印関数ですが、万能ではありません。

従来の関数でなければならないケース、あるいは矢印関数を使うと不都合が生じるケースがいくつか存在します。

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

オブジェクトのメソッドを定義する際、そのオブジェクト自身を参照したい場合には矢印関数は不向きです。

前述の通り、矢印関数は外側のスコープのthisを参照するため、オブジェクト自身を指してくれません。

JavaScript

const person = {
    name: "田中",
    // メソッドに矢印関数を使用
    greet: () => {
        console.log(`こんにちは、${this.name}さん`);
    }
};

person.greet();

実行結果

こんにちは、undefinedさん

この場合、thisはpersonオブジェクトではなく、さらに外側のグローバルスコープを指してしまいます。

メソッドの定義には、ES6から導入されたメソッドの短縮記法greet() { ... }を使用するのがベストプラクティスです。

2. コンストラクタとしての利用

矢印関数は、newキーワードを使ってインスタンスを生成することができません。

矢印関数にはコンストラクタとしての機能がなく、prototypeプロパティも持っていません。

JavaScript

const User = (name) => {
    this.name = name;
};

// エラーが発生する
// const user1 = new User("Suzuki");

クラスのようなものを作りたい場合は、現代のJavaScriptではclass構文を使用するのが標準的です。

3. argumentsオブジェクトの使用

従来の関数では、渡されたすべての引数にアクセスできる特殊な変数argumentsが利用可能でした。

しかし、矢印関数にはargumentsが存在しません。

JavaScript

const showArgs = () => {
    // console.log(arguments); // ReferenceErrorになる可能性がある
};

もし可変長引数を扱いたい場合は、ES6の「スプレッド構文（残余引数）」を使用しましょう。

const showArgs = (...args) => { console.log(args); };のように書くことで、現代的かつ安全に引数を配列として取得できます。

実務での使い分けと使い分け表

矢印関数と従来の関数のどちらを使うべきか、迷うこともあるでしょう。

基本的には、「基本は矢印関数を使い、特定の理由があるときだけfunctionを使う」というスタンスで問題ありません。

以下の表で、主な違いを整理しました。

機能	従来の関数 (function)	矢印関数 (=>)
thisの決定	呼び出し方によって動的に決まる	定義時のスコープで固定される
new（コンストラクタ）	利用可能	利用不可（エラー）
arguments変数	利用可能	利用不可（残余引数を使用）
主な用途	メソッド定義、古いコードの保守	コールバック、配列操作、定数定義

実務においては、コードの短さよりも「意図が明確であること」が重視されます。

例えば、非同期処理のチェーンや配列の加工など、関数を他の関数に渡す「高階関数」の場面では、矢印関数が圧倒的に読みやすくなります。

配列メソッドでの活用例

矢印関数が最も頻繁に使われるのは、map、filter、reduceなどの配列メソッドです。

実際の開発でよく見かけるパターンを確認してみましょう。

JavaScript

const products = [
    { id: 1, name: "PC", price: 100000 },
    { id: 2, name: "Mouse", price: 5000 },
    { id: 3, name: "Monitor", price: 30000 }
];

// 価格が1万円以上の商品名だけを取り出す
const expensiveProductNames = products
    .filter(p => p.price >= 10000)
    .map(p => p.name);

console.log(expensiveProductNames);

実行結果