JavaScript | 基礎構文：関数 – アロー関数

JavaScript JavaScript
2025.12.14
スポンサーリンク

アロー関数って何者？

アロー関数は、
「関数をもっと短く・スッキリ書くための新しい記法」 です。

見た目はこういうやつです。

const greet = (name) => {
  console.log("こんにちは、" + name + "さん");
};
JavaScript

function の代わりに =>（矢印）を使うので「アロー（矢印）関数」と呼ばれます。
本質的には「関数式」の一種で、書き方がコンパクトになったものだと思ってください。

まずは「普通の関数」との対応関係をつかむ

function との書き換え対応

一番大事なのは、
「普通の関数（function）」と「アロー関数」がどう対応しているかを、
頭の中で変換できるようになることです。

例えば、これが普通の関数式。

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

これをアロー関数で書くとこうなります。

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

function が消えて、
引数のあとに => がついているだけです。

もう一つ。

const greet = function (name) {
  console.log("こんにちは、" + name + "さん");
};
JavaScript

アロー関数だとこう。

const greet = (name) => {
  console.log("こんにちは、" + name + "さん");
};
JavaScript

ここが重要です。
アロー関数は「まったく別物」ではなく、
「function を使った関数式を、短く書くための記法」だと捉えると怖くなくなります。

アロー関数の「省略ルール」をちゃんと理解する

引数が1つのときのカッコ省略

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

const greet = name => {
  console.log("こんにちは、" + name + "さん");
};
JavaScript

もちろん、カッコをつけてもOKです。

const greet = (name) => {
  console.log("こんにちは、" + name + "さん");
};
JavaScript

どちらも同じ意味です。
複数あるときは必ずカッコが必要です。

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

引数が0個のときは必ず () が必要

引数がない場合は、こう書きます。

const sayHello = () => {
  console.log("こんにちは");
};
JavaScript

「1行で値を返すだけ」のときは return と波カッコを省略できる

アロー関数の一番気持ちいいところがここです。

例えば、これ。

const double = function (n) {
  return n * 2;
};
JavaScript

アロー関数で、しかも「1行で値を返すだけ」なら、こう書けます。

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

波カッコ {} も return も消えています。
「=> の右側の式の結果が、そのまま戻り値になる」というルールです。

もう少し例を。

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

const toUpper = (str) => str.toUpperCase();
JavaScript

ここが重要です。
「1行で“値を返すだけ”なら、{} と return を省略できる」
このルールを覚えると、アロー関数が一気に気持ちよく使えるようになります。

実例：配列メソッドとアロー関数の相性の良さ

map とアロー関数

配列の map とアロー関数は、ほぼセットで使われます。

例えば、配列の各要素を2倍にしたいとします。

普通の関数式だとこう。

const numbers = [1, 2, 3];

const doubled = numbers.map(function (n) {
  return n * 2;
});

console.log(doubled); // [2, 4, 6]
JavaScript

アロー関数だとこう。

const numbers = [1, 2, 3];

const doubled = numbers.map((n) => n * 2);

console.log(doubled); // [2, 4, 6]
JavaScript

かなりスッキリしましたよね。
「n を受け取って n * 2 を返す関数」を、その場で書いて渡しているだけです。

filter とアロー関数

条件に合うものだけを残す filter もよく使います。

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

const even = numbers.filter((n) => n % 2 === 0);

console.log(even); // [2, 4]
JavaScript

「n を受け取って、n % 2 === 0 という真偽値を返す関数」です。
filter は「true を返した要素だけ残す」ので、偶数だけが残ります。

forEach とアロー関数

単に「全部に対して何かしたい」だけなら forEach。

const numbers = [1, 2, 3];

numbers.forEach((n) => {
  console.log("数値:", n);
});
JavaScript

ここが重要です。
アロー関数は「その場でちょっとした処理を書いて渡す」場面で、
圧倒的に読みやすくなる。
配列メソッドとの組み合わせは、実務でも頻出パターンです。

アロー関数と普通の関数の「本質的な違い」

