やあ。今日もコードと戦っているかい？
フロントエンド開発の現場で、TypeScriptはもはや空気のような存在だ。だが、深い部分まで理解せずに「なんとなく動くから」と放置している設定が、実は君のプロダクトの爆弾になっているかもしれない。
今日は、多くのエンジニアが見過ごしがちな`tsconfig.json`の隠れた実力者、`strictBindCallApply`について話をしよう。これを知れば、君のコードベースから「実行時エラー」という名の幽霊を一つ、確実に追い出せるはずだ。
—
なぜ `strictBindCallApply` が必要なのか？
まず、TypeScriptが本来どういう挙動をしているか知っているかな？実は、このオプションを有効にしない限り、TypeScriptは`bind`, `call`, `apply`といった、いわゆる「関数をねじ曲げて呼び出す」メソッドに対して、驚くほど無防備なんだ。
ブラウザの裏側とTypeScriptの甘え
JavaScriptの世界では、`Function.prototype.call`や`apply`は、`this`を操作したり、引数を動的に注入したりできる強力なツールだ。しかし、TypeScriptの初期設定（あるいは歴史的な互換性維持のため）では、これらのメソッドの引数は`any`に近い扱いを受けてきた。
つまり、「引数が合っていなくても、コンパイルを通してしまう」という、型安全を標榜する言語としてはあってはならない状態がデフォルトだったんだ。
実務で起こる悲劇
例えば、こんなコードだ。
function greet(name: string, age: number) {
console.log(`Hi ${name}, you are ${age} years old.`);
}
// strictBindCallApply が false (デフォルト) だと…
// 型チェックが甘いため、本来 ‘number’ を入れるべき場所に文字列を入れても素通りする
greet.call(null, “Alice”, “twenty”); // 実行時に age が “twenty” になるという事故が起きる
これが大規模なアプリケーションで散らばっていたらどうなるか。テストコードが網羅されていない箇所でこれが起きれば、ユーザーのブラウザ上で突然関数がクラッシュする。そんなの、プロの仕事じゃないだろう？
—
実践：`strictBindCallApply` を導入する
設定は簡単だ。`tsconfig.json`を開いて、以下を追記するだけだ。
{
“compilerOptions”: {
“strict”: true, // これを有効にしていれば実は既に入っているんだが、明示的に確認することが大事だ
“strictBindCallApply”: true
}
}
これを入れた瞬間、君のIDEが悲鳴を上げ始めるはずだ。「あ、ここ型間違ってた！」という赤波線が、プロジェクトのあちこちで顔を出すだろう。最初は面倒に感じるかもしれないが、それは「今まで見過ごしていた潜在的なバグが、TypeScriptによって可視化された」という喜ぶべき瞬間なんだ。
綺麗なサンプルコードで挙動を確認する
導入後の世界がどうなるか、以下のコードで確認してほしい。
// strictBindCallApply: true の環境下では以下のようになります
function updateProfile(id: number, email: string) {
console.log(`ID: ${id}, Email: ${email}`);
}
// 1. 引数が正しければもちろんOK
updateProfile.call(null, 1, “tech@example.com”);
// 2. 引数が足りない場合
// エラー: 2 個の引数が必要です。しかし 1 個しか受け取っていません。
// updateProfile.call(null, 1);
// 3. 引数の型が違う場合
// エラー: 型 ‘string’ を型 ‘number’ に割り当てることはできません。
// updateProfile.call(null, “user-id”, “tech@example.com”);
// 4. bind の場合も同様に厳格化されます
const boundFn = updateProfile.bind(null, 1);
// エラー: 引数 ‘email’ が足りない
// boundFn();
このように、`call` や `bind` を使った際の引数の型推論が、通常の関数呼び出しと同じレベルまで厳格化される。これが、我々フロントエンドエンジニアが守るべき「型安全の防波堤」だ。
—
シニアからのアドバイス：どう運用していくべきか
もし君が今、レガシーなプロジェクトにこの設定を投入しようとしているなら、一つだけ忠告がある。
「一気に変えすぎないこと」だ。
`strictBindCallApply`をオンにした瞬間、数百のエラーが出るかもしれない。それを全て直そうとして徹夜するのはナンセンスだ。まずは設定を有効にし、新規作成するファイルから適用する、あるいは特定のモジュール単位でリファクタリングの計画を立てるのが賢いやり方だ。
また、`call`や`apply`を多用せざるを得ない設計自体を見直すことも検討してほしい。モダンなJS/TSであれば、`bind`を使わずとも、アロー関数やカリー化、あるいは単純な関数のラップで綺麗に書けるケースがほとんどだ。
「`bind`や`call`を使いたいという欲求は、コードの設計が少しだけ無理をしているサインかもしれない」と心に留めておくといい。
—
まとめ
1. `strictBindCallApply`は「関数呼び出しの最後の手綱」である。
2. 有効にすることで、`bind/call/apply`の引数チェックが厳格化され、実行時エラーを激減できる。
3. IDEの赤波線は「敵」ではなく、君のコードを救ってくれる「味方」だと思え。
TypeScriptは、ただの便利なツールじゃない。君が書いたコードの「意志」を、ブラウザという混沌とした環境の中で守り抜くための守護神だ。その守護神の力を最大限引き出すために、ぜひ今日の知識を役立ててくれ。
さて、次はどの設定について深掘りしようか？また何かあればいつでも聞いてくれ。現場からは以上だ。
コメント