条件分岐とは？（処理の流れの制御）
プログラミングにおける「条件分岐」とは、プログラムの実行順序（制御フロー）を、ある条件が成り立つかどうかに応じて切り替える仕組みのことです。JavaScriptを含む多くのプログラミング言語は、基本的にコードを上から下へ一行ずつ順番に実行する「順次処理（同期処理）」で動きます。しかし現実のアプリ開発では、すべてのユーザーやすべての状況に対して、常に同じ処理をするわけではありません。
例えば、Webサイトで「ログインしている人にはマイページを表示し、ログインしていない人にはログイン画面を表示する」といった分け方や、「テストの点数が80点以上なら合格、そうでなければ不合格」といった判定が必要です。このように「もし〜なら〇〇をする。そうでなければ××をする」という判断をプログラムにさせる機能が条件分岐です。
条件分岐は、プログラムに「判断力」を持たせるための中心的な機能です。これがなければプログラムは、計算機のように決められた手順をただ実行するだけになります。条件分岐があるからこそ、ユーザーの入力や操作（イベント）、サーバーから返ってきたデータ（APIレスポンス）に合わせて動きを変える「インタラクティブ」なWebアプリを作れるようになります。
JavaScriptで条件分岐を行う最も基本で重要な構文がif文です。プログラムはif文に来ると、そこで条件式をチェックし、結果が「真（True）」なら決められた処理を実行し、「偽（False）」ならその処理を飛ばして次へ進みます。この「枝分かれ」の考え方を理解することが、ロジックを作る第一歩になります。
また、Node.jsを使ったサーバーサイド開発でも条件分岐は欠かせません。例えば、リクエストされたURLが存在するかを判断したり、データベースから取ったデータが空ではないかを確認したりするときに使います。ブラウザでもサーバーでも、処理の流れを切り替える条件分岐は、JavaScript開発で避けて通れない重要概念の一つです。
if文の基本構文とブロックの役割
if文は条件分岐の中でも最も基本で、最もよく使われる書き方です。ifの後に丸括弧()で条件式を書き、その次に波括弧{}で囲んだブロックを続けます。
基本形は次の通りです。
if (条件式) {
// 条件式が true の場合に実行される処理
}
この書き方で大事なのは、「条件式」と「ブロック（{}）」の2つです。
条件式の評価：ifの直後の()の中に、チェックしたい条件を書きます。例えば score >= 90 のような比較式です。JavaScriptはこの式を評価して true か false にします。trueなら{}の中のコードを実行し、falseなら{}の中は実行せず、その次の行へ進みます。
ブロック{}の役割：{}で囲った部分を「ブロック」と呼び、複数行の処理をひとまとめにできます。条件が成立したときにやりたい処理が複数行あるなら、すべてブロックの中に書きます。JavaScriptでは処理が1行だけなら{}を省略できますが、読みやすさと事故防止のため、基本は省略せずブロックを書いた方が安全です。ブロックがあると、条件分岐の範囲が見た目で分かり、後から処理を追加するときもミスを減らせます。
コードの可読性とインデント：if文では、ブロック内をインデント（字下げ）するのが一般的です。インデントで「どこが中なのか」が見えるようになり、処理の流れを追いやすくなります。特にネスト（入れ子）が増えるほど、インデントがないと読むのが難しくなります。
elseを使った「そうでなければ」の処理
if文だけだと「条件が当てはまったとき」の処理しか書けません。しかし実際のプログラムでは「当てはまらなかったとき」に別の処理をしたいことが多いです。そのために使うのがelseです。
elseは、ifの条件がfalseだったときに実行するブロックを表します。
if (条件式) {
// 条件式が true の場合の処理
} else {
// 条件式が false の場合の処理
}
この形を使うと、処理の流れを「Aならこちら」「そうでなければこちら」という二択に分けられます。
例えば点数判定を考えてみます。
const score = 85;
if (score >= 90) {
console.log(“合格”);
} else {
console.log(“不合格”);
}
この例ではscoreは85なので score >= 90 はfalseになります。そのためif側は実行されず、else側の console.log(“不合格”) が実行されます。
elseがあると、条件に当てはまらない場合も必ず処理が決まるため、ロジックが安定します。「データ取得に成功したら表示し、失敗したら（else）エラーを出す」といった書き方はWebアプリでよく使われます。elseは、デフォルトの動作や想定外を受け止める「受け皿」にもなります。
else ifによる多岐分岐の実装
現実の判定は「YES/NO」の二択だけとは限りません。3つ以上の選択肢から、条件に合うものを選びたいこともあります。この多岐分岐を作るのがelse ifです。
else ifは、最初のifがfalseだったときに、次の条件を追加でチェックするための書き方です。必要な数だけつなげられ、最後にどれにも当てはまらない場合の処理としてelseを書けます。
if (条件式A) {
// 条件式Aが true の場合の処理
} else if (条件式B) {
// 条件式Aが false かつ 条件式Bが true の場合の処理
} else if (条件式C) {
// AとBが false かつ Cが true の場合の処理
} else {
// どの条件にも当てはまらない場合の処理
}
評価の順序と注意点：重要なのは「上から順に評価される」ことです。最初にtrueになったブロックだけが実行され、その下の条件は見られません。
例として成績判定を見てみましょう。
const score = 85;
if (score >= 90) {
console.log(“優”);
} else if (score >= 80) {
console.log(“良”);
} else if (score >= 70) {
console.log(“可”);
} else {
console.log(“不可”);
}
// 出力結果：良
この例では、まず score >= 90 はfalse、次の score >= 80 がtrueになるため「良」が出ます。そこで決定したので score >= 70 は評価されません。もし順番を間違えて score >= 70 を先に書くと、85点でも「可」になってしまいます。多岐分岐では、条件の順番と判定の重なり（排他性）を意識して設計する必要があります。
条件式の正体：比較演算子と真偽値の評価
if文の()に入れる「条件式」は、最後には必ず true か false として評価されます。この真偽値を作る代表的な道具が比較演算子です。
主な比較演算子：
- > （より大きい）
- < （より小さい）
- >= （以上）
- <= （以下）
- === （厳密に等しい）
- !== （厳密に等しくない）
- == （等しい：非推奨）
- != （等しくない：非推奨）
厳密等価演算子（===）の重要性：JavaScriptには == と === の2種類があります。ここが初心者にとって大きな落とし穴です。==は型が違うときに自動で型変換して比較します。例えば 10 == ’10’ はtrueになります。一方、===は型変換をせず、値と型が両方一致したときだけtrueになります。10 === ’10’ はfalseです。
JavaScriptは動的型付けなので、暗黙の型変換による思わぬ判定が起きやすい特徴があります。例えば入力値（文字列）を数値と比較するときなどに、意図しない結果になることがあります。そのため現代のJavaScriptでは、特別な理由がない限り常に===を使うのが推奨されています。これにより意図しない型変換を防ぎ、条件分岐をより正確にできます。
複雑な条件：論理演算子（AND/OR/NOT）の活用
比較だけでは表せない条件もあります。例えば「18歳以上で、かつ学生」や「チケットを持っている、または会員」などです。こうした複合条件を作るのが論理演算子です。
主要な論理演算子：
- AND (&&)：左右が両方trueのときだけtrue
- OR (||)：左右のどちらかがtrueならtrue
- NOT (!)：true/falseを反転する
短絡評価（ショートサーキット）：
&& は左がfalseなら右を見ずにfalse確定、|| は左がtrueなら右を見ずにtrue確定します。この性質を使うと、条件を短く書いたり、エラーを防ぐためのガードに使えます。例えば obj && obj.name は「objが存在するときだけ obj.name を見る」という書き方で、JavaScriptではよく登場します。
条件分岐と変数のスコープ（var vs letの挙動）
条件分岐のブロック{}の中で変数を宣言することは多いですが、varかlet/constかで変数の有効範囲（スコープ）が大きく違う点に注意が必要です。
if文とブロックスコープ：ES6以前に主流だったvarにはブロックスコープがありません。つまりifの{}の中でvarを書いても、外から参照できてしまいます。
if (true) {
var valIf = “if”;
}
console.log(valIf); // “if” と出力される（スコープから漏れる）
これは大規模開発で、変数名の衝突や意図しない上書きの原因になっていました。
let/constによる解決：ES6で追加されたletとconstはブロックスコープを持ちます。つまりifの{}内で宣言した変数は、その中だけで有効になり、外からは使えません。
if (true) {
let valIf2 = “if2”;
}
console.log(valIf2); // エラー：ReferenceError
この特徴により、条件分岐内だけで使う一時変数を安全に作れます。現代のJavaScriptではスコープ管理のため、varは避け、let/constを使うのが基本です。
JavaScript特有の「真偽」：TruthyとFalsyな値
if文の条件式は、必ずしもtrue/falseを返す式だけではありません。JavaScriptは、条件式に入った値を強制的に「真」か「偽」に変換して判定します。これがTruthy/Falsyです。
Falsyな値（偽として扱われる）：
- false
- 0
- “” または ”
- null
- undefined
- NaN
Truthyな値（真として扱われる）：基本的に上記以外すべてです。特に注意するべきは次の値です。 - “0”（文字列のゼロ）：空文字ではないので真
- []（空配列）：オブジェクトなので真
- {}（空オブジェクト）：真
暗黙の型変換のリスク：Truthy/Falsyは便利ですが、バグの原因にもなります。例えば if (inputValue) で入力チェックをすると、ユーザーが0を入れた場合、それはFalsyなので「入力なし」と誤判定される可能性があります。また true + 1 が2になるように、JavaScriptは文脈で型を勝手に変えることがあります。条件分岐を正確にするには、inputValue !== “” や inputValue !== null のように、明示的な比較をする意識が大切です。
三項演算子：スマートな条件分岐の記述
単純なif…elseは、三項演算子（条件演算子）で短く書けます。三項演算子は次の形です。
条件式 ? 真の場合の値 : 偽の場合の値
条件に応じて代入する値を変えるような処理を1行で書けます。
例：if文
let message;
if (score >= 80) {
message = “合格”;
} else {
message = “不合格”;
}
例：三項演算子
const message = score >= 80 ? “合格” : “不合格”;
短く書けて便利ですが、条件が複雑だったりネストさせたりすると読みにくくなります。基本は「単純な代入」など、ロジックが短い場面で使うのがベストです。
switch文：特定の値による分岐の整理
else ifでも多岐分岐は作れますが、「1つの変数の値に応じて振り分ける」場合はswitch文を使うと見やすくなることがあります。例えば「ステータスコードで処理を変える」などです。
基本形は次の通りです。
switch (式) {
case 値1:
// 式 === 値1 の場合の処理
break;
case 値2:
// 式 === 値2 の場合の処理
break;
default:
// どのcaseにも当てはまらない場合の処理
}
switch文の特徴と注意点：
厳密比較：switchの比較は === で行われ、型変換はしません。
breakが重要：breakを書き忘れると次のcaseまで実行される（フォールスルー）。多くの場合バグになります。
default：if文のelseに相当し、どれにも当てはまらないときの処理を書く。
ifとswitchは使い分けます。範囲判定や複雑な条件はif、特定の値での単純な振り分けはswitchが向いています。