こんにちは！TypeScriptの世界へようこそ。
フロントエンドの最前線でコードと格闘していると、時々「えっ、なんでそんな動きになるの！？」と頭を抱えたくなるようなバグに出会うことがあります。
その中でも、初心者の頃に誰もが一度は冷や汗をかくのが「switch文のフォールスルー問題」です。今日は、TypeScriptの設定ファイル（`tsconfig.json`）にある、ちょっと地味だけど実はめちゃくちゃ頼りになる設定、`noFallthroughCasesInSwitch`についてお話ししますね。
—
1. そもそも「フォールスルー」って何？
まずは、想像してみてください。あなたは今、回転寿司屋さんにいます。
お皿が流れてきて、あなたはこう考えます。
「マグロが来たら醤油をかける。サーモンが来たらレモンを絞る。」
ここで、もしあなたが「マグロ」を取ったのに、そのまま醤油をかけ忘れて、隣の「サーモン用のレモン」まで自動的に絞ってしまったらどうでしょう？ 「えっ、マグロにレモンかけちゃったの！？」ってパニックになりますよね。
プログラミングの世界の`switch`文もこれと同じです。
let sushi = “マグロ”;
switch (sushi) {
case “マグロ”:
console.log(“醤油をかける”);
// ここで「終わり！」と言わないと、下のコードまで実行されちゃう！
case “サーモン”:
console.log(“レモンを絞る”);
break;
}
このコードを実行すると、マグロなのに「醤油をかける」のあとに、なぜか「レモンを絞る」まで実行されてしまいます。これが「フォールスルー（すり抜け）」です。
本来ならマグロを食べ終わったら店を出る（`break`する）べきなのに、隣のレーンにズルズルと滑り込んでしまう。これがバグの温床なんです。
—
2. 救世主 `noFallthroughCasesInSwitch` の登場
「いちいち`break`を書くのを忘れないように気をつければいいじゃないか！」と思うかもしれません。でも、人間だもの、ミスはあります。特にコードが長くなると、うっかり書き忘れることなんて日常茶飯事です。
そこで、TypeScript先生にこうお願いしましょう。
「もし`break`を書き忘れていたら、コンパイルすらさせずに警告を出して！」
これが `tsconfig.json` に設定する `noFallthroughCasesInSwitch: true` です。
設定のやり方
プロジェクトのルートにある `tsconfig.json` を開いて、`compilerOptions` の中に一行追加するだけです。
{
“compilerOptions”: {
“noFallthroughCasesInSwitch”: true,
// 他の設定項目…
}
}
これだけで、TypeScriptはあなたのコードを厳しくチェックしてくれます。「おっと、ここ`break`忘れてるよ！」と、エディタ上で赤く波線を引いて教えてくれるようになるんです。これ、めちゃくちゃ安心感ありませんか？
—
3. 「わざと」すり抜けさせたい時はどうするの？
とはいえ、実務では「マグロでもサーモンでも、とりあえずわさびは追加したい」というような、あえてフォールスルーさせたいケースもゼロではありません。
そんなときは、こうやって書いてあげてください。
let sushi = “マグロ”;
switch (sushi) {
case “マグロ”:
// わざとフォールスルーさせる場合は、コメントで明記する！
// TypeScriptは「あ、意図的なんだな」と理解してくれます。
/ falls through /
case “サーモン”:
console.log(“わさびを追加する”);
break;
}
このように `/ falls through /` というコメントを書いておけば、TypeScript先生も「なるほど、意図的なすり抜けですね。了解しました！」と納得してくれます。ルールを守りつつ、柔軟性も持たせる。これが大人のプログラミング術です。
—
最後に：完璧を目指さなくて大丈夫
プログラミングを始めたばかりの頃は、「設定項目が多すぎて覚えるのが大変…」と圧倒されてしまうかもしれません。でも、全部を一度に覚える必要なんてないんです。
今日紹介した `noFallthroughCasesInSwitch` も、「自分のうっかりミスを、仕組みでカバーする」という考え方の一つです。
TypeScriptは、あなたの書いたコードを冷たく突き放すための道具ではありません。むしろ、あなたが安心してコードを書けるようにサポートしてくれる「優秀な副操縦士」のような存在です。
エラーが出ても「またTypeScript先生が守ってくれた！」とポジティブに捉えて、一歩ずつ進んでいきましょう。大丈夫、その小さな積み重ねが、いつかあなたを素晴らしいエンジニアに育ててくれますよ。
それでは、良いコーディングライフを！
コメント