自主学習3-3「JavaScript実践（条件分岐-if文と真偽値）」

2020年10月2日 2020年10月26日

鷹の目ゴミコ

前回の「自主学習3-2」に引き続き、今回もJavaScript実践編をお送り致します。

contents

1 条件分岐とは
2 条件分岐（if文）
3 真偽値について
4 比較演算子と真偽値
- - 4.0.1 比較演算子の種類

条件分岐とは

条件分岐とは「ある条件が成り立つときだけ、ある処理を行う」というプログラムについてを指します。

条件分岐（if文）

「もし〇〇なら●●を行う」という条件分岐を指示する場合、if文を用いて処理を記述します。

point!!

if文を記述する際にはインデント（字下げ）を用いて、ifの処理がどこからなのか一目でわかるよう、コードを見やすく記述しましょう。

実践

const level = 12;

if(level>10){
  alert("あなたのレベルは10以上です");
}
//コードをコピペして下のエディタから出力結果を確認してみよう。

コード解説

１、constで定数を宣言する。定数levelに「12」を代入する。

２、もしlevelが10より大きい値なら

３、「あなたのレベルは10以上です」とダイアログに文字列を出力する。

処理結果について

定数宣言後に定数levelへ「12」を代入しているので、if文を記述した時点でのlevelの中身は数値の「12」です。12は10よりも大きい値なので（if文で指定した条件に当てはまるので）指定した文字列が出力されます。

試しに代入する数値を10より小さい値に書き換えてみましょう。この場合は数値が条件に当てはまらない（10より大きくない）ので、文字列は出力されません。（ダイアロボックスが立ち上がりません）

真偽値について

const level = 12;

if(level>10){
  alert(level>10);
}
//コードをコピペして下のエディタから出力結果を確認してみよう。

次は、先ほどのif文の条件式の部分をダイアロボックスに出力するコードを記述してみます。実行を押すと「true」という文字列が出力されますね。

ゴミコ

コード内で文字列「true」を記述していないのに、勝手に出力されたわ。何これ？

この「true」は真偽値と呼ばれるもので、他に「false」が存在します。真偽値は「true」と「false」の二種類しか存在せず、条件式が成り立てば「true」、成り立たなければ「false」という結果が返ってきます。

比較演算子と真偽値

先ほどの条件式に使った「大なり(>)」は比較演算子と呼ばれる大小比較の記号です。大小比較以外にも、左と右の値が等しいのか、異なるのかを調べる「等価 (==)」「不等価 (!=)」と呼ばれる比較演算子もあります。この比較演算子をコード内で記述することで、左右の値を比較し、結果を真偽値で確認することができます。

比較演算子の種類

左の値をa、右の値をbとした場合の例

等価 (==)	aとbの値が等しい	`1 == 1`	`true`
不等価 (!=)	aとbの値が異なる	`1 != 2`	`true`
一致 / 厳密等価 (===)	aとbの値と型が等しい	`3 === 3`	`true`
不一致 / 厳密不等価 (!==)	aとbの値と型が異なる	`4 !== 3`	`true`
大なり演算子 (>)	aはbより大きい	`4 > 3`	`true`
大なりイコール演算子 (>=)	aはbより大きいまたは等しい	`4 >= 3`	`true`
小なり演算子 (<)	aはbより小さい	`3 < 4`	`true`
小なりイコール演算子 (<=)	aの方が小さいまたは等しい	`3 <= 4`	`true`