こんにちは。TypeScriptの世界へようこそ！
ここまでたどり着いたあなたは、きっと「もっと安全に、もっと快適にコードを書きたい」という素晴らしい向上心をお持ちの方ですね。
今日は、TypeScriptの心臓部の一つである`tsconfig.json`の中でも、特に「えっ、何で怒られてるの？」と初心者が一番最初につまずきやすい`noImplicitThis`について、一緒に紐解いていきましょう。
難しく聞こえるかもしれませんが、実はとってもシンプルな「約束事」の話なんですよ。
—
`noImplicitThis` って、一体なにもの？
TypeScriptには、「あやふやな状態を放置しない」という鉄の掟があります。
`noImplicitThis`（ノー・インプリシット・ディス）は、直訳すると「暗黙的なthisを許さない」という意味です。……これだけだと呪文みたいですよね。
身近な例えで考えてみましょう。あなたは、「自分の持ち物」について話しているつもりです。
- 「私のペンを取って」
- 「私のノートを開いて」
このとき、相手は「あなたの持ち物」だと分かって動けますよね。でも、もしあなたが「それ取って」とだけ言ったらどうでしょう？ 「えっ、それって誰の？ 目の前にある共有のペン？ それとも君の？」と混乱してしまいますよね。
プログラムにおける`this`も同じです。`this`は「今、誰（どのオブジェクト）のことについて話しているの？」を指し示す大切な合図。`noImplicitThis`をオンにすると、「『this』が誰を指しているのかハッキリしないなら、実行する前に教えてね！」と、TypeScriptが厳しくチェックしてくれるようになるんです。
—
なぜ「エラー」にする必要があるの？
もしこの設定がオフだと、TypeScriptは「まあ、とりあえず`any`（なんでもいいよ）扱いにしておこうか」と適当にスルーしてしまいます。
でも、これが一番危険なんです。動かしてみたら「あれ？ `this`が空っぽだった！」とか「思っていたデータと違うものが入っていた！」というバグが、完成した後にドカンと発生する……。そんな悲劇を防ぐための「転ばぬ先の杖」が、この設定なんですね。
—
実際に体験してみよう
まずは、このコードを見てください。設定が有効な状態で、あえて「迷子」の状態を作ってみます。
// tsconfig.json で “noImplicitThis”: true にしていると、この関数は怒られます
const person = {
name: “たろう”,
sayHello: function() {
// ここで setTimeout を使うと、thisの正体を見失いやすいんです
setTimeout(function() {
// エラー: ‘this’ は ‘any’ 型として推論されました。
// 「今、誰のことを言ってるの？ たろうくんのこと？」とTypeScriptが不安がっています。
console.log(“こんにちは、” + this.name);
}, 1000);
}
};
「たろうくん」という名前を出したいのに、TypeScriptは`this.name`が本当に「たろうくん」なのか確信が持てなくてストップをかけてきます。これが`noImplicitThis`による「優しい注意」です。
—
どう解決すればいいの？
解決策はとっても簡単。「これは誰のことか」をちゃんと書いてあげればいいんです。
解決策1：アロー関数を使う（現代のスタンダード）
アロー関数は「この場所の`this`をそのまま引き継ぐ」という性質を持っています。これを使うと、`this`が迷子になりません。
const person = {
name: “たろう”,
sayHello: function() {
// アロー関数なら、外側の ‘person’ をそのまま引き継いでくれます
setTimeout(() => {
console.log(“こんにちは、” + this.name); // これなら安心！
}, 1000);
}
};
解決策2：明示的に型を教える
どうしても普通の関数を使いたい場合は、関数の引数の最初の場所に「この`this`はこういう形ですよ」と教えてあげることもできます。
interface Person {
name: string;
}
function sayName(this: Person) {
console.log(this.name); // TypeScriptは「ああ、このthisはPersonのことなんだね」と納得してくれます
}
—
最後に：エラーは「敵」じゃなくて「コーチ」です
最初は「なんでこんな面倒なことを……」と思うかもしれません。でも、TypeScriptのエラーメッセージは、あなたを困らせるためのものではなく、「ここ、あとでバグになりそうだよ。今のうちに直しておこう！」と教えてくれる親切なコーチだと思ってください。
`noImplicitThis`を有効にしておけば、プログラムの品質は格段に上がります。最初は少し苦戦するかもしれませんが、その分、自信を持ってコードを公開できる「強いエンジニア」への階段を確実に登っていますよ。
焦らず、一つずつ解決していきましょう。大丈夫、あなたならきっと使いこなせます！
もしまた何か迷ったら、いつでも聞きに来てくださいね。応援しています。
コメント