カテゴリ: 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 × ES6の連携まとめ!安全でモダンなJavaScript開発の鍵
New2
TypeScript
TypeScriptの型システムとは?静的型付けのメリットと基本
New3
JavaScript
JavaScriptの正規表現で繰り返し指定(* + ? {n,m})を学ぼう
New4
TypeScript
TypeScriptとESNextの連携を完全ガイド!最新機能を使いこなす設定と対応法
人気記事
No.1
Java&Spring記事人気No1
JavaScript
JavaScriptのインストール方法まとめ!Windows・Mac・Linux別にステップ解説
No.2
Java&Spring記事人気No2
JavaScript
JavaScriptの日時操作Tips!実務で役立つテクニック集
No.3
Java&Spring記事人気No3
TypeScript
TypeScriptでESLintとPrettierを導入!コード整形ルールを自動で統一する方法
No.4
Java&Spring記事人気No4
JavaScript
JavaScriptプログラムの実行方法まとめ!ブラウザ・Node.js・コンソールの使い方
No.5
Java&Spring記事人気No5
TypeScript
TypeScriptでコメントを書く正しい書き方と使い分け【初心者向けにやさしく解説】
No.6
Java&Spring記事人気No6
TypeScript
TypeScriptのif文の使い方を完全ガイド!初心者でもわかる条件分岐
No.7
Java&Spring記事人気No7
JavaScript
JavaScriptの正規表現で文字列を置換する方法(replaceメソッド)
No.8
Java&Spring記事人気No8
TypeScript
TypeScriptで非同期イテレーター(for await of)を活用する