基礎から学ぶJavaScript 90日コース | JavaScriptを動かして慣れる － Day 6：条件分岐 if

JavaScript 90日で身につけるJavaScript
スポンサーリンク
スポンサーリンク
  1. Day 6：条件分岐 if（前半）
  2. 条件分岐の考え方をイメージする
    1. 「もし〜なら〜する」をコードにする
  3. if の基本形を理解する
    1. if 文の構造
    2. 例：年齢が18歳以上かどうかを判定する
  4. if と else で「それ以外」の場合を扱う
    1. else の役割
    2. 例：成人か未成年かを判定する
  5. else if で条件を細かく分ける
    1. else if の役割
    2. 例：年齢によってメッセージを変える
  6. 比較条件の基本を整理する
    1. よく使う比較演算子
    2. 例：点数による合格・不合格判定
  7. 実践1：年齢判定をステップバイステップで書く
    1. ゴールのイメージ
    2. コード例（コメント付き）
  8. 実践2：合格・不合格判定をステップバイステップで書く
    1. ゴールのイメージ
    2. コード例（コメント付き）
  9. 条件分岐テンプレート：年齢と点数をまとめて判定する
  10. Day 6前半のまとめ
  11. Day 6：条件分岐 if（後半）
  12. 条件分岐を「現実のルール」として考える
    1. 条件分岐は「プログラムの意思決定」
  13. 年齢判定を少し現実的なロジックにする
    1. Step 1：年齢の入力値をチェックする
    2. Step 2：年齢判定を関数化して再利用しやすくする
  14. 合格・不合格判定をもう少し細かくする
    1. Step 1：点数の入力値をチェックする
    2. Step 2：合格判定を関数化して再利用する
  15. 条件分岐を組み合わせた「ユーザー情報判定テンプレート」
  16. Day 6後半のまとめ
  17. Day 6：条件分岐 if とミニ課題のゴール
  18. 評価プログラムのイメージを言葉で整理する
    1. どんな評価を表示するか
  19. Step 1：点数を変数で表現する
  20. Step 2：型と範囲をチェックする（安全性のための条件分岐）
    1. なぜ最初にチェックするのか
  21. Step 3：評価ランクを if / else if / else で決める
    1. 評価ルールをコードに落とし込む
  22. Step 4：評価ロジックを関数にまとめる
    1. 関数化するメリット
  23. Step 5：テンプレートとして使える「点数評価プログラム」完成版
  24. Day 6ミニ課題のまとめ

Day 6：条件分岐 if（前半）

Day 6前半では、プログラムに「状況によって動きを変える力」を与える条件分岐を学びます。 ここで扱うのは、if・else・else if・比較条件です。これらを使うことで、年齢による判定や合格・不合格判定のような「条件に応じた処理」を書けるようになります。

条件分岐の考え方をイメージする

「もし〜なら〜する」をコードにする

日常会話でもよく使う「もし〜なら〜する」という表現が、そのまま if 文の考え方になります。

  • もし年齢が18歳以上なら「成人です」と表示する
  • もし点数が60点以上なら「合格」と表示する
  • それ以外なら「不合格」と表示する

この「条件」と「結果」の組み合わせを、JavaScriptでは次のように書きます。

if (条件) {
  // 条件が true（真）のときに実行される処理
}
JavaScript

if の基本形を理解する

if 文の構造

if 文の基本形は次のようになります。

if (条件式) {
  // 条件式が true のときに実行される処理
}
JavaScript
  • 条件式：true または false を返す式（比較演算子などを使います）
  • ブロック { ... }：条件が満たされたときに実行されるコードのまとまり

例：年齢が18歳以上かどうかを判定する

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <title>Day 6 前半：if の基本</title>
</head>
<body>
  <h1>if の基本</h1>
  <p>コンソールを開いて、条件分岐の動きを確認してください。</p>

  <script>
    // 年齢を表す数値です
    const age = 20;

    console.log('年齢：', age);

    // 年齢が 18 歳以上かどうかを判定します
    if (age >= 18) { // age >= 18 が true のときだけ中身が実行されます
      console.log('18歳以上なので、成人とみなされます。');
    }

    console.log('if 文の処理が終了しました。');
  </script>
</body>
</html>

