JavaScript | 8章：JavaScriptの条件分岐を学ぼう

INDEX

前の章に戻る次の章に進む

JavaScript | 8章：JavaScriptの条件分岐を学ぼう

この教材の学習時間:80分

本章では、JavaScriptの制御構文のひとつである条件分岐について学びます。

【8-1】プログラム処理の基本パターン

目安の学習時間:5分

・すべてのプログラムは入力と出力の関係で成り立っています。スタートとゴールと言い換えてもよいでしょう。

・電子レンジにたとえると、食品を庫内に置いてタイマーをセットするのがスタート、温まった食品を取り出すのがゴールです。スタートとゴールの間では、食品を加熱するなどの処理が行われます。

・ごはんのあたための加熱時間が2分、冷凍食品の解凍の加熱時間が5分だとしたら、設定された時間が経過したタイミングで加熱を終了しなければなりません。
→この流れを図にすると、以下のようになります。
　：このようなプログラムの処理の流れを図にしたものをフローチャートと呼びます。
　：矢印はプログラムの流れを表します。
　ひし形◇の図形は、プログラムの流れが分岐する場所を表します。

そして、ほとんどのプログラムの処理パターンは、以下の3つから成り立ちます。

順次

プログラムが実行されるときに、コードが書かれた順に上から処理を行います。安定した処理を行うための最も基本的なパターンです。

分岐

条件によってプログラムの実行内容を変え、結果を振り分ける処理パターンです。

反復

特定の処理を繰り返し実行するパターンです。

この順次、分岐、反復の処理を組み合わせながらプログラムの仕組みをつくっていくことが、プログラミングの基本です。

【8-2】if文の条件分岐を学ぼう

目安の学習時間:15分

・前章までで学んできたJavaScriptは、プログラムが記述された順番に上から1行目・2行目・3行目・・・と処理を実行する順次のパターンでした。

・Webページ制作の仕事では、例えば、フォームの入力状態の検証や、ユーザーの閲覧環境による処理の振り分けなど、複雑なインタラクションを実現するために、条件分岐と呼ばれるプログラムの処理が必要になるケースが多々あります。

・JavaScriptでは、条件分岐の処理を行うための制御構文として、大きく分類するとif文とswitch文の2つの制御構文が用意されています。

・まずはif文から解説していきます。
　※本教材では、分岐と条件分岐は同じ意味で使います。

★制御構文とは
分岐や反復などの複雑な処理パターンを実現するための書式のこと。

■ if文の基本構造

if文には以下の3つのパターンがあります。

★if文の３パターン
① if文（基本形もし〜だったら・・・する）
② else if文（別の条件を追加する）
③ else文（すべての条件にあてはまらない場合）

・この3つのパターンを① ② ③の順番で組み合わせてプログラムの分岐処理の流れを制御します。
・まずは基本的な条件分岐の書式である① if文を紹介します。

① if文（基本形もし〜だったら・・・する）

if文の使い方

if(条件式){
      条件式の判定がtrueの場合の処理内容;
    }

サンプルコード8-1

★サンプルコード8-1の解説
・trueとfalseは論理値（ブーリアン値）と呼ばれるデータ型で、このデータ型はtrue（真）とfalse（偽）の2つの値しか持ちません。
→trueは正しい、falseは間違いという意味と捉えて差し支えありません。
→正しく記述された条件式の判定結果は、条件にあてはまる（正しい）場合はtrue、条件にあてはまらない（間違っている）場合はfalseという論理値（ブーリアン値）を返します。
→if文は返ってきたその論理値を元に、処理の流れを分岐します。

・ブラウザにはJavaScriptを解析して実行するためのエンジンが内蔵されており、if文の条件式を判定します。
判定結果はtrue（真）またはfalse（偽）というどちらかの値で返します。
→返すというのはプログラミング用語ですが、処理結果が出るという意味を持つとともに、その結果がどこかで利用されるという技術的なニュアンスも含んでいる用語です。

・条件式の記述方法は後述しますが、「変数の中身が0だったら」「変数の中身が100以上だったら」「テキストボックスが空欄だったら」「特定のチェックボックスにチェックが入っていたら」のようなことを条件式で表現します。

・{ }内には「・・・する」の部分を記述します。

・( )内の条件式が「もし〜だったら」の部分を表します。

・if文の基本形では、「もし〜だったら・・・する」という構造が表現されます。

