0Pricing
JavaScript Academy · レッスン

メソッド抽出の落とし穴と部分適用

call/apply/bindでメソッド抽出の問題を解決し、bindとラッパーアローによる小さな部分適用のパターンを学びます。

「メソッド抽出の落とし穴と部分適用」はCoddyKit上の無料JavaScript Academyレッスンです。 これはレッスン2/3です。 下記で完全なレッスンを無料で読むことができます。その後、ブラウザ内の組み込みコードエディタと24時間対応のAIチューターでハンズオン演習できます。 これはJavaScript Academy学習パスの一部であり、ウェブとCoddyKitアプリ全体で進捗が同期されます。 JavaScript Academyコースには全3レッスンが含まれています。

全体像

目標: メソッドを取り出した後も this を安定させ、引数をあらかじめ設定します。

  • call(thisArg, a, b)
  • apply(thisArg, [a, b])
  • bind(thisArg, a) → 新しい関数を返します
  • bind または小さなアロー関数による部分適用
メソッド抽出の落とし穴と部分適用 — イラスト1

取り出した関数の落とし穴

obj.method() として呼び出せば動作しますが、関数を取り出すとオブジェクトを失い、this が機能しなくなります。

// Extraction loses this
const user = {
  name: "Ayla",
  label: function (prefix) {
    return prefix + ":" + this.name;
  }
};

console.log("method call:", user.label("Hi")); // "Hi:Ayla"

// Extract
const f = user.label;
console.log("extracted:", f("Hi")); // this is missing -> "Hi:undefined" (in strict mode this is undefined)
メソッド抽出の落とし穴と部分適用 — イラスト2

call/apply の一度限りの使用

call と apply を使うと、1回の呼び出しに限って this を設定できます。

// Fix by passing this explicitly using call/apply
console.log("call :", f.call(user, "Hi"));   // "Hi:Ayla"
console.log("apply:", f.apply(user, ["Yo"])); // "Yo:Ayla"
メソッド抽出の落とし穴と部分適用 — イラスト3

再利用のための bind

bind は this を記憶する関数を作成します。再度 bind せずに何度も呼び出せます。

// bind returns a new function with this fixed
const bound = f.bind(user);
console.log("bound once:", bound("Hey")); // "Hey:Ayla"
console.log("bound again:", bound("Yo")); // "Yo:Ayla"
メソッド抽出の落とし穴と部分適用 — イラスト4

部分適用（シンプル）

bind を使って先頭の引数をあらかじめ設定するか、小さな アロー関数のラッパーを使って値と this を固定します。

// Partial application: pre-fill arguments
function add(a, b, c) { return a + b + c; }

// Using bind: pre-fill a=10
const add10 = add.bind(null, 10);
console.log("add10(1,2):", add10(1, 2)); // 13

// Using an arrow wrapper: pre-fill prefix
const labelHi = function (obj) {
  return function () { return obj.label("Hi"); };
}(user);

console.log("arrow partial:", labelHi()); // "Hi:Ayla"
メソッド抽出の落とし穴と部分適用 — イラスト5

実践的なパターン

ヒント:

  • 取り出したメソッドには、1回だけ bind を使って再利用します。
  • 一度限りの呼び出しには call/apply を使います。
  • 引数をあらかじめ設定する場合は、bind または小さなアロー関数のラッパーを使います。
  • ヘルパーは小さくし、名前を明確にしてください。
メソッド抽出の落とし穴と部分適用 — イラスト6

bind と call/apply の比較クイズ

簡単な確認: this を維持し、引数をあらかじめ設定します。

メソッド抽出の落とし穴と部分適用 — イラスト7

まとめ

まとめ: 関数を取り出すと this を失います。1回限りの呼び出しには call/apply を使い、this を固定して再利用するには bind を使います。部分適用には、bind または小さなアロー関数で値をあらかじめ設定します。

メソッド抽出の落とし穴と部分適用 — イラスト8

よくある質問

「メソッド抽出の落とし穴と部分適用」レッスンは無料ですか？

はい。「メソッド抽出の落とし穴と部分適用」の完全なテキストはこのウェブで無料で読めます。インタラクティブに演習し（組み込みコードエディタと24時間対応のAIチューター）、JavaScript Academyコースの残りをアンロックするには、CoddyKit PROにアップグレードしてください。 JavaScript Academyコースには全3レッスンが含まれています。

「メソッド抽出の落とし穴と部分適用」で何を学びますか？

call/apply/bindでメソッド抽出の問題を解決し、bindとラッパーアローによる小さな部分適用のパターンを学びます。 ブラウザで直接実行するハンズオンコードでJavaScript Academyを演習し、24時間対応のAIチューターがレッスンを進める中での質問に答えます。

JavaScript Academyを始めるのに経験は必要ですか？

事前経験は必要ありません。CoddyKitのJavaScript Academyは初級者から上級者向けに構成されているため、ここから始めるか最初から始めて、自分のペースで進むことができます。 これはレッスン2/3です。

「メソッド抽出の落とし穴と部分適用」レッスンにはどのくらい時間がかかりますか？

ほとんどのCoddyKitレッスンは約5～10分かかります。各レッスンはコンパクトでインタラクティブなので、着実に進歩し、ウェブとアプリ全体で正確に前回の場所から再開できます。

このJavaScript Academyレッスンでコードを書いて実行できますか？

はい。すべてのJavaScript Academyレッスンに組み込みコードエディタが含まれているため、ブラウザでリアルコードを書いて実行し、即座のAIフィードバックを取得できます。ローカル設定は不要です。

このコースのすべてのレッスン

  1. レキシカルなthisと動的なthis、アロー関数再入門
  2. メソッド抽出の落とし穴と部分適用
  3. 関数型の代替案 — コンテキスト、クロージャ、ヘルパー
← JavaScript Academyに戻る