JavaScript
 Computer >> コンピューター >  >> プログラミング >> JavaScript

JavaScriptのファーストクラス関数とは？特徴と使い方を実例で解説

ファーストクラス関数（第一級関数）とは？

JavaScriptでは、関数もオブジェクトの一種として扱われます。そのため、関数を別の関数の引数（パラメータ）として渡したり、関数の中で別の関数を戻り値として返したりすることが可能です。

このような性質を持つことから、JavaScriptの関数はファーストクラス関数（第一級関数）と呼ばれています。つまり、関数は変数・オブジェクト・配列などに自由に格納できる「値」だということです。

さらに、関数を引数として受け取る、関数を戻り値として返す、あるいはその両方を行う関数は高階関数（Higher Order Function）と呼ばれます。

ファーストクラス関数の主な特徴

  • 関数を変数に代入して保持できる
  • 関数をオブジェクトや配列に格納できる
  • 関数を引数として他の関数に渡せる
  • 関数を戻り値として返せる

以下は、JavaScriptでファーストクラス関数を実装したサンプルコードです。配列の各要素を2倍にする処理を通じて、その仕組みを確認してみましょう。

サンプルコード

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
<style>
   body {
      font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
   }
   .result,
   .sample {
      font-size: 18px;
      font-weight: 500;
      color: rebeccapurple;
   }
   .result {
      color: red;
   }
</style>
</head>
<body>
<h1>First class function in Javascript</h1>
<div class="sample">[22,33,44,55]</div>
<br />
<div class="result"></div>
<br />
<button class="Btn">CLICK HERE</button>
<h3>Click on the above button to double each element of the above array</h3>
<script>
   let resEle = document.querySelector(".result");
   let BtnEle = document.querySelector(".Btn");
   let doubleNum = (ele) => {
      return ele * 2;
   };
   let arr = [22, 33, 44, 55];
   function doubleArray(arr, fn) {
      let doubleArr = [];
      arr.forEach((element) => {
         doubleArr.push(doubleNum(element));
      });
      return doubleArr;
   }
   BtnEle.addEventListener("click", () => {
      resEle.innerHTML = "New array = " + doubleArray(arr, doubleNum);
   });
</script>
</body>
</html>

コードの解説

doubleNum は、受け取った数値を2倍にして返すシンプルなアロー関数です。この関数を、doubleArray(arr, fn) という高階関数に引数として渡しています。doubleArray の内部では forEach メソッドを使って配列の各要素に対して関数を適用し、その結果を新しい配列として返します。

このように、関数を「データ」として扱い、他の関数に柔軟に引き渡せる点が、ファーストクラス関数の大きな強みです。

実行結果

JavaScriptのファーストクラス関数とは？特徴と使い方を実例で解説

「CLICK HERE」ボタンをクリックすると、各要素が2倍になった新しい配列が画面に表示されます。

JavaScriptのファーストクラス関数とは？特徴と使い方を実例で解説


  1. JavaScriptの部分関数（Partial Function）とは？仕組みと実装例をわかりやすく解説

    部分関数（Partial Function）とは、既存の関数を引数として受け取り、それに加えて別の型の引数も同時に受け取れるようにする仕組みです。まず渡された引数の一部を使い、残りの引数を受け取る新しい関数を返します。そして、返された関数が呼び出されるときに、あらかじめ固定しておいた引数とそのときに渡された引数をすべて組み合わせて、元の親関数が実行されます。 この手法は「部分適用（Partial Application）」とも呼ばれ、関数型プログラミングの基本的なテクニックのひとつです。共通する引数を先に束縛しておくことで、処理の再利用性やコードの可読性を高めることができます。 コード例 以下

  2. JavaScriptの簡潔なアロー関数の書き方と実装例

    簡潔なアロー関数とは JavaScriptにおける簡潔な（コンサイス）アロー関数の構文は、次のようになります。 (param1, param2) => param1 + param2 この形式には function キーワードがなく、波括弧 {} で囲まれた関数本体もありません。パラメータと関数本体の間に => を置くだけで成立します。 さらに、パラメータが1つだけの場合は、丸括弧を省略して次のように書くこともできます。 param1 => param1 * 2 主な特徴 functionキーワード不要： 通常の関数宣言よりも短く記述できます。 暗黙のリターン： =>