② else if文（別の条件を追加する）

else if文の使い方（別の条件を追加する）

if(条件式A){
      条件式Aの判定がtrueの場合の処理内容;
    }else if(条件式B){
      条件式Aの判定がfalseで、条件式Bの判定がtrueの場合の処理内容;
    }else if(条件式C){
      条件式A・Bの判定がfalseで、条件式Cの判定がtrueの場合の処理内容;
    }・・・・

サンプルコード8-2

★サンプルコード8-2の解説
・最初の条件にあてはまらないとき、別の条件を「else if」で追加することができます。
・上のサンプルコード8-2のように、複数のelse if を使い、条件を追加していくこともできます。

③ else文（すべての条件にあてはまらない場合）

else文の使い方（すべての条件にあてはまらない場合）

if(条件式A){
      条件式Aの判定がtrueの場合の処理内容;
    }else if(条件式B){
      条件式Aの判定がfalseで、条件式Bの判定がtrueの場合の処理内容;
    }else if(条件式C){
      条件式A・Bの判定がfalseで、条件式Cの判定がtrueの場合の処理内容;
    }else{
    　　すべての条件式の判定がfalseの場合の処理内容;
    }

サンプルコード8-3

★サンプルコード8-3の解説
・どの条件にもあてはまらない場合には、最後に書かれたelse以降の処理が実行されます。
・サンプルコード8-2にelse文をつけ加えるとしたら、上記サンプルコード8-3のように一番最後に追加します。

・JavaScriptの条件分岐は、この3つの書式を組み合わせながら思い通りの処理の流れを作って実現します。
・そこで重要となるのが、( )内に記述する条件式の書き方です。

【8-3】if文の条件式の記述方法を学ぼう

目安の学習時間:20分

■ if文の条件式とは

★条件式とは
・条件分岐や反復などの制御構文の中で、処理に条件を設定するための式のことを条件式といいます。
・条件式の役割は、比較演算子、論理演算子といった演算子を使い右辺と左辺の2つの値を比較することです。
→ブラウザはその式を評価・判定した結果を論理値（ブーリアン値）で返します。
→論理値（ブーリアン値）とは先述したとおり、true（真）とfalse（偽）の2つの値のことです。

■ 比較演算子の使い方

条件式を記述するための比較演算子には、次のようなものがあります。

主な比較演算子

実際のJavaScriptのコードを例に、比較演算子を使った条件式の記述方法を解説します。

任意のファイル名でHTMLを作成し、<body></body>内にサンプルコード8-4以降のコードを実際に入力してみてください。

例1. 比較演算子を使った条件式

<script>
  let x = 0;
  if(x == 0){
  alert("変数xには0が代入されています！");
  }
</script>

サンプルコード8-4

★サンプルコード8-4の解説
・まず、変数xを宣言して0を代入します。
・if文の( )内にはx == 0という条件式を記述します。
・==は左辺と右辺が等しいかどうかを判定させるための比較演算子です。
・この条件式により、ブラウザに変数xの中身と0が等しいかどうかをtrueかfalseで判定させます。
・変数xに代入されている中身は0ですから、左辺と右辺は等しいです。
・したがって、判定結果はtrueです。
・trueが返ってきた場合は、if文の{ }内のコードが実行されますので、このコードをブラウザプレビューすれば、アラートウィンドウで「変数xには0が代入されています！」という文字列が出力されます。

例2. 比較演算子を使った条件式

<script>
  let x = 150;
  if(x >= 100){
          alert("変数xには100以上の数値が代入されています！");
  }else{
          alert("変数xには100未満の数値が代入されています！");
  }
</script>

サンプルコード8-5

★サンプルコード8-5の解説
・まず、変数xを宣言して150を代入します。
・例2.では、条件式で変数xの中身が100以上であるかどうかを判定させます。
・左辺が右辺以上かどうかを判定させる比較演算子は>=ですから、条件式はx >= 100となります。
・条件式の判定結果がtrueのときは、「変数xには100以上の数値が代入されています！」
・条件式の判定結果がfalseのときは、「変数xには100未満の数値が代入されています！」と異なる文字列をアラートで出力します。
・else文の{ }内には条件式の判定結果がfalseだったときの処理を記述しますが、ここでわざわざelse if文を使い変数xの中身が100未満だったとき(x < 100)という条件を追加する必要はなく、else文でそれ以外の場合はすべてと表すだけで十分です。
・何故なら、100以上でなければ必然的にすべての数値は100未満になるからです。
・このコードをブラウザプレビューすれば、以下のようになります。
・条件式の判定結果はtrueですので、if文の{ }内のコードが実行されます。

