JavaScript | 基礎構文:条件分岐 – ガード節(早期 return)

JavaScript JavaScript
スポンサーリンク

ガード節(早期 return)とは何か

ガード節(guard clause)とは、関数の冒頭で「条件を満たさない場合はすぐに return して処理を打ち切る」書き方のことです。これにより、不要なネスト(入れ子)を避け、コードをシンプルで読みやすくできます。初心者がよく書いてしまう「if の中に if が続く」複雑な構造を整理するためのテクニックです。


基本構造と流れ

通常の書き方では「条件が偽なら else の中で処理する」となりがちですが、ガード節を使うと「条件が偽ならすぐ return」で終わらせられます。

function greet(name) {
  if (!name) {
    return "名前を入力してください"; // ガード節で早期 return
  }
  return `こんにちは、${name}さん`;
}

console.log(greet("Taro")); // こんにちは、Taroさん
console.log(greet(""));     // 名前を入力してください
JavaScript

このように、最初に「不正なケース」を弾いてしまうことで、残りの処理は「正常なケース」だけを考えればよくなります。


ガード節を使うメリット

ネストを減らせる

通常の if/else だと処理が深くなりがちですが、ガード節なら早めに return するので残りのコードがフラットになります。

読みやすさが向上する

「条件を満たさない場合はここで終了」と明示できるため、コードの意図が分かりやすくなります。

バグを減らせる

異常系を先に処理することで、正常系の流れがシンプルになり、バグが入り込みにくくなります。


実用例で理解する

例題1:入力チェック

function validateAge(age) {
  if (age === undefined || age === null) {
    return "年齢が未入力です";
  }
  if (age < 0) {
    return "年齢は0以上で入力してください";
  }
  return `年齢は${age}歳です`;
}

console.log(validateAge(null)); // 年齢が未入力です
console.log(validateAge(-5));   // 年齢は0以上で入力してください
console.log(validateAge(20));   // 年齢は20歳です
JavaScript

異常なケースを先に return してしまうことで、最後の return は「正常なケース」だけになります。


例題2:権限チェック

function accessPage(user) {
  if (!user) {
    return "ログインしてください";
  }
  if (user.role !== "admin") {
    return "権限がありません";
  }
  return "管理者ページへようこそ";
}

console.log(accessPage(null));               // ログインしてください
console.log(accessPage({ role: "user" }));   // 権限がありません
console.log(accessPage({ role: "admin" }));  // 管理者ページへようこそ
JavaScript

「ログインしていない」「管理者でない」といった異常系を先に弾くことで、最後の処理はシンプルになります。


例題3:配列の処理

function firstItem(arr) {
  if (!arr || arr.length === 0) {
    return "配列が空です";
  }
  return arr[0];
}

console.log(firstItem([]));          // 配列が空です
console.log(firstItem(["A", "B"]));  // A
JavaScript

空配列を先に return してしまうことで、残りの処理は「要素がある場合」だけを考えればよくなります。


注意点とコツ

正常系を最後に残す

ガード節は「異常系を先に return」するのが基本です。そうすることで、最後に残る処理が「正常系」になり、読みやすくなります。

条件を整理する

複雑な条件をまとめてガード節に書くと分かりにくくなるので、必要なら変数に分けて整理しましょう。

function canEnter(age, isMember) {
  const isAdult = age >= 18;
  if (!isAdult || !isMember) {
    return "入場できません";
  }
  return "入場できます";
}
JavaScript

まとめ

  • ガード節(早期 return)は「条件を満たさない場合はすぐ return」で処理を打ち切る書き方。
  • ネストを減らし、コードをフラットで読みやすくできる。
  • 異常系を先に処理することで、正常系の流れがシンプルになる。
  • 入力チェック、権限判定、配列処理などで活用できる。

初心者は「不正なケースを先に return して、残りは正常な処理だけにする」と覚えると理解しやすいです。

タイトルとURLをコピーしました