【初学者向け】条件分岐とは？if文やswitch文で条件分岐をする方法について解説！

はじめに

この記事では、JavaScriptにおいての条件分岐の基本として、条件分岐と密接な関係にある真偽値（true、false）や比較演算子について触れ、ifやswitchというキーワードを使用して条件分岐を行う方法について解説します。

条件分岐は特定の条件で異なる処理を行うための方法で、プログラミングにおいて基本的で最も重要な概念と言えます。条件分岐は、JavaScriptだけでなく多くのプログラミング言語でもifやswitchといったキーワードを使用して定義することができます（記述方法に若干の違いはあります）。

JavaScriptで条件分岐を行うには、真偽値の基本や暗黙的なtrue、falseへの変換について知る必要があります。これらを学ぶことは条件分岐を理解するための助けになります。

この記事の対象者

• JavaScript初学者の方
• 条件分岐がよくわからないという方
• 条件分岐の使い方に不安がある方

この記事で学べること

• 真偽値について
• 条件分岐の基本について
• if、else、else ifの使い方
• switch文の使い方
• if文とswitch文の使い分け

真偽値について

プログラミングで条件分岐処理を行うには、まず真偽値について理解する必要があります。真偽値はBooleanというラッパーオブジェクトに対応するプリミティブ型のデータです。

真偽値は「ある条件が成り立つかどうか」を示すものであり、その結果は「真（true）」または「偽（false）」のいずれかです。プログラミングで条件分岐を行う際、分岐するための条件を「条件式」という形で定義します。以下はJavaScriptでの条件分岐の基本構文です。

if (条件式) {
  // 条件式の判定がtrueの場合の処理
}

条件式はその内容によってtrueかfalseを決定し、この結果を基に分岐先の{}ブロック内の処理を実行します。

暗黙的な変換

条件式に記述する内容は、ただの文字列や数値といった単一のデータであってもtrueあるいはfalseとして扱われます。例として、以下のようなデータは全てfalseになります。JavaScriptではこれらを「Falsyな値」と表現します。

• false：真偽値型の「false」
• 0：数値型のゼロ
• ”：空の文字列
• undefined：値が未定義
• null：値が存在しない
• NaN：数値として解釈できない数値型

上記以外のデータは全てtrueになります。これには空のオブジェクトや配列も含まれます。データがどのように真偽値に変換されるかは、Boolean()というコンストラクタ関数の引数にデータを渡すことで確認できます。ブラウザのコンソールで実行すると簡単です。

// 以下はfalse
Boolean(false);
Boolean(0);
Boolean('');

// 以下はtrue
Boolean('0');
Boolean([]);
Boolean({});

真偽値の使いどころ

真偽値は、条件分岐の他にもループ処理でループを抜けるための条件や、関数の戻り値としてもよく利用されます。

ループ処理とは、処理を繰り返し実行するための方法です。ループ処理を実装する際、何らかの方法でループを抜ける方法が提供されていないと「無限ループ」というものが発生し、ブラウザがクラッシュする可能性があります。これを防ぐべく、真偽値を利用してループを抜けるための条件を指定することができます。

また、関数が期待通りの結果を返すかどうかを判断するためにも真偽値は利用されます。条件分岐の条件式内で関数を呼び出すことができ、関数の戻り値を条件式の判定に利用します。

function myFunc() {
  return true;
}

// myFunc()関数が実行されてtrueが返ってきます
if (myFunc()) {
  console.log('myFuncの戻り値はtrueです');
}

真偽値の理解は、プログラミングにおける条件分岐の基盤となるものです。前述のとおり条件式は単一のデータでもtrueかfalseに変換されるので、「trueは真」、「falseは偽」ということが分かれば簡単な条件分岐を実装することができます。

比較演算子について

ifキーワードを使用して条件分岐を行う際、一つあるいは複数の条件式を必ず定義します。条件式を組み上げるには比較演算子というものをよく使用します。比較演算子は異なる値や変数を比較するために使用され、以下のような種類があります。

