【完全入門】"=> とは？"JavaScriptのアロー関数の使い方と意味

ReactでおなじみのJavaScriptやTypeScriptに登場する「アロー関数（=>）」その使い方と意味、生い立ちについて解説します。

意味をしっかり覚えるとその後の理解が進みます。

“=>” アロー関数とは？（Arrow Functions）
アロー関数 =>（矢印）の特徴
その前に無名関数（匿名関数）とは？
関数定義（ES5以前）とアロー関数（ES6以降）の実装比較
1. 通常の関数
2. コールバック関数での使用
アロー関数が使えない書き方
1. コンストラクタとして使用できない
寄付の依頼

“=>” アロー関数とは？（Arrow Functions）

正式には**「アロー関数（Arrow Functions）」**と呼ばれます。

アロー関数は、JavaScriptのES6（ECMAScript 2015）で導入された割と新しい関数定義の方法です。

アロー関数は、従来の関数宣言に比べて簡潔な構文を提供し、特に無名関数やコールバック関数の定義に便利です。

=> という構文を使って定義されることから、「アロー（矢印）関数」と呼ばれます。
定義がより簡単かつ直感的になりました。

アロー関数 =>（矢印）の特徴

簡潔な構文:
- アロー関数は、functionキーワードを省略し、=>を使用することで関数を定義します。
暗黙のreturn:
- 単一の式を返す場合、中括弧とreturnキーワードを省略できます。
レキシカルthisバインディング:
- アロー関数は、宣言された場所のthisを継承します。従来の関数と異なり、アロー関数内のthisは、関数が定義されたスコープのthisを保持します。

その前に無名関数（匿名関数）とは？

「匿名関数」と「無名関数」は、同じ意味として使われます。

無名関数（匿名関数）とは、関数名を持たない関数のことです。

主にその場限りで使用する関数や、コールバックとして渡す関数に使われます。

この後例の中で説明しますので、覚えておいてください。

関数定義（ES5以前）とアロー関数（ES6以降）の実装比較

従来の関数定義（ES5以前）は、functionキーワードを使用して行います。

アロー関数（ES6以降）は、=>（矢印）を使って定義します。より簡潔な構文で、特にコールバック関数や無名関数の定義に適しています。

通常の関数

// -------------------------
// 従来の関数定義
// -------------------------
// 名前付き関数
function add(a, b) {
    return a + b;
}

// 匿名関数（関数式） ※ 無名関数とも呼ばれる
const multiply = function(a, b) {
    return a * b;
};
// -------------------------
// ☆アロー関数☆
// -------------------------
// 名前付き関数
const add = (a, b) => {
    return a + b;
};

// 匿名関数（関数式） ※ 無名関数とも呼ばれる
// 一行の内容なら、さらに簡潔に{}カッコが省略できる（暗黙のreturnを使用）
const multiply = (a, b) => a * b;

コールバック関数での使用

// -------------------------
// 従来の関数定義
// -------------------------
const numbers = [1, 2, 3, 4, 5];

// 通常の関数を使ったコールバック
const doubled = numbers.map(function(number) {
    return number * 2;
});

// -------------------------
// ☆アロー関数☆
// -------------------------
const numbers = [1, 2, 3, 4, 5];

// アロー関数を使ったコールバック
const doubled = numbers.map(number => number * 2);

アロー関数が使えない書き方

アロー関数は便利な機能を提供しますが、適していない場合もあります。

特に、アロー関数はコンストラクタとして使用できません。

コンストラクタとして使用できない

アロー関数は、newキーワードでインスタンスを作成するためのコンストラクタとして使用できません。これはアロー関数が持つ特性によるものです。

// -------------------------
// 従来の関数定義
// -------------------------
function Person(name) {
    this.name = name;
    this.age = 0;
}

const person = new Person("Alice");
console.log(person.name);  // 出力: Alice
console.log(person.age);   // 出力: 0

// -------------------------
// ☆アロー関数☆
// -------------------------
const Person = () => {
    this.age = 0;
};

// 以下はエラーになります
const person = new Person();  // TypeError: Person is not a constructor

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

// 以下はエラーになります
const person = new Person("Alice");  // TypeError: Person is not a constructor

レキシカルなthisバインディング: アロー関数は、宣言されたスコープのthisを継承します。通常の関数では、newキーワードを使用すると、新しいオブジェクトが作成され、そのオブジェクトがthisとしてバインドされます。しかし、アロー関数はそのような動作をしません。
プロトタイプが存在しない: 通常の関数はprototypeプロパティを持ちますが、アロー関数はprototypeプロパティを持ちません。newキーワードを使用すると、新しいオブジェクトは関数のprototypeプロパティを継承しますが、アロー関数にはこのプロパティがないため、継承機構が機能しません。