DESIGNMAP

  1. TOP
  2. 公開講座
  3. ゼロから始めるJavaScript入門
  4. 条件分岐 ー ゼロから始めるJavaScript入門(ECMAScript 2015)【Vol.5】

条件分岐 ー ゼロから始めるJavaScript入門(ECMAScript 2015)【Vol.5】

今回は条件分岐を学んでいきます。JavaScriptではif文とswitch文が用意されています。

Atomで新規ファイルをつくり「文字列型 ー ゼロから始めるJavaScript入門(ECMAScript 2015)【Vol.2】」で作った「js-study」フォルダ内に、「if1.html」というファイル名で保存します。

下記のコードを書き保存します。

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title></title>
  </head>
  <body>
    <script>
      var num = 30;
      if (num % 2 === 0){
        console.log(`${num}は偶数です。`);
      } else {
        console.log(`${num}は奇数です。`);
      }
    </script>
  </body>
</html>

Google Chromeで「if1.html」を開き、JavaScriptコンソールをみると

30は偶数です。

と出力されれば成功です。

if else

if else文は以下のような書式です。

if (条件式) {
    条件式がtrueの時に実行される
} else {
    条件式がfalseの時に実行される
}

{}をブロックといいます。if else文は条件式の結果に応じて、どちらかのブロックのコードが実行されます。

%演算子の回で学びました。割り算の余りを取得できます。===も演算子の回で学びました。等価演算子です。両辺のデータ型と値が等しければtrueを返し、そうでなけれなfalseを返します。

偶数は2で割ると、あまりはゼロになります。
つまり条件式は0 === 0という状態になります。===は両辺をみて、trueを返します。

console.log(`${num}は偶数です。`);はテンプレートリテラルを使って、変数と文字列を結合させています。テンプレートリテラルは「文字列型の回」で学びました。

numの値を29に変更して、保存してGoogle Chromeを更新すると、今度は「29は奇数です。」が出力されます。

var num = 29;
if (num % 2 == 0){
  console.log(`${num}は偶数です。`);
} else {
  console.log(`${num}は奇数です。`);
}
29は奇数です。

入れ子のif

ifブロックの中に、別なif文を入れることができます。

下記のコードを「js-study」フォルダ内に、「if2.html」というファイル名で保存します。
コードは<script>以前、</script>以降のコードは「if1.html」と同じなので省略しています。実際は記入が必要です。

var num = 48;
if (num % 2 == 0){
  if (num >= 50){
    console.log(`${num}は偶数で50以上の数字です。`);
  } else {
    console.log(`${num}は偶数で50未満の数字です。`);
  }
} else {
  console.log(`${num}は奇数です。`);
}

Google Chromeで「if2.html」を開き、JavaScriptコンソールをみると

48は偶数で50未満の数字です。

と出力されれば成功です。

入れ子のif文は読みにくいので、使うときは注意が必要です。せいぜい二重の入れ子までにおさえるようにしてください。三重以上の入れ子になると、コードの可読性は下がります。

if else if

条件式は複数設定することも可能です。
下記のコードを「js-study」フォルダ内に、「if3.html」というファイル名で保存します。
コードは<script>以前、</script>以降のコードは「if1.html」と同じなので省略しています。実際は記入が必要です。

var num = 28;
if (num < 10){
  console.log(`${num}は10未満の数字です。`);
} else if (num >= 10 && num < 30 ) {
  console.log(`${num}は10以上30未満の数字です。`);
} else {
  console.log(`${num}は30以上の数字です。`);
}
28は30以上の数字です。

最初の条件式(num < 10)trueを返せば、console.log(`${num}は10未満の数字です。`);が実行され、if文の外側にぬけます。

最初の条件式がfalseを返すと、(num >= 10 && num < 30 ) の条件式が実行されます。trueを返せば、 console.log(`${num}は10以上30未満の数字です。`);が実行されます。falseを返せば、console.log(`${num}は30以上の数字です。`);が実行されます。