• ==：等しい
• ===：厳密に等しい
• !=：等しくない
• !==：厳密に等しくない
• >：左辺が右辺より大きい
• <：左辺が右辺より小さい
• >=：左辺が右辺以上
• <=：左辺が右辺以下

それぞれについて解説します。

等価演算子

「==」と「===」を等価演算子といい、これらは「左辺の値と右辺の値が等しい場合にtrue」と判定します。二つの違いは、比較する際に型の変換が行われるかどうかにあります。

// ==は型変換が行われる
5 == '5'; // true
true == 1; // true
false == 0; // true

// ===は型変換が行われない
5 === '5'; // false
true === 1; // false
false === 0; // false

==の比較では、数値のみの文字列やtrue、falseといった真偽値は数値型に変換されて比較されます。便利に思うかもしれませんが、この挙動は予測しきれない結果を生む可能性があるため、==での比較は信用性が下がります。

===は型の比較によって厳密な比較が行われるため、予期せぬバグを防ぐことができます。

let num1 = 0; // 数値型
let num2 = '0'; // 文字列型

num1 == num2; // true
num1 === num2; // false

基本的には===による厳密な比較をオススメします。続いて、不等価演算子について解説します。

不等価演算子

「!=」と「!==」を不等価演算子といい、これらは「左辺の値と右辺の値が等しくない場合にtrue」と判定します。つまり、等価演算子を不等価演算子に書き換えると値が反転することになります。

!=と!==の違いは、==と===との違いと同じです。!=の場合は型変換が行われ、!==の場合は型変換が行われないため厳密な比較ができます。

// !=は型変換が行われる
5 != '5'; // false
true != 1; // false
false != 0; // false

// !==は型変換が行われない
5 !== '5'; // true
true !== 1; // true
false !== 0; // true

こちらも、基本的には!==による厳密な比較をオススメします。

大なり演算子と小なり演算子

「>」と「<」を使用することで、左辺と右辺の値の大きい・小さいといった比較を行うことができます。これらの比較は型変換が自動的に行われます。

5 > 4; // true
5 < 4; // false

// trueは1、falseは0になるためtrue
true > false; // true

また、「=」と組み合わせることで「○○以上」や「○○以下」といった比較ができます。

5 > 5; // false
5 >= 5; // true

5 < 5; // false
5 >= 5; // true

>や<を使用した比較は数値型のデータ以外でも使用できますが、挙動が分かりにくいので避けたほうが良いです。

比較演算子については以上です。続いて、ifキーワードを使用した基本構文について解説します。

if文の基本構文

条件分岐は基本的にifキーワードを使用します。また、elseキーワードと組み合わせることで「 true のときの処理」と「 false のときの処理」を分けることができます。以下は、elseキーワードを使用した条件分岐の基本構文です。

if (条件式) {
  // 条件式の結果がtrueのときの処理
} else {
  // 条件式の結果がfalseのときの処理
}

また、else ifキーワードを使用することで複数の分岐を設定することができ、複雑な条件分岐を実装できます。

if (条件式1) {
  // 条件式1の結果がtrueのときの処理
} else if (条件式2) {
  /* 条件式1の結果がfalseかつ、
   * 条件式2の結果がtrueのときの処理 */
} else {
  // 条件式1と条件式2の結果がfalseのときの処理
}

以上が条件分岐の基本構文となります。簡単な条件分岐の例は以下です。

let value = 5;

if (value === 5) {
  console.log('value変数の値は5です。');
} else if (value === 6) {
  console.log('value変数の値は6です。');
} else {
  console.log('value変数の値は5でも6でもありません。');
}

if文は入れ子で使用することもできます。以下のコードは上記と同じ挙動になります。

if (value === 5) {
  console.log('value変数の値は5です。');
} else  {
  if (value === 6) {
    console.log('value変数の値は6です。');
  } else {
    console.log('value変数の値は5でも6でもありません。');
  }
}

入れ子構造は可読性が落ちるため、複数の分岐を定義する場合は基本的にelse ifキーワードを使用します。複数の分岐を定義する際、「上から順番に判定される」ということに注意しましょう。

let value = 6;

