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

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

条件分岐とは

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

条件分岐(if文)

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

point!!

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

関連記事

実践

const level = 12;

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

コード解説

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

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

3、「あなたのレベルは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 == 1true
不等価 (!=)aとbの値が異なる1 != 2true
一致 / 厳密等価 (===)aとbの値と型が等しい3 === 3true
不一致 / 厳密不等価 (!==)aとbの値と型が異なる4 !== 3true
大なり演算子 (>)aはbより大きい4 > 3true
大なりイコール演算子 (>=)aはbより大きい
または等しい
4 >= 3true
小なり演算子 (<)aはbより小さい3 < 4true
小なりイコール演算子 (<=)aの方が小さい
または等しい
3 <= 4true
MDNwebdocsより引用
ゴミコ
不等価だと「異なっている」場合に「true」になるの、慣れないうちは混乱するわね。
関連記事データ型についての関連記事はコチラ
ゴミコ
if文で条件式が成り立つ場合(true)と、そうでない場合(false)で、その後の指示を分岐させることができる…というわけだね。

次回の記事

にほんブログ村 IT技術ブログへ
にほんブログ村