条件分岐 if文、else if、else、論理演算子[JavaScript] #JavaScript

私たちは１日に3万５千回意思決定をしていると言われています。

意思決定とは例えば、
・今日はなんの服を着よう・・・
・朝ごはんはどうしよう・・・
・何分の電車に乗ろう・・

など単純なものから複雑なものまで様々です。

そして、この意思決定に関するプロセスをプログラミングの世界に投影したのが条件分岐になります。

条件文は、JavaScript特有ではなく、他のプログラミング言語にも共通する概念です。

条件文を使用することで、特定の場合に、特定の結果を出すように場合分けすることができます。

それでは、この条件文について詳しくみていきましょう。

比較演算子

２つの値を比較するのに使用する記号のこと。
条件文を書くときに用いることで、その関係を正確な条件で判断するために欠かせない要素。

　> //より大きい
　< //より小さい
　>= //以上
　<= //以下
　== //等価
　!= //不等価
　=== //厳密な等価
　!== //厳密な不等価

　==(!=)
　と
　===(!==)

の２つの違いに注意

==、！＝

・値が等しいか（等しくないか）をチェックするが、型が等しいか（等しくないか）はチェックしない。
・値の型が異なる場合は、型の変換を試みてから比較を行う。
・⇧のせいで意図しない結果になる可能性がある。

===(!==)

・値と型の両方が一致するか(一致しないか)を
チェックする

if文、else if、else

比較演算子を用いることで、ある値が特定の条件を満たすのか、または満たさないのかを判定することができる。

そして、それを用いて
「もし〜ならば、」（条件式）「〜する」(処理内容)
という与えられたデータに対して条件に応じた処理を行うのがif文の役割である。

if文

・if文では、()内の条件式が成り立つ場合に、{}内の処理が実行されます。
また、条件式が成り立たない場合はelseやelse if文を作成し、そちらの処理に移行するように記載します。

書き方：

if (条件式)　{
条件が成り立った場合、処理を実行する。
}

例：
・if（もし、1+1の結果が2だったら）
console.log(“正解です！”)を出力する。

if (1 + 1 === 2 ) {
	console.log("正解です！"); }

出力結果

正解です！

else if

・if文と一緒に使用する。
ifがもし、違ったらという条件式をifに繋げて記載する構文。複数の条件に応じた処理を指定できる。

例：
曜日を表す変数dayOfWeekに曜日を入力し、
その入力した曜日と合っていたらconsole.logを出力するif文。

const dayOfWeek = "Tuesday"

if (dayOfWeek === "Monday") {
	console.log("月曜日");
} else if {
	console.log("火曜日");
}

出力結果

火曜日

else

if、if elseで指定できなかった場合。
指定した条件以外の場合elseを指定すると、
それ以外という意味で{}内に記載した処理が実行される。

if (条件式) {
	// 条件が成り立った場合、処理を実行する。
} else if (条件式) {
	// ifの条件がfalseでelse ifの条件式がtrueの場合の処理を書く
} else {
	// if、else ifの条件式にいずれも当てはまらない場合の処理を書く。
}

例：

遊園地の料金設定のロジックを書いてみる！
0-5歳 ⇨ 無料
6-9歳 ⇨ 子供料金
10-64歳⇨ 大人料金
65歳以上 ⇨ シニア料金

年齢を表す変数ageに年齢を入力し、
その入力した年齢に応じた料金設定をconsole.logで出力するif文。
age=70は、if文もif else文もfalseになり、それ以外という意味でelseのconsole.log(“シニア料金なので1000円になります。”)が出力される。

const age = 70;

if (age < 5) {
	console.log('無料になります。');
} else if (age < 10) {
	console.log('子供料金なので1000円になります。');
} else if (age < 65) {
	console.log('大人料金なので2000円になります。');
} else { 	console.log('シニア料金なので1000円になります。'); }

出力結果

シニア料金なので1000円になります。

応用的な書き方

if文を入れ子（ネスト）で使う

if文の中にさらにif文を書くことで、入れ子にして条件分岐させることも可能。

if (条件式 A) {
	処理１
	if (条件式B) {
		処理２
	}
}

条件式Aが評価され、もし条件が成立した場合、処理１が実行される。
次に条件式Bが評価され、条件が成立した場合処理２を行う。

例：

