第3章: アロー関数 (Arrow Functions)

第3章: アロー関数 (Arrow Functions)

概要

アロー関数はES6で導入された新しい関数の記法で、() => { ... }という簡潔な構文を持ちます。アロー関数を理解するには、まず「JavaScriptでは関数を変数のように扱える」という概念を把握することが重要です。アロー関数はこの特性を活かした簡潔な関数定義方法であり、特に関数を引数として渡す場合や、短い処理を書く場合に便利です。

関数を変数として扱う基本概念

JavaScriptでは関数はファーストクラスオブジェクトであり、変数に代入することができます。以下は基本的な例です：

// 従来の関数宣言
function greet(name) {
    return "Hello, " + name;
}

// 関数式：関数を変数に代入する
const sayHello = function(name) {
    return "Hello, " + name;
};

// 関数を呼び出す
console.log(greet("John"));     // "Hello, John"
console.log(sayHello("Mary"));  // "Hello, Mary"

アロー関数の基本

アロー関数は次のように記述します：

// 最もシンプルなアロー関数
const sayHi = () => {
    console.log("Hi!");
    return "挨拶完了";
};
sayHi();  // "Hi!" と表示され、"挨拶完了" が返される

// 引数を1つ取るアロー関数
const greet = (name) => {
    console.log("Hello, " + name);
    return "挨拶完了";
};
greet("Alice");  // "Hello, Alice" と表示される

// 引数を複数取るアロー関数
const add = (a, b) => {
    return a + b;
};
console.log(add(5, 3));  // 8

アロー関数の省略記法

アロー関数には以下の省略記法があります：

// 1. 引数が1つの場合、括弧を省略できる
const double = num => {
    return num * 2;
};
console.log(double(4));  // 8

// 2. 関数本体が単一の式のみの場合、波括弧とreturnを省略できる
const double2 = num => num * 2;
console.log(double2(4));  // 8

const greet2 = name => "Hello, " + name;
console.log(greet2("Bob"));  // "Hello, Bob"

// 3. オブジェクトリテラルを返す場合は、括弧で囲む必要がある
const createPerson = (name, age) => ({ name: name, age: age });
console.log(createPerson("Carol", 25));  // { name: "Carol", age: 25 }

アロー関数の実際の使用例

アロー関数は特に配列操作やコールバック関数で威力を発揮します：

// 配列の各要素を2倍にする: 通常の無名関数 vs アロー関数
const numbers = [1, 2, 3];

// 従来の書き方
const doubled1 = numbers.map(function(x) {
    return x * 2;
});

// アロー関数での書き方（短縮形）
const doubled2 = numbers.map(x => x * 2);

console.log(doubled1);  // [2, 4, 6]
console.log(doubled2);  // [2, 4, 6]

アロー関数とthisの違い

アロー関数の重要な特徴として、thisの扱いが従来の関数と異なります。通常のfunctionで定義した関数は呼び出し方によってthisの値が変わりますが、アロー関数は自身がthisを持たず、囲んでいる外側のスコープのthis値を引き継ぎます。 

// オブジェクトのメソッドにおけるthisの違い
const user = {
name: "Carol",
// 通常の関数でメソッド定義
greetNormal: function() {
    console.log("Hello, " + this.name);
},
// アロー関数でメソッド定義
greetArrow: () => {
    console.log("Hello, " + this.name);
}
};

user.greetNormal();  // "Hello, Carol"
user.greetArrow();   // "Hello, undefined"（アロー関数は自身にthisがなく、外側のthis＝グローバルを参照するため）

この違いから、オブジェクトのメソッドやクラスのメソッドを定義する場合は通常のfunctionを用いるべきであり、アロー関数を用いるとthisが意図したものにならない点に注意が必要です。

一方、コールバック関数やタイマー処理などで、外側のthisをそのまま使いたいケースではアロー関数が便利です：

// この例ではsetTimeoutのコールバックにアロー関数を使用
const timer = {
seconds: 0,
start: function() {
// アロー関数を使うとthisがtimerを指す
setInterval(() => {
  this.seconds++;
  console.log(this.seconds + "秒経過");
}, 1000);

// 従来の関数を使うとthisがグローバルオブジェクトを指し、エラーとなる
/*
setInterval(function() {
  this.seconds++;  // ここのthisはwindowオブジェクト
  console.log(this.seconds + "秒経過");
}, 1000);
*/
}
};

// timer.start(); // 実行するとコンソールに1秒ごとに経過秒数が表示される

まとめ

アロー関数は特に以下のような場合に便利です：

  1. 簡潔な一行関数を書きたい場合
  2. 配列操作のコールバック関数
  3. 外側のスコープのthisを使いたいコールバック関数

一方、以下の場合には通常の関数を使うべきです：

  1. オブジェクトのメソッド
  2. クラスのメソッド
  3. 独自のthisコンテキストが必要な場合

アロー関数の構文に慣れると、多くのモダンJavaScriptコードがより読みやすくなり、特にReactやVueといったフレームワークでのコンポーネント開発がスムーズになります。

目次に戻る