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

JavaScript 90日で身につけるJavaScript
スポンサーリンク
スポンサーリンク
  1. Day 7：条件分岐の実践（前半）
  2. 複数条件と論理演算子のイメージ
    1. 「かつ」「または」「ではない」をコードにする
  3. &&（AND）と ||（OR）の基本
    1. &&（AND）：「両方とも満たすときだけ true」
    2. ||（OR）：「どちらか一方でも満たせば true」
  4. !（NOT）で「逆の意味」を表現する
    1. ! の役割
  5. ネストした条件分岐とは何か
    1. if の中に if が入る構造
  6. 実践1：ログイン判定をステップバイステップで書く
    1. ログイン判定のルールを言葉で整理する
    2. Step 1：ユーザー情報を変数で用意する
    3. Step 2：複数条件を使ってログイン可否を判定する
    4. Step 3：ネストした条件分岐で「失敗理由」を詳しくする
    5. Step 4：ネストした条件分岐で段階的に判定する
  7. 実践2：会員ランク判定をステップバイステップで書く
    1. 会員ランク判定のルールを言葉で整理する
    2. Step 1：会員情報を変数で用意する
    3. Step 2：複数条件でランクを判定する
    4. Step 3：ネストした条件分岐で「有料会員」と「無料会員」を分けて考える
  8. 複数条件＋ネストのテンプレート：ログイン＋ランク判定
  9. Day 7前半のまとめ
  10. Day 7：条件分岐の実践（後半）
  11. 複数条件を「読みやすく・安全に」書くという視点
    1. 条件分岐は「ルール」と「防御」の両方
  12. ログイン判定をセキュリティ目線で整理する
    1. ログイン判定の基本ルール
    2. ログイン判定のステップを分解する
  13. 会員ランク判定を「矛盾のない条件」で書く
    1. 会員ランク判定のルールを再確認する
    2. 会員ランク判定のステップを分解する
    3. 複数条件を使った「特典の追加条件」を組み込む
  14. Day 7後半テンプレート：ログイン＋ランク判定の統合版
  15. Day 7後半のまとめ
  16. Week 1 ミニアプリ：成績判定アプリのゴールをイメージする
  17. 成績判定アプリの仕様を言葉で整理する
    1. 評価ルールを決める
  18. アプリの構成をざっくりイメージする
    1. 画面とロジックの役割分担
  19. Step 1：HTMLで「点数入力」と「結果表示」の枠を作る
  20. Step 2：JavaScriptで「ボタンが押されたら判定する」流れを作る
    1. イベントの考え方
  21. Step 3：入力値を数値に変換し、型と範囲をチェックする
    1. なぜ型と範囲をチェックするのか
  22. Step 4：if / else if / else で評価ランクを判定する
    1. 評価ルールをコードに落とし込む
  23. Step 5：成績判定アプリ完成版テンプレート
  24. Week 1 ミニアプリのまとめ

Day 7：条件分岐の実践（前半）

Day 7前半では、条件分岐を一歩進めて、複数条件・&&・||・!・ネストした条件分岐を扱います。 ここまで来ると、現実のサービスに近いロジック——たとえばログイン判定や会員ランク判定——を自然な形で書けるようになっていきます。

複数条件と論理演算子のイメージ

「かつ」「または」「ではない」をコードにする

日常の判断を言葉にすると、こんな表現がよく出てきます。

  • 「パスワードが正しくて、アカウントが有効ならログインを許可する」
  • 「有料会員か、キャンペーン対象なら特典を付与する」
  • 「退会済みではないユーザーだけを表示する」

これをコードにすると、次の3つの論理演算子が登場します。

  • &&：かつ（AND）
  • ||：または（OR）
  • !：ではない（NOT）

これらを組み合わせることで、「複数条件をまとめて判定する」ことができるようになります。

&&（AND）と ||（OR）の基本

&&（AND）：「両方とも満たすときだけ true」

条件A && 条件B は、条件Aと条件Bの両方が true のときだけ true になります。

const isPasswordCorrect = true;
const isAccountActive = true;

if (isPasswordCorrect && isAccountActive) {
  console.log('ログインを許可します。');
}
JavaScript
  • どちらか一方でも false なら、全体は false になります。

||（OR）：「どちらか一方でも満たせば true」

条件A || 条件B は、条件Aか条件Bのどちらか一方でも true なら true になります。

const isPremiumMember = false;
const isCampaignTarget = true;

if (isPremiumMember || isCampaignTarget) {
  console.log('特典を付与します。');
}
JavaScript
  • 両方 false のときだけ、全体が false になります。

!（NOT）で「逆の意味」を表現する

! の役割

!条件 は、条件が true なら false、条件が false なら true に反転します。

const isDeleted = false;

if (!isDeleted) {
  console.log('このユーザーは退会済みではないので、一覧に表示します。');
}
JavaScript
  • 「〜ではない」という日本語をそのままコードにしたイメージです。

ネストした条件分岐とは何か

if の中に if が入る構造

ネストした条件分岐とは、if の中にさらに if を書く構造のことです。

