「とりあえずstrict: true」で思考停止していないか？TypeScriptの厳格さを手懐ける技術
現場でコードをレビューしていると、たまに「なぜか型エラーが消えないから `any` で逃げた」とか「`tsconfig.json` がデフォルトのまま」といった光景に出くわす。正直、胸が痛むんだ。君たちが戦っているのは単なるコードじゃない。「型安全性」という最強の武器を装備するか、それとも「型の抜け穴」を常に気にしながらヒヤヒヤしてリリースするかという、開発者としての生存戦略の話なんだ。
今回は、TypeScriptの心臓部である `compilerOptions.strict` について、綺麗事抜きで深掘りしていこう。
1. strict: true は「最強の防具」である
`strict: true` を有効にすることは、TypeScriptコンパイラに「俺たちのコードの甘えを一切許すな」と宣言する行為だ。これを入れると、以下のオプションがすべて一括で有効になる。
- `noImplicitAny`: 「型推論できないなら明示しろ」という教え。
- `strictNullChecks`: `null` や `undefined` を「ないもの」として扱う甘えを許さない。
- `strictFunctionTypes`: 関数型の引数のチェックを厳格化。
- `strictPropertyInitialization`: クラスのプロパティ初期化漏れを叩き潰す。
- `noImplicitThis`: `this` の正体が不明な状態で使うな、という警告。
- `useUnknownInCatchVariables`: `catch` 節の `error` を `any` ではなく `unknown` に固定する。
これらは、TypeScriptが「コンパイル時に実行時のクラッシュを予測する」ための最低限の境界線だ。
2. ブラウザの裏側で何が起きているのか
ここで少し視点を変えてみよう。ブラウザはTypeScriptなんて知らない。あいつらはJavaScriptしか理解できないんだ。
TypeScriptが型チェックを厳格に行う最大の理由は、「トランスパイル後のJavaScriptが、ブラウザという予測不能な環境で暴走しないようにするため」に他ならない。例えば `strictNullChecks` がオフだと、JS変換時に `undefined` が紛れ込んでいてもコンパイラは黙っている。その結果、ブラウザ上で `TypeError: Cannot read property ‘xxx’ of undefined` という、一番見たくないエラーが本番環境で発生する。
厳格な設定は、「実行時のランタイムエラーを、開発時のコンパイルエラーへ昇華させる」ための魔法なんだ。
3. 実務で「型エラー」とどう向き合うか
さて、既存プロジェクトに `strict: true` を入れると、画面が真っ赤になるはずだ。ここで挫折するな。これが現場で使える「段階的な導入戦略」だ。
まずはここから：tsconfig.json の推奨構成
既存プロジェクトを壊さずに、かつ将来的な負債を減らすための、僕が現場でよく使う構成例だ。
{
“compilerOptions”: {
// まずはstrictをONにする
“strict”: true,
// しかし、導入初期でどうしても修正しきれない箇所がある場合は、
// strict配下の各オプションを個別に抑制する荒技も存在する（最終手段だぞ！）
// “noImplicitAny”: false,
// ESNextの機能を積極的に使いつつ、型安全を担保する
“target”: “ESNext”,
“module”: “ESNext”,
“esModuleInterop”: true,
“skipLibCheck”: true
}
}
実践：strictNullChecks との付き合い方
一番の難所は `strictNullChecks` だ。`null` や `undefined` に悩まされた時の、美しいハンドリング例を載せておく。
// 安全なデータ取得のパターン
interface User {
id: number;
name: string;
}
// APIからのレスポンスを想定
const fetchUser = (id: number): User | null => {
// 本来ならここに通信処理が入る
return null;
};
const user = fetchUser(1);
// 【NG】userがnullかもしれないのに、プロパティにアクセスするのは危険
// console.log(user.name); // コンパイルエラー
// 【OK】オプショナルチェーンで安全にアクセス
console.log(user?.name);
// 【OK】型ガードで絞り込む（これが一番現場で使う）
if (user) {
console.log(`ユーザー名は ${user.name} です`);
} else {
console.log(“ユーザーが見つかりません”);
}
4. 最後に：チーフアーキテクトからの助言
`strict: true` を有効にすると、コードを書くスピードが落ちたように感じるかもしれない。最初は苛立つはずだ。だが思い出してほしい。「型エラーと戦っている時間は、デバッグで徹夜する時間よりも圧倒的に安い」ということを。
型定義が面倒？ それは、君のアーキテクチャが複雑すぎるか、型推論の恩恵をまだ受け取れていない証拠だ。まずは `tsconfig.json` をいじって、TypeScriptに君のコードを厳しく監視させてみてほしい。そこからが、本当のエンジニアリングの始まりだ。
もし設定で詰まったら、いつでも聞いてくれ。泥臭い解決策ならいくらでも持っている。
コメント