【JavaScript超入門コース】10.条件分岐｜条件にあてはまればAという処理、あてはまらなければBという処理ができます！【プログラミング初心者向け入門講座】

この記事の執筆・監修

キノコード

テクノロジーアンドデザインカンパニー合同会社のCEO。
日本最大級のプログラミング教育のYouTubeチャンネル「キノコード」や、プログラミング学習サービス「キノクエスト」を運営。
著書「あなたの仕事が一瞬で片付くPythonによる自動化仕事術」や、雑誌「日経ソフトウエア」や「シェルスクリプトマガジン」への寄稿など実績多数。

はじめに

こんにちは。キノコードです。
「【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と表示されました。

var age = 7;

if (age >= 5 && age < 10) {
  console.log("5以上10未満");
} else {
  console.log("それ以外");
}

var age = 12;

if (age >= 5 && age < 10) {
  console.log("5以上10未満");
} else {
  console.log("それ以外");
}