ユーザーに出力したプロンプトに対して、
パスワードを入力してもらう。
しかし、そのパスワードは
・６文字以上。
・空白も含めてはいけない。

この場合下記のようにif文をネストすることで記載することができる。

1個目のif文で、パスワードの長さを確認し、
その長さが問題なければ、２個目のif文に入り、パスワードの空白を確認する。

const password = prompt('パスワードを入力してください。');

if (password.length >= 6) {
	if(password.indexOf(' ') === -1) {
		console.log('素晴らしいパスワードです。')
} else {
	console.log('パスワードは空白を含んではいけません。');
} else {
	console.log('パスワードが短すぎます。６文字以上にしてください。');
}

・論理演算子

式を複数組み合わせるときに使用する。
これを使用することで、複数のロジックを組み合わせて１つの結果を出すことができる。

・１、AND(&&）

and（&&）は複数の条件式が全てtrueの場合に結果がtrueになる。

if (条件式1 && 条件式2) {
  条件式1と2が両方ともtrueの場合実行される
}

aの値	bの値	a AND(&&) bの演算結果
true	true	true
true	false	false
false	true	false
false	false	false

例：

パスワードが6文字以上、かつパスワードに空白が含まれていないかを確認するロジックをand(&&)演算子を使って実現してみる。

const password = prompt('パスワードを入力してください。');

if (password.length >= 6 && password.indexOf(' ') === -1) {
		console.log('素晴らしいパスワードです。')
} else {
	console.log('パスワードのフォーマットが無効です。。');
}

password.length >= 6 && password.indexOf(' ') === -1)

&& で繋ぐことで、上記のようにすっきりと書くことができる。

・２、OR(||)

or(||) は複数の条件式で１つ以上のtrueである場合に結果がtrueとなる。

if (条件式1 || 条件式2) {
  条件式1か2にtrueが存在する場合実行される
}

aの値	bの値	a OR(｜｜) bの演算結果
true	true	true
true	false	true
false	true	true
false	false	false

例：
遊園地の料金設定のロジックを書いてみる！
0-5歳 ⇨ 無料
6-9歳 ⇨ 子供料金
10-64歳⇨ 大人料金
65歳以上 ⇨ 無料

年齢を表す変数ageに年齢を入力し、
その入力した年齢に応じた料金設定をconsole.logで出力するif文を記載。

const age = 70;

if (age < 5 || age >= 65) {
	console.log('無料になります。');
} else if (age < 10) {
	console.log('子供料金なので1000円になります。');
} else if (age < 65) {
	console.log('大人料金なので2000円になります。');
}

//無料になります。

age < 5 || age >= 65
と入力することで、5歳未満もしくは、65歳以上をor(||)演算子を使って実現している。

・３、NOT（!）

not（!） は複数の式を組み合わせて使用するのではなく、
条件式の結果を逆にします。条件式がtrueの場合falseを、falseの場合trueを返します。

if (!条件式) {
  // 条件式がfalseの場合、trueになり実行される
}

aの値	Not(!) aの演算結果
true	false
false	true

例：
遊園地の料金設定のロジックを書いてみる！
0-5歳 ⇨ 無料
6-9歳 ⇨ 有料
10-64歳⇨ 有料
65歳以上 ⇨ 無料

0歳以上かつ（and &&演算子）5歳まで、または（or ||演算子） 65歳以上
ではない 人は有料に設定するロジック。

const age = 30;
if (!(age >= 0 $$ age <5 || age >= 65)) {
	console.log('有料です');
}

出力結果

有料です

まとめ

条件分岐は様々なところで使われ、or、and、notなどを複数組み合わせて使用することも珍しくありません。

なので、一つ一つをしっかりと理解していないことで、組み合わせるときにどれがどういった働きをするのかわからずに混乱してしまうことがありました・・・

今回まとめ、改めて一つ一つの働きを明確化することができ、これを見返せば再度わからなくなったときにも見返すことで思い出せるように、まとめることができたと思います。

この記事が、自分のようなわからないときに見返すための一助となれば幸いです。

条件分岐 if文、else if、else、論理演算子[JavaScript]

目次：

条件分岐

比較演算子

==、！＝

===(!==)

if文、else if、else

if文

書き方：

else if

else

応用的な書き方

if文を入れ子（ネスト）で使う

・論理演算子

・１、AND(&&）

・２、OR(||)

・３、NOT（!）

まとめ