ポイント：

  • age >= 18 は比較演算子 >= を使った条件式です。
  • 条件式が true のときだけ、console.log('18歳以上なので、成人とみなされます。'); が実行されます。

if と else で「それ以外」の場合を扱う

else の役割

else は、「if の条件が満たされなかったときに実行する処理」を書くためのキーワードです。

if (条件式) {
  // 条件式が true のときの処理
} else {
  // 条件式が false のときの処理
}
JavaScript

例：成人か未成年かを判定する

<script>
  const age = 16;

  console.log('年齢：', age);

  if (age >= 18) {
    console.log('成人です。');
  } else {
    console.log('未成年です。');
  }

  console.log('成人・未成年判定が完了しました。');
</script>

ポイント：

  • age >= 18 が true なら「成人です。」が表示されます。
  • age >= 18 が false なら「未成年です。」が表示されます。
  • if と else をセットで使うことで、「どちらか一方」を必ず実行する構造になります。

else if で条件を細かく分ける

else if の役割

else if は、「条件を3つ以上に分けたいとき」に使います。

if (条件式1) {
  // 条件式1が true のときの処理
} else if (条件式2) {
  // 条件式1が false で、条件式2が true のときの処理
} else {
  // どの条件式も true ではないときの処理
}
JavaScript

例：年齢によってメッセージを変える

  • 0歳〜12歳：子ども
  • 13歳〜17歳：ティーン
  • 18歳以上：大人
<script>
  const age = 15;

  console.log('年齢：', age);

  if (age <= 12) {
    console.log('子どもです。');
  } else if (age <= 17) {
    console.log('ティーンです。');
  } else {
    console.log('大人です。');
  }

  console.log('年齢カテゴリの判定が完了しました。');
</script>

重要ポイント：

  • 上から順番に条件が評価されます。
  • 最初に true になった条件のブロックだけが実行されます。
  • else は「どれにも当てはまらなかった場合」の最後の受け皿です。

比較条件の基本を整理する

よく使う比較演算子

条件式には、比較演算子をよく使います。

  • >：左が右より大きい
  • <：左が右より小さい
  • >=：左が右以上
  • <=：左が右以下
  • ===：値と型が等しい（厳密な比較）
  • !==：値と型が等しくない（厳密な不等比較）

例：点数による合格・不合格判定

<script>
  const score = 72; // テストの点数

  console.log('点数：', score);

  if (score >= 60) {
    console.log('合格です。');
  } else {
    console.log('不合格です。');
  }

  console.log('合否判定が完了しました。');
</script>

ここでは、

  • score >= 60 が true なら「合格です。」
  • score >= 60 が false なら「不合格です。」

というシンプルな条件分岐になっています。

実践1：年齢判定をステップバイステップで書く

ゴールのイメージ

  • 年齢を入力（変数で指定）
  • 年齢に応じてメッセージを変える
    • 0歳未満や極端な値はエラー扱い
    • 0〜12歳：子ども
    • 13〜17歳：ティーン
    • 18歳以上：大人

コード例（コメント付き）

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <title>Day 6 前半：年齢判定</title>
</head>
<body>
  <h1>年齢判定</h1>
  <p>コンソールを開いて、年齢に応じたメッセージを確認してください。</p>

  <script>
    // 年齢を表す数値です
    const age = 15; // ここを書き換えて、いろいろな年齢を試せます

    console.log('判定対象の年齢：', age);

    // まずは、あり得ない値をチェックします
    if (age < 0) {
      console.log('エラー：年齢が 0 未満です。正しい値を入力してください。');
    } else if (age > 120) {
      console.log('エラー：年齢が現実的な範囲を超えています。正しい値を入力してください。');
    } else {
      // ここからが正常な範囲の年齢に対する判定です

      if (age <= 12) {
        console.log('子どもです。');
      } else if (age <= 17) {
        console.log('ティーンです。');
      } else {
        console.log('大人です。');
      }

      console.log('年齢判定が正常に完了しました。');
    }
  </script>
</body>
</html>

重要ポイントの深掘り：

  • 先に「あり得ない値」を if (age < 0) や if (age > 120) で弾いています。これは安全なプログラムを書くうえで非常に大切です。
  • 正常な範囲に入ったら、if・else if・else でカテゴリ分けをしています。
  • 条件は「小さい方から順番に」書くと、読みやすくなります。