if (条件A) {
  // 条件Aが true のときだけ、さらに条件Bを判定する
  if (条件B) {
    // 条件Aも条件Bも true のときの処理
  }
}
JavaScript
  • 「まず大きな条件で絞り込み、その中でさらに細かく判定する」ときに使います。
  • ログイン判定や会員ランク判定では、このネストがよく登場します。

実践1：ログイン判定をステップバイステップで書く

ログイン判定のルールを言葉で整理する

まずは、ログイン判定のルールを日本語で整理します。

  • ユーザー名が登録済みであること
  • パスワードが正しいこと
  • アカウントが有効（退会済み・ロック中ではない）であること

これをコードに落とし込んでいきます。

Step 1：ユーザー情報を変数で用意する

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <title>Day 7 前半：ログイン判定</title>
</head>
<body>
  <h1>ログイン判定（複数条件の練習）</h1>
  <p>コンソールを開いて、ログイン判定の結果を確認してください。</p>

  <script>
    // ユーザーが入力した情報（例）です
    const inputUserName = 'taro';
    const inputPassword = 'password123';

    // システム側に登録されているユーザー情報（例）です
    const registeredUserName = 'taro';
    const registeredPassword = 'password123';
    const isAccountActive = true;   // アカウントが有効かどうか
    const isAccountLocked = false;  // アカウントがロックされているかどうか

    console.log('--- ログイン試行 ---');
    console.log('入力ユーザー名：', inputUserName);
    console.log('入力パスワード：', inputPassword);
  </script>
</body>
</html>

Step 2：複数条件を使ってログイン可否を判定する

<script>
  // ユーザー名が一致しているかどうか
  const isUserNameMatch = inputUserName === registeredUserName;

  // パスワードが一致しているかどうか
  const isPasswordMatch = inputPassword === registeredPassword;

  console.log('ユーザー名一致：', isUserNameMatch);
  console.log('パスワード一致：', isPasswordMatch);
  console.log('アカウント有効：', isAccountActive);
  console.log('アカウントロック：', isAccountLocked);

  // ログイン判定
  if (isUserNameMatch && isPasswordMatch && isAccountActive && !isAccountLocked) {
    console.log('ログイン成功：条件をすべて満たしています。');
  } else {
    console.log('ログイン失敗：いずれかの条件を満たしていません。');
  }
</script>

重要ポイントの深掘り：

  • isUserNameMatch && isPasswordMatch && isAccountActive && !isAccountLocked → 「ユーザー名が一致していて、パスワードが一致していて、アカウントが有効で、ロックされていない」という意味になります。
  • !isAccountLocked で「ロックされていない」という条件を表現しています。
  • すべての条件が true のときだけログイン成功になります。

Step 3：ネストした条件分岐で「失敗理由」を詳しくする

単に「失敗」とだけ表示するのではなく、「どの条件で失敗したか」を詳しく表示してみます。

<script>
  if (!isUserNameMatch) {
    console.log('ログイン失敗：ユーザー名が登録されているものと一致しません。');
  } else if (!isPasswordMatch) {
    console.log('ログイン失敗：パスワードが正しくありません。');
  } else if (!isAccountActive) {
    console.log('ログイン失敗：アカウントが無効です（退会済みなど）。');
  } else if (isAccountLocked) {
    console.log('ログイン失敗：アカウントがロックされています。');
  } else {
    console.log('ログイン成功：すべての条件を満たしています。');
  }

ここではネストではなく「連続した else if」で理由を分けていますが、さらに細かくしたい場合はネストを使います。

Step 4：ネストした条件分岐で段階的に判定する

「まずユーザー名をチェックし、そのあとパスワード、そのあとアカウント状態」というように、段階的に判定する書き方です。

<script>
  if (!isUserNameMatch) {
    console.log('ログイン失敗：ユーザー名が一致しません。');
  } else {
    // ユーザー名が一致している場合のみ、パスワードをチェックします
    if (!isPasswordMatch) {
      console.log('ログイン失敗：パスワードが正しくありません。');
    } else {
      // ユーザー名とパスワードが一致している場合のみ、アカウント状態をチェックします
      if (!isAccountActive) {
        console.log('ログイン失敗：アカウントが無効です。');
      } else if (isAccountLocked) {
        console.log('ログイン失敗：アカウントがロックされています。');
      } else {
        console.log('ログイン成功：すべての条件を満たしています。');
      }
    }
  }
</script>

ここでのポイント：

  • ネストした条件分岐は、「段階的なチェック」を表現するのに向いています。
  • 上から順に「通過したら次のチェックへ進む」という流れが、コード構造にそのまま現れています。

実践2：会員ランク判定をステップバイステップで書く

会員ランク判定のルールを言葉で整理する

次に、会員ランク判定を考えます。 例として、次のようなルールを決めます。

  • 有料会員で、利用期間が1年以上：プラチナ会員
  • 有料会員で、利用期間が半年以上1年未満：ゴールド会員
  • 有料会員で、利用期間が半年未満：シルバー会員
  • 無料会員で、メール認証済み：ブロンズ会員
  • 無料会員で、メール未認証：ゲスト

