JavaScript 基礎 第5回 『条件分岐の基礎を理解しよう』

JavaScript 基礎 第4回 では変数と定数を学んで頂きました。
今回も変数や定数は登場しますので、もし忘れてしまった、確認したい、などがあれば
リンクから復習しに戻ってみてください！

条件分岐とは

JavaScript のプログラムを書くにあたり条件分岐とは、特定の条件に基づいて異なるアクションを実行するプログラミングの概念です。
異なる状況に応じた適切な処理を行うことができるようにします。
条件分岐を日常に例えてみると、「もし晴れているなら公園へ行く。もし曇りならば映画館へ行く。それ以外ならば家で料理をする。」などのように状況に応じた行動のようなものです。

if文

if文は「もし○○なら○○する。」のように、英語を学んだ際に聞き覚えのあるフレーズをプログラムで書くことができます。

if文の構文

■構文

if (条件式) {
  条件に当てはまる場合の処理を記述
}

※条件式の結果は、条件を満たしているか、満たしていないかの「true」か「false」になる。

■例

let weather = "晴れ"
let action = ""

if (weather == "晴れ") {
	action = "公園へ行く！"
}

document.write(action);

変数weatherに入っている文字列”晴れ”とif文の条件式の条件「weather == “晴れ”」が一致し、
条件を満たしているので、空文字で用意した変数actionに文字列の”公園へ行く！”が上書きされます。上書きされた変数actionに入っている「公園へ行く！」が画面に表示されます。

比較演算子

上記の表に加えて「===」と「!==」も存在します。違いについて説明していきます。

• 「===」(厳密等価演算子): この演算子は値が等しいかどうかだけでなく、型も等しいかどうかをチェックします。つまり、両方のオペランドが同じ型で、同じ値である場合にのみtrueを返します。
• 「==」(等価演算子): この演算子は値が等しいかどうかをチェックしますが、型が異なる場合は型変換を試みてから比較を行います。例えば、'123' == 123はtrueを返しますが、これは文字列の'123'が数値の123に型変換されるからです。
• 「!==」(厳密不等価演算子): この演算子は値が等しくない、または型が等しくない場合にtrueを返します。つまり、値または型のいずれか一方が異なればtrueとなります。
• 「!=」(不等価演算子): この演算子は値が等しくないかどうかをチェックしますが、型が異なる場合は型変換を試みます。その結果、型変換後に値が等しければfalse、等しくなければtrueを返します。

※オペランドとは、プログラミングにおいて演算子によって操作されるデータのことを指します。
演算子が作用する対象（値や変数）のことです。オペランドは、計算や評価を行う際に演算子によって使われる値であり、式の中でその演算子の入力となる要素です。

一般的には、JavaScriptでのプログラミングにおいては「===」と「!==」を使用することが推奨されています。これは、予期しない型変換によるバグを防ぐためです。

if~else文

if文が条件を満たしているときでしたが、if~else文では条件を満たしている場合と、満たしていない場合の処理を書くことができます。

if~else文の構文

■構文

if (条件式) {
  条件に当てはまる場合の処理を記述
} else {
  条件式の条件に当てはまらない場合の処理を記述
}

■例

let weather = "雨"
let action = ""

if (weather == "晴れ") {
	action = "公園へ行く！"
}else{
	action = "家で料理をする！"
}

document.write(action);

変数weatherを「雨」に変更しました。そうすると、条件式に当てはまらないのでelseの中の処理が実行されます。変数actionは「家で料理をする！」で上書きされます。画面には「家で料理をする！」が表示されているはずです。

else if文

条件式を追加したい場合に記述する分です。

else if文の構文

■構文

if (条件式1) {
  条件式1に当てはまる場合の処理を記述
}else if (条件式2) {
  条件式2が当てはまる場合の処理を記述する
} else {
 条件式の条件に当てはまらない場合の処理を記述
}

■例

let weather = "曇り"
let action = ""

if (weather == "晴れ") {
	action = "公園へ行く！"
}else if (weather == "曇り") {
	action = "映画館へ行く！"
}else{
	action = "家で料理をする！"
}

document.write(action);

上記コードでは2つ目の条件式が当てはまるのでelse if文の処理が実行されます。
条件式が1つでは足りない時に追加で条件式を追加することができます。