実践2：合格・不合格判定をステップバイステップで書く

ゴールのイメージ

  • テストの点数を入力（変数で指定）
  • 点数に応じて「合格」「不合格」「満点」などのメッセージを表示する
  • 0〜100の範囲外はエラー扱いにする

コード例（コメント付き）

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <title>Day 6 前半：合格・不合格判定</title>
</head>
<body>
  <h1>合格・不合格判定</h1>
  <p>コンソールを開いて、点数に応じたメッセージを確認してください。</p>

  <script>
    // テストの点数を表す数値です
    const score = 85; // ここを書き換えて、いろいろな点数を試せます

    console.log('判定対象の点数：', score);

    // まずは、点数の範囲チェックを行います
    if (score < 0 || score > 100) {
      console.log('エラー：点数は 0 以上 100 以下で入力してください。');
    } else {
      // 正常な範囲の点数に対する判定です

      if (score === 100) {
        console.log('満点です！素晴らしい結果ですね。');
      } else if (score >= 80) {
        console.log('合格です（優秀な成績です）。');
      } else if (score >= 60) {
        console.log('合格です。');
      } else {
        console.log('不合格です。次回に向けて復習しましょう。');
      }

      console.log('合否判定が正常に完了しました。');
    }
  </script>
</body>
</html>

重要ポイントの深掘り：

  • score < 0 || score > 100 では、論理演算子 ||（または）を使って「0未満または100より大きい」場合をまとめてチェックしています。
  • score === 100 では、厳密な比較演算子 === を使って「満点」を特別扱いしています。
  • 条件は「上から順番に評価される」ため、score >= 80 の前に score === 100 を書くことで、満点を優先的に判定しています。

条件分岐テンプレート：年齢と点数をまとめて判定する

最後に、年齢判定と合格判定をまとめた「条件分岐テンプレート」を示します。 Day 6前半の復習として使える形になっています。

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <title>Day 6 前半：条件分岐テンプレート</title>
</head>
<body>
  <h1>条件分岐テンプレート（年齢判定＋合格判定）</h1>
  <p>コンソールを開いて、判定結果を確認してください。</p>

  <script>
    // 年齢と点数の例です
    const age = 19;
    const score = 72;

    console.log('--- 判定対象の情報 ---');
    console.log('年齢：', age);
    console.log('点数：', score);

    // --- 年齢判定 ---
    if (age < 0) {
      console.log('エラー：年齢が 0 未満です。');
    } else if (age > 120) {
      console.log('エラー：年齢が現実的な範囲を超えています。');
    } else if (age <= 12) {
      console.log('年齢判定：子どもです。');
    } else if (age <= 17) {
      console.log('年齢判定：ティーンです。');
    } else {
      console.log('年齢判定：大人です。');
    }

    // --- 合格・不合格判定 ---
    if (score < 0 || score > 100) {
      console.log('エラー：点数は 0 以上 100 以下で入力してください。');
    } else if (score === 100) {
      console.log('合否判定：満点です！');
    } else if (score >= 80) {
      console.log('合否判定：合格（優秀）です。');
    } else if (score >= 60) {
      console.log('合否判定：合格です。');
    } else {
      console.log('合否判定：不合格です。');
    }

    console.log('--- 条件分岐テンプレートの処理が完了しました ---');
  </script>
</body>
</html>

Day 6前半のまとめ

Day 6前半では、次のことを学びました。

  • if・else・else if を使って、「条件に応じて処理を変える」基本的な構造を理解したこと
  • 比較条件（>=・<=・=== など）を使って、年齢や点数を判定するロジックを書いたこと
  • 年齢判定と合格・不合格判定を通して、「あり得ない値を先に弾く」という安全な書き方を体験したこと

ここまでの内容を自分の手で書き換えながら試してみると、「プログラムが状況に応じて振る舞いを変える」という感覚が少しずつ身についていきます。

Day 6：条件分岐 if（後半）

Day 6後半では、前半で学んだ if・else・else if・比較条件を、もう一歩実践寄りに深掘りしていきます。 単に「条件分岐が書ける」だけでなく、現実的なロジックとして破綻しない書き方や、読みやすさ・安全性を意識した条件の組み立て方を、年齢判定と合格・不合格判定を題材にして確認していきます。