ここに &&・||・ネストした条件分岐が登場します。

Step 1：会員情報を変数で用意する

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <title>Day 7 前半：会員ランク判定</title>
</head>
<body>
  <h1>会員ランク判定（複数条件＋ネスト）</h1>
  <p>コンソールを開いて、ランク判定の結果を確認してください。</p>

  <script>
    // 会員情報の例です
    const isPaidMember = true;       // 有料会員かどうか
    const monthsSinceJoin = 14;      // 入会からの経過月数
    const isEmailVerified = true;    // メール認証済みかどうか

    console.log('--- 会員情報 ---');
    console.log('有料会員：', isPaidMember);
    console.log('入会からの月数：', monthsSinceJoin);
    console.log('メール認証済み：', isEmailVerified);
  </script>
</body>
</html>

Step 2：複数条件でランクを判定する

<script>
  let rank;     // 会員ランク
  let benefits; // ランクに応じた特典説明

  if (isPaidMember && monthsSinceJoin >= 12) {
    rank = 'プラチナ';
    benefits = '最高ランクの特典が適用されます。';
  } else if (isPaidMember && monthsSinceJoin >= 6) {
    rank = 'ゴールド';
    benefits = '多くの特典が適用されます。';
  } else if (isPaidMember) {
    rank = 'シルバー';
    benefits = '基本的な有料特典が適用されます。';
  } else if (!isPaidMember && isEmailVerified) {
    rank = 'ブロンズ';
    benefits = '無料会員向けの特典が適用されます。';
  } else {
    rank = 'ゲスト';
    benefits = '特典はありませんが、基本機能を利用できます。';
  }

  console.log('--- 会員ランク判定結果 ---');
  console.log('ランク：', rank);
  console.log('特典：', benefits);
</script>

重要ポイントの深掘り：

  • isPaidMember && monthsSinceJoin >= 12 → 「有料会員で、かつ入会から12ヶ月以上」という複数条件です。
  • !isPaidMember && isEmailVerified → 「有料会員ではなく、かつメール認証済み」という条件です。
  • 条件は「より厳しい条件から順に」書くことで、意図が読みやすくなります（プラチナ → ゴールド → シルバー → ブロンズ → ゲスト）。

Step 3：ネストした条件分岐で「有料会員」と「無料会員」を分けて考える

有料会員と無料会員でロジックを分けると、さらに読みやすくなります。

<script>
  let rank;
  let benefits;

  if (isPaidMember) {
    // 有料会員の場合の判定
    if (monthsSinceJoin >= 12) {
      rank = 'プラチナ';
      benefits = '最高ランクの特典が適用されます。';
    } else if (monthsSinceJoin >= 6) {
      rank = 'ゴールド';
      benefits = '多くの特典が適用されます。';
    } else {
      rank = 'シルバー';
      benefits = '基本的な有料特典が適用されます。';
    }
  } else {
    // 無料会員の場合の判定
    if (isEmailVerified) {
      rank = 'ブロンズ';
      benefits = '無料会員向けの特典が適用されます。';
    } else {
      rank = 'ゲスト';
      benefits = '特典はありませんが、基本機能を利用できます。';
    }
  }

  console.log('--- 会員ランク判定結果（ネスト版） ---');
  console.log('ランク：', rank);
  console.log('特典：', benefits);
</script>

ここでのポイント：

  • 最初に「有料会員かどうか」で大きく分岐し、その中でさらに細かく条件分岐しています。
  • ネストした条件分岐は、「大分類 → 小分類」という構造をコードにそのまま反映できます。

複数条件＋ネストのテンプレート：ログイン＋ランク判定

最後に、ログイン判定と会員ランク判定をまとめたテンプレートを示します。 Day 7前半の総復習として使える形です。

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <title>Day 7 前半：複数条件とネストのテンプレート</title>
</head>
<body>
  <h1>複数条件とネストした条件分岐（ログイン＋会員ランク）</h1>
  <p>コンソールを開いて、判定結果を確認してください。</p>

  <script>
    // --- ログイン情報 ---
    const inputUserName = 'taro';
    const inputPassword = 'password123';

    const registeredUserName = 'taro';
    const registeredPassword = 'password123';
    const isAccountActive = true;
    const isAccountLocked = false;

    // --- 会員情報 ---
    const isPaidMember = true;
    const monthsSinceJoin = 14;
    const isEmailVerified = true;

    console.log('--- ログイン試行 ---');

    const isUserNameMatch = inputUserName === registeredUserName;
    const isPasswordMatch = inputPassword === registeredPassword;

    if (!isUserNameMatch) {
      console.log('ログイン失敗：ユーザー名が一致しません。');
    } else if (!isPasswordMatch) {
      console.log('ログイン失敗：パスワードが正しくありません。');
    } else if (!isAccountActive) {
      console.log('ログイン失敗：アカウントが無効です。');
    } else if (isAccountLocked) {
      console.log('ログイン失敗：アカウントがロックされています。');
    } else {
      console.log('ログイン成功：すべての条件を満たしています。');

      console.log('--- 会員ランク判定 ---');

      let rank;
      let benefits;

      if (isPaidMember) {
        if (monthsSinceJoin >= 12) {
          rank = 'プラチナ';
          benefits = '最高ランクの特典が適用されます。';
        } else if (monthsSinceJoin >= 6) {
          rank = 'ゴールド';
          benefits = '多くの特典が適用されます。';
        } else {
          rank = 'シルバー';
          benefits = '基本的な有料特典が適用されます。';
        }
      } else {
        if (isEmailVerified) {
          rank = 'ブロンズ';
          benefits = '無料会員向けの特典が適用されます。';
        } else {
          rank = 'ゲスト';
          benefits = '特典はありませんが、基本機能を利用できます。';
        }
      }

      console.log('会員ランク：', rank);
      console.log('特典：', benefits);
    }

    console.log('--- 複数条件とネストした条件分岐の処理が完了しました ---');
  </script>