<script>
  let x = 90;//変数xに100未満の数値を代入する
  if(x >= 100){
          alert("変数xには100以上の数値が代入されています！");
  }else{
          alert("変数xには100未満の数値が代入されています！");
  }
</script>

サンプルコード8-6

★サンプルコード8-6の解説
・次に、変数xに100未満の数値（90）を代入してみましょう。
・この場合は、条件式の判定結果はfalseとなり、else文の{ }内のコードが実行されます。

■ 論理演算子の使い方

論理演算子は、複数の条件式を結合し、「変数xの中身が0以上10未満だったら」のように複雑な条件を表すときに使います。
通常は比較演算子と組み合わせて使います。

主な論理演算子

実際のJavaScriptのコードを例に、論理演算子を使った条件式の記述方法を解説します。

例3. 論理演算子を使った条件式

<script>
  let x = 6;
  if (x >= 0 && x < 10) {
    alert("変数xには0以上10未満の数値が代入されています！");
  }
</script>

サンプルコード8-7

★サンプルコード8-7の解説
・変数xに入っている数値が、0以上10未満であるかどうかを判定するためのif文です。
・「0以上」を表す条件式は、比較演算子を使いx >= 0で表すことができます。
・「10未満」を表す条件式も、比較演算子を使いx < 10で表すことができます。
・「0以上10未満」を表す条件式は、この2つの条件をともに満たす場合ですから、論理演算子の&&を使って両者を組み合わせ、x >= 0 && x < 10と表現します。

ブラウザプレビュー

【8-4】演習条件式の書き方を練習しよう

目安の学習時間:25分

promptメソッドを使い、取得した入力値を元にif文で処理を分岐させるサンプルファイルを作ってみましょう。

・windowオブジェクトのメソッドであるpromptメソッドを使い、ユーザーの入力値を受け取って変数に格納します。
・その値をif文、else if文、else文の組み合わせで判定し、分岐処理の流れをつくっていきます。

作成するサンプル

分岐処理の条件は以下のとおりです。

演習データをダウンロードし、「if8_start.html」をエディターで開いてください。

ダウンロード

JS8-1演習データ.zip (1.6 KB)

if8_start.html

<h1 class="message"></h1>
<button class="btn">もう一回判定する</button>

<script>
  const h1Tag = document.querySelector(".message");
  const btnObj = document.querySelector(".btn");
  const str1 = "0〜100の数値を入力してください";
  const str2 = "満点です！おめでとう！";
  const str3 = "合格です！";
  const str4 = "あと一歩！";
  const str5 = "もっと頑張りましょう！";

  //ボタンクリックでページをリロードする
  btnObj.addEventListener("click", function () {
    location.reload();
  })
</script>

サンプルコード8-8

★サンプルコード8-8の解説
・条件分岐の処理結果として、h1タグ内に6パターンのメッセージを表示させるという仕組みをつくっていきます。
・定数h1Tagがh1要素オブジェクト、定数btnObjがbutton要素オブジェクトです。
・6パターンのメッセージは、定数str1〜str5にそれぞれ代入されています。
・何度も繰り返し判定ができるように、ボタンクリックでページをリロードされるようにしてあります。
・ページのリロードには、locationオブジェクトのreloadメソッドを使います。

続いて、promptメソッドの書式を解説します。

promptメソッドの書式

・promptメソッドは、ユーザーが入力した値を取得することのできるダイアログを表示する機能を持っています。ユーザーが入力した値は、OKボタンがクリックされると定数（変数）に代入されます。
・このようなメソッドの処理結果のことを戻り値と呼びます。変数に格納された戻り値は、その後の処理で利用されることが前提となります。今回の場合は、ユーザーが入力した数値が戻り値として変数に格納され、それをif文の条件式で利用します。

定数にpromptメソッドの戻り値を格納する

const SCORE = prompt("0〜100の得点を入力してください！", "");

サンプルコード8-9

★サンプルコード8-9の解説
・サンプルコード8-9を、オブジェクトと文字列一覧の下に記述してください。
・戻り値が代入される変数には、今回は別の値を再代入する必要がありませんので、constキーワードを使い定数として宣言します。