条件分岐を「現実のルール」として考える

条件分岐は「プログラムの意思決定」

条件分岐は、プログラムが「この状況ならこう動く」と決めるための仕組みです。 人間が頭の中でやっている判断を、コードとして明示的に書いていくイメージです。

  • 年齢が一定以上なら「成人扱い」
  • 点数が一定以上なら「合格」
  • あり得ない値なら「エラー」

後半では、この「意思決定」を、安全で読みやすい形で書くことを意識していきます。

年齢判定を少し現実的なロジックにする

Step 1：年齢の入力値をチェックする

まずは、年齢の値が「そもそもおかしくないか」をチェックします。 これは、セキュリティや安全性の観点から非常に重要です。

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <title>Day 6 後半：年齢判定（発展）</title>
</head>
<body>
  <h1>年齢判定（発展）</h1>
  <p>コンソールを開いて、判定の流れを確認してください。</p>

  <script>
    // 年齢を表す値です
    // わざと「おかしい値」を試してみても良いです（例：-5, 200, '20' など）
    const age = 19;

    console.log('判定対象の年齢：', age);

    // 1. 型チェック：数値かどうかを確認します
    if (typeof age !== 'number') {
      console.log('エラー：年齢は数値で入力してください。');
    } else if (age < 0) {
      console.log('エラー：年齢が 0 未満です。正しい値を入力してください。');
    } else if (age > 120) {
      console.log('エラー：年齢が現実的な範囲を超えています。');
    } else {
      console.log('年齢の入力値は妥当です。判定を続行します。');

      // ここからが正常な範囲の年齢に対する判定です
      if (age <= 12) {
        console.log('年齢カテゴリ：子どもです。');
      } else if (age <= 17) {
        console.log('年齢カテゴリ：ティーンです。');
      } else if (age <= 64) {
        console.log('年齢カテゴリ：成人です。');
      } else {
        console.log('年齢カテゴリ：シニアです。');
      }

      console.log('年齢判定が正常に完了しました。');
    }
  </script>
</body>
</html>

重要ポイントの深掘り

  • typeof age !== 'number' で「数値かどうか」をチェックしています。文字列や null が紛れ込んだ場合に備えています。
  • age < 0 や age > 120 で「現実的な範囲」をチェックし、明らかにおかしい値を弾いています。
  • 正常な範囲に入ったら、if・else if・else でカテゴリ分けをしています。
  • 条件は「小さい方から順番に」「範囲が重ならないように」書くと、読みやすく安全です。

Step 2：年齢判定を関数化して再利用しやすくする

同じような判定ロジックを何度も書くのは非効率なので、関数にまとめておくと便利です。

<script>
  // 年齢カテゴリを判定する関数です
  function getAgeCategory(age) {
    // 型と範囲のチェック
    if (typeof age !== 'number') {
      return 'エラー：年齢は数値で入力してください。';
    }

    if (age < 0) {
      return 'エラー：年齢が 0 未満です。';
    }

    if (age > 120) {
      return 'エラー：年齢が現実的な範囲を超えています。';
    }

    // 正常な範囲の年齢に対するカテゴリ判定
    if (age <= 12) {
      return '子ども';
    } else if (age <= 17) {
      return 'ティーン';
    } else if (age <= 64) {
      return '成人';
    } else {
      return 'シニア';
    }
  }

  // 関数を使って複数の年齢を判定してみます
  const agesToTest = [5, 15, 30, 70, -3, 130, '20'];

  agesToTest.forEach((testAge) => {
    const category = getAgeCategory(testAge);
    console.log(`年齢 ${testAge} の判定結果：${category}`);
  });
</script>

ここで意識してほしいこと

  • 条件分岐を関数にまとめることで、ロジックの再利用性が高まります。
  • return を使って、条件ごとに結果を返しています。
  • 「エラー」と「正常なカテゴリ」を同じ関数で扱うことで、呼び出し側が一貫したインターフェースで使えます。

合格・不合格判定をもう少し細かくする

Step 1：点数の入力値をチェックする

