【入門編】 strictファミリーオプションの全容 – TypeScript実践ガイド

こんにちは。フロントエンドの現場で、日々TypeScriptという「最高の相棒」と格闘しているエンジニアです。

TypeScriptを始めようと決意したあなた、素晴らしい選択です！ただ、最初は`tsconfig.json`という設定ファイルを開いた瞬間に、「`strict: true`って何？何をそんなに厳しくするの？」と、まるで校門で厳しい先生に呼び止められたような気分になるかもしれませんね。

大丈夫、安心してください。この「strictファミリー」と呼ばれる設定たちは、あなたを苦しめるためではなく、「開発中のうっかりミスを、コンパイル前に全部見つけてくれる優秀な秘書」を雇うためのスイッチなんです。

今日は、この秘書たちの個性を一つずつ、身近な例え話で紐解いていきましょう。

—

プログラミングをしていると、たまに「これって何型？」と曖昧なまま変数を作ってしまうことがあります。これをTypeScriptは「`any`型（なんでもいい型）」として扱います。

でも、中身がわからないものを扱うのは怖いですよね。この設定をオンにすると、「型を指定していない変数は、ちゃんと中身を教えてくれないとエラーにするよ！」と警告してくれます。

例え話：
お土産の袋をもらったとき、「中身はなんでもいいよ（any）」と言われると、開けるまでドキドキしますよね。でも、「これにはクッキーが入っているよ」と教えてもらえれば、安心してお皿に出せます。このフラグは、そんな「お土産の中身を明確にさせる」役割です。

// noImplicitAny: true の場合
// エラーが出る例：型が指定されていないため、TypeScriptが不安がります
function greet(name) {
// ↑ “name” に型がないよ！と怒られます
return “こんにちは、” + name;
}

// 正しい書き方：
function greet(name: string) {
return “こんにちは、” + name;
}

—

これが一番重要かもしれません。世の中のバグの多くは、「値があると思ってたのに、実は空っぽだった（nullやundefined）」という状況から生まれます。

この設定をオンにすると、「空っぽの可能性があるなら、ちゃんとチェックしてから使ってね！」と厳しく教えられます。

例え話：
冷蔵庫を開けて「牛乳があるはずだ」と思ってコップを差し出したのに、空っぽだったら困りますよね。`strictNullChecks`は、「牛乳が入っているか確認してからコップを出しなさい」と、事前に教えてくれる賢い秘書です。

// strictNullChecks: true の場合
let userName: string | null = null;

// エラーになるコード：
// console.log(userName.length);
// ↑ “userName” が空っぽかもしれないのに、そのまま長さを見ようとするなんて危険だよ！

// 正しい書き方：
if (userName !== null) {
console.log(userName.length); // 確認したから安全！
}

—

これは少しだけ上級者向けですが、関数の使い回し（代入）に関するルールです。
「動物を受け取れる関数」に「犬専用の関数」を代入しようとすると、「いや、それだと猫が来たときに困るでしょ？」と止めてくれます。

例え話：
「どんな飲み物でも注げるコップ」を要求している場所に、「水しか受け付けない専用の特殊な瓶」を置こうとするのは危険ですよね。この設定は、そんな関数の組み合わせミスを未然に防ぎます。

—

初心者の方ほど、最初は「エラーが多くて面倒だな…」と感じるかもしれません。でも、想像してみてください。

もし、あなたが100階建てのビルを建てるとして、「多少の設計ミスは後で直せばいいや」と進めていたら、完成した瞬間に崩壊するかもしれません。でも、「基礎工事の段階で、1ミリのズレも許さない」という厳格なチェックを入れれば、完成した後のビルはビクともしないほど頑丈になりますよね。

TypeScriptの `strict` モードは、あなたのコードを「崩れないビル」にするための最強の基礎工事なんです。

—

もし、既存のプロジェクトにTypeScriptを導入しようとしていて、`strict: true` にした瞬間にエラーが山積みになってしまったら……心が折れそうになりますよね。

そんなときは、無理に全部を一度にオンにする必要はありません。まずは `noImplicitAny` だけオンにする、あるいは `strictNullChecks` だけ頑張ってみる。少しずつ、あなたの「秘書」の基準を厳しくしていけばいいんです。

TypeScriptは、あなたを責めるためにあるのではなく、あなたの開発体験を最高のものにするためにあります。

まずは `tsconfig.json` を開いて、`”strict”: true` を書き込んでみてください。最初は赤い波線に驚くかもしれませんが、それはあなたのコードが「より堅牢になるための成長痛」です。

応援しています。あなたのコードが、TypeScriptの力でより美しく、より安全なものになることを！