こんにちは。フロントエンドの現場で日々コードと格闘しているチーフアーキテクトです。
TypeScriptを学び始めると、避けては通れないのが「型(Type)」という概念ですよね。特に `any` や `unknown` といった基本の型を覚えたての頃、ふと現れるのが「`tsconfig.json` の `noImplicitThis` って何? なんでこんな設定があるの?」という疑問ではないでしょうか。
今日は、この設定がなぜあなたのコードを「事故」から守ってくれるのか、肩の力を抜いて一緒に紐解いていきましょう。
—
そもそも「`this`」って何者?(例え話で考えてみよう)
プログラミングにおける `this` は、「今、誰のことを指しているのか」という文脈によってコロコロ変わる、ちょっと気まぐれな存在です。
例えば、あなたがレストランで「これを持ってきて」と店員さんに言ったとします。
- あなたが指差しているものが「お水」なら、店員さんはお水を持ってきますよね。
- でも、もし何も指差していなかったら? 店員さんは困ってしまいますよね。
JavaScriptの世界での `this` も同じです。「今、どのオブジェクト(モノ)を操作しているの?」という指差しが曖昧だと、プログラムは迷子になってしまいます。
`noImplicitThis` が教えてくれる「優しい忠告」
`noImplicitThis` は、TypeScript界の「おせっかいだけど頼りになるお母さん」のような存在です。
この設定を `true` にしておくと、「ねえ、今 `this` が何を指してるのかハッキリしてないよ! もし間違ってたら大変だから、ちゃんと教えてよ!」とエラーを出して教えてくれるんです。
もしこれを無視(`false`)すると、`this` は勝手に `any` 型(なんでもあり!)として扱われてしまいます。一見動いているように見えても、後でとんでもないバグを引き起こす「時限爆弾」になりかねないのです。
—
コードで体感してみよう
まずは、この設定が効いている時にどんな風に困るのか、そしてどうやって解決するのかを見てみましょう。
1. エラーになるコード(`noImplicitThis: true` の場合)
// カウンターのオブジェクトを作ってみました
const counter = {
count: 0,
// 増やす関数です
increment: function() {
// ここで ‘this’ を使っていますが、状況によっては誰か分からなくなることが!
this.count += 1;
}
};
// この関数を単体で呼び出すと…?
const myFunc = counter.increment;
myFunc(); // エラー! “this” が指しているものが特定できないよ、と怒られます。
2. こうやって「明示」してあげよう
TypeScriptに「この `this` は、このオブジェクトのことを指しているんだよ」と教えてあげるのが、プロの流儀です。
// 型を定義して、「この関数が呼ばれるときは、必ずこの形だよ」と教えます
interface Counter {
count: number;
increment: (this: Counter) => void;
}
const myCounter: Counter = {
count: 0,
increment: function(this: Counter) {
// 引数に (this: Counter) と書くことで、
// 「僕が使っている this は、必ず Counter の形をしているよ!」と宣言!
this.count += 1;
console.log(`現在のカウントは: ${this.count}`);
}
};
myCounter.increment(); // これでバッチリ動きます!
—
なぜ、こんな面倒なことをするの?
「そのまま動けばいいじゃん!」と思うかもしれませんね。でも、現場では「大規模なアプリ」を作ることが多いんです。
もし `this` が誰か分からなくなると、ある日は正しく動くのに、別の画面や別のタイミングでは「`this` が見つかりません(undefined)」というエラーで画面が真っ白に……なんてことが本当によく起こります。
`noImplicitThis` をオンにすることは、未来の自分への「お守り」なんです。「あの時ちゃんと型を書いておいてよかった!」と、半月後のあなたが自分に感謝する日が必ず来ますよ。
まとめ:怖がらなくて大丈夫!
- `noImplicitThis` は、`this` の正体が不明な時にエラーを出してくれる安全装置。
- 「`any` に逃げない」ための、TypeScriptからの愛の鞭。
- もしエラーが出たら、「自分は今、どのオブジェクトのことを指しているつもりかな?」と一呼吸置いて考えてみてください。
最初は「なんでこんなに厳しいの!」と思うかもしれません。でも、慣れてくるとこの厳しさが「自分の書いたコードが崩れない」という自信に変わります。
もし途中でつまずいても、焦る必要はありません。一歩ずつ、丁寧にコードと向き合っていきましょう。あなたのエンジニアライフを、私はいつでも応援していますよ!

コメント