カリー化: JavaScript のモジュール式スーパーパワーを解き放つ

目次

• 導入
• カリー化って一体何なの？
• カリー化のステップバイステップガイド
• カリー化にこだわる必要があるのはなぜですか?
• カリー作成の自動化 (人生は短すぎるため)
• TypeScript とカリー化: 永遠の友達
• 落とし穴に関する簡単なメモ
• 結論

---

はじめに

自分のコードを見て、「おお、これは私の靴下の引き出しと同じくらい整理されているな」と思ったことはありませんか?そう、あなたは一人ではありません。 JavaScript にはさまざまな特徴や魅力があるにもかかわらず、扱いにくくなることがあります。カリー化を導入してください。これは、コードをモジュール化して再利用可能にし、敢えて言えばエレガントにする関数型プログラミングの魔法のテクニックです。これが魔法のように聞こえる場合は、バックルを締めてください。いよいよ本題に入ります。

---

カレーとは一体何ですか?

カリー化というとキッチンでやっているように聞こえますが、JavaScript では、複数の引数を持つ関数を、それぞれが 1 つの引数を取る一連の関数に変換する技術です。複雑なレシピを一口サイズの手順に分解すると考えてください。

これは簡単な例です:

function multiply(a: number, b: number) {
  return a * b;
}

クールですね?ただし、この関数では両方の引数を事前に要求します。両方にコミットする準備ができていない場合 (実際は誰ですか?)、カリー化を使用すると、代わりに次のように呼び出すことができます:

const curriedMultiply = (a: number) => (b: number) => a * b;

// Create reusable specialized functions
const double = curriedMultiply(2);
const triple = curriedMultiply(3);

console.log(double(4)); // Output: 8
console.log(triple(4)); // Output: 12

ドーン！これで、サンドイッチを組み立てるように、一度に 1 つの引数を渡すことができます。簡単なカリー化された関数を見てきたので、次は手順ごとに構築する方法を学びましょう。

---

カレー作りのステップバイステップガイド

1. 複数引数関数から開始します
   いくつかの引数を取る関数があると想像してください:
   

   function add(a: number, b: number, c: number) {
     return a + b + c;
   }
   

2. 重ねて包みます
   それを一連の関数に変換します。
   

   const curriedAdd = 
     (a: number) => (b: number) => (c: number) => a + b + c;
   

3. 引数を一度に 1 つずつ渡す
   各レイヤーを一度に 1 つずつ呼び出します:
   

   const step1 = curriedAdd(2); // Fixes the first argument (a = 2)
   const step2 = step1(3);      // Fixes the second argument (b = 3)
   const result = step2(4);     // Fixes the third argument (c = 4)
   
   console.log(result);         // Output: 9
   

4. 柔軟性から利益を得る
   これで、コードをよりモジュール化する、再利用可能な小さなステップができました。

---

なぜカレーにこだわる必要があるのですか?

カレーというと高級そうに聞こえるかもしれませんが、現実世界でもメリットがあります:

• モジュール性: 大きな機能をテスト可能な小さな部分に分割します。
• 再利用性: 既存のコードを使用して、特殊な機能バージョンを作成します。
• 可読性: コードは、よく書かれた小説 (または少なくともまともな小説) のように、一目瞭然になります。

読みやすさがなぜ重要なのかを少し思い出してみましょう。コードはマシンのために書かれただけではありません。マシンはあなたが投げたものをすべて理解します。これは人間、あなたの同僚、将来の自分、そして次に変更する必要がある人 を対象に書かれています。優れたコードは、理解しやすく、テストし、変更しやすいことを目指す必要があります。カリー化は、ロジックを一目で理解できる小さく明確な部分に分割することでこれを達成するのに役立ちます。

オブジェクトのリストをフィルタリングしているとしましょう:

function multiply(a: number, b: number) {
  return a * b;
}

または税金の計算:

const curriedMultiply = (a: number) => (b: number) => a * b;

// Create reusable specialized functions
const double = curriedMultiply(2);
const triple = curriedMultiply(3);

console.log(double(4)); // Output: 8
console.log(triple(4)); // Output: 12

各関数は 1 つのことを実行するため、コードが読みやすく、理解しやすく、テストしやすくなります。カリー化により、より小さく特殊な関数を作成することで、複雑なロジックがシンプルになり、再利用可能になり、後で作業する人間にとって保守しやすくなります。

---

カリー作成の自動化 (人生は短すぎるため)

これらのネストされた関数をすべて手動で入力しますか?結構です。カリー化を自動化しましょう:

function add(a: number, b: number, c: number) {
  return a + b + c;
}

その仕組みは次のとおりです:

1. 引数の数が元の関数と一致する場合、その関数が呼び出されます。
2. それ以外の場合は、追加の引数を待つ新しい関数を返します。

例:

const curriedAdd = 
  (a: number) => (b: number) => (c: number) => a + b + c;

これは議論のための自動販売機のようなものです。一度に 1 つずつ、または一度にすべてを入力します。

---

TypeScript とカリー化: 永遠の友達

TypeScript のタイプ セーフティを使用してカリー化を次のレベルに引き上げます:

const step1 = curriedAdd(2); // Fixes the first argument (a = 2)
const step2 = step1(3);      // Fixes the second argument (b = 3)
const result = step2(4);     // Fixes the third argument (c = 4)

console.log(result);         // Output: 9

TypeScript を使用した例:

const filterByKey = (key: string) => (value: any) => (data: any[]) =>
  data.filter((item) => item[key] === value);

// Create a reusable filter for colors
const filterByColor = filterByKey("color");
const redItems = filterByColor("red");

console.log(redItems([{ color: "red" }, { color: "blue" }])); 
// Output: [{ color: "red" }]

IDE がすべてのステップをガイドします。

---

落とし穴に関する簡単なメモ

カリー化された関数は、元の this コンテキストを失います。カリー化を伴うクラスのメソッドを使用する必要がある場合は、.bind(this) またはアロー関数を使用します。

---

結論?

カリー化は、チートコードを使用してコーディング ゲームをアップグレードするようなものです。関数を小さく管理しやすい部分に分割することで、柔軟性、読みやすさ、達成感が得られます (または、少なくともデバッグの悩みが軽減されます)。自動化する場合でも、手動で作成する場合でも、カリー化によってコードがクリーンなモジュール式の強力なコードに変わります。

ハスケル・カリー (名前の背後にいる男) はこう言ったかもしれません:

「書く量を減らして、議論を一度に 1 つずつ増やしてください。」

以上がカリー化: JavaScript のモジュール式スーパーパワーを解き放つの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。