点数も、まずは「そもそもおかしくないか」をチェックします。

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <title>Day 6 後半：合格・不合格判定（発展）</title>
</head>
<body>
  <h1>合格・不合格判定（発展）</h1>
  <p>コンソールを開いて、判定の流れを確認してください。</p>

  <script>
    // テストの点数を表す値です
    const score = 88;

    console.log('判定対象の点数：', score);

    // 1. 型チェック：数値かどうか
    if (typeof score !== 'number') {
      console.log('エラー：点数は数値で入力してください。');
    } else if (score < 0 || score > 100) {
      console.log('エラー：点数は 0 以上 100 以下で入力してください。');
    } else {
      console.log('点数の入力値は妥当です。判定を続行します。');

      // ここからが正常な範囲の点数に対する判定です
      if (score === 100) {
        console.log('判定：満点です！素晴らしい結果ですね。');
      } else if (score >= 80) {
        console.log('判定：合格（優秀）です。');
      } else if (score >= 60) {
        console.log('判定：合格です。');
      } else if (score >= 40) {
        console.log('判定：不合格ですが、あと少しで合格です。');
      } else {
        console.log('判定：不合格です。基礎から復習しましょう。');
      }

      console.log('合否判定が正常に完了しました。');
    }
  </script>
</body>
</html>

重要ポイントの深掘り

  • typeof score !== 'number' で「数値かどうか」をチェックしています。
  • score < 0 || score > 100 で「範囲外」をまとめてチェックしています。
  • 条件は「厳しい条件から順に」書くと、意図が伝わりやすくなります（満点 → 優秀 → 合格 → ギリギリ不合格 → 明確な不合格）。

Step 2：合格判定を関数化して再利用する

こちらも、関数にまとめておくと便利です。

<script>
  // 点数に応じて判定メッセージを返す関数です
  function getScoreResult(score) {
    // 型と範囲のチェック
    if (typeof score !== 'number') {
      return 'エラー：点数は数値で入力してください。';
    }

    if (score < 0 || score > 100) {
      return 'エラー：点数は 0 以上 100 以下で入力してください。';
    }

    // 正常な範囲の点数に対する判定
    if (score === 100) {
      return '満点です！素晴らしい結果ですね。';
    } else if (score >= 80) {
      return '合格（優秀）です。';
    } else if (score >= 60) {
      return '合格です。';
    } else if (score >= 40) {
      return '不合格ですが、あと少しで合格です。';
    } else {
      return '不合格です。基礎から復習しましょう。';
    }
  }

  // 関数を使って複数の点数を判定してみます
  const scoresToTest = [100, 85, 65, 45, 20, -5, 120, '80'];

  scoresToTest.forEach((testScore) => {
    const result = getScoreResult(testScore);
    console.log(`点数 ${testScore} の判定結果：${result}`);
  });
</script>

ここで意識してほしいこと

  • 条件分岐を関数にまとめることで、「判定ロジック」をひとつの場所に集約できます。
  • 呼び出し側は、getScoreResult(score) の結果を表示するだけで済みます。
  • エラーと正常な判定を同じ関数で扱うことで、扱いやすいインターフェースになります。

条件分岐を組み合わせた「ユーザー情報判定テンプレート」

