【5分レッスン】JavaScript超入門コース#10 条件分岐

はじめに

こんにちは。キノコードです。
「【5分レッスン】JavaScript超入門コース#10 条件分岐」について説明します。

分岐処理とは?

レッスン4「プログラムの基本構造」で説明しましたが、プログラムの基本的な動きは「順次進行」「条件分岐」「繰り返し」の3つです。
この動画では、「条件分岐」について説明します。
条件分岐とは、条件に合致する場合は「処理A」、そうじゃないときは「処理B」ということができます。

if文

条件分岐の代表例が、if文です。
JavaScriptでのきまりをみてみましょう
ifに続けて、「条件」を丸括弧の中に書きます。
波括弧の中に「条件を満たしたときの処理」を書いてセミコロン。この行は、インデントをひとつ右にずらして書きます。
波括弧は省略することができます。
しかし、波括弧があったほうが、プログラムの可読性をあげることができます。
つまり、プログラムが読みやすくなり、ミスを減らし、作業効率をあげることができます。
波括弧は省略しないことをおすすめします。
実際にコードを書く前に、どのようなコードを書くか説明します。
ageという変数の値が20歳以上なら大人という意味のadultと表示させて、20歳未満なら子供という意味のchildと表示させるといった処理を書きます。
まずは、ageという変数の値が20歳以上なら大人という意味のadultと表示させる処理を書いてみましょう。

var age = 22;
  
if (age >= 20) {
  console.log("adult");
}  

年齢という意味のageという変数に「22」という数値を代入しました。
if文の条件にageが20以上と記述します。
22は、20以上です。条件を満たすので、「adult」が表示されるはずです。
実行してみましょう。adultが表示されました。

var age = 18;
  
if (age >= 20) {
  console.log("adult");
}  

次に、ageという変数に「18」を代入してみましょう。
条件を満たさないので、何も表示されないはずです。実行してみましょう。
何も表示されませんでした。

if ~ else文

次に、if ~ else文についてみていきましょう。
先ほどみたように、ただのif文は、条件を満たさないとき、処理されずプログラムが終わります。
一方、if ~ else文は、条件を満たさないときの処理を記述・実行することができます。
if ~ else文の JavaScript のきまりをみてみましょう。
先程のif文のあとに、elseと書きます。
elseのあとに波括弧。波括弧の中に、条件を満たさないときの処理を書きます。この行も、インデントをひとつ右にずらして書きます。
コードを書いてみましょう

var age = 18;

if (age >= 20) {
  console.log("adult");
} else {
  console.log("child");
}

ageに代入する数値を18とします。if文の条件は先ほどと同じように、20歳以上とします。
else以降に子供という意味の「child」を表示させる処理を書きます。
18は、20以上の条件を満たさないので、「child」が表示されるはずです。
実行してみましょう。
else以下の処理が実行されて「child」が表示されました。

var age = 22;

if (age >= 20) {
  console.log("adult");
} else {
  console.log("child");
}

ageに「22」を代入して実行してみましょう。
今度は条件を満たすので「adult」が表示されました。

if ~ else if ~ else文

もう一つ条件を加えたい場合に使うのが、if ~ else ifです。
JavaScript でのきまりをみてみましょう。
先程の条件Aのif文のあとに、elseと半角スペース。次にifと書いて丸括弧内に2つめの条件Bを書きます。
次の行に、「条件Bを満たしたときの処理」を書いてセミコロン。この行も、インデントをひとつ右にずらして書きます。
それでは、コードを書いてみましょう

var age = 0;

if (age >= 20) {
  console.log("adult");
} else if (age==0) {
  console.log("baby");
} else {
  console.log("child");
}

20歳以上なら「adult」、0歳なら「baby」、それ以外なら「child」というような記述をします。
elifのところに、ageが0だった場合の処理を記述します。
ageの変数に「0」を代入します。
ageは0なので、babyが表示されるはずです。
実行します。babyと表示されました。

確認問題

最後に確認問題です。
演算子のところで勉強した論理演算子を使って条件式のところに5以上10未満という条件を記述しましょう。
そして変数に7と12を代入して予想通りの実行結果になるか試してみましょう。
var age = 7;

if (age >= 5 && age < 10) {
  console.log("5以上10未満");
} else {
  console.log("それ以外");
}
それでは、解答です。
条件式のところに、5以上10未満という条件を書きます。
条件を満たした場合、「5以上10未満」と表示させました。
条件を満たさない場合、私は「それ以外」と表示させるような記述をしました。
それでは実行してみましょう。
条件を満たすので、「5以上10未満」が表示されました。
var age = 12;

if (age >= 5 && age < 10) {
  console.log("5以上10未満");
} else {
  console.log("それ以外");
}
12を代入してみます。
「それ以外」が表示されました。

KinoCode チャンネル

YouTubeで毎日動画配信しています。
動画は3分間なので、
 ・通勤時間
 ・お昼休み
 ・お手すきのとき
 ・寝る前
など手軽に視聴できます。
 
ちょっとしたインプットにどうぞ!
 
▼チャンネル登録はこちらからどうぞ。