JavaScript 入門

JS アロー関数の基本

アロー関数 (Arrow Functions) は、ECMAScript 6 (ES6) で導入されました。従来の JavaScript 関数と比較して、より簡潔な関数式の記述方法を提供します。

アロー関数は、特に関数内が一行で完結するようなシンプルな操作において、関数定義を簡略化する手段を提供します。本セクションでは、アロー関数の基本構文とその基本的な使い方について探求します。

1. 基本構文の理解

アロー関数の一般的な構文は以下の通りです。

(パラメータ) => 式;

詳細を分解してみましょう。

  • パラメータ (parameters): これは関数が受け取る入力値のリストで、カンマで区切ります。パラメータが1つだけの場合、丸括弧 () は省略可能です。パラメータがない場合は、空の丸括弧 () を使用する必要があります。
  • =>: これは「アロー（矢印）」記号であり、アロー関数の名前の由来です。パラメータと関数体を区切る役割を持ちます。
  • 式 (expression): これは関数が実行し、返却するコードです。関数体が単一の式で構成されている場合、return キーワードは省略（暗黙的）され、式の値が自動的に返されます。これは 暗黙的リターン (implicit return) と呼ばれます。

1.1 シンプルなアロー関数の例

このアロー関数は1つのパラメータ (x) を受け取り、その2乗を返します。

const square = (x) => x * x;
console.log(square(5)); // 出力: 25

この場合、パラメータが x 1つだけなので、以下のように記述することもできます。

const square = x => x * x; // 'x' の周囲の丸括弧はオプショナルです。
console.log(square(5)); // 出力: 25

1.2 パラメータがないアロー関数

パラメータがない場合は、空の丸括弧を使用する必要があります。

const sayHello = () => console.log("こんにちは!");
sayHello(); // 出力: こんにちは!

1.3 複数のパラメータを持つアロー関数

パラメータが2つ以上ある場合、丸括弧は必須です。

const add = (a, b) => a + b;
console.log(add(2, 3)); // 出力: 5

2. ブロック体（Block Body）を持つアロー関数

関数体に複数の式が含まれる場合や、単一の式ではなくステートメント（文）を使用する必要がある場合は、ブロック体 (Block Body) を使用する必要があります。

ブロック体は波括弧 {} で囲まれます。ブロック体を使用する場合、値を返すには明示的に return キーワードを使用しなければなりません。

ブロック体を持つアロー関数の構文は以下の通りです。

(パラメータ) => {
  // ステートメント
  return 式;
};

2.1 ブロック体を持つアロー関数の例

このアロー関数は2つのパラメータ a と b を受け取り、それらの和を計算してから結果を返します。

const add = (a, b) => {
  const sum = a + b;
  return sum;
};
console.log(add(2, 3)); // 出力: 5

2.2 ブロック体を持つより複雑なアロー関数の例

この例では、長方形の面積を計算するアロー関数を示します。

const calculateArea = (width, height) => {
  const area = width * height;
  console.log("面積を計算中..."); // 追加のステートメント
  return area;
};
console.log(calculateArea(5, 10)); // 出力: 面積を計算中... \n 50

3. 暗黙的リターン (Implicit Returns) 詳解

前述の通り、アロー関数では 暗黙的リターン を利用できます。これは、関数体が単一の式で構成されている場合、return キーワードを省略でき、その式の値が自動的に返されることを意味します。これにより、構文が非常に簡潔になります。

3.1 実戦における暗黙的リターン

const multiply = (x, y) => x * y; // 暗黙的リターン
console.log(multiply(4, 6)); // 出力: 24

3.2 複雑な式を含む暗黙的リターン

const getDiscountedPrice = (price, discountPercentage) => price * (1 - discountPercentage / 100);
console.log(getDiscountedPrice(100, 20)); // 出力: 80

重要な注意点: 暗黙的リターンは、単一の式にのみ適用されます。複数のステートメントがある場合や、より複雑なロジックを実行する必要がある場合は、必ずブロック体 {} を使用し、明示的に return キーワードを記述してください。