【JavaScript】条件分岐【基本講座】

JavaScriptにおいても条件分岐は必須でしょう。多くのプログラムは、条件分岐とループ、配列、演算で成り立っているからです。そのため重要な文法のひとつである条件分岐をマスターしてJavaScriptを自在に操れるようになりましょう。

条件分岐の基本

if

条件分岐と言えば、すぐに思いつくのは、ifではないでしょうか？JavaScriptにおいてもその通りで、他の言語と同じように扱うことができます。C/C++を学んだ人には。同じように書けるので理解しやすいかもしれません。

例題を見てみましょう。

問．xが5以上のとき、xの値を表示せよ。

let x = 6;

if(x >= 5){
    console.log(x);
}

let x = 6;

if(x >= 5){

console.log(x);

}

if文の書き方は、最後の表示の書き方がC/C++と違うところ以外同じですよね？
Pythonからプログラミングの学習を始めた人には、「｛｝」波括弧でブロックを囲っているのが、戸惑うとこでしょうか。

if else

先ほどまでは、条件が真であったなら、ブロック内を実行するというプログラムでした。では、次に条件が偽であったとき、別のブロックを実行させたい時は、どう書いたらいいのか考えてみましょう。
これもC/C++と同じ書き方で、elseを使えば良いだけです。

問．xが5以上のとき、xの値を表示せよ。また、それ以外のときは、「5未満です。」と表示せよ。

let x = 6;

if(x >= 5){
    console.log(x);
}else{
    console.log("5未満です。");
}

let x = 6;

if(x >= 5){

console.log(x);

}else{

console.log("5未満です。");

}

論理演算子で範囲指定する

次のような問題の時、どう書くでしょうか？

問.xが5以上10未満のとき、xの値を表示せよ。

let x = 10;

if(x >= 5){
   if(x < 10){
       console.log(x);
   }
}

let x = 10;

if(x >= 5){

if(x < 10){

console.log(x);

}

これは、何というかスマートではありません。論理演算子を使えばスッキリ書くことができます。

let x = 10;

if(x<=5 && x<10){
    console.log(x);
}

let x = 10;

if(x<=5 && x<10){

console.log(x);

}

「xが5以上10未満のとき」は「xが5以上かつ、10未満のとき」ということですので、and演算である「&&」を使いましょう。

では、次の例題はどう解きますか？

問.xが5未満か10超えのとき、xの値を表示せよ。

let x = 10;

if( x>=5 || x<10 ){
   console.log(x);
}

let x = 10;

if( x>=5 || x<10 ){

console.log(x);

}

「xが5以上か10未満のとき」ということですので、or演算である「||」を使いましょう。

演算子まとめ

大事なところなのでもう一度書いておきましょう！

演算子の種類	演算子	内容
算術演算子	+	加算
	–	減算
	*	乗算
	/	除算
	%	剰余
	**	累乗
比較演算子	==	等しい
	!=	等しくない
	===	型と値が等しい
	!==	型と値が等しくない
	>	より大きい
	<	より小さい
	>=	以上
	<=	以下
論理演算子	!	NOT
	&&	AND
	\|\|	OR
代入演算子	=	代入
	+=	加算代入
	-=	減算代入
	*=	乗算代入
	/=	除算代入
	%=	剰余代入
	**=	累乗代入
インクリメント演算子
デクリメント演算子
文字列結合演算子

switch文は便利？

switch文は、複数の場合分けする時に便利です。いちいちif文を書いていくのも面倒に思えると思います。

例えば、次のようなおみくじプログラムではその恩恵を受けることができるのではないでしょうか？

let n = Math.round(Math.random() * 3);

console.log(n);

switch(n){
case 1:
  console.log("大吉");
  break;
case 2:
  console.log("中吉");
  break;
case 3:
  console.log("小吉");
  break;
default:
  console.log("凶");
  break;
}

let n = Math.round(Math.random() * 3);

console.log(n);

switch(n){

case 1:

console.log("大吉");

break;

case 2:

console.log("中吉");

break;

case 3:

console.log("小吉");

break;

default:

console.log("凶");

break;

}

乱数で0～3までの整数値をnに代入して、それをswitch文で判定しています。
defaultはcase 1～case3までのどれでもない数。つまりここでは0の時、ここへ来ます。if文でいうところのelseのような意味合いですね。
switch文の処理は、上から順に行われます。条件を満たすcaseのとこで処理され、breakを入れることでswich分から抜けることができるのです。もし、breakを入れないとさらに下のcaseの判定を受けることになります。忘れずに入れましょう。

【おもしろJavaScript】条件式はboolean型

ここまで読み進めてきて、うすうす勘付いてる人もいるのではないでしょうか？if文の条件式は、boolean型の変数です。条件を満たす「True」、条件を満たさない「False」と表現できます。

そのため、このような書き方も通ります。

let n = i <= 10

1	let n = i <= 10

見にくいかもしれませんが、問題ありません。
=より<=の方が優先度が高いため（）丸括弧しなくても実行時、バグることはありません。

JavaScriptおすすめ書籍

JavaScriptの入門書は、「これから学ぶ～」が分かりやすいです。その次に「Good Parts」をやることをおススメします。これは、JavaScriptのテクニック的な参考書で実践に使えます。他、有名なサイの本もありますが、これは、そこまで必須ではないかもしれません。「The Good Parts」で良いかなと思える感じです。主に初学者用にチョイスしました。良かったら読んで見てください。