8 - 関数

8.1 概要

関数は、実行する特定のタスクや処理をまとめたもので、名前をつけて呼び出すことができます。関数は、コードの再利用や構造化に役立ちます。基本的な構文は次の通りです。

Listing1：関数の構文

function 関数名(パラメータ1, パラメータ2, ...) {
  // 関数の本体（処理）
  // ...
  return 結果;
}

関数を作成するには、function キーワードを使います。関数を呼び出すには、関数名に続けて括弧 () をつけます。関数には、パラメータと呼ばれる変数を指定することができます。これは関数が呼び出される際に渡される値を受け取るためのものです。引数は、関数を呼び出す際に渡す具体的な値です。

Listing2：関数の呼び出し

// 関数の定義
function greet(name) {
  console.log("Hello, " + name + "!");
}

// 関数の呼び出し
greet("Alice"); // Hello, Alice!
greet("Bob");   // Hello, Bob!

関数は処理を実行した結果を返すことができます。return キーワードを使用して、関数が返す値を指定します。これを戻り値と呼びます。

Listing3：戻り値

function add(x, y) {
  return x + y;
}

let sum = add(5, 7);
console.log(sum); // 12

8.2 無名関数とアロー関数

関数には名前がない無名関数と呼ばれるものもあり、これを変数に代入することができます。

Listing4：無名関数

// 無名関数
let multiply = function(x, y) {
  return x * y;
};

console.log(multiply(3, 4));  // 12

8.3 アロー関数

アロー（allow：矢印）関数は、ES6（ECMAScript 2015）で導入された新しい関数の構文です。アロー関数は通常の関数よりも簡潔であり、主に無名関数として使われます。以下に Listing4 の無名関数をアロー関数に書き換えたものを示します。

Listing5：アロー関数

// 無名関数
const multiply = (x, y) => {
  return x * y;
};

console.log(multiply(3, 4));  // 12

単一のパラメータを持つ場合、パラメータを括弧で囲む必要はありません。また、処理ブロックを含む場合は、波括弧 {} を使用して複数の文をまとめることができます。

Listing6：アロー関数2

// 単一のパラメータ
const square = x => x * x;

// 処理ブロックを含む場合
const greet = name => {
  console.log("Hello, " + name + "!");
};

演習1

Listing3 の add 関数をアロー関数に書き直してみましょう。

8.4 高階関数

高階関数（Higher-Order Function）は、他の関数を引数として受け取るか、または関数を戻り値として返す関数のことを指します。JavaScript では関数が第一級オブジェクトであるため、高階関数は非常に一般的であり、関数型プログラミングの概念をサポートしています。

以下は、高階関数の基本的な概念を示す例です。

8.4.1 関数を引数として受け取る高階関数

Listing7：関数を引数として受け取る高階関数

const multiplyBy = (factor) => {
  // 引数として渡された関数を内部で呼び出す高階関数
  return (number) => {
    return number * factor;
  };
}

// 高階関数を使って新しい関数を作成
const double = multiplyBy(2);

// 新しい関数を使用
console.log(double(5)); // 10

この例では、multiplyBy という高階関数が、引数として渡された値に基づいて新しい関数を返しています。multiplyBy(2) を呼び出すことで、新しい関数 double が作成され、これが後で使われています。

8.4.2 関数を戻り値として返す高階関数

Listing8：関数を戻り値として返す高階関数

const greet = (language) => {
  // 関数を戻り値として返す高階関数
  if (language === 'ja') {
    return (name) => {
      console.log('こんにちは、' + name + 'さん！');
    };
  } else {
    return (name) => {
      console.log('Hello, ' + name + '!');
    };
  }
}

// 高階関数を使って関数を取得
const greetInJapanese = greet('ja');
const greetInEnglish = greet('en');

// 取得した関数を使用
greetInJapanese('太郎'); // こんにちは、太郎さん！
greetInEnglish('John');  // Hello, John!

この例では、greet という高階関数が、引数として渡された言語に基づいて異なる挨拶のための関数を返しています。

特に React や Next.js では、関数を戻り値として返す高階関数を定義することがコンポーネントの定義と等価になります。少し難しい概念ですが、JavaScript の強力な文法を見事に利用したものですので、身につけておいて損はないでしょう。