</body>
</html>

Day 7前半のまとめ

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

  • &&・||・! を使って、複数条件をまとめて判定する方法
  • ネストした条件分岐で、「大きな条件の中でさらに細かく判定する」構造を表現する方法
  • ログイン判定と会員ランク判定を通して、現実のサービスに近いロジックをコードとして書く感覚

ここまでのコードを自分で書き換えながら試してみると、「条件分岐でプログラムの振る舞いをデザインする」という感覚が、かなりはっきりしてくるはずです。

Day 7：条件分岐の実践（後半）

Day 7後半では、前半で学んだ複数条件・&&・||・!・ネストした条件分岐を、もう一歩実践寄り・安全寄りに深掘りしていきます。 テーマは引き続きログイン判定と会員ランク判定ですが、「ただ動くコード」ではなく、読みやすくて安全性も意識した条件分岐を目指していきます。

複数条件を「読みやすく・安全に」書くという視点

条件分岐は「ルール」と「防御」の両方

条件分岐は、サービスのルールを表現するだけでなく、おかしな入力や不正な状態からシステムを守る防御線にもなります。

  • ログイン判定では、「正しいユーザーだけを通す」ことが重要です。
  • 会員ランク判定では、「矛盾した状態（例：有料会員なのに利用期間がマイナス）」を避けることが大切です。

後半では、この「ルール＋防御」という視点で、&&・||・!・ネストを使った条件分岐を組み立てていきます。

ログイン判定をセキュリティ目線で整理する

ログイン判定の基本ルール

ログイン判定の基本的なチェック項目は次のようになります。

  1. ユーザー名が登録済みであること
  2. パスワードが正しいこと
  3. アカウントが有効であること（退会済み・ロック中ではない）
  4. 必要なら、メール認証済みであること

これらを複数条件＋ネストした条件分岐で、読みやすく安全に書いていきます。

ログイン判定のステップを分解する

Step 1：ユーザー情報とアカウント状態を用意する

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <title>Day 7 後半：ログイン判定（セキュリティ寄り）</title>
</head>
<body>
  <h1>ログイン判定（複数条件＋ネスト＋セキュリティ）</h1>
  <p>コンソールを開いて、ログイン判定の流れを確認してください。</p>

  <script>
    // ユーザーが入力した情報（例）です
    const inputUserName = 'taro';
    const inputPassword = 'password123';

    // システム側に登録されているユーザー情報（例）です
    const registeredUserName = 'taro';
    const registeredPasswordHash = 'password123'; // 実際はハッシュですが、ここでは簡略化しています
    const isAccountActive = true;   // アカウントが有効かどうか
    const isAccountLocked = false;  // アカウントがロックされているかどうか
    const isEmailVerified = true;   // メール認証済みかどうか

    console.log('--- ログイン試行 ---');
    console.log('入力ユーザー名：', inputUserName);
    console.log('入力パスワード：', inputPassword);
  </script>
</body>
</html>

ここではパスワードをそのまま比較していますが、実際のサービスではハッシュ化などを行います。 学習段階では「正しいかどうかを判定する」というロジックに集中していきます。

Step 2：複数条件で「ログイン可能かどうか」をまとめて判定する

<script>
  // ユーザー名が一致しているかどうか
  const isUserNameMatch = inputUserName === registeredUserName;

  // パスワードが一致しているかどうか（ここでは簡略化）
  const isPasswordMatch = inputPassword === registeredPasswordHash;

  console.log('ユーザー名一致：', isUserNameMatch);
  console.log('パスワード一致：', isPasswordMatch);
  console.log('アカウント有効：', isAccountActive);
  console.log('アカウントロック：', isAccountLocked);
  console.log('メール認証済み：', isEmailVerified);

  // 複数条件をまとめて判定します
  const canLogin =
    isUserNameMatch &&
    isPasswordMatch &&
    isAccountActive &&
    !isAccountLocked &&
    isEmailVerified;

  if (canLogin) {
    console.log('ログイン成功：すべての条件を満たしています。');
  } else {
    console.log('ログイン失敗：いずれかの条件を満たしていません。');
  }