if文で条件分岐を記述する（100より大きい、または0より小さい数値が入力されたとき、または何も入力されていなかったとき）

それでは、if文の条件分岐を記述していきましょう。

const SCORE = prompt("0〜100の得点を入力してください！", "");

if (SCORE > 100 || SCORE < 0 || SCORE == "") {
  h1Tag.textContent = str1;
}

サンプルコード8-10

★サンプルコード8-10の解説
・まずは、判定に適さない数値が入力された場合と、なにも入力されていなかった場合の処理をif文で記述します。
→SCORE定数に格納されたユーザーの入力値を条件式で判定します。
→「100より大きい、または0より小さい数値が入力されたとき、または何も入力されていなかったとき」は、比較演算子と論理演算子を組み合わせて使い「SCORE > 100 || SCORE < 0 || SCORE == ""」と表すことができます。
→この条件式の判定結果がtrueのときは、「h1Tag.textContent = str1;」が実行されます。
・続いて、100が入力されたときの条件をelse if文で追加します。
・最初のif文の条件式の判定結果がfalseだった場合、追加したelse if文の条件式が判定されます。

else if文で条件を追加する（100が入力されたとき）

if (SCORE > 100 || SCORE < 0 || SCORE == "") {
  h1Tag.textContent = str1;
} else if (SCORE == 100) {
  h1Tag.textContent = str2;
}

サンプルコード8-11

★サンプルコード8-11の解説
・「100が入力されたとき」という条件は、「SCORE == 100」（SCORE定数の中身が100と等しい場合）という条件式で表すことができます。
・「SCORE > 100 || SCORE < 0 || SCORE == ""」の判定結果がfalseで、「SCORE == 100」の判定結果がtrueのときは、「 h1Tag.textContent = str2;」が実行されます。

その他の条件も追加する

else ifと条件式を繰り返し記述し、その他の条件もすべて追加していきます。

if (SCORE > 100 || SCORE < 0 || SCORE == "") {
  h1Tag.textContent = str1;
} else if (SCORE == 100) {
  h1Tag.textContent = str2;
} else if (SCORE >= 80) {
  h1Tag.textContent = str3;
} else if (SCORE >= 60 && SCORE < 80) {
  h1Tag.textContent = str4;
} else if (SCORE < 60) {
  h1Tag.textContent = str5;
} else {
  h1Tag.textContent = str1;
}

サンプルコード8-12

★サンプルコード8-12の解説
・「80以上（100以外）の数値が入力されたとき」という条件は、「SCORE >= 80」
・「60以上80未満の数値が入力されたとき」という条件は、「SCORE >= 60 && SCORE < 80」
・「60未満の数値が入力されたとき」という条件は、「SCORE < 60」でそれぞれ表すことができます。
・最後のelse文は、ここまでのすべての条件式の判定結果がfalseだったときに実行される処理内容で、数値以外の文字列が入力された場合に実行されます。

コード全体

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8" />
    <title>JavaScript</title>
  </head>

  <body>
    <h1 class="message"></h1>
    <button class="btn">もう一回判定する</button>

    <script>
      const h1Tag = document.querySelector(".message");
      const btnObj = document.querySelector(".btn");
      const str1 = "0〜100の数値を入力してください";
      const str2 = "満点です！おめでとう！";
      const str3 = "合格です！";
      const str4 = "あと一歩！";
      const str5 = "もっと頑張りましょう！";

      const SCORE = prompt("0〜100の得点を入力してください！", "");

      if (SCORE > 100 || SCORE < 0 || SCORE == "") {
        h1Tag.textContent = str1;
      } else if (SCORE == 100) {
        h1Tag.textContent = str2;
      } else if (SCORE >= 80) {
        h1Tag.textContent = str3;
      } else if (SCORE >= 60 && SCORE < 80) {
        h1Tag.textContent = str4;
      } else if (SCORE < 60) {
        h1Tag.textContent = str5;
      } else {
        h1Tag.textContent = str1;
      }

      //ボタンクリックでページをリロードする
      btnObj.addEventListener("click", function () {
        location.reload();
      })
    </script>
  </body>
</html>

サンプルコード8-13

ブラウザプレビュー

【8-5】switch文の条件分岐を学ぼう

目安の学習時間:15分

