部分適用
一部の引数を固定して関数を再利用します。
「部分適用」はCoddyKit上の無料JavaScript Academyレッスンです。 これはレッスン1/4です。 下記で完全なレッスンを無料で読むことができます。その後、ブラウザ内の組み込みコードエディタと24時間対応のAIチューターでハンズオン演習できます。 これはJavaScript Academy学習パスの一部であり、ウェブとCoddyKitアプリ全体で進捗が同期されます。 JavaScript Academyコースには全4レッスンが含まれています。
部分適用とは
部分適用とは、複数の引数を必要とする関数について、いくつかの引数をあらかじめ固定し、残りの引数だけを必要とする新しい関数を作ることです。
汎用的な関数から特化した関数を作成できます。たとえば、汎用的なmultiply(a, b)は、a = 2を固定することで、特化したdouble(b)にできます。
多くの引数を持つ関数
まず、汎用的な関数から始めます。ここではaddが3つの数値を受け取ります。最初の引数を同じ値にして、何度も呼び出すことはよくあります。
function add(a, b, c) {
return a + b + c;
}
console.log(add(1, 2, 3));
console.log(add(1, 10, 100));引数を手動で固定する
最も単純な部分適用は、1つの引数をハードコードし、残りの引数を渡すラッパー関数を作ることです。
function add(a, b, c) {
return a + b + c;
}
function addTen(b, c) {
return add(10, b, c);
}
console.log(addTen(2, 3));
console.log(addTen(20, 30));bindによる部分適用
Function.prototype.bindは、この用途のために用意されています。最初の引数でthisを設定し、それ以降の各引数は左からあらかじめ埋め込まれます。
thisを気にしない場合は、nullを渡します。
function add(a, b, c) {
return a + b + c;
}
const addTen = add.bind(null, 10);
console.log(addTen(2, 3));
console.log(addTen(20, 30));複数の引数をバインドする
先頭の引数を複数まとめて固定できます。返された関数は、残りの引数を受け取ります。
function add(a, b, c) {
return a + b + c;
}
const addElevenAndTwo = add.bind(null, 11, 2);
console.log(addElevenAndTwo(7));
console.log(addElevenAndTwo(100));再利用可能なpartialヘルパー
restパラメーターであらかじめ設定した引数を取り込み、spreadを使って後から渡された引数と結合する独自のpartialを作成できます。
function partial(fn, ...preset) {
return function (...later) {
return fn(...preset, ...later);
};
}
function greet(greeting, name) {
return greeting + ', ' + name + '!';
}
const sayHello = partial(greet, 'Hello');
console.log(sayHello('Ada'));
console.log(sayHello('Linus'));汎用的な関数を特化する
部分適用は、1つの汎用的な関数から、読みやすい小さな特化関数を多数作る場合に特に力を発揮します。
function multiply(a, b) {
return a * b;
}
const double = multiply.bind(null, 2);
const triple = multiply.bind(null, 3);
console.log(double(5));
console.log(triple(5));配列で部分適用する
mapなどの配列メソッドの中でも、特化した関数はすっきりと読みやすくなります。
function power(exponent, base) {
return Math.pow(base, exponent);
}
const square = power.bind(null, 2);
console.log([1, 2, 3, 4].map(square));設定をあらかじめ埋め込む
現実的によくある用途は、税率や通貨記号などの設定値を固定し、その結果をさまざまな場所で再利用することです。
function format(symbol, amount) {
return symbol + amount.toFixed(2);
}
const usd = format.bind(null, '$');
const eur = format.bind(null, '\u20AC');
console.log(usd(9.5));
console.log(eur(9.5));部分適用とデフォルトパラメーター
デフォルトパラメーターは、引数が省略された場合に代替値を使います。一方、部分適用は値を固定するため、呼び出し側はその引数の値を変更できなくなります。
この2つは異なる問題を解決します。デフォルトは省略可能で、部分適用した値は固定されます。
function log(level, message) {
return '[' + level + '] ' + message;
}
const error = log.bind(null, 'ERROR');
console.log(error('Disk full'));
console.log(error('Timeout'));部分適用が重要な理由
部分適用によって繰り返しを減らし、意図を明確に名前で表現できます。また、カリー化の基礎にもなります。同じ最初の引数を何度も渡しているなら、一度固定することを検討してください。
function between(min, max, value) {
return value >= min && value <= max;
}
const isPercentage = between.bind(null, 0, 100);
console.log(isPercentage(50));
console.log(isPercentage(150));クイックチェック
fn.bind(null, 5)は何を返しますか。
まとめ：部分適用
引数をあらかじめ固定する方法を学びました。
- 手動のラッパーは引数をハードコードし、残りの引数を渡します。
- bind(null, ...args)は引数を左からあらかじめ埋め込みます。
- 独自の
partialヘルパーはrestとspreadを使います。 - 部分適用によって、明確で再利用可能な特化関数を作成でき、カリー化への準備も整います。
よくある質問
「部分適用」レッスンは無料ですか？
はい。「部分適用」の完全なテキストはこのウェブで無料で読めます。インタラクティブに演習し（組み込みコードエディタと24時間対応のAIチューター）、JavaScript Academyコースの残りをアンロックするには、CoddyKit PROにアップグレードしてください。 JavaScript Academyコースには全4レッスンが含まれています。
「部分適用」で何を学びますか？
一部の引数を固定して関数を再利用します。 ブラウザで直接実行するハンズオンコードでJavaScript Academyを演習し、24時間対応のAIチューターがレッスンを進める中での質問に答えます。
JavaScript Academyを始めるのに経験は必要ですか？
事前経験は必要ありません。CoddyKitのJavaScript Academyは初級者から上級者向けに構成されているため、ここから始めるか最初から始めて、自分のペースで進むことができます。 これはレッスン1/4です。
「部分適用」レッスンにはどのくらい時間がかかりますか？
ほとんどのCoddyKitレッスンは約5～10分かかります。各レッスンはコンパクトでインタラクティブなので、着実に進歩し、ウェブとアプリ全体で正確に前回の場所から再開できます。
このJavaScript Academyレッスンでコードを書いて実行できますか？
はい。すべてのJavaScript Academyレッスンに組み込みコードエディタが含まれているため、ブラウザでリアルコードを書いて実行し、即座のAIフィードバックを取得できます。ローカル設定は不要です。