JavaScriptのアロー関数とは？基本から使い方まで徹底解説

JavaScriptのアロー関数は、ES6（ES2015）で導入された関数の書き方の一つです。従来の関数よりもシンプルに記述できるだけでなく、特有の挙動（thisの扱いなど）を持つため、現代のWeb制作では頻繁に使用されます。

本記事では、アロー関数の基本から使い方、注意点までを体系的に解説します。

アロー関数とは

アロー関数とは、=>（アロー）を使って関数を簡潔に書く構文です。

従来の関数（function）と比べて、短く読みやすく書けるのが特徴です。

基本的な書き方

従来の関数

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

アロー関数

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

さらに簡潔な書き方

returnの省略

処理が1行の場合、returnと波括弧を省略できます。

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

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

引数の書き方

引数が1つの場合

括弧を省略できます。

const double = num => num * 2;

console.log(double(5)); // 10

引数がない場合

空の括弧が必要です。

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

greet();

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

オブジェクトをそのまま返す場合は、括弧で囲む必要があります。

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

console.log(createUser("Taro", 20));

アロー関数の特徴

thisが固定される（レキシカルthis）

アロー関数は、定義された場所のthisを引き継ぎます。

const obj = {
  name: "Taro",
  showName: function () {
    setTimeout(() => {
      console.log(this.name);
    }, 1000);
  }
};

obj.showName(); // Taro

従来の関数ではthisが変わるため、アロー関数の方が直感的に扱えます。

使用される場面

配列の処理

配列操作と非常に相性が良い構文です。

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

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

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

配列操作の基本については、以下の記事も参考になります。
👉 JavaScriptの配列とは？基本から解説

イベント処理

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

イベントの仕組みについては、以下の記事で詳しく解説しています。
👉 JavaScriptのイベントとは？クリック・入力処理の基本を解説

アロー関数の注意点

1. thisが動的に変わらない

便利な一方で、thisを動的に使いたい場合には不向きです。

const obj = {
  name: "Taro",
  showName: () => {
    console.log(this.name);
  }
};

obj.showName(); // undefined

2. コンストラクタとして使えない

アロー関数はnewと一緒に使えません。

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

// エラーになる
// const taro = new Person("Taro");

3. argumentsが使えない

アロー関数ではargumentsオブジェクトが使えません。

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

// エラーになる

functionとの使い分け

アロー関数と関数の理解を深める

アロー関数を理解するには、関数そのものの理解も重要です。

以下の記事も合わせて読むことで理解が深まります。

• JavaScriptの関数とは？基本と使い方
• JavaScriptの基本構造とは？初心者向けに仕組みを解説

まとめ

アロー関数は、JavaScriptにおける現代的な関数の書き方です。

• 簡潔に書ける
• thisの挙動が分かりやすい
• 配列処理やイベントでよく使われる

一方で、

• thisの扱いに注意が必要
• コンストラクタには使えない

といった特徴もあります。

用途に応じてfunctionと使い分けることが、実務での重要なポイントです。

関連記事

• JavaScriptの関数とは？基本と使い方を徹底解説
• JavaScriptの配列とは？基本から解説
• JavaScriptのイベントとは？クリック・入力処理の基本を解説
• JavaScriptの基本構造とは？初心者向けに仕組みを解説