やあ、こんにちは。TypeScriptの世界へようこそ。
フロントエンドの最前線でコードを書き続けていると、たまに「なんでこんなところでバグるんだ……！」と頭を抱えたくなる瞬間に遭遇します。その筆頭が「関数から何も返ってこないまま処理が進んでしまう」という事故です。
JavaScript時代から続くこの「うっかり」を防ぐための、魔法のような設定『`noImplicitReturns`』について、今日は紐解いていきましょう。
—
TypeScriptが守ってくれる「約束」
まずは、少しだけ想像してみてください。あなたは今、スーパーのレジ打ちスタッフだとします。
マニュアルには「お客さんからお金を受け取ったら、必ずお釣りを渡すこと」と書かれていますよね。
でも、もし忙しすぎて「お釣りを渡すのを忘れて次の人にいっちゃった」としたら？ お客さんは困りますし、お店の信用に関わります。
プログラミングもこれと同じです。
関数という「レジ」には、「計算して結果を返す（お釣りを渡す）」という役割があります。しかし、書き方によっては「ある時は返すけど、ある時は何も返さない（お釣りを渡さない）」という不安定な状態が生まれてしまうことがあるんです。
TypeScriptの `noImplicitReturns` は、いわば「レジの店員さんがお釣りを渡し忘れたら、即座にアラートを鳴らして教えてくれる防犯カメラ」のようなものです。
—
こんなコード、書いていませんか？
例えば、「点数に応じてメッセージを変える」こんな関数を考えてみましょう。
function getResult(score: number) {
if (score >= 80) {
return “合格です！おめでとう！”;
}
// もし点数が79点以下だったら、何も返さない……？
}
このコード、実はTypeScriptのデフォルト設定だと「まあ、いいよ」と許されてしまいます。でも、これを使った側は「合格の時は文字列が返ってくると思ってたのに、点数が低いと `undefined` が返ってきて動かない！」とパニックになります。
これが、実務でよくある「実行時の `undefined` エラー」の正体です。
—
魔法の設定：tsconfig.json でスイッチを入れる
この「うっかり」をなくすために、プロジェクトの設定ファイルである `tsconfig.json` を開いてみてください。`compilerOptions` という項目の中に、この一行を追加するだけです。
{
“compilerOptions”: {
“noImplicitReturns”: true
}
}
たったこれだけで、TypeScriptは鬼コーチに変身します。先ほどのコードを書いた瞬間、エディタ上で波線が出て、こう叱ってくれるはずです。
「おいおい、すべてのケースでお釣りを返そうよ。点数が80点未満の時はどうするんだい？」
—
賢い書き方に変えてみよう
`noImplicitReturns` を有効にすると、コードをより安全に書く癖が自然と身につきます。先ほどの関数を、TypeScriptが納得してくれるように直してみましょう。
function getResult(score: number) {
if (score >= 80) {
return “合格です！おめでとう！”;
}
// ちゃんと「それ以外」の処理を書いてあげる
return “また頑張りましょう！”;
}
これで、どんなスコアが来ても必ず結果が返るようになり、プログラムの安全性は格段に上がります。
—
大丈夫、一歩ずつでいいんです
最初は「いちいち怒られて面倒だな」と感じるかもしれません。でも、この設定はあなたのコードを守る「盾」です。
- エラーが出たら、それは「穴」を見つけた証拠。
- 怒られた場所を直せば、バグが一つ減る。
そう考えると、エラーメッセージも少しだけ頼もしく見えてきませんか？
最初から完璧に書ける必要なんてありません。TypeScriptという相棒と一緒に、少しずつ「穴のない、頑丈なプログラム」を作る感覚を楽しんでみてください。
もし、どうしても「ここは何も返さなくていいんだよ！」という特殊な場所があれば、その時はその時で適切な書き方があります。まずは `noImplicitReturns` をオンにして、自分の書くコードがどう変化するか、ぜひ試してみてくださいね。
あなたの開発ライフが、少しでもエラーから解放されますように！応援しています。
コメント