型付きpipeとflowユーティリティ
正確な推論による左から右へのパイプラインを構築します。
「型付きpipeとflowユーティリティ」はCoddyKit上の無料TypeScript Academyレッスンです。 これはレッスン4/4です。 下記で完全なレッスンを無料で読むことができます。その後、ブラウザ内の組み込みコードエディタと24時間対応のAIチューターでハンズオン演習できます。 これはTypeScript Academy学習パスの一部であり、ウェブとCoddyKitアプリ全体で進捗が同期されます。 TypeScript Academyコースには全4レッスンが含まれています。
compose から pipe へ
pipeは、ほとんどの人が好む読み順である左から右に、値を関数へ順に渡します。pipe(x, f, g)はg(f(x))を意味します。
2段階の pipe
最も単純なパイプは、値と1つの関数を受け取り、その結果を返します。上から下へ読む順序が実行順序と一致します。
const pipe2 = <A, B>(a: A, f: (a: A) => B): B => f(a);
console.log(pipe2(5, n => n + 1)); // 6複数の関数に順に渡す
3引数のパイプは、関数を順番に適用します。各ステップの出力が、次のステップの入力になります。
function pipe<A, B, C>(a: A, f: (a: A) => B, g: (b: B) => C): C {
return g(f(a));
}
const inc = (n: number) => n + 1;
const dbl = (n: number) => n * 2;
console.log(pipe(5, inc, dbl)); // 12左から右に読む
composeとは異なり、pipeは関数を実行順に並べます。pipe(5, inc, dbl)は、記述されたとおり、1を加えてから2倍します。
console.log(pipe(5, dbl, inc)); // 11 (double then inc)オーバーロードが必要な理由
呼び出し箇所によって、渡す関数の数は異なります。それぞれの引数個数を正確に型付けするため、pipeでは、対応する長さごとに1つのオーバーロードシグネチャを使用します。
function pipe<A, B>(a: A, f: (a: A) => B): B;
function pipe<A, B, C>(a: A, f: (a: A) => B, g: (b: B) => C): C;
function pipe(a: unknown, ...fns: Function[]): unknown {
return fns.reduce((v, fn) => fn(v), a);
}各オーバーロードで型を連鎖させる
2つの関数に対応するオーバーロードはA -> Bを連鎖させ、3つの関数に対応するオーバーロードはA -> B -> Cを連鎖させます。コンパイラーは、渡された関数の数に基づいて一致するオーバーロードを選択します。
実行時の実装
オーバーロードの下では、1つのreduceがすべての関数を順番に適用します。実装シグネチャでは緩い型を使用しますが、呼び出し側には正確なオーバーロードが見えます。
function pipe(a: any, ...fns: Array<(x: any) => any>): any {
return fns.reduce((acc, fn) => fn(acc), a);
}
console.log(pipe(" hi ", s => s.trim(), s => s.toUpperCase())); // HIパイプの途中で型を変える
各オーバーロードがジェネリクスを連鎖させるため、パイプでは、完全に型検査された状態を保ちながら、値を複数の型に変換できます。
const out = pipe("hello", s => s.length, n => n > 3);
console.log(out); // true (string -> number -> boolean)flow: 値なしの pipe
flowはpipeに似ていますが、関数だけを受け取り、新しい関数を返します。値は後から渡すため、再利用に適しています。
const flow = <A, B, C>(f: (a: A) => B, g: (b: B) => C) =>
(a: A): C => g(f(a));
const process = flow((n: number) => n + 1, (n: number) => n * 2);
console.log(process(5)); // 12pipe と flow と compose の違い
pipeは値に関数を左から右へ適用し、flowは再利用可能な左から右の関数を作り、composeは右から左の関数を作ります。読む順序と再利用の必要性に応じて選択してください。
実用的なパイプライン
fp-tsやEffectのようなライブラリは、多数のオーバーロードを備えた堅牢で完全に型付けされたpipeを提供します。小さなものを自分で作ると、型付けの仕組みを正確に理解できます。
クイックチェック
このレッスンの理解度を確認します。
まとめ
pipe(x, f, g) = g(f(x))は左から右に実行され、オーバーロードシグネチャを使ってそれぞれの引数個数を正確に型付けします。実装は1つのreduceで行います。flowはポイントフリー版で、再利用可能な関数を返します。
よくある質問
「型付きpipeとflowユーティリティ」レッスンは無料ですか？
はい。「型付きpipeとflowユーティリティ」の完全なテキストはこのウェブで無料で読めます。インタラクティブに演習し（組み込みコードエディタと24時間対応のAIチューター）、TypeScript Academyコースの残りをアンロックするには、CoddyKit PROにアップグレードしてください。 TypeScript Academyコースには全4レッスンが含まれています。
「型付きpipeとflowユーティリティ」で何を学びますか？
正確な推論による左から右へのパイプラインを構築します。 ブラウザで直接実行するハンズオンコードでTypeScript Academyを演習し、24時間対応のAIチューターがレッスンを進める中での質問に答えます。
TypeScript Academyを始めるのに経験は必要ですか？
事前経験は必要ありません。CoddyKitのTypeScript Academyは初級者から上級者向けに構成されているため、ここから始めるか最初から始めて、自分のペースで進むことができます。 これはレッスン4/4です。
「型付きpipeとflowユーティリティ」レッスンにはどのくらい時間がかかりますか？
ほとんどのCoddyKitレッスンは約5～10分かかります。各レッスンはコンパクトでインタラクティブなので、着実に進歩し、ウェブとアプリ全体で正確に前回の場所から再開できます。
このTypeScript Academyレッスンでコードを書いて実行できますか？
はい。すべてのTypeScript Academyレッスンに組み込みコードエディタが含まれているため、ブラウザでリアルコードを書いて実行し、即座のAIフィードバックを取得できます。ローカル設定は不要です。