最後に、年齢判定と合格判定を組み合わせたテンプレートを示します。 ユーザーの年齢とテストの点数をまとめて判定し、メッセージを生成する例です。

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <title>Day 6 後半：ユーザー情報判定テンプレート</title>
</head>
<body>
  <h1>ユーザー情報判定テンプレート（年齢＋点数）</h1>
  <p>コンソールを開いて、判定結果を確認してください。</p>

  <script>
    // 年齢カテゴリを判定する関数
    function getAgeCategory(age) {
      if (typeof age !== 'number') {
        return 'エラー：年齢は数値で入力してください。';
      }

      if (age < 0) {
        return 'エラー：年齢が 0 未満です。';
      }

      if (age > 120) {
        return 'エラー：年齢が現実的な範囲を超えています。';
      }

      if (age <= 12) {
        return '子ども';
      } else if (age <= 17) {
        return 'ティーン';
      } else if (age <= 64) {
        return '成人';
      } else {
        return 'シニア';
      }
    }

    // 点数に応じて判定メッセージを返す関数
    function getScoreResult(score) {
      if (typeof score !== 'number') {
        return 'エラー：点数は数値で入力してください。';
      }

      if (score < 0 || score > 100) {
        return 'エラー：点数は 0 以上 100 以下で入力してください。';
      }

      if (score === 100) {
        return '満点です！素晴らしい結果ですね。';
      } else if (score >= 80) {
        return '合格（優秀）です。';
      } else if (score >= 60) {
        return '合格です。';
      } else if (score >= 40) {
        return '不合格ですが、あと少しで合格です。';
      } else {
        return '不合格です。基礎から復習しましょう。';
      }
    }

    // ユーザー情報の例
    const userAge = 19;
    const userScore = 72;

    console.log('--- ユーザー情報 ---');
    console.log('年齢：', userAge);
    console.log('点数：', userScore);

    // 年齢カテゴリと合否判定を取得します
    const ageCategory = getAgeCategory(userAge);
    const scoreResult = getScoreResult(userScore);

    console.log('--- 判定結果 ---');
    console.log('年齢カテゴリ：', ageCategory);
    console.log('合否判定：', scoreResult);

    // 年齢カテゴリと合否判定を組み合わせたメッセージを生成します
    const finalMessage = `あなたは「${ageCategory}」カテゴリで、テスト結果は「${scoreResult}」です。`;

    console.log('--- 最終メッセージ ---');
    console.log(finalMessage);

    console.log('--- ユーザー情報判定テンプレートの処理が完了しました ---');
  </script>
</body>
</html>

Day 6後半のまとめ

Day 6後半では、次のことを確認しました。

  • if・else・else if を使って、年齢判定と合格判定を「現実的なロジック」として書いたこと
  • 型チェックや範囲チェックを条件分岐に組み込むことで、「明らかにおかしい入力」を安全に弾く書き方を体験したこと
  • 条件分岐を関数にまとめることで、判定ロジックを再利用しやすくし、コードの見通しを良くしたこと
  • 年齢カテゴリと合否判定を組み合わせたテンプレートを通して、「条件分岐がプログラムの意思決定そのもの」であることを意識したこと

ここまでの内容を自分の手で書き換えながら試してみると、「条件によって振る舞いを変えるコード」を自然に書ける感覚が少しずつ育っていきます。

Day 6：条件分岐 if とミニ課題のゴール

Day 6のミニ課題では、if・else・else if・比較条件を使って、「点数を入力すると評価を表示するプログラム」を作っていきます。 単に「合格・不合格」を出すだけでなく、点数に応じて「S・A・B・C・D」などの評価ランクを表示するところまでを、初心者向けにステップバイステップで解説します。

評価プログラムのイメージを言葉で整理する

どんな評価を表示するか

まずは、プログラムのゴールを言葉で決めておきます。

例として、次のような評価ルールを考えます。

  • 90点以上：S（最高評価）
  • 80点以上90点未満：A
  • 70点以上80点未満：B
  • 60点以上70点未満：C（合格ライン）
  • 60点未満：D（不合格）

さらに、安全性のために次もチェックします。

  • 点数は 0〜100 の範囲であること
  • 数値以外が入ってきたらエラー扱いにすること

この「ルール」を、if・else if・else と比較条件でコードにしていきます。

Step 1：点数を変数で表現する

まずは、評価対象となる点数を変数に保存します。

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <title>Day 6：点数評価プログラム</title>
</head>
<body>
  <h1>点数を入力すると評価を表示するプログラム</h1>
  <p>コンソールを開いて、評価結果を確認してください。</p>

  <script>
    // 評価対象の点数です
    // ここを書き換えることで、いろいろな点数を試せます
    const score = 85;

    console.log('評価対象の点数：', score);
  </script>
</body>
</html>

ここではまだ判定していませんが、「何を評価するのか」をコード上で明確にしています。

Step 2：型と範囲をチェックする（安全性のための条件分岐）

なぜ最初にチェックするのか

現実のプログラムでは、「あり得ない入力」を先に弾くことがとても重要です。 ここでは次の2つをチェックします。

  • 数値かどうか（型チェック）
  • 0〜100の範囲に収まっているか（範囲チェック）