if文を使うと、シンプルな二股の分岐から複雑な多岐分岐まで、さまざまな条件分岐の流れを実現することができます。

しかし、次の例を見てください。

入力された月の数字から春夏秋冬を判別するというサンプルファイルです。

入力された月の数字から春夏秋冬を判別する（if文）

演習データをダウンロードし、「switch8_fin.html（if文で書いた完成データ）」をエディターで開いてください。

ダウンロード

JS8-2演習データ.zip (1.4 KB)

switch8_fin.html

<body>
  <h1 class="season"></h1>

  <script>
      const h1Tag = document.querySelector(".season");
      let str;

      const month = prompt("今は何月ですか？", 1);

      if (month == 3 || month == 4 || month == 5) {
        str = "春";
      } else if (month == 6 || month == 7 || month == 8) {
        str = "夏";
      } else if (month == 9 || month == 10 || month == 11) {
        str = "秋";
      } else if (month == 12 || month == 1 || month == 2) {
        str = "冬";
      } else {
        str = "1から12の値を入力してください。";
      }
      h1Tag.innerHTML = str;
  </script>
</body>

サンプルコード8-14

★サンプルコード8-14の解説
・「〜または〜」のように、2つ以上の条件を組み合わせて条件式を記述するときは、orを意味する || 演算子を使って表します。
・条件式が全て「変数名==値」の形式で羅列されているため、冗長なコードに見えます。

「==」のような同値演算子のみによる多岐分岐処理を行う場合は、if文を使って記述するよりも、switch文を使用すると、すっきりとした見通しのコードになります。

ブラウザプレビュー

上記サンプルコード8-14の分岐処理の条件は以下のとおりです。

■ switch文の記述方法

switch文は、「もしAだったら〜する」「もしBだったら〜する」「もしCだったら〜する」のように分岐のパターンを複数作成したいときに、else if文の代わりに使うことができる制御構文です。

★switch文の処理の流れ
１．冒頭の式をまず評価する。
２．式と一致するcase句を実行する。
３．break命令でブロック{ }から抜ける。
４．一致するcase句が見つからない場合、default句を実行する。
５．break命令でブロック{ }から抜ける。

では、サンプルコード8-14をswitch文を使って書き換えてみましょう。

switch8_start.htmlを開き、以下の解説を読みながらコードを記述してください。

入力された月の数字から春夏秋冬を判別する（switch文）

<body>
  <h1 class="season"></h1>

  <script>
    const h1Tag = document.querySelector(".season");

    let str;

    let month = prompt("今は何月ですか？", 1);

    switch (month) {
      case "3":
      case "4":
      case "5":
        str = "春";
        break;

      case "6":
      case "7":
      case "8":
        str = "夏";
        break;

      case "9":
      case "10":
      case "11":
        str = "秋";
        break;

      case "12":
      case "1":
      case "2":
        str = "冬";
        break;

      default:
        str = "1から12の値を入力してください。";
        break;
    }

    h1Tag.textContent = str;
  </script>
</body>

サンプルコード8-15

★サンプルコード8-15の解説
・サンプルコード8-15の挙動は、サンプルコード8-14と同じになります。
・ifの条件式「month == 3 || month == 4 || month == 5」の部分が、switch文では、「case "3": case "4": case "5":」となります。
・変数strには宣言時に値を代入せず、実行されるcase句が決まった時点で、h1要素に出力される文字列を代入しています。
・promptメソッドは常に文字列を返すため、caseで指定しているのは数値ではなく、”3”のように文字列です。
→もし、case "3":ではなくcase 3:のように数値を指定するのなら、promptが返した文字列を数値に変換する必要があります。
→その場合は、以下のようにコードを記述します。

・・・中略・・・

let month = prompt("今は何月ですか？", 1);

//Numberメソッドで整数値に変換する
month = Number(month);

・・・中略・・・

switch (month) {
      case 3:
      case 4:
      case 5:
        str = "春";
        break;
 
・・・中略・・・

}

h1Tag.textContent = str;

サンプルコード

・Numberメソッドは文字列を数値に変換するメソッドです。
→month = Number(month);で、month変数に格納されている文字列を数値に変換してからmonth変数に再代入しています。

ブラウザプレビュー

これで「8章：JavaScriptの条件分岐を学ぼう」の解説を終わります。

次の章に進みましょう。

前の章に戻る次の章に進む