← コース一覧に戻る

条件分岐とループ

開発環境のセットアップ

1. フォルダの作成

デスクトップなどに「javascript-practice」という名前の新しいフォルダを作成します。

2. VSCodeでフォルダを開く

VSCodeを起動し、[ファイル] → [フォルダを開く] から作成したフォルダを選択します。

3. HTMLファイルの作成

VSCode上で新規ファイルを作成し、「index.html」という名前で保存します。

4. Live Serverの設定（推奨）

VSCodeの拡張機能「Live Server」をインストールすると、HTMLファイルの変更を自動的にブラウザに反映できます。

歴史と必要性

条件分岐とループは、1950年代のプログラミング言語FORTRANで初めて導入された基本的な制御構造です。 これらの概念がなければ、プログラムは単純な一方通行の処理しかできません。

例えば、ユーザーの入力に応じて異なる処理を行ったり（条件分岐）、 100個のデータを効率的に処理したり（ループ）することが不可能でした。 現代のプログラミングでは、これらの制御構造なしでアプリケーションを作ることは考えられません。

1. 条件分岐（if文）

基本概念

if文は「もし〜なら」という条件に基づいて処理を分けるための構文です。 日常生活でいえば「もし雨が降っているなら傘を持っていく」というような判断に似ています。

基本的な書き方（index.html）

<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="UTF-8">
    <title>条件分岐の基本</title>
</head>
<body>
    <h1>条件分岐の基本例</h1>
    <input type="number" id="age" value="20">
    <button onclick="checkAge()">判定する</button>
    <div id="output"></div>

    <script>
        function checkAge() {
            const age = parseInt(document.getElementById('age').value);
            const output = document.getElementById('output');
            
            if (age >= 20) {
                output.textContent = "成人です";
            } else {
                output.textContent = "未成年です";
            }
        }
    </script>
</body>
</html>

実行手順：

  1. 上記のコードをVSCodeの「index.html」にコピーします
  2. ファイルを保存します（Ctrl + S または Command + S）
  3. Live Serverがインストールされている場合：ファイルを右クリックして「Live Serverで開く」を選択
  4. Live Serverがない場合：ファイルをブラウザにドラッグ＆ドロップ

演習1: 年齢判定プログラム

以下の条件で年齢を判定するプログラムを作成してください：

  • 0-12歳: 子供
  • 13-19歳: 青年
  • 20歳以上: 成人

テンプレート（age-check.html）

<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="UTF-8">
    <title>年齢判定</title>
</head>
<body>
    <h1>年齢判定プログラム</h1>
    <input type="number" id="age" value="15">
    <button onclick="checkAgeGroup()">判定する</button>
    <div id="output"></div>

    <script>
        function checkAgeGroup() {
            const age = parseInt(document.getElementById('age').value);
            const output = document.getElementById('output');
            
            // ここにプログラムを書いてください
        }
    </script>
</body>
</html>

2. ループ処理

基本概念

ループは同じ処理を繰り返し実行するための構文です。 例えば、1から10までの数を表示する場合、同じような処理を10回書く代わりに、 ループを使って簡潔に書くことができます。

forループの基本（loop.html）

<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="UTF-8">
    <title>ループの基本</title>
</head>
<body>
    <h1>ループの基本例</h1>
    <button onclick="showNumbers()">実行する</button>
    <div id="output"></div>

    <script>
        function showNumbers() {
            const output = document.getElementById('output');
            let result = '';
            
            for (let i = 1; i <= 5; i++) {
                result += i + '\n';
            }
            
            output.textContent = result;
        }
    </script>
</body>
</html>

演習2: 数字の合計を計算

1から10までの数字の合計を計算するプログラムを作成してください。

テンプレート（sum.html）

<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="UTF-8">
    <title>数字の合計</title>
</head>
<body>
    <h1>数字の合計を計算</h1>
    <button onclick="calculateSum()">計算する</button>
    <div id="output"></div>

    <script>
        function calculateSum() {
            const output = document.getElementById('output');
            let sum = 0;
            
            // ここにプログラムを書いてください
        }
    </script>
</body>
</html>

用語解説

条件分岐
プログラムの実行の流れを、特定の条件によって変えること。「もし〜なら、こうする」という考え方です。
ブール値
true（真）またはfalse（偽）の2つの値のみを持つデータ型。条件が成り立つかどうかを表現します。
ループ
同じ処理を繰り返し実行すること。「繰り返し処理」とも呼ばれます。
インクリメント
変数の値を1増やす操作。i++ のように書きます。
イテレーション
繰り返し処理の1回分の実行のこと。