ここから少しだけ深い話をします。
アロー関数は「短く書ける」だけではなく、
this や arguments の扱いが普通の関数と違う という特徴があります。

初心者のうちは「細かいことはあとで」でいいですが、
「違いがある」ということだけは知っておいてほしいです。

this が「外側の this を引き継ぐ」

普通の関数は、呼び出し方によって this が変わります。

アロー関数は、
「自分自身では this を持たず、外側の this をそのまま使う」
という性質があります。

例えば、DOM イベントでよくあるパターン。

button.addEventListener("click", function () {
  console.log(this); // ここでは this は button 要素
});
JavaScript

これをアロー関数にすると。

button.addEventListener("click", () => {
  console.log(this); // ここでは「外側の this」になる（多くの場合 window など）
});
JavaScript

この違いは、クラスやオブジェクトのメソッドの中で特に効いてきます。

例えば、こういうコード。

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

obj.showLater();
JavaScript

この場合、setTimeout の中の function の this は obj ではありません。
なので this.value は undefined になります。

これをアロー関数にすると。

const obj = {
  value: 42,
  showLater: function () {
    setTimeout(() => {
      console.log(this.value);
    }, 1000);
  },
};

obj.showLater(); // 1秒後に 42 と表示される
JavaScript

アロー関数は「外側の this（ここでは obj）」をそのまま使うので、
this.value は 42 になります。

ここが重要です。
アロー関数は「this を固定したいとき」に便利。
逆に、「呼び出し方によって this が変わってほしいメソッド」には向きません。

コンストラクタには使えない

普通の関数は、new をつけてコンストラクタとして使えます。

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

const p = new Person("太郎");
JavaScript

アロー関数は、コンストラクタとしては使えません。

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

const p = new Person("太郎"); // エラー
JavaScript

アロー関数には [[Construct]] という内部仕様がなく、
new できないからです。

なので、
「クラスっぽいもの」「コンストラクタ関数」にはアロー関数を使わない
というルールを覚えておくと安全です。

どんなときにアロー関数を使うと気持ちいいか

「短い処理」「その場限りの処理」

例えば、イベントリスナー。

button.addEventListener("click", () => {
  console.log("クリックされました");
});
JavaScript

配列メソッド。

const names = users.map((user) => user.name);
JavaScript

Promise チェーン。

fetch("/api/users")
  .then((res) => res.json())
  .then((data) => {
    console.log(data);
  });
JavaScript

こういう「その場でちょっと書いて渡す」処理は、
アロー関数にすると読みやすくなります。

「this を外側と揃えたいとき」

さっきの setTimeout の例のように、
「外側の this をそのまま使いたい」場面では、
アロー関数がとても便利です。

クラスのメソッドの中で、
コールバックとして何かを渡すときなどが典型です。

初心者として「アロー関数」で本当に押さえてほしいこと

アロー関数は、
「function を短く書くための記法」＋「this の扱いが少し特殊な関数」 です。

基本形はこれ。

const 関数名 = (引数1, 引数2, ...) => {
  // 処理
  return 結果; // 必要なら
};
JavaScript

1行で値を返すだけなら、こう書けます。

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

重要なポイントは、

「普通の関数式」と対応関係を頭の中で変換できるようにする
引数1つならカッコ省略可、0個なら () 必須
1行で値を返すだけなら {} と return を省略できる
this が「外側の this を引き継ぐ」こと（ここは徐々に慣れればOK）
コンストラクタには使わない

まずは、
今まで function で書いていた「短い関数」から、
少しずつアロー関数に置き換えてみてください。

例えば、

[1, 2, 3].map(function (n) {
  return n * 2;
});
JavaScript

を、

[1, 2, 3].map((n) => n * 2);
JavaScript

に変えてみる。

この小さな一歩を何度か踏むうちに、
アロー関数は「難しい新機能」ではなく、
「自然に手が伸びる書き方」になっていきます。

次へ
12
スポンサーリンク
タイトルとURLをコピーしました