今回やること
この記事では、ネストが深いif文をガード節で整理します。
先に対象外の条件を返すと、本筋の処理がまっすぐ読めます。
前提条件
- if文が読める
- returnとthrowの違いが分かる
- 関数の動作を変えずに形を整えたい
Step 1: ネストが深いコードを見る
function getCouponMessage(user: User | null) {
if (user) {
if (user.isActive) {
if (user.purchaseCount >= 5) {
return "coupon available";
} else {
return "buy more";
}
} else {
return "inactive user";
}
} else {
return "login required";
}
}
右側に深くなっていて、正常系がどこにあるか分かりにくいです。
Step 2: 対象外の条件を先に返す
function getCouponMessage(user: User | null) {
if (!user) {
return "login required";
}
if (!user.isActive) {
return "inactive user";
}
if (user.purchaseCount < 5) {
return "buy more";
}
return "coupon available";
}
条件を反転し、対象外のケースを先に返しました。
Step 3: 正常系を確認する
最後に残っている return "coupon available" が本筋です。
ガード節を使うと、正常系を深いif文の中に閉じ込めずに済みます。
Step 4: エラーならthrowを使う
処理を続けてはいけない入力なら、returnではなく例外にすることもあります。
function calculatePrice(price: number) {
if (price < 0) {
throw new Error("price must be positive");
}
return price * 1.1;
}
不正な入力を早く止めると、原因を追いやすくなります。
よくあるエラー
| 状況 | 原因 | 対応 |
|---|---|---|
| returnが多すぎて読みにくい | 条件が整理されていない | 状態や関数分割を見直す |
| 条件を反転してバグる | > と < を間違える | 変更前後のケースを表にする |
| 正常系まで早期returnする | 本筋が見えなくなる | 対象外条件だけ先に返す |
| エラーをreturnで隠す | 失敗を正常値として扱っている | throwやResult型を検討する |
まとめ
深いif文は、ガード節で対象外の条件を先に返すと読みやすくなります。正常系を最後にまっすぐ残すのがポイントです。
参考リソース
← 一覧に戻るPR
PR
