カテゴリ: JavaScript 更新日: 2025/11/02

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

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

先生と生徒の会話形式で理解しよう

生徒

「先生、if文の中で変数を宣言するとき、どのタイミングで書くのが良いですか?」

先生

「条件の中で必要な場合だけ宣言するのか、あらかじめ外で宣言しておくのかで変わります。目的に応じて使い分けることが重要です。」

生徒

「具体的にはどういう使い分けですか?」

先生

「if文の中だけで使う変数はその中で宣言し、複数の条件で共通して使う変数は外側で宣言すると、コードがすっきりしてわかりやすくなります。」

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

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

条件分岐の中で変数を宣言すると、その変数はif文のスコープ(有効範囲)の中だけで使えます。スコープとは、変数が生きている範囲のことです。スコープを意識すると、不要な変数の誤使用を防ぐことができます。


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

ユーザーの年齢は 25

この場合、ageはif文の中でのみ有効です。外側からはアクセスできません。

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

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

変数を外側で宣言しておくと、if文の外でも値を利用できます。複数の条件で値を使い回す場合に便利です。


let status;

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

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

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

この場合、statusはif文の外でも参照できます。条件によって値が変わる変数にはこの方法が適しています。

3. letとconstの使い分け

3. letとconstの使い分け
3. letとconstの使い分け

変数を宣言するときは、値が変わる可能性がある場合はlet、値が変わらない場合はconstを使うと良いです。これにより、意図しない値の上書きを防ぎ、バグを減らせます。


if (user) {
  const name = user.name; // 変更しない場合はconst
  let points = user.points; // 変更する可能性がある場合はlet
}

(出力結果はありません)

この書き方でスコープを明確にすると、コードが読みやすくなり安全性も高まります。

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

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

if文のネストが深くなる場合、変数の宣言位置に注意しないと意図しない値になることがあります。可能であれば、早期リターンやガード節を使い、スコープをシンプルに保ちましょう。


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

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

  console.log(message);
}

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

このように外側で変数を宣言し、条件ごとに代入することで、スコープの問題を避けつつ可読性も保てます。

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

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

これらを意識することで、JavaScriptの条件分岐内での変数管理が簡単になり、バグを減らし読みやすいコードが書けます。

カテゴリの一覧へ
新着記事
New1
TypeScript
TypeScriptでパスエイリアスを設定する方法!baseUrlとpathsでコードをスッキリ整理
New2
JavaScript
JavaScriptのfor文の書き方を初心者向けにやさしく解説
New3
JavaScript
JavaScriptの関数でよくあるエラーとその解決法まとめ
New4
JavaScript
JavaScriptのイベント処理でよくあるエラーとその対処法
人気記事
No.1
Java&Spring記事人気No1
JavaScript
JavaScriptのインストール方法まとめ!Windows・Mac・Linux別にステップ解説
No.2
Java&Spring記事人気No2
JavaScript
JavaScriptのマウスイベントの使い方(click, mouseoverなど)
No.3
Java&Spring記事人気No3
JavaScript
JavaScriptのtoStringとString関数の違いを初心者向けに解説
No.4
Java&Spring記事人気No4
JavaScript
JavaScriptの純粋関数(pure function)と副作用の違いを理解しよう
No.5
Java&Spring記事人気No5
JavaScript
JavaScriptプログラムの実行方法まとめ!ブラウザ・Node.js・コンソールの使い方
No.6
Java&Spring記事人気No6
JavaScript
JavaScriptで文字列をforループで1文字ずつ処理する方法!初心者向け解説
No.7
Java&Spring記事人気No7
TypeScript
TypeScript学習におすすめの無料教材・リファレンスサイト【初心者向け】
No.8
Java&Spring記事人気No8
TypeScript
TypeScriptの始め方:開発環境の構築手順【初心者向け】