</script>

重要ポイントの深掘り：

  • canLogin という変数に「ログイン可能かどうか」をまとめて保存しています。 → これにより、if (canLogin) という読みやすい条件分岐になります。
  • !isAccountLocked で「ロックされていない」という条件を表現しています。
  • && を連ねることで、「すべての条件を満たしたときだけ true」という構造になっています。

Step 3：ネストした条件分岐で「失敗理由」を詳しくする

セキュリティ的には「どこで失敗したかを詳しく出しすぎない」こともありますが、学習段階ではあえて理由を表示してロジックを理解しやすくします。

<script>
  if (!isUserNameMatch) {
    console.log('ログイン失敗：ユーザー名が登録されているものと一致しません。');
  } else if (!isPasswordMatch) {
    console.log('ログイン失敗：パスワードが正しくありません。');
  } else if (!isAccountActive) {
    console.log('ログイン失敗：アカウントが無効です（退会済みなど）。');
  } else if (isAccountLocked) {
    console.log('ログイン失敗：アカウントがロックされています。');
  } else if (!isEmailVerified) {
    console.log('ログイン失敗：メール認証が完了していません。');
  } else {
    console.log('ログイン成功：すべての条件を満たしています。');
  }
</script>

ここでは else if を連ねていますが、さらに「段階的なチェック」を表現するためにネストを使うこともできます。

Step 4：ネストした条件分岐で「段階的なログインチェック」を書く

<script>
  if (!isUserNameMatch) {
    console.log('ログイン失敗：ユーザー名が一致しません。');
  } else {
    // ユーザー名が一致している場合のみ、パスワードをチェックします
    if (!isPasswordMatch) {
      console.log('ログイン失敗：パスワードが正しくありません。');
    } else {
      // ユーザー名とパスワードが一致している場合のみ、アカウント状態をチェックします
      if (!isAccountActive) {
        console.log('ログイン失敗：アカウントが無効です。');
      } else if (isAccountLocked) {
        console.log('ログイン失敗：アカウントがロックされています。');
      } else if (!isEmailVerified) {
        console.log('ログイン失敗：メール認証が完了していません。');
      } else {
        console.log('ログイン成功：すべての条件を満たしています。');
      }
    }
  }
</script>

ここでのポイント：

  • ネストした条件分岐は、「大きなチェック → 次のチェック → さらに細かいチェック」という段階的な流れをコードにそのまま表現できます。
  • ログイン処理では、「ユーザー名が一致していないならパスワードをチェックする意味がない」というような段階的な考え方が自然です。

会員ランク判定を「矛盾のない条件」で書く

会員ランク判定のルールを再確認する

例として、次のようなルールを使います。

  • 有料会員で、利用期間が1年以上：プラチナ会員
  • 有料会員で、利用期間が半年以上1年未満：ゴールド会員
  • 有料会員で、利用期間が半年未満：シルバー会員
  • 無料会員で、メール認証済み：ブロンズ会員
  • 無料会員で、メール未認証：ゲスト

ここに、&&・||・!・ネストした条件分岐を組み合わせていきます。

会員ランク判定のステップを分解する

Step 1：会員情報を用意する

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <title>Day 7 後半：会員ランク判定（発展）</title>
</head>
<body>
  <h1>会員ランク判定（複数条件＋ネスト＋矛盾チェック）</h1>
  <p>コンソールを開いて、ランク判定の結果を確認してください。</p>

  <script>
    // 会員情報の例です
    const isPaidMember = true;       // 有料会員かどうか
    const monthsSinceJoin = 14;      // 入会からの経過月数
    const isEmailVerified = true;    // メール認証済みかどうか

    console.log('--- 会員情報 ---');
    console.log('有料会員：', isPaidMember);
    console.log('入会からの月数：', monthsSinceJoin);
    console.log('メール認証済み：', isEmailVerified);
  </script>
</body>
</html>

Step 2：矛盾した状態を先に弾く（防御的な条件分岐）

<script>
  // まずは、あり得ない状態をチェックします
  if (monthsSinceJoin < 0) {
    console.log('エラー：入会からの月数が 0 未満です。');
  } else if (monthsSinceJoin > 600) {
    console.log('エラー：入会からの月数が現実的な範囲を超えています。');
  } else {
    console.log('入会からの月数は妥当です。ランク判定を続行します。');

    // ここからがランク判定の本体です
    let rank;
    let benefits;

    if (isPaidMember) {
      // 有料会員の場合の判定
      if (monthsSinceJoin >= 12) {
        rank = 'プラチナ';
        benefits = '最高ランクの特典が適用されます。';
      } else if (monthsSinceJoin >= 6) {
        rank = 'ゴールド';
        benefits = '多くの特典が適用されます。';
      } else {
        rank = 'シルバー';
        benefits = '基本的な有料特典が適用されます。';
      }
    } else {
      // 無料会員の場合の判定
      if (isEmailVerified) {
        rank = 'ブロンズ';
        benefits = '無料会員向けの特典が適用されます。';
      } else {
        rank = 'ゲスト';
        benefits = '特典はありませんが、基本機能を利用できます。';
      }
    }

    console.log('--- 会員ランク判定結果 ---');
    console.log('ランク：', rank);
    console.log('特典：', benefits);
  }
