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

JavaScriptにおけるカリー化と部分適用の違いを実例でわかりやすく解説

はじめに

関数型プログラミングでよく登場するカリー化（Currying）と部分適用（Partial Application）は、どちらも関数の引数の扱いを工夫するテクニックですが、その仕組みと目的は異なります。本記事では、それぞれの概念の違いと、JavaScriptでの具体的な実装方法をわかりやすく解説します。

カリー化（Currying）とは

カリー化とは、複数の引数を取る関数を、「1つの引数だけを受け取る関数」の連鎖へと変換するテクニックです。関数は引数を1つ受け取ると、次の引数を受け取るための新しい関数を返します。このようにして返された関数は、f(a)(b)(c) のようにチェーン（連結）して呼び出すことができるのが特徴です。

部分適用（Partial Application）とは

部分適用とは、元の関数の一部の引数をあらかじめ固定値に束縛しておき、残りの引数だけを受け取る新しい関数を生成するテクニックです。これにより、引数の数が少ない、より扱いやすい関数を作り出すことができます。JavaScriptでは Function.prototype.bind() を使うのが一般的です。

両者の主な違い

  • カリー化： 引数を必ず1つずつ順番に渡す（例：multiply(2)(5)）
  • 部分適用： 一部の引数を先に固定し、残りの引数はまとめて後から渡す（例：partialAdd(4, 5)）

サンプルコード

以下は、JavaScriptでカリー化と部分適用を実際に実装したサンプルコードです。

<!DOCTYPE html>
<html lang="ja">
<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 {
        font-size: 18px;
        font-weight: 500;
        color: rebeccapurple;
    }
</style>
</head>
<body>
<h1>JavaScriptにおけるカリー化と部分適用</h1>
<div class="result"></div>
<br />
<button class="Btn">クリックしてください</button>
<h3>上のボタンをクリックすると、カリー化と部分適用の実行結果が表示されます</h3>
<script>
    let resEle = document.querySelector(".result");
    let BtnEle = document.querySelector(".Btn");

    // カリー化：引数を1つずつ受け取る関数を返す
    function multiply(x) {
        return function (y) {
            return x * y;
        };
    }

    // 部分適用の対象となる通常の関数
    function add(a, b, c, d) {
        return a + b + c + d;
    }

    BtnEle.addEventListener("click", () => {
        resEle.innerHTML =
            "カリー化<br>multiply(2)(5) = " + multiply(2)(5) + "<br>";

        // bind()を使って最初の2つの引数(2, 3)を固定する
        let partialAdd = add.bind(this, 2, 3);

        resEle.innerHTML +=
            "部分適用<br>partialAdd(4,5) = " +
            partialAdd(4, 5) +
            "<br>";
    });
</script>
</body>
</html>

実行結果

ページを読み込むと、次のような画面が表示されます。

JavaScriptにおけるカリー化と部分適用の違いを実例でわかりやすく解説

「クリックしてください」ボタンを押すと、カリー化と部分適用それぞれの計算結果が出力されます。

JavaScriptにおけるカリー化と部分適用の違いを実例でわかりやすく解説

まとめ

カリー化は「引数を1つずつ段階的に受け取っていく」手法、部分適用は「一部の引数を先に固定して残りを後から渡す」手法です。bind() を使えば部分適用は簡単に実現でき、カリー化も高階関数を組み合わせれば自然に実装できます。用途に応じて使い分けることで、再利用性の高い柔軟なコードを書くことができます。

  1. JavaScriptの関数プロトタイプとは？仕組みと使い方を解説

    JavaScriptで作成されたすべての関数には、JavaScriptエンジンによって自動的にprototypeプロパティが追加されます。このprototypeプロパティはオブジェクトであり、デフォルトではconstructorプロパティを含んでいます。関数のプロトタイプには、以下のようにしてアクセスできます。functionName.prototypeコンストラクタ関数を使ってオブジェクトを生成する場合、このprototypeプロパティを活用することで、同じコンストラクタから作成された複数のオブジェクト間でメソッドやプロパティを効率的に共有することができます。これにより、各インスタンスごとに

  2. JavaScriptでのメソッド借用：call()・apply()・bind()の使い方を解説

    JavaScriptでは、call()、apply()、bind()という3つのメソッドを使うことで、あるオブジェクトが持つメソッドを別のオブジェクトが「借用」できます。これは、本来そのメソッドを持たないオブジェクトに対して、thisの参照先を差し替えてメソッドを実行できる便利なテクニックです。 3つのメソッドの違い call()：引数をカンマ区切りで個別に渡し、即座に関数を実行します。 apply()：引数を配列（または配列風オブジェクト）として渡し、即座に関数を実行します。 bind()：thisを固定した新しい関数を返すだけで、即座には実行されません。返された関数は後から好きなタイミン