【 JavaScript】アロー関数で簡単に関数を記述する

JavaScriptのアロー関数（arrow function）は、ES6（ECMAScript 2015）で導入された、より簡潔で短い構文で関数を書くための機能です。従来の関数表現と比べてシンプルで、thisの挙動も異なる特徴を持っています。

アロー関数の基本構文

JavaScriptのアロー関数で使用される => 記号は、いわゆる "アロー" または "矢印" であり、従来の関数キーワード function を置き換えるものです。この記号は、関数の引数と関数の本体を区切る役割を持っています。具体的には、左側に引数を配置し、右側に関数の実行文または返り値を記述します。アロー関数の特徴は、通常の関数と比較して次のような違いがあります。

構文簡略化：=> 記号は、JavaScriptにおいてより短くシンプルな関数を記述する方法を提供します。これにより、コードが読みやすくなり、特に小さな関数やコールバック関数においてその効果を発揮します。
thisの扱い：アロー関数の最も重要な特徴の一つは、thisがレキシカルに束縛されることです。これは、アロー関数内のthisが、アロー関数が定義された時の周囲のコンテキスト（親スコープ）を引き継ぐという意味です。これにより、従来の関数で頻繁に発生していたthisの問題を解消し、特にイベントハンドラやタイマー処理で便利に使われます。

アロー関数は以下のように表されます。

const functionName = (parameter1, parameter2, ..., parameterN) => {
  // 関数の本体
  return expression;
};

パラメータが一つの場合

パラメータが一つのみの場合、括弧すら省略することができ、次のようなシンプルなものとなります。

const square = x => x * x;

関数本体が一行の式だけの場合

関数の本体が一つの式のみで構成されている場合、中括弧（{}）とreturnを省略することができます。

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

アロー関数における`this`の挙動

アロー関数のもう一つの重要な特徴は、thisキーワードの挙動です。従来の関数では、thisは関数が呼び出される文脈によって異なる値を取ります（たとえば、メソッドとして呼び出される場合、そのオブジェクトを指す）。しかし、アロー関数ではthisは外側のスコープ（レキシカルスコープ）からその値を継承します。

例: オブジェクト内でのアロー関数

const person = {
  name: 'Alice',
  greet: function() {
    console.log(`Hello, ${this.name}`);
    setTimeout(() => {
      console.log(`Hello again, ${this.name}`); // ここでの `this` は person オブジェクトを指す
    }, 1000);
  }
};

person.greet();