[JavaScript講座] アロー関数（Arrow Function）

2025年11月19日

当ページのリンクには広告が含まれています。

アロー関数の基本構文

一番シンプルな形

従来の関数式：

const add = function (a, b) {
  return a + b;
};

アロー関数：

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

関数名（function ）がなくなり、(引数) => { 本体 } という形になる

引数が1つだけのとき

const square = (x) => {
  return x * x;
};

引数が1つだけなら、カッコを省略できます：

const square = x => {
  return x * x;
};

※ ただし、複数の引数や引数がないときは括弧が必要です。

引数がないとき

const sayHello = () => {
  console.log("Hello");
};

sayHello();

引数なし → () が必須

一行で書ける場合の「暗黙の return」

ブロック {} の代わりに式だけを書くと、その値が自動的に return されます。

const add = (a, b) => a + b;

console.log(add(2, 3)); // 5

これは次と同じ意味です：

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

もう少し例：

const double = x => x * 2;
const toGreeting = name => `こんにちは、${name}さん`;

console.log(double(5));          // 10
console.log(toGreeting("Taro")); // こんにちは、Taroさん

暗黙の return を使うときのルール：

本体が 1つの式だけのときに使える
ブロック {} を使っているときは、明示的に return が必要

オブジェクトリテラルを返すときの注意

よくハマるポイントです。

NG 例：

const createUser = (name, age) => { name: name, age: age };
// これは「ブロック」と解釈されてしまい、undefined を返す

オブジェクトリテラルを暗黙のreturnで返したいときは丸括弧で囲む必要があります：

const createUser = (name, age) => ({ name, age });

console.log(createUser("Taro", 20));
// { name: "Taro", age: 20 }

({ ... }) と書くことで、「これは式としてのオブジェクトですよ」と明示するイメージ

通常の関数との違い

アロー関数は「ただ短く書ける関数」ではありません。
仕様的に、普通の function と違う点がいくつもあります。

特に重要なのが：

this を持たない（外側から引き継ぐ）
arguments を持たない
new でコンストラクタとして使えない
prototype を持たない

この4つです。順に見ていきます。

this の違い（アロー関数最大のポイント）

通常の関数の `this`

const obj = {
  value: 42,
  showValue: function () {
    console.log(this.value);
  },
};

obj.showValue(); // 42

この場合、this は「メソッドを呼び出したオブジェクト」＝ obj を指します。

しかし、コールバックの中などで this が変わってしまうケースがあります。

例：setTimeout 内の通常関数（ブラウザ環境をイメージ）

const counter = {
  count: 0,
  start: function () {
    setTimeout(function () {
      console.log(this.count);
    }, 1000);
  },
};

counter.start(); // this は window/global になりがち → undefined や 0 になったりする

通常の関数では、呼び出し方によって this が変わる

アロー関数の `this`：外側の `this` を捕まえる（レキシカル this）

アロー関数は「自分自身の this を持たない」ので、
「外側のスコープの this をそのまま使う」という挙動になります。

先ほどの例をアロー関数で書き直すと：

const counter = {
  count: 0,
  start: function () {
    setTimeout(() => {
      console.log(this.count);
    }, 1000);
  },
};

counter.start(); // 0

start の中の this は counter
アロー関数内の this も、外側（start 関数）の this と同じになる

コールバック内で this を保ちたいときに、アロー関数が非常に便利です。

オブジェクトのメソッドにアロー関数を使うと危険な例

this のルールが「外側を引き継ぐ」なので、
オブジェクトのメソッドにアロー関数を使うと、期待と違う this になることが多いです。

const obj = {
  value: 42,
  showValue: () => {
    console.log(this.value);
  },
};

obj.showValue(); // undefined になることが多い

この this は「グローバル（または undefined）」を指してしまう
obj を指して欲しいのに、そうならない

結論：

「オブジェクトのメソッドには基本 function を使う」
「コールバックや小さな関数にはアロー関数」

という使い分けが安全です。

arguments とアロー関数

通常の関数は `arguments` を持つ

function normal() {
  console.log(arguments);
}

normal(1, 2, 3); // [1, 2, 3] っぽいオブジェクト

アロー関数には独自の `arguments` がない

const arrow = () => {
  console.log(arguments);
};

arrow(1, 2, 3); // ここで arguments を使うと、外側の arguments を参照してしまう

アロー関数自身の arguments は存在しない
可変長引数が欲しいときは、必ず ...args を使う

const sum = (...nums) => nums.reduce((acc, v) => acc + v, 0);

console.log(sum(1, 2, 3)); // 6

new とアロー関数（コンストラクタにはできない）

通常の関数はコンストラクタになれる

function Person(name) {
  this.name = name;
}

const p = new Person("Taro");
console.log(p.name); // "Taro"

new Person(...) と呼ぶと、Person 内の this は新しく作られたインスタンスを指す

アロー関数は `new` できない

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

// const p = new PersonArrow("Taro"); // TypeError: PersonArrow is not a constructor

アロー関数は [[Construct]] を持たないため、コンストラクタにはなれない
prototype も持たない

結論：

「クラス的な使い方（コンストラクタ関数）にはアロー関数を使えない」
クラス構文 class を使う場合も、メソッド定義は基本 method() {} 形式でOK

アロー関数のまとめと実務での使いどころ

メリット

短く書ける → コールバックが読みやすい
this が外側に束縛される → コールバック内で this が暴れない
arguments ではなく ...args を使う → 配列として扱いやすい

注意点・向かない場面

メソッドとして this を使いたいオブジェクト
→ アロー関数は基本使わない方が良い
コンストラクタ／クラス的な関数
→ アロー関数では書けない。function や class を使う。

いろいろな書き方のパターン整理

基本パターン一覧

// 1. 引数なし
const f1 = () => {
  console.log("no args");
};

// 2. 引数1つ
const f2 = x => {
  console.log(x);
};

// 3. 引数2つ以上
const f3 = (x, y) => {
  return x + y;
};

// 4. 本体が1式だけ（暗黙のreturn）
const f4 = x => x * 2;

// 5. オブジェクトを返す（括弧で囲む）
const makeUser = (name, age) => ({ name, age });

// 6. デフォルト引数
const greet = (name = "ゲスト") => `こんにちは、${name}さん`;

// 7. 残余引数
const sum = (...nums) => nums.reduce((acc, v) => acc + v, 0);

コールバックでの典型例

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

const doubled = arr.map(x => x * 2);
console.log(doubled); // [2, 4, 6, 8, 10]

const evens = arr.filter(x => x % 2 === 0);
console.log(evens); // [2, 4]

arr.forEach((value, index) => {
  console.log(index, value);
});