if (value >= 5) {
  console.log('value変数の値は5以上です。');
} else if (value === 6) {
　// 以下は実行されません。
  console.log('value変数の値は6です。');
} else {
  console.log('value変数の値は5でも6でもありません。');
}

// 結果：'value変数の値は5以上です。'

switch文の基本構文

特定の値に対して複数の処理を分岐させる場合、switchキーワードを使用した条件分岐を行うことでシンプルな記述ができます。switch文は「 式 」と「 case 」という、if文の条件式とは異なる概念を持ちます。caseに特定の値を定義することで、式に指定したデータと一致した場合の処理を定義することができます。

switch (式) {
  case 値1:
    // 式と値1が一致した場合に実行
    break;
  case 値2:
    // 式と値2が一致した場合に実行
    break;
  default:
    // どのケースにも一致しない場合に実行
}

複数の値に対して同じ処理を行う場合は以下のように記述します。

switch (式) {
  case 値1:
  case 値2:
    // 式と値1か値2が一致した場合に実行
    break;
  case 値3:
    // 式と値3が一致した場合に実行
    break;
  default:
    // どのケースにも一致しない場合に実行
}

どのケースにも一致しない場合の処理が必要ない場合は default を省略できます。

if文の解説で使用したコードをswitch文に書き換えてみましょう。以下のようになります。

let value = 5;

switch(value) {
  case 5:
    console.log('value変数の値は5です。');
    break;
  case 6:
    console.log('value変数の値は6です。');
    break;
  default:
    console.log('value変数の値は5でも6でもありません。');
    break;
}

// 結果：'value変数の値は5です。'

if文に比べて直感的に理解しやすいコードになったかと思います。

switch文を使用する際の注意点として、式と case の値は厳密な等価演算子（===）で比較した場合と同じになります。よって、以下では異なる結果になります。

let value = '5'; // 文字列型として定義

switch(value) {
  case 5: // 値が数値型なので「valueとは違う」と判定
    console.log('value変数の値は5です。');
    break;
  case 6:
    console.log('value変数の値は6です。');
    break;
  default:
    console.log('value変数の値は5でも6でもありません。');
}

// 結果：'value変数の値は5でも6でもありません。'

また、各ケース文に break; が無い場合、一致したケースより下に記述したケースの処理も実行されます。

let value = 6;

switch(value) {
  case 5:
    console.log('value変数の値は5です。');
    break;
  case 6:
    console.log('value変数の値は6です。');
    // break; breakをコメントアウトします
  default:
    console.log('value変数の値は5でも6でもありません。');
    break;
}

// 結果：
// 'value変数の値は6です。'
// 'value変数の値は5でも6でもありません。';

switch文は少しクセのある記述方法ですが、特定の値に対して処理を切り分ける場合に便利です。switch文は複雑な条件分岐には向かず、switch文でできることはif文でもできるのであまり重要ではありませんが、可読性はコードの品質において重要なのでif文とswitch文を適切に使い分けられる良いと思います。

最後に

この記事では、JavaScriptにおける条件分岐の基本である真偽値と比較演算子、if文とswitch文の記述方法について解説しました。

プログラミングにおいて、条件分岐はコードの流れを制御し、特定の条件に基づいて適切な処理を行うための基本的な要素です。if文での条件分岐は、条件式という形で柔軟な条件を定義することができます。switch文での条件分岐は、一つの値に基づいて複数の条件を判定する場合に適しています。

この記事では比較演算子を使用した条件の定義方法について解説しましたが、条件式には「論理演算子」というものを使用することで更に柔軟な条件を定義することができます。以下の記事では論理演算子について解説しています。条件分岐について学習した方の次のステップとしてオススメです。

【初学者向け】論理演算を学んで、論理演算子の使い方をマスターしよう！

論理演算はプログラミングの基本知識であり、初学者がこれを理解することはプログラミングのスキル向上に貢献します。この記事では、論理演算を行うための「論理演算子」の使い方に焦点を当て、論理演算の基本的な概念から具体的な例を挙げて解説していきます。

ns-adwork.com