<script>
  const score = 85;

  console.log('評価対象の点数：', score);

  // 1. 型チェック：score が数値かどうかを確認します
  if (typeof score !== 'number') {
    console.log('エラー：点数は数値で入力してください。');
  }
  // 2. 範囲チェック：0〜100の範囲かどうかを確認します
  else if (score < 0 || score > 100) {
    console.log('エラー：点数は 0 以上 100 以下で入力してください。');
  }
  else {
    console.log('点数の入力値は妥当です。評価を続行します。');
  }
</script>

重要ポイントの深掘り：

  • typeof score !== 'number' は、「score が数値ではない場合」を検出する条件です。
  • score < 0 || score > 100 では、論理演算子 || を使って「0未満または100より大きい」場合をまとめてチェックしています。
  • この2つのチェックを通過した場合だけ、評価ロジックに進むようにしています。

Step 3：評価ランクを if / else if / else で決める

評価ルールをコードに落とし込む

先ほど決めた評価ルールを、そのまま if・else if・else にします。

<script>
  const score = 85;

  console.log('評価対象の点数：', score);

  if (typeof score !== 'number') {
    console.log('エラー：点数は数値で入力してください。');
  } else if (score < 0 || score > 100) {
    console.log('エラー：点数は 0 以上 100 以下で入力してください。');
  } else {
    console.log('点数の入力値は妥当です。評価を続行します。');

    // ここからが評価ランクの判定です
    let grade;      // 評価ランク（S, A, B, C, D）を保存する変数
    let comment;    // 評価に応じたコメントを保存する変数

    if (score >= 90) {
      grade = 'S';
      comment = '最高評価です！素晴らしい結果ですね。';
    } else if (score >= 80) {
      grade = 'A';
      comment = 'とても良い成績です。よく頑張りました。';
    } else if (score >= 70) {
      grade = 'B';
      comment = '良い成績です。さらに上を目指せます。';
    } else if (score >= 60) {
      grade = 'C';
      comment = '合格ラインです。次はもっと上を目指しましょう。';
    } else {
      grade = 'D';
      comment = '不合格です。復習して次回に備えましょう。';
    }

    console.log('--- 評価結果 ---');
    console.log('点数：', score);
    console.log('評価ランク：', grade);
    console.log('コメント：', comment);
  }
</script>

ここで意識してほしいこと：

  • 条件は「高い点数から順番に」書いています（score >= 90 → score >= 80 → …）。こうすると、意図が読みやすくなります。
  • grade と comment を別々の変数にしているので、後で画面表示やログ出力に使いやすくなります。
  • else は「どの条件にも当てはまらなかった場合」の最後の受け皿として機能しています（ここでは 60点未満）。

Step 4：評価ロジックを関数にまとめる

関数化するメリット

同じ評価ロジックを何度も書くのは非効率なので、関数にまとめておくと便利です。 関数にすると、次のようなメリットがあります。

  • ロジックを1か所に集約できる
  • 呼び出し側は「点数を渡して結果を受け取る」だけで済む
  • テストや修正がしやすくなる
<script>
  // 点数から評価ランクとコメントを返す関数です
  function evaluateScore(score) {
    // 型チェック
    if (typeof score !== 'number') {
      return {
        error: true,
        message: 'エラー：点数は数値で入力してください。'
      };
    }

    // 範囲チェック
    if (score < 0 || score > 100) {
      return {
        error: true,
        message: 'エラー：点数は 0 以上 100 以下で入力してください。'
      };
    }

    // 正常な範囲の場合の評価
    let grade;
    let comment;

    if (score >= 90) {
      grade = 'S';
      comment = '最高評価です！素晴らしい結果ですね。';
    } else if (score >= 80) {
      grade = 'A';
      comment = 'とても良い成績です。よく頑張りました。';
    } else if (score >= 70) {
      grade = 'B';
      comment = '良い成績です。さらに上を目指せます。';
    } else if (score >= 60) {
      grade = 'C';
      comment = '合格ラインです。次はもっと上を目指しましょう。';
    } else {
      grade = 'D';
      comment = '不合格です。復習して次回に備えましょう。';
    }

    // 評価結果をオブジェクトとして返します
    return {
      error: false,
      score: score,
      grade: grade,
      comment: comment
    };
  }

  // 関数を使って複数の点数を評価してみます
  const scoresToTest = [95, 82, 75, 61, 40, 10, -5, 120, '80'];

  console.log('--- 複数の点数を評価 ---');
  scoresToTest.forEach((testScore) => {
    const result = evaluateScore(testScore);

    if (result.error) {
      console.log(`点数 ${testScore} の評価結果：${result.message}`);
    } else {
      console.log(`点数 ${result.score} の評価結果：ランク ${result.grade} / コメント「${result.comment}」`);
    }
  });