</script>

重要ポイントの深掘り：

  • monthsSinceJoin < 0 や monthsSinceJoin > 600 で、「明らかにおかしい値」を先に弾いています。
  • 有料会員と無料会員でロジックを分けるために、ネストした条件分岐を使っています。
  • 条件は「大きな分類（有料か無料か）」→「細かい分類（期間・認証）」という順番で書くと、読みやすくなります。

複数条件を使った「特典の追加条件」を組み込む

例えば、「プラチナ会員で、かつメール認証済みなら、特別キャンペーン対象」というような複数条件を追加してみます。

<script>
  let rank;
  let benefits;
  let extraCampaign = null; // 追加キャンペーン情報

  if (isPaidMember) {
    if (monthsSinceJoin >= 12) {
      rank = 'プラチナ';
      benefits = '最高ランクの特典が適用されます。';

      // 複数条件：プラチナ会員かつメール認証済みなら特別キャンペーン
      if (isEmailVerified && monthsSinceJoin >= 12) {
        extraCampaign = 'プラチナ会員限定キャンペーン対象です。';
      }
    } else if (monthsSinceJoin >= 6) {
      rank = 'ゴールド';
      benefits = '多くの特典が適用されます。';
    } else {
      rank = 'シルバー';
      benefits = '基本的な有料特典が適用されます。';
    }
  } else {
    if (isEmailVerified) {
      rank = 'ブロンズ';
      benefits = '無料会員向けの特典が適用されます。';
    } else {
      rank = 'ゲスト';
      benefits = '特典はありませんが、基本機能を利用できます。';
    }
  }

  console.log('--- 会員ランク判定結果（キャンペーン付き） ---');
  console.log('ランク：', rank);
  console.log('特典：', benefits);

  if (extraCampaign) {
    console.log('追加キャンペーン：', extraCampaign);
  } else {
    console.log('追加キャンペーン：対象外です。');
  }
</script>

ここでのポイント：

  • isEmailVerified && monthsSinceJoin >= 12 という複数条件で、「プラチナ会員かつメール認証済み」という状態を表現しています。
  • 追加条件を別の変数 extraCampaign に保存することで、後からまとめて表示できます。

Day 7後半テンプレート：ログイン＋ランク判定の統合版

最後に、Day 7後半の内容をまとめたテンプレートを示します。 ログイン判定と会員ランク判定を一連の流れとして書いたものです。

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <title>Day 7 後半：条件分岐実践テンプレート</title>
</head>
<body>
  <h1>条件分岐実践テンプレート（ログイン判定＋会員ランク判定）</h1>
  <p>コンソールを開いて、判定結果を確認してください。</p>

  <script>
    // --- ログイン情報 ---
    const inputUserName = 'taro';
    const inputPassword = 'password123';

    const registeredUserName = 'taro';
    const registeredPasswordHash = 'password123'; // 学習用に簡略化
    const isAccountActive = true;
    const isAccountLocked = false;
    const isEmailVerified = true;

    // --- 会員情報 ---
    const isPaidMember = true;
    const monthsSinceJoin = 14;

    console.log('--- ログイン試行 ---');

    const isUserNameMatch = inputUserName === registeredUserName;
    const isPasswordMatch = inputPassword === registeredPasswordHash;

    // 段階的なログイン判定（ネスト＋複数条件）
    if (!isUserNameMatch) {
      console.log('ログイン失敗：ユーザー名が一致しません。');
    } else {
      if (!isPasswordMatch) {
        console.log('ログイン失敗：パスワードが正しくありません。');
      } else {
        if (!isAccountActive) {
          console.log('ログイン失敗：アカウントが無効です。');
        } else if (isAccountLocked) {
          console.log('ログイン失敗：アカウントがロックされています。');
        } else if (!isEmailVerified) {
          console.log('ログイン失敗：メール認証が完了していません。');
        } else {
          console.log('ログイン成功：すべての条件を満たしています。');

          console.log('--- 会員ランク判定 ---');

          // まずは入会月数の妥当性チェック
          if (monthsSinceJoin < 0 || monthsSinceJoin > 600) {
            console.log('エラー：入会からの月数が不正です。');
          } else {
            let rank;
            let benefits;
            let extraCampaign = null;

            if (isPaidMember) {
              if (monthsSinceJoin >= 12) {
                rank = 'プラチナ';
                benefits = '最高ランクの特典が適用されます。';

                if (isEmailVerified && monthsSinceJoin >= 12) {
                  extraCampaign = 'プラチナ会員限定キャンペーン対象です。';
                }
              } else if (monthsSinceJoin >= 6) {
                rank = 'ゴールド';
                benefits = '多くの特典が適用されます。';
              } else {
                rank = 'シルバー';
                benefits = '基本的な有料特典が適用されます。';
              }
            } else {
              if (isEmailVerified) {
                rank = 'ブロンズ';
                benefits = '無料会員向けの特典が適用されます。';
              } else {
                rank = 'ゲスト';
                benefits = '特典はありませんが、基本機能を利用できます。';
              }
            }

            console.log('会員ランク：', rank);
            console.log('特典：', benefits);

            if (extraCampaign) {
              console.log('追加キャンペーン：', extraCampaign);
            } else {
              console.log('追加キャンペーン：対象外です。');
            }
          }
        }
      }
    }

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

