JavaScript 関数合成 | プログラミングチュートリアル

はじめに

この実験では、JavaScript における関数合成の概念を探求します。複数の関数を左から右の順序で一連の操作を行う単一の関数に結合する方法を学びます。pipeFunctions 関数を使用することで、関数合成の利点と、コードを簡略化して読みやすくする方法を見つけます。

Skills Graph

%%%%{init: {'theme':'neutral'}}%%%% flowchart RL javascript(("JavaScript")) -.-> javascript/BasicConceptsGroup(["Basic Concepts"]) javascript(("JavaScript")) -.-> javascript/AdvancedConceptsGroup(["Advanced Concepts"]) javascript/BasicConceptsGroup -.-> javascript/variables("Variables") javascript/BasicConceptsGroup -.-> javascript/data_types("Data Types") javascript/BasicConceptsGroup -.-> javascript/arith_ops("Arithmetic Operators") javascript/BasicConceptsGroup -.-> javascript/comp_ops("Comparison Operators") javascript/AdvancedConceptsGroup -.-> javascript/higher_funcs("Higher-Order Functions") javascript/AdvancedConceptsGroup -.-> javascript/spread_rest("Spread and Rest Operators") subgraph Lab Skills javascript/variables -.-> lab-28546{{"JavaScript での関数の効率的な合成"}} javascript/data_types -.-> lab-28546{{"JavaScript での関数の効率的な合成"}} javascript/arith_ops -.-> lab-28546{{"JavaScript での関数の効率的な合成"}} javascript/comp_ops -.-> lab-28546{{"JavaScript での関数の効率的な合成"}} javascript/higher_funcs -.-> lab-28546{{"JavaScript での関数の効率的な合成"}} javascript/spread_rest -.-> lab-28546{{"JavaScript での関数の効率的な合成"}} end

パイプを使った関数合成

パイプを使ったコーディングの練習を始めるには、ターミナル/SSH を開いて node と入力します。

pipeFunctions 関数は、展開演算子 (...) を使った Array.prototype.reduce() を使って左から右の関数合成を行います。最初の（最も左の）関数は 1 つ以上の引数を受け取ることができますが、残りの関数は単項関数でなければなりません。

const pipeFunctions = (...fns) =>
  fns.reduce(
    (f, g) =>
      (...args) =>
        g(f(...args))
  );

ここでは、pipeFunctions を使って 2 つの数値を掛け算し、その結果に 5 を足す新しい関数 multiplyAndAdd5 を作成する方法の例を示します。

const add5 = (x) => x + 5;
const multiply = (x, y) => x * y;
const multiplyAndAdd5 = pipeFunctions(multiply, add5);
multiplyAndAdd5(5, 2); // 15

この例では、multiplyAndAdd5 は 2 つの引数 5 と 2 を受け取り、まずそれらに multiply を適用して 10 を得て、次にその結果に add5 を適用して 15 を得る新しい関数です。

まとめ

おめでとうございます！あなたはパイプ関数の実験を完了しました。あなたのスキルを向上させるために、LabEx でさらに実験を行って練習することができます。