条件分岐と境界値

指導者向けの公開補足

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

指導の焦点

条件を境にした値を必ず試す。「未満」と「以下」の違い、複数条件の優先順が結果に及ぼす影響を確かめる。

一歩踏み込んだ背景

独立したifを複数書く場合と、if・else ifで一つを選ぶ場合は意味が違う。型変換を伴う比較など、言語固有の規則も分離して扱う。

授業での確かめ方

料金区分の境界の直前・同値・直後をテストする。複数条件が真になる入力も用意し、期待する結果を先に表で決めさせる。

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

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など、作業環境の選び方

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

• 条件式と実行される枝の関係を説明できる。
• 範囲を漏れなく、意図しない重なりなく分類できる。
• 境界の前後と等しい値を使って分岐を検証できる。

ナビのひとこと

待ち時間が十分ちょうどなら、どの列に案内する？ 「未満」と「以下」の一文字で結果が変わるよ。

分岐は、条件による処理の選択

プログラムの分岐は、条件が真か偽かによって、次に実行する処理を選ぶ構造である。架空の展示会で待ち時間を案内するとしよう。実際の安全基準ではなく、「十分未満は短め、十分以上三十分未満は通常、三十分以上は長め」という説明用の規則を決める。

この規則は、言葉だけでなく範囲の表にすると読み違いを減らせる。どの値も一つの区分へ入り、十分と三十分をどちら側に含めるかが明確になる。負の待ち時間は分類の対象にしないという前提も別に定める。

入力の範囲	表示	境目を含む側
零分以上、十分未満	短め	零分を含む
十分以上、三十分未満	通常	十分を含む
三十分以上	長め	三十分を含む

上から順に条件を調べる

待ち時間を三つに分類する

for (const minutes of [0, 9, 10, 29, 30]) {
  let label;
  if (minutes < 10) {
    label = "短め";
  } else if (minutes < 30) {
    label = "通常";
  } else {
    label = "長め";
  }
  console.log(minutes, label);
}

出力は 0 短め、9 短め、10 通常、29 通常、30 長め となる。else if へ進むのは、その前の条件が偽のときだけである。二番目の枝に来た時点で十分以上と分かっているため、三十分未満かを調べればよい。

上限が小さい条件から並べるのが、この規則に合う書き方だ。最初に三十分未満を調べて「通常」にすると、五分もそこで決まり、「短め」へ進まなくなる。条件式だけでなく、その順序が意味を持っている。

独立したifとは働きが違う

複数の if を独立して並べれば、それぞれの条件を調べる。十分未満なら「短め」、三十分未満なら「通常」と別々に表示する書き方では、五分のとき両方を表示してしまう。必ず一つに分類したいなら if、else if、else のつながりが適する。

一方、利用者の通知設定を調べ、音と画面の両方を有効にするような場面では、複数の条件を独立して実行したいこともある。すべての分岐を一つにつなげればよいわけではない。処理が排他的なのか、重ねて行ってよいのかを先に決めよう。

ナビのひとこと

「一つだけ選ぶ」のか「当てはまるものを全部行う」のか。書き方を選ぶ前に、目的を言葉にしてみよう。

比較と論理演算を組み合わせる

JavaScriptでは === が厳密な等価比較、!== がその否定である。= は代入なので、等しさを調べる記号として使わない。数値の大小を比べるときには、先に数値として有効かを確かめるとよい。

範囲と整数の条件を合わせる

for (const people of [-1, 0, 8, 9, 2.5]) {
  const valid = Number.isInteger(people) && people >= 0 && people <= 8;
  console.log(people, valid);
}

出力は -1 false、0 true、8 true、9 false、2.5 false。人数は零以上八以下の整数という規則を、三つの条件のANDで表した。0 <= people <= 8 と数学の連続した不等式をそのまま書かない。JavaScriptでは二つの比較を別に書き、&& で結ぶ。

|| は少なくとも一方が真、! は否定を表す。組み合わせる場合は括弧を使って範囲を明確にすると、優先順位の思い込みを減らせる。たとえば「会員かつ予約あり、または招待者」という規則は、会員条件をどこまで適用するかを先に決める必要がある。

境界値で、漏れを見つける

待ち時間の例で二十分だけを試しても、十分の扱いが正しいかは分からない。整数分を扱うなら、境目の直前、ちょうど、直後を試す。十分なら九、十、十一、三十分なら二十九、三十、三十一である。零や負の値、入力範囲外をどう扱うかも、仕様に応じて別に確認する。

実行前に表から期待結果を作り、実行結果と比較することが重要だ。プログラムと同じ条件式をもう一度書いて期待結果を作るだけでは、同じ誤りを両方に入れてしまうことがある。

注意： 最初の例は非負の整数を前提にしており、不正入力を拒否する機能は含めていない。else があるだけでは入力の妥当性まで保証されない。現実の待ち時間の予測や混雑の安全判断にも使わない。

用語

空欄をクリックすると用語を表示します。もう一度クリックすると隠せます。

用語	意味
条件式	真偽を判定する式
分岐	条件によって実行する処理を選ぶ構造
排他的	同時に複数を選ばない関係
境界値	分類や処理が切り替わる境目の値
論理演算	真偽をANDやORなどで結び付ける演算

確認問題

1. 最初の例に十一分と三十一分を追加すると、何と表示されるか。
2. 「十分以下は短め」に変更する場合、条件式と期待結果のどこを変えるべきか。
3. 人数の例で整数かどうかの条件を外すと、どの入力の判定が変わるか。

問1の解答例を見る

十一分は「通常」、三十一分は「長め」と表示される。十一分は10未満ではないが30未満であり、三十一分はどちらにも当てはまらない。

問2の解答例を見る

最初の条件をminutes <= 10に変える。10分の期待結果を「通常」から「短め」へ変更し、9・10・11分など境界の前後も確かめる。

問3の解答例を見る

2.5の判定がfalseからtrueへ変わる。整数である条件を外すと、0以上8以下という範囲だけを満たす小数も受け入れる。

まとめ

ナビのひとこと

条件、並び順、境目の三つを確かめよう。分岐の正しさは「ふつうの値」だけでは分からないね。

参考

• 文部科学省：高等学校学習指導要領 情報科関係資料
• MDN：JavaScriptガイド