JavaScriptの条件分岐の中で変数を宣言するタイミングのコツ

1. 条件分岐内で変数を宣言する理由

1. 条件分岐内で変数を宣言する理由

条件分岐の中で変数を宣言すると、その変数はif文のスコープ（有効範囲）の中だけで使えます。スコープとは、変数が使える範囲のことで、この範囲をしっかり意識することで「どこで使えるのか」が明確になります。特に初心者のうちは、使う場所の近くで宣言することで、コードの理解がしやすくなります。

if (user) {
  let age = user.age;
  console.log("ユーザーの年齢は", age);
}

ユーザーの年齢は 25

この場合、ageはif文の中でのみ有効です。外側からはアクセスできません。つまり、「必要な場所だけで使う」ことで、他の処理に影響を与えにくくなります。また、不要な場所で誤って変数を使ってしまうミスも防げるため、バグの原因を減らすことにもつながります。

このように、条件の中だけで使う一時的なデータは、その場で宣言することで、コードがシンプルになり、読みやすさと安全性の両方を高めることができます。

2. 外側で宣言してから条件分岐で代入する方法

2. 外側で宣言してから条件分岐で代入する方法

変数を外側で宣言しておくと、if文の外でも値を利用できます。複数の条件で値を使い回す場合や、あとからまとめて処理したいときに便利です。特に「条件によって結果だけ変わるが、その後の処理は共通」というケースでよく使われます。

let status;

if (user) {
  status = user.active ? "アクティブ" : "非アクティブ";
}

console.log("ユーザーの状態:", status);

ユーザーの状態: アクティブ

この場合、statusはif文の外でも参照できるため、後続の処理でそのまま使えます。たとえば画面表示やログ出力などにそのまま渡せるのがメリットです。

初心者の方は「あとで使う可能性があるか」を判断基準にすると分かりやすいです。次のように複数の条件で値を決めて、最後にまとめて使うパターンもよくあります。

let message;

if (!user) {
  message = "ユーザーが見つかりません";
} else if (user.active) {
  message = "ログイン中のユーザーです";
} else {
  message = "現在はログアウト中です";
}

console.log(message);

ログイン中のユーザーです

このように外側で宣言しておくことで、条件ごとに値を切り替えつつ、最後は一つの変数として扱えます。処理の流れが整理されるため、コードの見通しがよくなり、保守もしやすくなります。

3. letとconstの使い分け

3. letとconstの使い分け

変数を宣言するときは、値が変わる可能性がある場合はlet、値が変わらない場合はconstを使うのが基本です。このルールを意識するだけで、コードの意図がはっきりし、あとから見返したときにも理解しやすくなります。また、constを使うことで「この値は途中で変わらない」という前提が保証されるため、思わぬ書き換えによるバグを防ぐ効果もあります。

まずはシンプルな例で確認してみましょう。

if (user) {
  const name = user.name; // 値を変更しない
  let points = user.points; // 後で変更する可能性がある
}

（出力結果はありません）

この例では、nameはユーザー名として一度取得したら変える必要がないためconstを使っています。一方、pointsは計算や加算などで後から値が変わる可能性があるためletを使います。

もう少し初心者向けの例として、「ポイントを加算するケース」を見てみましょう。

if (user) {
  let points = user.points;

  points = points + 10; // ポイントを追加する

  console.log(points);
}

35

このように、値を途中で変更する場合はletが必要になります。もしここでconstを使うと、再代入ができずエラーになるため注意が必要です。

ポイントとしては、「基本はconstを使い、変更が必要なときだけletにする」という考え方がおすすめです。この習慣を身につけると、無駄な変更を防ぎながら、安全で読みやすいコードを書くことができます。結果として、条件分岐の中でもスコープが整理され、バグの起きにくいコードにつながります。

4. ネストの中で変数を使うときの注意点

4. ネストの中で変数を使うときの注意点

if文のネストが深くなると、どこで変数が使えるのか分かりにくくなり、思わぬバグの原因になります。特に初心者の方は「どのスコープで宣言した変数なのか」を意識することが大切です。基本は、できるだけネストを浅くし、変数の有効範囲をシンプルに保つことです。

そのためによく使われるのが「早期リターン」や「ガード節」です。先に条件をチェックして処理を終了させることで、無駄な入れ子構造を減らし、コードの見通しをよくします。

function processUser(user) {
  if (!user) return;

  let message;
  if (user.active) {
    message = "アクティブなユーザーです";
  } else {
    message = "非アクティブなユーザーです";
  }

  console.log(message);
}

アクティブなユーザーです

この例では、まずuserが存在しない場合に処理を終了しているため、その後の処理は「userがある前提」でシンプルに書けます。また、messageを外側で宣言しておくことで、ifとelseのどちらの結果でも同じ変数にまとめて扱えます。

さらに、ネストを減らすことで「どこで値が決まるのか」がひと目で分かるようになり、後からコードを見返したときも理解しやすくなります。結果として、ミスを減らしながら読みやすいコードを書くことができます。

5. 宣言タイミングのコツまとめ

5. 宣言タイミングのコツまとめ

• 条件内だけで使う変数はif文内で宣言する
• 条件の外でも使う変数は外側で宣言する
• 値が変わる可能性がある場合はlet、変わらない場合はconstを使う
• ネストが深くなる場合は早期リターンやガード節を使うとスコープがシンプルになる

ここまでの内容を、シンプルな例でおさらいしてみましょう。条件によって表示するメッセージを変える場合です。

let message;

if (score >= 80) {
  message = "合格です";
} else {
  message = "不合格です";
}

console.log(message);

合格です

この例では、messageをif文の外で宣言しているため、条件分岐の結果をあとからまとめて使うことができます。一方で、もしif文の中だけで使う一時的な値であれば、その場で宣言した方がコードはすっきりします。

初心者の方は「その変数を後で使うかどうか」を基準に考えると判断しやすくなります。このポイントを意識するだけで、変数の置き場所に迷いにくくなり、読みやすく整理されたコードを書けるようになります。結果として、無駄なバグを防ぎながら、メンテナンスしやすいコードにつながります。

この記事を読んだ人からの質問

この記事を読んだ人からの質問

プログラミング初心者からのよくある疑問／質問を解決します

JavaScriptのif文の中で変数宣言をするメリットは何ですか？スコープの意味も知りたいです

JavaScriptのif文の中で変数宣言を行うと、その変数はブロックスコープに限定されるため、外部からアクセスできなくなります。これにより不要な変数の誤使用を防ぎ、バグを減らすことができます。スコープとは変数が有効な範囲を意味し、JavaScriptのletやconstはブロックスコープを持つため、条件分岐内で安全に使えます。

if文の外で変数宣言する場合と中で宣言する場合の違いは何ですか？使い分け方法を知りたいです

if文の外で変数宣言をすると、その変数は条件分岐の外でも使うことができます。一方でif文の中で宣言すると、その中だけで使えます。複数の条件で同じ変数を使う場合は外で宣言し、特定の条件でのみ使う場合は中で宣言するのがベストプラクティスです。