Javascript 基本初心者

さあ①で簡単なJavascriptの基本を学んできましたが、今回はプログラミングの肝とも言える条件分岐などを学んでいきましょう。

条件分岐

条件分岐

if文

if文を用いると「もし〜ならば○○を行う」という条件分岐ができます。ifの後ろに条件式を書き、その条件式が「成立する」場合の処理を{ }の中に記載します。
文字で説明ばかりしてもわかりづらいので、まずはサンプルコードを見てみましょう。

//script.js

const age = 21;

if(number > 20){
  console.log("20歳以上です。");
}

(number > 20)　→　条件式
console.log(“20歳以上です。”);　→　条件式を満たす場合の処理

インデント

上記の例でconsole.logの前に半角スペースが２つ入っています。
日本語で言うと「字下げ」といい、こちらをインデントと呼び、ソースを見易くします。

真偽値

先ほどさらっと「条件式を満たす場合の処理」と記載しましたが、条件を満たす満たさないとはどういった意味でしょうか。
プログラミングにおいて基本的に条件を満たす場合というのは真偽値で判断します。
満たす場合はtrue、満たさない場合はfalseとなる値を真偽値（Boolean型）といいます。
以下に、サンプルを記載します。

//script.js

const number = 21;
console.log(number > 20)

//console出力結果
true

//script.js

const number = 18;
console.log(number > 20)

//console出力結果
false

真偽値についてはご理解いただけましたでしょうか。
こちらがtrueの場合はif文の中が実行され、falseの場合は実行されないということになります。

比較演算子

条件式に使った「>」は比較演算子と呼ばれる、大小比較の記号です。
「a < b」は、aの方がbより小さい場合true, 大きい場合falseとなります。
また「a <= b」とすると、aの方がbより小さいまたは等しい（つまりb以下）場合trueになります。つまり数学で用いる「≦」という記号と同様の意味です。

a < b ・・・aはbより小さい
a <= b ・・・aはb以下
a > b ・・・aはbより大きい
a >= b ・・・aはb以上

比較演算子には、左と右の値が等しいかの判断もできます。
「a === b」はaとbが等しい場合true、等しくない場合falseになります。
「a !== b」はその逆です。
この記号は数値だけでなく、文字列同士の比較にも使用できます。

//script.js

const password = "P@ssw0rd";

if(password === "P@ssw0rd"){
  console.log("ログインに成功しました");
}

else【if文の条件式が成り立たない場合】

if文の条件式が成り立たない場合に、別の処理を行いたい場合があります。
if文に「else」を組み合わせると「もし（ifの条件分）なら●●を行う、そうでなければ○○を行う」という処理ができます。
if文の条件がfalseの場合、elseの処理が実行されます。

//script.js

const password = "P@ssw0rd";

if(password === "P@ssw0rd"){
  console.log("ログインに成功しました");
} else{
  console.log("パスワードが間違っています");
}

else if 【条件の追加】

ifとelseだけでなく、さらに条件を追加したい場合の方法を紹介していきます。
ifとelseの間に「else if (条件式)」を追加して、if文に条件分岐を追加することができます。

//script.js

const age = 21;

if(age >= 30){
  console.log("30歳以上です");
} else if(age >= 20){
  console.log("20歳以上です");
} else{
  console.log("未成年です");
}

複数の条件式を組み合わせる

&& 【かつ】

複数の条件を組み合わせる方法を学びましょう。まずは「かつ」についてです。「かつ」は「&&」で表します。「条件1 && 条件2」は「条件1かつ条件2」という意味で、複数の条件がすべてtrueならtrueになります。

true && true -> true
true && false -> false
false && true -> false
false && false -> false

|| 【または】

「または」は「||」で表します。「条件1 || 条件2」は「条件1または条件2」という意味です。この場合は、複数の条件のうち1つでもtrueならtrueになります。

true || true -> true
true || false -> true
false || true -> true
false || false -> false

switch文

if文以外の条件分岐の方法として、switch文というものがあります。
例えば、信号機の色を表す定数colorの値によって処理を分岐したい、という例です。このように、ある値によって処理を分岐する場合にswitch文を用いることができます。
「switch(条件の値){ 処理 }」としてswitch文をかけます。

//script.js

const color = "red";

switch(color){
  case "red":
    console.log("Stop!!");
    break;
  case "yellow":
    console.log("warning!!");
    break;
}

また、switch文ではbreakが非常に重要です。breakとはswitch文を終了する命令です。breakがないと、合致したcaseの処理を行った後、その次のcaseの処理も実行してしまいます。そのため、switch文を使うときにはbreakを忘れないように気をつけましょう。

default

switchの条件の値がcaseの値と一致したとき、その部分の処理が実行されます。caseのどれにも一致しなかった時、defaultのブロックが実行されます。defaultはif文のelseに似たようなものです。

//script.js

const color = "black";

switch(color){
  case "red":
    console.log("Stop!!");
    break;
  case "yellow":
    console.log("warning!!");
    break;
  default:
    console.log("Bad color!!");
    break;
}