Day 7後半のまとめ

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

  • &&・||・! を使って、複数条件を安全かつ読みやすく組み立てる方法
  • ネストした条件分岐で、「段階的なチェック」をコードにそのまま表現する方法
  • ログイン判定と会員ランク判定を通して、「条件分岐がルールと防御の両方を担う」ことを意識した書き方

ここまでのコードを自分で書き換えながら試してみると、「条件分岐でサービスの振る舞いをデザインする」という感覚が、かなりはっきりしてくるはずです。

Week 1 ミニアプリ：成績判定アプリのゴールをイメージする

Week 1の締めくくりとして、「成績判定アプリ」を作っていきます。 このミニアプリは、次の3つの機能を持つシンプルなWebアプリです。

  • 点数を入力
  • 評価を判定
  • メッセージを表示

ここまで学んできた「変数」「条件分岐（if / else if / else）」「比較条件」「複数条件」を、ひとつの流れの中で使っていく練習になります。 最終的には、ブラウザ上で動く小さなアプリとして完成させていきます。

成績判定アプリの仕様を言葉で整理する

評価ルールを決める

まずは、どのように成績を判定するかを決めます。 例として、次のような評価ルールを使います。

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

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

  • 点数は 0〜100 の範囲であること
  • 数値以外が入力された場合はエラーメッセージを表示すること

この「ルール」を、JavaScriptのコードに落とし込んでいきます。

アプリの構成をざっくりイメージする

画面とロジックの役割分担

成績判定アプリは、次の2つの部分から構成されます。

  • HTML部分：画面（入力フォーム・ボタン・結果表示エリア）
  • JavaScript部分：点数を読み取り、評価を判定し、メッセージを表示するロジック

この役割分担を意識すると、コードが整理しやすくなります。

Step 1：HTMLで「点数入力」と「結果表示」の枠を作る

まずは、ブラウザに表示される画面を作ります。

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <title>Week 1 ミニアプリ：成績判定アプリ</title>
</head>
<body>
  <h1>成績判定アプリ</h1>

  <!-- 点数入力フォーム -->
  <div>
    <label for="scoreInput">点数を入力してください（0〜100）：</label>
    <input id="scoreInput" type="number" min="0" max="100" />
    <button id="judgeButton">判定する</button>
  </div>

  <!-- 判定結果を表示するエリア -->
  <div style="margin-top: 16px;">
    <h2>判定結果</h2>
    <p id="resultText">ここに判定結果が表示されます。</p>
  </div>

  <!-- このあとに JavaScript を書きます -->
  <script>
    // ここに成績判定のロジックを書いていきます
  </script>
</body>
</html>

重要ポイント：

  • input 要素に type="number" を指定することで、数値入力に特化したフィールドになります。
  • id="scoreInput" や id="resultText" は、JavaScriptから要素を取得するための「名前」です。
  • ボタン id="judgeButton" をクリックしたときに、判定処理を動かすようにしていきます。

Step 2：JavaScriptで「ボタンが押されたら判定する」流れを作る

イベントの考え方

「ボタンが押されたら処理を実行する」というのは、イベントという考え方です。 ここでは、click イベントを使います。

<script>
  // HTMLの要素をJavaScriptから参照できるようにします
  const scoreInput = document.getElementById('scoreInput');   // 点数入力欄
  const judgeButton = document.getElementById('judgeButton'); // 判定ボタン
  const resultText = document.getElementById('resultText');   // 結果表示エリア

  // ボタンがクリックされたときに実行する処理を登録します
  judgeButton.addEventListener('click', () => {
    // ここに「点数を読み取って判定する」処理を書きます
    console.log('判定ボタンがクリックされました。');

    // 入力された値を取得します（文字列として取得されます）
    const inputValue = scoreInput.value;

    console.log('入力された値：', inputValue);

    // このあと、inputValue を使って成績判定を行います
  });
</script>

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

  • document.getElementById('scoreInput') で、HTMLの要素をJavaScriptから操作できるようにしています。
  • judgeButton.addEventListener('click', () => { ... }) で、「クリックされたときに実行する処理」を登録しています。
  • まだ判定はしていませんが、「イベントが起きたら処理をする」という流れを作れています。

Step 3：入力値を数値に変換し、型と範囲をチェックする

なぜ型と範囲をチェックするのか

安全なプログラムを書くうえで、「おかしな入力」を先に弾くことは非常に重要です。 ここでは次の2つをチェックします。

  • 数値かどうか（型チェック）
  • 0〜100の範囲に収まっているか（範囲チェック）
