JavaScriptのif文で条件分岐を学ぼう！

作成ファイル・保存場所

js-basic フォルダに以下のファイルを作成してください。

ファイル名	内容
js-basic03.html	条件分岐を体験するJavaScript内蔵HTMLファイル
js-basic__03.html	条件分岐を体験する

基本コード(HTML)は下記からコピー

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <title>JS Practice 03</title>
</head>
<body>
  <h1>条件分岐（if文）の体験</h1>

  <script>
    // 例題：テストの点数で合否を判定してみよう
    // テストの点数（0～100の数値）
    // score が 70 以上なら…合格
    // それ以外（70 未満）のとき…不合格となる


    // もう一歩進んでみよう：文字列を比較してみる
    //answerがyesだったら...あなたの答えはYESです。
    //そうでなければ...YESではありません。


  </script>
</body>
</html>

JavaScriptは <script> タグの中に直接書きましょう（内部JS）

今回のテーマ

プログラムは「条件」によって動きを変えられます。
JavaScriptでは if 文を使って「○○ならこうする、そうでなければこうする」といった条件分岐を記述できます。 if文は制御構文といいます。

目的

JavaScriptのデータ型（型）をざっくり理解する
- 数値（number）、文字列（string）、真偽値（boolean）
if 文の基本的な構文を学ぶ
比較演算子（>, <, >=, <=, ===, !==）を使って条件を設定し、分岐を体験する
復習：条件に応じて alert() や console.log() で出力を変える

チェックポイント

データ型（number, string, boolean）の違いを説明できるか
if (condition) { … } else { … } の構文が書けているか
比較演算子を使って、数値を正しく判定できているか
条件に応じて異なるメッセージが表示／ログ出力されているか

解説ポイント

データ型とは？

データ型（型）とは、「その値がどんな種類のものか」を表す分類のことです。
JavaScriptでは、変数に入る値が「数なのか、文字なのか、真偽（オン／オフ）なのか」など、データの性質によって扱い方が異なります。

型	例	説明
`number`	`42`, `3.14`	数値。四則演算が可能
`string`	`'hello'`, `"JS"`	文字列。文章や記号など、テキストとして扱う
`boolean`	`true`, `false`	真偽値。条件の結果を表す。「はい/いいえ」のような判定に使う

「年齢」は数で表せる → 数値型（number）
「名前」は文字の並び → 文字列型（string）
「条件を満たしているかどうか」は true または false → 真偽値型（boolean）

if 文では、条件の中で true（真）か false（偽）かを判定して、それに応じて処理を分けています。条件式の結果は boolean型 になります。

そのほかの主な型

型名	例	説明
`undefined`	`let x;`	値がまだ入っていない（未定義）状態
`null`	`let y = null;`	「何もない」という明示的な値
`array`	`[1, 2, 3]`	値をまとめて管理できるリスト（配列）
`object`	`{ name: "Taro" }`	名前付きの値（プロパティ）をまとめたデータ形式

なぜ型が大事？

例えば if 文では、条件の中で true（真）か false（偽）かを判定して処理を分けています。
このように、値の型に応じて書き方や使い方が変わるため、「データ型」を知ることはとても大切です。

比較演算子とは？

if（条件式） の中では、最終的に true または false（真偽値） が返るような式を使います。
この true / false によって、ブロック内の処理が「実行されるかどうか」が決まります。

演算子	意味	例（score = 75）	結果
`>`	左の値が右より大きい	`score > 70`	`true`
`<`	左の値が右より小さい	`score < 70`	`false`
`>=`	左の値が右以上	`score >= 70`	`true`
`<=`	左の値が右以下	`score <= 70`	`false`
`===`	値と型が完全一致	`'yes' === 'yes'`	`true`
`!==`	値または型が一致しない	`'Yes' !== 'yes'`	`true`

💡 if (score >= 70) のように書くと、その条件が true になるかどうかを JavaScript が判定してくれます。

論理演算子とは？

複数の条件を組み合わせて、if 文の条件式をより細かく設定できます。
次のような「論理演算子（logical operators）」を使います。

演算子	意味	例	結果（score = 75, passed = true）
`&&`	かつ（AND）	`score > 70 && passed`	`true`（両方が true のとき）
`\|\|`	またた(OR)	`score > 30 \|\| passed`	片方が`true`の時
`!`	ではない（NOT）	`!passed`	`false`（true → false に反転）

HTML/JavaScriptトレーニング

下記のコードを入力してみましょう！

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <title>JS Practice 03</title>
</head>
<body>
  <h1>条件分岐（if文）の体験</h1>

  <script>
    // 例題：テストの点数で合否を判定してみよう
    let score = 75; // テストの点数（0～100の数値）

    if (score >= 70) {
      // score が 70 以上なら…
      alert('合格です！おめでとうございます');
      console.log('合否判定：合格');
    } else {
      // それ以外（70 未満）のとき…
      alert('残念…もう一度がんばりましょう');
      console.log('合否判定：不合格');
    }

    // もう一歩進んでみよう：文字列を比較してみる
    let answer = 'yes';
    if (answer === 'yes') {
      console.log('あなたの答えは YES です');
    } else {
      console.log('あなたの答えは YES ではありません');
    }

   // 偶数か奇数か？
   let num = Math.floor(Math.random() * 101);
    console.log(`選ばれた数字は${num}です`);

   if (num % 2 === 0) {
     console.log('偶数です');
   } else {
     console.log('奇数です');
   }


  </script>
</body>
</html>

応用トレーニング

score の値を変えて、どこで「合格」⇄「不合格」が切り替わるか試してみよう
else if (score >= 90) { … } を追加して「90点以上なら優秀！」の分岐を作ってみよう
スコア（score）と提出状況（submitted）の両方をチェックして、合格・不合格・未提出などを判定

応用の解答例

解答例をみてみよう！

let score = Math.floor(Math.random() * 100);;

if (score >= 90) {
  console.log('優秀です！とてもよくできました！');
} else if (score >= 70) {
  console.log('合格です！おめでとうございます');
} else {
  console.log('不合格です…次回がんばりましょう');
}

// 文字列による分岐
let answer = 'no';

if (answer === 'yes') {
  console.log('YES を選びました');
} else if (answer === 'no') {
  console.log('NO を選びました');
} else {
  console.log('YES でも NO でもない答えです');
}

let score = 85;
let submitted = true;

if (score >= 90 && submitted) {
  console.log('優秀です！とてもよくできました！');
} else if (score >= 70 && submitted) {
  console.log('合格です！おめでとうございます');
} else if (!submitted) {
  console.log('未提出です。提出してください');
} else {
  console.log('不合格です…次回がんばりましょう');
}