【誰でもわかる！】条件分岐とは

2020年8月12日2020年11月1日

プログラミングを勉強していく中でとても大事になってくるのが条件分岐です。
ゲームでの当たり判定など条件分岐はとてもよく使われるものです！

今回は主にJavascriptの条件分岐について詳しく書いていきますが、ほかの有名なプログラミング言語でも共通するものがほとんどだと思いますので、ぜひ参考にしてください！

---

その前に…

---

条件分岐とは

では実際に条件分岐とは何でしょうか？

実は条件分岐は実生活の中でもよく使われています。

例えば…

もし次の授業が体育なら、体操服に着替えて体育館に行く。
それ以外でもし次の授業が美術なら、美術室に行く。
それ以外は自分の教室に行く。

この、「もし～ならば～をする、それ以外にもし～ならば～をする、それ以外は～をする。」が条件分岐というものです。

Javascriptの条件分岐には、if文とswitch文という二つの書き方がありますが、まずはif文の説明からしていきたいと思います。

---

if文とは

「if」とは日本語で「もし」となることからも分かるかもしれませんが、先ほどの例が実はif文になっています。

もし次の授業が体育なら、体操服に着替えて体育館に行く。
それ以外でもし次の授業が美術なら、美術室に行く。
それ以外は自分の教室に行く。

こちらの一文目だけをJavascriptのコードっぽく書いてみると…

もし次の授業が体育なら、体操服に着替えて体育館に行く。

if ( 次の授業 == “体育"){
　　着替える;
　　体育館に行く;
}

のようになります。（「;」は日本語でいう「。」と同じです。）

イコールが2つになっていますが、これはプログラムの書き方で決まっていて、意味としては1つでも同じです。
（よくこのイコールを2つ書き忘れて、エラーが出ることが多いので忘れないようにしましょう。）

コードの説明が要らないほど、日本語をそのままコードにしただけですね。次の授業が体育ならば、{ } のなかを実行するといった形です。

そして先ほどの例の2文目をコードにしようとすると、「それ以外で」という言葉がついているように、書き方が少し変わってきます。

2文目以降をコードっぽく書くとすると、「else」という、「それ以外」という意味のものを使い、

もし次の授業が体育なら、体操服に着替えて体育館に行く。
それ以外でもし次の授業が美術なら、美術室に行く。
それ以外は教自分の教室に行く。

if ( 次の授業 == “体育") {
　　着替える;
　　体育館に行く;
} else if ( 次の授業 == “美術") {
　　美術室に行く;
} else {
　　自分の教室に行く。
}

となります。

上の通り、「else」というのを使うと、else if（＝それ以外でもし）と else（それ以外は）といった2つの書き方ができることがわかります。

ではここから実際に変数を使って、Javascriptのコードを書いて見ます。
結果がどのようになるか考えてみましょう！

let age = 20;
if ( age >= 20) {
　　「OK」と表示する;
} else if (age >= 10) {
　　「OUT」と表示する;
} else {
　　何もしない;
}

ヒント：「>=」は「大なりイコール」、「≧」と同じです。

答えは、「OK」と表示されます。ageが20のため、一つ目のifの中が実行されて、「OK」と表示されます。

ではもし一文目のageが違う値だったらどうでしょうか？

let age = 15;
if ( age >= 20) {
　　「OK」と表示する;
} else if (age >= 10) {
　　「OUT」と表示する;
} else {
　　何もしない;
}

答えは…

「OUT」と表示されます。

ageが20以上ではないけど、10以上ではあるため、else ifの中に書いてあることが実行されますね。

if文の基本的な内容は以上です。
次に少し発展的な、if文のなかにif文を入れるということを考えてみましょう。

---

if文のなかにif文を入れる

次のコードを見てください。

let a = 10;
if (a >= 10) {
　　if ( a >= 15) {
　　　　「OK」と表示する;
　　}
}

これを実行したら結果はどうなるでしょうか？

答えは…

何も表示されない　です。

aが10以上ですが、15以上ではないため、二つ目のifの中は実行されませんね。
ifの中にifが入ってくると少しわかりずらくなってくるかもしれませんが、日本語にして考えてみるなどすると分かりやすくなるかもしれません！

if文の説明はここまでです！
次にswitch文について説明します！

---

switch文とは

switch文を説明する前に、次のif文を見てください。

if ( 次の授業 == “体育") {
　　着替える;
　　体育館に行く;
} else if ( 次の授業 == “美術") {
　　美術室に行く;
} else if ( 次の授業 == “国語") {
　　三年二組の教室に行く;
} else if ( 次の授業 == “数学") {
　　三年三組の教室に行く;
} else if ( 次の授業 == “英語") {
　　三年一組の教室に行く;
} else {
　　自分の教室に行く;
}

このコードは次の授業に応じていく教室を決めていますが、else ifをたくさん使っていて、非常に見にくいですよね。また、書くのが大変です。（現に私が疲れました笑）

そんな時に使えるのが、switch文です。

実際に、先ほどの例をswicth文にしました。

switch (次の授業) {
　　case “体育":
　　　　体育館に行く;
　　　　break;
　　case “美術":
　　　　美術室に行く;
　　　　break;
　　case “国語":
　　　　三年二組の教室に行く;
　　　　break;
　　case “数学":
　　　　三年三組の教室に行く;
　　　　break;
　　case “英語":
　　　　三年一組の教室に行く;
　　　　break;
　　default:
　　　　自分の教室に行く;
}

このようにすると見やすくなりましたね！

一つ一つ説明していきますね！

では最初の

switch (次の授業)

の部分では、次の授業を確認するということです。
次の次の授業が何かを判別したければここを「次の次の授業」にすればよいですね。

そして次の

case “体育":
　　体育館に行く;
　　break;

というのは、次の授業が、体育だった時に行うことを書いています。
break というのは、「処理がここまでですよー」といった目印だと思って大丈夫です！

（よくある間違いで、 case “体育" :　の 「:」がコロンというのですが、「;」セミコロンと間違う場合があるので注意しましょう。また、「break;」の書き忘れもよくあるので忘れないように書きましょう！）

美術、国語、数学、英語の時は体育と同じ書き方ですね！

そして最後の

default:
　　自分の教室に行く;

というのは、次の授業が今までのどれにも当てはまらなかった時の処理です。
if文でいう「else」（＝それ以外）ですね！
（ここではbreakは要りません！）

switch文の構造が分かったところで、一つコードを書いて見ますので、結果がどうなるか予想してみましょう！

let a = 5;
switch ( a ) {
　　case 4:
　　　　「OK」と表示する;
　　　　break;
　　case 5:
　　　　「OUT」と表示する;
　　　　break;
　　default:
　　　　「SAFE」と表示する;
}

答えは…

「OUT」と表示されます。

aが5なので、5の時の処理がされますね！

---

これであなたも条件分岐マスター！

今回学んだことで条件分岐の基礎は完璧です！

if文にif文が入ってきたりすると、少し紛らわしいかもしれませんが、落ちついて考えると案外簡単かもしれません！

また、たくさんのif文を書くより、swicth文を使うとすっきりすることがよくあるので、場合に応じて使い分けられるようになりましょう！

---