条件分岐で大きさと表示を切り替える

指導者向けの公開補足

学習本文に加えて、指導の視点・背景・授業での確かめ方を示します。どなたでも読めます。

指導の焦点

上限・下限の手前、ちょうど、超えようとした場合を試す。条件の形だけでなく初期値と変化量も、境界を守れるかどうかの前提に含める。

一歩踏み込んだ背景

更新前の比較だけで範囲を守れるのは、値が境界へ正確に到達する場合である。真偽値によるモード管理では、見た目と内部状態の両方を更新する必要がある。

授業での確かめ方

上限320と下限80で連打し、幅が止まることを確認する。次に増分を50へ変え、上限を超える反例を作った後、Math.minとMath.maxによる制限を検証する。

制度・規格等は本文末尾の参考資料も確認してください。

JSFiddleでコードを試す

JSFiddleは、ブラウザーでHTML・CSS・JavaScriptを入力して実行できるサービスです。短い動作確認から始められます。

1. 新しい編集画面を開きます。JavaScriptは通常のJavaScriptを選び、外部ライブラリは追加しません。
2. HTML欄にはページの本文、CSS欄には見た目、JavaScript欄には処理を書きます。HTML欄に<html>や<body>は不要です。JavaScript欄に<script>は付けません。
3. DOMを使う例では、JavaScriptの実行タイミングを「On Load」「On DOM Ready」または「No wrap - bottom of body」にします。
4. 「Run」を押してResult欄を確認します。書き換えたら再びRunを押します。

console.logの結果は通常、ページではなく開発者ツールのコンソールに出ます。このサイトの計算例をResult欄で読みたいときは、HTML欄に次を入れます。

<pre id="output"></pre>

JavaScript欄には次を入れ、console.log(2 + 3);の行を、試したいコード一つに置き換えます。独立した例を複数まとめて貼らないでください。

{
  const output = document.getElementById("output");
  const console = {
    log(...values) {
      output.textContent += values.join(" ") + "\n";
    }
  };
  console.log(2 + 3);
}

Runを押すと「5」と表示されます。外側の波括弧の中だけで表示用のconsoleを用意しているため、ブラウザー本来のコンソールは変更しません。

HTMLとJavaScriptの両方を載せた実習例は、この表示用コードで囲まず、それぞれの欄へ分けて貼り付けます。保存・共有時は公開範囲を確認し、個人情報やパスワードを入力しないでください。コードは手元にも残しましょう。

NAS・GitHub・CodePenなど、作業環境の選び方

この単元でできるようになること

• 条件に応じて処理を実行するかどうかを決められる。
• 上限・下限の直前、ちょうど、超えようとした場合を確かめられる。
• 真偽値で状態を覚え、二つの表示を切り替えられる。

ナビのひとこと

上限の一歩手前で押したときと、上限で押したとき。同じように動いてよいかな。

用語

• 条件分岐：条件の真偽によって実行する処理を選ぶこと。
• 比較演算子：大小や等しさを比較する記号。<や>、===など。
• 真偽値：trueとfalseの二つで表す値。
• 境界値：条件によって処理が変わる境目の値。

上限と下限を用意する

画像の幅を80pxから320pxまでとする。大きくする前に「今の幅が320未満か」、小さくする前に「80より大きいか」を調べる。以下をlimits.htmlとして保存し、両方のボタンを何度か押してみよう。

limits.html

<!doctype html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>条件で動きを変える</title>
</head>
<body>
  <h1>大きさと表示の切替</h1>
  <div style="max-width: 100%; overflow: auto">
    <img id="picture" alt="緑の丸" width="160"
      src="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 160 100'%3E%3Ccircle cx='80' cy='50' r='40' fill='seagreen'/%3E%3C/svg%3E">
  </div>
  <p id="size-label" aria-live="polite">幅：160px</p>
  <button id="grow" type="button">大きくする</button>
  <button id="shrink" type="button">小さくする</button>
  <button id="mode" type="button" aria-pressed="false">暗い表示</button>
  <script>
    const picture = document.getElementById("picture");
    const label = document.getElementById("size-label");
    const modeButton = document.getElementById("mode");
    let size = 160;
    let dark = false;

    function renderSize() {
      picture.width = size;
      label.textContent = "幅：" + size + "px";
    }

    document.getElementById("grow").addEventListener("click", () => {
      if (size < 320) {
        size = size + 40;
      }
      renderSize();
    });

    document.getElementById("shrink").addEventListener("click", () => {
      if (size > 80) {
        size = size - 40;
      }
      renderSize();
    });

    modeButton.addEventListener("click", () => {
      if (dark === false) {
        document.body.style.backgroundColor = "#18202a";
        document.body.style.color = "#ffffff";
        dark = true;
      } else {
        document.body.style.backgroundColor = "#ffffff";
        document.body.style.color = "#18202a";
        dark = false;
      }
      modeButton.setAttribute("aria-pressed", String(dark));
    });
  </script>
</body>
</html>

条件が成立しないとき

ifの丸括弧内がtrueなら波括弧内を実行し、falseなら飛ばす。320pxのときに大きくするボタンを押しても、size < 320はfalseなので加算しない。

renderSize()は分岐の外にあり、どちらの場合も今の値を表示する。画面の更新を関数へまとめたことで、加算と減算で同じ処理を呼べる。

操作前	操作	操作後
280px	大きくする	320px
320px	大きくする	320px
120px	小さくする	80px
80px	小さくする	80px

この条件で上限・下限を守れるのは、160から40ずつ変化するためである。変化量を50に変えると、310の次が360となり、上限を超える。変化量も変えたい場合は、加算行をsize = Math.min(size + 50, 320);、減算行をsize = Math.max(size - 50, 80);とする方法がある。Math.minは小さい方、Math.maxは大きい方を選ぶので、境界を超えない。

ナビのひとこと

条件があるだけで安心しないで、実際に境界をまたぐ値も試そう。

二つの状態を切り替える

明暗切替では、darkがfalseなら暗くし、そうでなければ明るくする。elseは条件が成立しなかった場合の処理を表す。

=は代入、===は厳密な等価比較で、役割が異なる。色だけを変えてdarkの更新を忘れると、次のクリックでも同じ側の処理が選ばれてしまう。

このページの明暗は練習用で、再読み込みすると初期状態へ戻る。状態を次の閲覧まで保持するには、別途保存する仕組みが必要になる。

ナビのひとこと

一回だけでなく、二回押して元に戻ることも確かめよう。

確認問題

1. 幅280pxで大きくするボタンを2回押すと、それぞれ何pxになるか。
2. 40ずつ変えていた処理を50ずつへ変えると、元の条件だけでは上限を守れないのはなぜか。
3. 明暗切替で、色を変えた後にdarkも更新するのはなぜか。

問1の解答例を見る

1回目で320px、2回目も320pxである。320ではsize < 320がfalseとなるため、それ以上は加算されない。

問2の解答例を見る

160から50ずつ増やすと210、260、310、360となる。310は320未満なので条件を通るが、加算後は上限を超える。Math.minで上限と加算結果の小さい方を選ぶ方法がある。

問3の解答例を見る

次のクリックで現在のモードに合った側の処理を選ぶため。状態を更新しないと、見た目を変えても同じ条件が成立し続けて切り替わらない。

まとめ

条件と状態を組み合わせて動きを選ぶ。変化量や初期値を変えたら、境界を守れるか確かめ直す。次は反復で画像を並べるへ進もう。

参考

• MDN：条件文
• MDN：Math.min()
• MDN：Math.max()