JavaScriptの条件式で多段ネストを避ける書き方テクニック
生徒
「JavaScriptで条件分岐を書いていると、ifの中にifを書いて、どんどん入れ子になってしまいます。これって良くないですか?」
先生
「そうですね。それを多段ネストと呼びます。深くなるとコードが読みにくくなり、バグも見つけにくくなります。」
生徒
「どうすれば入れ子を避けて、読みやすく書けますか?」
先生
「条件分岐を早期リターンやガード節、switch文などを使うことでシンプルに書くことができます。順番に見ていきましょう!」
1. 多段ネストとは何か
多段ネストとは、if文やfor文の中にさらにif文があり、それが何層にも重なっている状態です。特にJavaScript初心者が条件分岐を書くときに起こりやすく、コードが右へ右へとずれていくのが特徴です。例えば、以下のようなコードです。
if (user) {
if (user.age > 18) {
if (user.active) {
console.log("利用可能なユーザーです");
}
}
}
利用可能なユーザーです
一見シンプルに見えますが、条件が増えるほど入れ子が深くなり、「どこからどこまでが同じ条件なのか」が分かりづらくなります。特に初心者にとっては、カッコの対応関係を追うだけでも大変です。
さらに、後から条件を追加したり修正したりすると、意図しない場所に影響が出ることもあり、バグの原因になりやすいというデメリットがあります。このような理由から、多段ネストはできるだけ避ける書き方が重要になります。
2. 早期リターンを使ってネストを減らす
早期リターンとは、条件に合わない場合はすぐに処理を終了する書き方です。最初に「ダメな条件」をチェックして処理を抜けることで、if文の入れ子を増やさずにシンプルなコードにできます。特にJavaScriptの条件分岐では、初心者でも読みやすいコードを書くためにとても重要なテクニックです。
function checkUser(user) {
if (!user) return;
if (user.age <= 18) return;
if (!user.active) return;
console.log("利用可能なユーザーです");
}
checkUser({age: 20, active: true});
利用可能なユーザーです
例えば、従来の書き方では「条件をすべて満たしたら実行する」と考えがちですが、早期リターンでは「条件を満たさない場合はすぐ終了する」と逆の発想で考えます。この考え方に変えるだけで、コードのネストが深くならず、左から右へスムーズに読めるようになります。
function checkNumber(num) {
if (num === null) return;
if (num < 0) return;
console.log("正の数です");
}
checkNumber(10);
正の数です
このように、条件ごとに早めに処理を終了することで、「どの条件で処理が止まるのか」が一目で分かるようになります。結果として、コードの可読性が上がり、バグの発見もしやすくなるため、実務でもよく使われる書き方です。
3. ガード節を使う
ガード節とは、特定の条件に合わない場合にその場で処理を終了させる書き方です。早期リターンと似ていますが、特に「関数の最初に不正なデータや例外的なケースをチェックする」という使い方が特徴です。これにより、メインの処理をシンプルに保つことができます。
function processOrder(order) {
if (!order) return console.log("注文がありません");
if (!order.items || order.items.length === 0) return console.log("商品がありません");
console.log("注文処理を開始します");
}
processOrder({items: ["apple"]});
注文処理を開始します
例えば、もしガード節を使わない場合、条件ごとにif文をネストする必要があり、コードがどんどん深くなってしまいます。しかし、最初に「問題がある場合は処理しない」と決めておくことで、重要な処理だけが下に残り、読みやすいコードになります。
function checkLogin(user) {
if (!user) return console.log("ユーザー情報がありません");
if (!user.isLogin) return console.log("ログインしてください");
console.log("ログイン済みです");
}
checkLogin({isLogin: true});
ログイン済みです
このようにガード節を使うと、「どの条件で処理が止まるのか」が明確になり、初心者でもコードの流れを理解しやすくなります。また、条件チェックとメイン処理が分離されるため、保守性の高いJavaScriptコードを書くことができます。
4. switch文を活用する
条件が複数の値に分かれる場合は、switch文を使うとネストを減らせます。特に「同じ変数に対して複数のパターンをチェックする」ときに便利で、if文を何度も書くよりもスッキリ整理できます。
let status = "active";
switch(status) {
case "active":
console.log("アクティブな状態です");
break;
case "inactive":
console.log("非アクティブな状態です");
break;
case "pending":
console.log("保留中の状態です");
break;
default:
console.log("不明な状態です");
}
アクティブな状態です
例えば、if文で同じ処理を書くと以下のように長くなりがちです。
let status = "active";
if (status === "active") {
console.log("アクティブな状態です");
} else if (status === "inactive") {
console.log("非アクティブな状態です");
} else if (status === "pending") {
console.log("保留中の状態です");
} else {
console.log("不明な状態です");
}
switch文は「どの値に一致するか」を上から順に確認していくため、条件の見通しがよくなります。特に初心者の方は、「1つの変数に対する分岐はswitch」と覚えておくと、コードの可読性が大きく向上します。
5. 三項演算子を使う
簡単な条件分岐であれば、三項演算子を使って1行で書くこともできます。
let score = 75;
let result = score >= 60 ? "合格" : "不合格";
console.log(result);
合格
三項演算子は条件が少ない場合に有効ですが、複雑になりすぎると逆に読みにくくなるので注意が必要です。
6. ネストを避けるメリット
- コードが読みやすくなる
- バグを見つけやすくなる
- メンテナンスがしやすくなる
- 条件分岐の理解が容易になる
早期リターンやガード節、switch文、三項演算子を適切に使うことで、多段ネストを避け、簡潔でわかりやすい条件分岐のコードを書くことができます。