</script>

重要ポイントの深掘り：

  • 関数 evaluateScore は、「点数を受け取って評価結果を返す」という役割に集中しています。
  • エラーの場合と正常な場合を、error フラグで区別しています。
  • 条件分岐を関数に閉じ込めることで、呼び出し側のコードがすっきりします。

Step 5：テンプレートとして使える「点数評価プログラム」完成版

最後に、Day 6ミニ課題の総まとめとして、テンプレート形式の完成版を示します。 このテンプレートをコピーして、点数の値だけ変えれば、誰でも評価プログラムを試せます。

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <title>Day 6：点数評価プログラム（テンプレート）</title>
</head>
<body>
  <h1>点数を入力すると評価を表示するプログラム</h1>
  <p>コンソールを開いて、評価結果を確認してください。</p>

  <script>
    // --- Step 1: 評価関数の定義 ---

    function evaluateScore(score) {
      // 型チェック
      if (typeof score !== 'number') {
        return {
          error: true,
          message: 'エラー：点数は数値で入力してください。'
        };
      }

      // 範囲チェック
      if (score < 0 || score > 100) {
        return {
          error: true,
          message: 'エラー：点数は 0 以上 100 以下で入力してください。'
        };
      }

      // 正常な範囲の場合の評価
      let grade;
      let comment;

      if (score >= 90) {
        grade = 'S';
        comment = '最高評価です！素晴らしい結果ですね。';
      } else if (score >= 80) {
        grade = 'A';
        comment = 'とても良い成績です。よく頑張りました。';
      } else if (score >= 70) {
        grade = 'B';
        comment = '良い成績です。さらに上を目指せます。';
      } else if (score >= 60) {
        grade = 'C';
        comment = '合格ラインです。次はもっと上を目指しましょう。';
      } else {
        grade = 'D';
        comment = '不合格です。復習して次回に備えましょう。';
      }

      return {
        error: false,
        score: score,
        grade: grade,
        comment: comment
      };
    }

    // --- Step 2: 評価したい点数を指定する ---

    const inputScore = 88; // ここを書き換えて、いろいろな点数を試せます

    console.log('--- 評価対象の点数 ---');
    console.log('点数：', inputScore);

    // --- Step 3: 評価関数を呼び出して結果を表示する ---

    const result = evaluateScore(inputScore);

    console.log('--- 評価結果 ---');
    if (result.error) {
      console.log(result.message);
    } else {
      console.log('点数：', result.score);
      console.log('評価ランク：', result.grade);
      console.log('コメント：', result.comment);

      // おまけ：評価ランクに応じた追加メッセージ
      if (result.grade === 'S') {
        console.log('次のステップとして、より難しい問題にも挑戦してみましょう。');
      } else if (result.grade === 'A' || result.grade === 'B') {
        console.log('安定した実力があります。継続して学習するとさらに伸びます。');
      } else if (result.grade === 'C') {
        console.log('合格ですが、弱点を補強するともっと安心できます。');
      } else {
        console.log('基礎をしっかり固めることで、次回の結果は必ず良くなります。');
      }
    }

    console.log('--- 点数評価プログラムの処理が完了しました ---');
  </script>
</body>
</html>

Day 6ミニ課題のまとめ

Day 6のミニ課題「点数を入力すると評価を表示するプログラム」では、次のことを体験しました。

  • if・else if・else と比較条件を組み合わせて、点数に応じた評価ランクを決めるロジックを書いたこと
  • 型チェックと範囲チェックを条件分岐に組み込むことで、「明らかにおかしい入力」を安全に弾く書き方を体験したこと
  • 評価ロジックを関数にまとめることで、再利用しやすく、見通しの良いコードにしたこと

このテンプレートをベースに、評価ランクの種類を増やしたり、コメントを自分なりの言葉に変えたりして遊んでみると、条件分岐の感覚がぐっと馴染んでいきます。

スポンサーリンク
タイトルとURLをコピーしました