if else if文も、実行されるブロックはひとつだけです。
各ブロックの処理がおわると、if文の外側に処理が移ります。今回はif文の外側は文がもうないので、一番下に処理が移るという意味でとらえてください。

&&は、演算子の回をご覧ください。&&は両辺がtrueのときに、trueを返します。

if else if 文は、条件式の順番に注意しよう

例えば、2の倍数でTWO、3の倍数でTHREE、2と3共通の倍数でTWOTHREEを出力するようなプログラムをかいてみましょう。
うっかり下記のように書いてしまうと、

var num = 12;
if (num % 2 === 0){
  console.log("TWO");
} else if (num % 3 === 0) {
  console.log("THREE");
} else if (num % 6 === 0) {
  console.log("TWOTHREE");
}
TWO

という結果になります。12は2と3共通の倍数なので、TWOTHREEを出力したかったのです。ところが、最初の条件式num % 2 === 0で、trueを返してしまうので、if文自体がこれで打ち切りになってしまうのです。

var num = 12;
if (num % 6 === 0){
  console.log("TWOTHREE");
} else if (num % 2 === 0) {
  console.log("TWO");
} else if (num % 3 === 0) {
  console.log("THREE");
}
TWOTHREE

と書くとうまくいきます。条件式の順番には注意が必要です。

else if が何個も続くようなプログラムを見たら不吉な匂いを感じてください。

switch

JavaScriptでは条件分岐でswitch文も用意されています。

下記のコードを「js-study」フォルダ内に、「switch.html」というファイル名で保存します。
コードは<script>以前、</script>以降のコードは「if1.html」と同じなので省略しています。実際は記入が必要です。

var fruits = "いちご";

switch (fruits) {
  case "いちご":
    console.log("いちご");
    break;
  case "みかん":
    console.log("みかん");
    break;
  default:
    console.log("その他のフルーツ");
    break;
}

処理結果

いちご

switch文は以下のような書式です。

switch (式) {
    case 値1:
        式と値1が等しければ実行される
        break;
    case 値2:
        式と値2が等しければ実行される
        break;
    default:
    	上記が
    	break;
}

まず式が実行され、case句のデータ型と値が等しいときに、case句の次の文が実行されます。どれも等しくないときに、default句が実行されます。

caseは何個でも設定できます。

注意しないといけないのは、breakの記述です。if文のときは、ブロックのどれかが実行されると、if文の外側にぬけました。つまり一つだけのブロックだけが実行されました。switch文は自動でぬけません。

下記のように書いてしまうと、

var fruits = "いちご";

switch (fruits) {
  case "いちご":
    console.log("いちご");
  case "みかん":
    console.log("みかん");
  default:
    console.log("その他のフルーツ");
}
いちご
みかん
その他のフルーツ

とすべてのcase句の文が実行されていまします。breakは、if文の外側にぬける役割を果たします。

プログラムによってはわざと一部のbreakをいれない場合もあります。

var item = "いちご";

switch (item) {
  case "いちご":
  case "みかん":
  case "ぶどう":
    console.log("フルーツです。");
    break;
  default:
    console.log("その他のアイテムです。");
    break;
}

item変数に、いちご、みかん、ぶどうのどれかが代入されていれば、console.log("フルーツです。");が実行されます。

筆者は、まったくswitch文は使いません。条件分岐はif文で書いています。

三項演算子

三項演算子は条件演算子とも言われます。一行でif else 文を書くことができます。

var num = 40;
str = (num > 50) ? "50より大きい" : "50より小さい";
console.log(str);

出力結果

50より小さいです
(条件式) ? 式1 : 式2

という書式で条件式がtrueを返す時に、式1が実行され、falseを返す時に、式2が実行されます。

str = (num > 50) ? "50より大きい" : "50より小さい";

今回は式2が実行され、式2の実行結果がstr変数に代入されます。

三項演算子の使用は賛否両論があります。ただ実際のコードで出てくるので、コードを読むために学びました。

スポンサーリンク

関連記事

プロフィール

DESIGNMAP
制作ディレクター。フリーランス。
ON VISITING」を運営。
お問い合わせ