JavaScript アロー関数

Volardev 編集部 April 17, 2026

1. アロー関数とは？

アロー関数（Arrow Functions） を使用すると、関数式（Function Expressions） をより短い構文で記述できます。

function キーワード、return キーワード、および 波かっこ（curly brackets） を省略することが可能です。

const 掛ける = (a, b) => a * b;

アロー関数は ES6 で導入され、現代の JavaScript 開発において非常に一般的に使用されています。

2. アロー関数の構文 (Arrow Function Syntax)

アロー関数は => 記号を使用します。
アロー関数は常に 関数式 として記述されます。

2.1 基本的な記述例

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

このアロー関数は、通常の関数式と全く同じ動作をします。

3. 短縮構文 (Shorter Syntax)

関数の本体（ボディ）が 1 つの 文（Statement） のみで構成されている場合：
function という単語、波かっこ、および return キーワードを取り除くことができます。

3.1 アロー関数以前の書き方

a と b の積を計算する関数：

const 掛ける = function(a, b) { return a * b; }

3.2 アロー関数での書き方

const 掛ける = (a, b) => a * b;

3.3 引数がない場合の例

アロー関数以前：

const 挨拶 = function() { return "ハローワールド！"; }

アロー関数：

const 挨拶 = () => "ハローワールド！";

4. 引数が 1 つの場合のアロー関数

関数に引数が 1 つしかない場合は、かっこ（parentheses） を省略することができます。

4.1 かっこを付ける場合

const 二乗 = (x) => x * x;
const 挨拶 = (名前) => "こんにちは " + 名前;

4.2 かっこを省略する場合

const 二乗 = x => x * x;
const 挨拶 = 名前 => "こんにちは " + 名前;

5. デフォルトでの戻り値

関数が値を返す 1 つの文のみで構成されている場合：
波かっこ（ブラケット）と return キーワードを削除できます。

const 挨拶 = () => "ハローワールド！";

重要： これは関数が 1 つの文だけで構成されている場合にのみ機能します。

6. アロー関数の引数 (Parameters)

引数がある場合は、かっこ内に記述します。

const 挨拶 = (値) => "こんにちは " + 値;

引数が 1 つだけの場合は、かっこを省略することも可能です。

const 挨拶 = 値 => "こんにちは " + 値;

7. 引数がない場合のアロー関数

引数がない場合は、かっこ () が必須 となります。

const 挨拶 = () => "ハローワールド！";

関数の本体が 1 つの文である場合にのみ、return と波かっこを省略できます。そのため、ミスを防ぐために常にこれらを記述する習慣をつけるのも良い方法です。

7.1 注意が必要な例

// これは undefined を返します（波かっこがあるのに return がないため）
const 私の関数 = (x, y) => { x * y };

// これはエラー（Syntax Error）になります
const 私の関数 = (x, y) => return x * y;

// これが期待通りに動作します
const 私の関数 = (x, y) => { return x * y };

8. アロー関数は「宣言」ではない

アロー関数は常に 関数式 であり、変数に代入する必要があります。
また、定義される前に呼び出すことはできません（ホイスティングされません）。

挨拶(); // ❌ エラーになります

const 挨拶 = () => "こんにちは";

アロー関数は、使用する前に定義されている必要があります。

9. アロー関数と this キーワード

アロー関数は独自の this 値を持ちません。
アロー関数は、それを取り囲む（外側の）コードから this を継承します。

9.1 通常の関数の場合

const 人物 = {
  名前: "太郎",
  挨拶: function() {
    return this.名前; // "太郎" を指す
  }
};

9.2 アロー関数をメソッドとして使用した場合

アロー関数をオブジェクトのメソッドとして使用すると、予期しない結果（undefined など）を招くことがよくあります。

const 人物 = {
  名前: "太郎",
  挨拶: () => {
    return this.名前; // ここでの this は「人物」オブジェクトを指しません
  }
};

この場合、this は 人物 オブジェクトを参照しません。

10. アロー関数を使うべき時と避けるべき時

10.1 使うべき時

短い関数の記述
コールバック（Callbacks）や配列メソッド（map, filter など）
独自の this を必要としない時

10.2 避けるべき時

オブジェクトのメソッドとして定義する時
独自の this を参照する必要がある時
関数宣言（Function Declaration）として記述したい時