<script>
  judgeButton.addEventListener('click', () => {
    const inputValue = scoreInput.value;

    // 1. 空入力のチェック
    if (inputValue === '') {
      resultText.textContent = '点数が入力されていません。値を入力してください。';
      return; // ここで処理を終了します
    }

    // 2. 数値に変換します
    const score = Number(inputValue);

    // 3. 型チェック：数値かどうか
    if (Number.isNaN(score)) {
      resultText.textContent = 'エラー：点数は数値で入力してください。';
      return;
    }

    // 4. 範囲チェック：0〜100かどうか
    if (score < 0 || score > 100) {
      resultText.textContent = 'エラー：点数は 0 以上 100 以下で入力してください。';
      return;
    }

    // ここまで来たら、score は「妥当な点数」です
    console.log('妥当な点数として判定を続行します：', score);
  });
</script>

重要ポイントの深掘り：

  • inputValue === '' で「何も入力されていない」状態を検出しています。
  • Number(inputValue) で文字列を数値に変換しています。
  • Number.isNaN(score) で「数値に変換できなかった」状態を検出しています。
  • score < 0 || score > 100 で「範囲外」をまとめてチェックしています。
  • return; を使って、エラー時にはそれ以上処理を進めないようにしています。

Step 4：if / else if / else で評価ランクを判定する

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

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

<script>
  judgeButton.addEventListener('click', () => {
    const inputValue = scoreInput.value;

    if (inputValue === '') {
      resultText.textContent = '点数が入力されていません。値を入力してください。';
      return;
    }

    const score = Number(inputValue);

    if (Number.isNaN(score)) {
      resultText.textContent = 'エラー：点数は数値で入力してください。';
      return;
    }

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

    // --- ここから評価判定 ---

    let grade;   // 評価ランク（S, A, B, C, D）
    let message; // 評価に応じたメッセージ

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

    // 判定結果を画面に表示します
    resultText.textContent = `点数：${score} / 評価：${grade} / メッセージ：${message}`;
  });
</script>

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

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

Step 5：成績判定アプリ完成版テンプレート

ここまでの内容をひとつにまとめた「完成版テンプレート」です。 このコードをそのままHTMLファイルとして保存し、ブラウザで開くと、成績判定アプリが動きます。

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <title>Week 1 ミニアプリ：成績判定アプリ</title>
</head>
<body>
  <h1>成績判定アプリ</h1>

  <!-- 点数入力フォーム -->
  <div>
    <label for="scoreInput">点数を入力してください（0〜100）：</label>
    <input id="scoreInput" type="number" min="0" max="100" />
    <button id="judgeButton">判定する</button>
  </div>

  <!-- 判定結果を表示するエリア -->
  <div style="margin-top: 16px;">
    <h2>判定結果</h2>
    <p id="resultText">ここに判定結果が表示されます。</p>
  </div>

  <script>
    // HTML要素を取得します
    const scoreInput = document.getElementById('scoreInput');   // 点数入力欄
    const judgeButton = document.getElementById('judgeButton'); // 判定ボタン
    const resultText = document.getElementById('resultText');   // 結果表示エリア

    // 判定ボタンがクリックされたときの処理を登録します
    judgeButton.addEventListener('click', () => {
      console.log('判定ボタンがクリックされました。');

      // 入力された値を取得します（文字列として取得されます）
      const inputValue = scoreInput.value;
      console.log('入力された値：', inputValue);

      // 1. 空入力のチェック
      if (inputValue === '') {
        resultText.textContent = '点数が入力されていません。値を入力してください。';
        return;
      }

      // 2. 数値に変換します
      const score = Number(inputValue);

      // 3. 型チェック：数値かどうか
      if (Number.isNaN(score)) {
        resultText.textContent = 'エラー：点数は数値で入力してください。';
        return;
      }

      // 4. 範囲チェック：0〜100かどうか
      if (score < 0 || score > 100) {
        resultText.textContent = 'エラー：点数は 0 以上 100 以下で入力してください。';
        return;
      }

      // --- ここから評価判定 ---

      let grade;   // 評価ランク（S, A, B, C, D）
      let message; // 評価に応じたメッセージ

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

      // 判定結果を画面に表示します
      resultText.textContent = `点数：${score} / 評価：${grade} / メッセージ：${message}`;

      console.log('判定処理が完了しました。');
    });
  </script>
</body>
</html>

Week 1 ミニアプリのまとめ

この成績判定アプリを通して、次のことを体験しました。

  • HTMLとJavaScriptを組み合わせて、「入力 → 判定 → 表示」という一連の流れを作ったこと
  • if・else if・else と比較条件を使って、点数に応じた評価を判定するロジックを書いたこと
  • 型チェックと範囲チェックを条件分岐に組み込むことで、「明らかにおかしい入力」を安全に弾く書き方を体験したこと

ここまでのコードを自分で書き換えながら試してみると、「JavaScriptで小さなアプリを作る」という感覚がぐっと現実的になってきます。 評価ルールやメッセージを自分なりにアレンジして、オリジナルの成績判定アプリに育てていくのもおすすめです。

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