if文の応用

今までに学んだif文を使って複雑な条件分岐を記述した例を見て応用の仕方を学んでください。

■例

let weather = "雷";
let action = "";
let day_of_the_week = "休日";

if (day_of_the_week === "休日") {
	if (weather === "晴れ") {
		action = "公園へ行く！"
	}else if (weather === "曇り") {
		action = "映画館へ行く！"
	}else if (weather === "雷"){
    action = "おへそを隠す！"
	}else{
		action = "家で料理をする！"
	}	
}

document.write(action);

上記コードでは最初の条件式「休日」という条件を満たしていて、尚且つ「晴れ」、「曇り」、「雷」、「それ以外」のどれかに当てはまった処理が実行されます。今回は「休日」で「雷」が当てはまるので、画面には「おへそを隠す！」が表示されているはずです。
「休日」を満たしていない場合は、1つ目のif文の中のif文には到達せずに抜けていきます。
急に複雑になったと感じても大丈夫です。繰り返しif文を使っていき徐々に慣れていきましょう！

論理演算子

条件式にも複数の条件を指定したい場合に記述する方法です。
if文を複数記述するよりもシンプルにできる場合があります。

■例

let weather = "雨";
let action = "";
let day_of_the_week = "休日";


if (weather === !"雨" && day_of_the_week === "休日") {
	action = "公園へ行く！"
}else if (weather === "曇り" || weather === "雨") {
	action = "傘を持っていく！"
}else{
	action = "夜ごはんを食べに行く！"
}	

document.write(action);

1つ目の条件式は「休日」は当てはまっているが、「雨ではない」には当てはまらないので条件を満たしていません。2つ目の条件式は「休日」は当てはまらないが、「雨」には当てはまるので2つ目の条件式を満たすことになります。以上が「&&」と「||」の違いになります。

switch文

switch文は、与えられた式の値に基づいて複数の条件分岐を実行するための構文です。この文は、特定の値に一致するcaseラベルに基づいてプログラムの実行フローを制御します。複数のif-else文を使う代わりにswitch文を使用することで、コードをより整理しやすく、読みやすくすることができます。

switch文の構文

■構文

switch (式) {
  case 値1:
    // 式が値1に等しい場合に実行されるコード
    break;
  case 値2:
    // 式が値2に等しい場合に実行されるコード
    break;
  default:
    // どのcaseにも該当しない場合に実行されるコード
}

■例

let fruit = 'apple';

switch (fruit) {
  case 'banana':
    document.write('バナナは300円です。');
    break;
  case 'apple':
    document.write('リンゴは100円です。');
    break;
  case 'grape':
    document.write('ブドウは1000円です。');
    break;
  default:
    document.write('申し訳ありませんが、' + fruit + 'は売り切れです。');
}

例では変数fruitには文字列「apple」が入っていて、対応するケースは「リンゴは100円です。」と画面に表示をする処理です。どのケースにも対応しない場合はdefaultの処理が実行されます。

JavaScript の変数の有効範囲

第4回で学んだ変数には有効範囲が存在し、条件分岐とも関りがあるので以下で説明していきます。

let、constの有効範囲

let、constは「{}(波括弧)」の中で宣言をすると、有効範囲は「{}」の内側のみになります。
有効範囲のことを「ブロックスコープ」と呼びます。

let weather = "晴れ";
if (weather === "晴れ") {
  let action = "公園に行く！"
}

document.write(action)

if文の「{}」の中で変数actionを宣言し、「{}」の外で変数actionを呼び出し、画面表示を使用としています。変数actionを画面表示させようとしている箇所では、有効範囲外つまりは、ブロックスコープ外にあるので、変数actionは定義されていませんというエラーが出ています。

varの有効範囲

let、constに対して、varの有効範囲は「{}」に制限されません。
しかし、関数の中で宣言した場合は、有効範囲が関数内に制限されます。

グローバル変数

let、const、varを付けずに変数を宣言すると、どこからでも参照ができる「グローバル変数」になります。

まとめ

前回学んだ変数なども多く出てきて、さらに条件分岐で処理が少し複雑になってきました。
まずは構文を押さえて、1行、1行どのような処理をしているのか、何が書いてあるのかを理解できるようにしましょう。