こんにちは。フロントエンドの現場で日々コードと格闘しているチーフアーキテクトです。
TypeScriptを学び始めると、避けては通れないのが「型エラー」との対話ですよね。「さっきまで動いていたのに、急に赤い波線が出て動かなくなった！」なんて経験、誰しも一度はあるはずです。
今日は、そんな皆さんの心を少しだけざわつかせる、`strictPropertyInitialization` という設定についてお話しします。名前だけ聞くと「なんだか堅苦しそう……」と思うかもしれませんが、実はこれ、「うっかりミスを防ぐための頼もしい用心棒」のような存在なんです。
—
そもそも、この設定は何をしてくれるの？
簡単に言うと、この設定は「クラスのプロパティ（データの入れ物）を、ちゃんと準備してから使いなさいよ！」と厳しくチェックしてくれる機能です。
たとえば、料理を作るシーンを想像してみてください。
あなたは「カレーを作るぞ！」と意気込んでキッチンに立ちました（クラスのインスタンス化）。でも、具材である「野菜」や「肉」を準備（初期化）しないまま、「さあ、煮込むぞ！」と鍋に火をかけてしまったら……？当然、中身がなくて困ってしまいますよね。
`strictPropertyInitialization: true` は、まさに「野菜と肉をちゃんと用意してから鍋を火にかけなさい！」と料理人のあなたに注意してくれる、お節介だけど優しいお母さんのような存在なのです。
—
実例で見てみよう
TypeScriptでは、通常クラスを作る時、中身を空っぽにはできません。でも、設定が緩いと、準備不足のままスタートできてしまい、後で予期せぬエラー（「値がありません！」という悲劇）を引き起こします。
以下のコードを見てください。
// strictPropertyInitializationが有効な場合
class Curry {
// ここで野菜を定義（宣言）します
vegetables: string;
// コンストラクタ（料理の準備フェーズ）
constructor() {
// もしここで vegetables に値を入れ忘れると…
// 悲報：コンパイラが「初期化されてないよ！」と怒ります
}
}
// 実際、このままだとエラーになります
// TS2564: プロパティ ‘vegetables’ に初期値がなく、コンストラクターで割り当てられていません。
もしこれが有効になっていないと、TypeScriptは何も言わずに通してしまいます。そして、プログラムが動いた瞬間に「中身がない！」とクラッシュする……。これほど恐ろしいことはありません。
—
どう解決すればいいの？
解決策はシンプルです。コンストラクタの中で、しっかりと値を入れてあげればいいんです。
class Curry {
vegetables: string;
constructor(vege: string) {
// ここでちゃんと野菜をセット！
this.vegetables = vege;
}
}
// これなら安心！立派なカレーの完成です
const myCurry = new Curry(“人参とジャガイモ”);
console.log(myCurry.vegetables); // “人参とジャガイモ”
—
「どうしても今は初期化できないんだ！」という時の裏技
現場では、「どうしてもコンストラクタで初期化できない（例えば、APIから後でデータを持ってくる場合など）」という状況も発生します。そんな時は、「後でちゃんと入れるから！」という証明として、プロパティ名の後ろに `!` をつけることができます。
class AsyncData {
// “!” をつけることで「後で必ず初期化するから、今は大目に見て！」という合図になります
data!: string;
init() {
this.data = “通信完了！”;
}
}
ただし、これは「型のお墨付き」をもらう裏技です。多用しすぎると、本当に初期化を忘れた時に気づけなくなるので、あくまで最終手段として使ってくださいね。
—
最後に：怖がらなくて大丈夫ですよ
「厳格なチェック」と聞くと、なんだか自由を奪われるような気がするかもしれません。でも、TypeScriptの設計思想は「実行時のエラーを減らして、開発者を幸せにする」ことにあります。
`strictPropertyInitialization` が赤い波線を出してくるのは、あなたを責めているのではなく、「このままだと後で大変なことになるから、今のうちに直そう！」という救いの手なんです。
最初は少し窮屈に感じるかもしれませんが、これに慣れると、驚くほどバグの少ない、堅牢なコードが書けるようになりますよ。
プログラミングは、最初から完璧にできる人なんていません。エラーが出たら「おっ、TypeScriptが教えてくれた！」と前向きに捉えて、一歩ずつ進んでいきましょう。大丈夫、皆さんが歩んでいるその道は、間違いなくフロントエンドのスペシャリストへの近道です。
また分からないことがあれば、いつでも聞きに来てくださいね。応援しています！
コメント