【入門編】関数型における「this」の型定義：メソッドチェーンとコンテキストの保持 – TypeScript コア・型システムの基礎解析バイブル

こんにちは！フロントエンドからNode.jsまで、日々の開発お疲れ様です。
TypeScriptを触っていると、「あれ、なんだかこのオブジェクトのメソッド、うまく補完が効かないな……」「メソッドチェーンをつなぎたいのに、`this`がどこを指しているのか分からないエラーが出るな……」と悩んだ経験はありませんか？

他のオブジェクト指向言語（JavaやC#など）から来ると、クラスの中にある `this` は当たり前のようにそのインスタンスを指してくれますよね。でも、JavaScript、そしてそれを拡張したTypeScriptの `this` は、「どう定義されたか」ではなく「どう呼び出されたか」によって動的に変わるという、少し気まぐれな性質を持っています。

ここをクリアすれば、TypeScriptの型システムの本質がぐっと見えてきて、コードの安全性も圧倒的に跳ね上がりますよ。
今日は、関数型における `this` の型定義と、滑らかなメソッドチェーンを実現する設計パターンについて、一緒に紐解いていきましょう！

—

1. JavaScriptの `this` は「どこから呼ばれたか」で変わる

まずは、なぜ `this` の型定義が必要なのか、その背景からお話ししますね。

JavaScriptの関数の中にある `this` は、カメレオンのように姿を変えます。例えば、次のようなコードを考えてみましょう。

const counter = {
count: 0,
increment() {
this.count++;
}
};

counter.increment(); // ここでは this は counter を指すので安全

一見、問題なく動きますよね。しかし、このメソッドを変数に代入して「ただの関数」として呼び出すとどうなるでしょうか？

const myIncrement = counter.increment;
myIncrement(); // 💥 実行時エラー、あるいは strict モードなら undefined のプロパティを読もうとして爆発する！

このとき、`myIncrement()` の呼び出し元にはオブジェクトがいないため、`this` は `undefined`（あるいは非strictモードならグローバルオブジェクト）になってしまいます。TypeScriptのコンパイラは、これが将来どこでどう呼び出されるかを完全に予測しきれないため、そのままでは不安が残りますよね。

—

2. 第一引数に `this` を書く？ TypeScriptの型マジック

ここで、TypeScriptならではの強力な機能が登場します。
なんとTypeScriptでは、関数の「最初の引数」として `this` という名前の仮引数を書くことができるんです。

「えっ、引数に `this` なんて書けるの？」って思いますよね。実はこれ、実行時には一切コードとして残りません。TypeScriptがコンパイル時に「この関数が呼び出されるとき、`this` はこういう型であってほしい」と静的解析器に教えるための、いわば型アノテーション専用の特等席なんです。

具体的なコードで見てみましょう。

interface Calculator {
value: number;
add(this: Calculator, n: number): Calculator;
}

const calc: Calculator = {
value: 10,
add(this: Calculator, n: number) {
this.value += n;
return this; // 自分自身を返すことでメソッドチェーンに備える
}
};

ここで注目してほしいのが、`add` メソッドの定義にある `this: Calculator` という記述です。
これが何を意味しているかというと、「この `add` 関数は、必ず `Calculator` 型の文脈（オブジェクト）から呼び出されなければならない」というコンパイラへの強い制約（契約）になります。

もし、このルールを破って、以下のように `this` の文脈を無視して関数単体で呼び出そうとすると……？

const looseAdd = calc.add;
// ❌ コンパイルエラー！
// 「’this’ コンテキストの型 ‘void’ は、メソッドの ‘this’ 型 ‘Calculator’ の要件を満たしていません」
looseAdd(5);

おぉ、素晴らしいですね！実行時エラーになる前に、TypeScriptのコンパイラが「ちょっと待って、それじゃあ `this` の型が合わないよ！」と赤く波線を引いて教えてくれるのです。

—

3. 型安全なメソッドチェーンを設計する

この `this` の型定義テクニックが最も真価を発揮するのが、複数のメソッドをドットつなぎで連続して呼び出す「メソッドチェーン」の設計です。

例えば、クエリビルダーや、入力値のバリデーションライブラリのようなものを想像してください。ステップごとに状態（型）が変わっていくような複雑なチェーンも、`this` とジェネリクスを組み合わせることで、完全に型安全に表現できます。

ここでは、シンプルな「ビルダーパターン」を例に、流暢な（Fluentな）APIを作ってみましょう。

class QueryBuilder {
private query: string = “”;

// SELECT句を追加するメソッド
select(this: QueryBuilder, table: U): QueryBuilder {
this.query = `SELECT FROM ${table}`;
// ここで内部的に新しいインスタンスを返すか、thisをキャストして返す
return this as unknown as QueryBuilder;
}