反復・累積・終了条件

指導者向けの公開補足

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

指導の焦点

開始値・継続条件・更新を対応させる。「何回繰り返すか」と「最後の変数の値」を同じものと扱わない。条件を確認するタイミングも図で示す。

一歩踏み込んだ背景

反復の終了は、条件を書いただけでは保証されない。更新によって終了条件へ近づくことや、空の入力で一度も実行されない場合も考える。

授業での確かめ方

0回・1回・複数回になる入力を試し、合計や回数の初期値を比較する。実行前に表で予想し、境界で一回ずれる誤りを見つけさせる。

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

JSFiddleでコードを試す

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

新しい編集画面を開きます。JavaScriptは通常のJavaScriptを選び、外部ライブラリは追加しません。
HTML欄にはページの本文、CSS欄には見た目、JavaScript欄には処理を書きます。HTML欄に<html>や<body>は不要です。JavaScript欄に<script>は付けません。
DOMを使う例では、JavaScriptの実行タイミングを「On Load」「On DOM Ready」または「No wrap - bottom of body」にします。
「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など、作業環境の選び方

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

反復の初期化、継続条件、更新を見分けられる。
合計を求める処理の途中経過を説明できる。
零回の反復と無限反復を区別し、停止を確かめられる。

回数が決まっている反復

架空の朗読会で、五日間の練習時間を記録する。初日は四分、以後一日ごとに二分ずつ増やすと決めたとする。一日ずつ式を書く代わりに、何日目かを表す変数を変えながら、同じ計算を繰り返せる。

JavaScriptの for は、初期化、継続条件、更新をまとめて書く。初期化を一度行い、条件が真なら本体を実行し、更新して、再び条件を調べる。条件が偽になったら本体へ入らず、反復の後へ進む。更新より先に条件を調べるのか、本体を動かすのかという順序を押さえたい。

let total = 0;
for (let day = 1; day <= 5; day++) {
  const minutes = 4 + (day - 1) * 2;
  total = total + minutes;
  console.log(day, minutes, total);
}

出力は順に 1 4 4、2 6 10、3 8 18、4 10 28、5 12 40。最後の列はその日だけの練習時間ではなく、その日までの合計である。total を反復の前で零にしておくことで、それまでの結果を次の回へ持ち越せる。

初期化する場所で意味が変わる

もし let total = 0 を反復本体の中へ移すと、毎回零から足すことになり、累積にならない。逆に、別の人の記録を計算する際に前の合計を残したまま始めると、混ざった結果になる。何を何回ごとに初期化するかは、プログラムの意味そのものだ。

目的	初期化する時点	更新する時点
五日間の合計	五日分を数える前に一度	各日の計算後
その日の時間	各日の処理で求め直す	日が変わるたび
日番号	反復開始時	本体の処理後

反復の各回が終わった時点で、合計には「初日からその日まで」が入っている。この性質を手計算の表と比較すると、足し忘れや二重加算を見つけやすい。最後の表示だけでなく、途中の意味を言えることが大切だ。

条件が満たされるまで繰り返す

回数を先に決めず、目標まで進めたい場合は while が使える。次は架空の小さな貯金記録で、現在八百円、毎回三百円を追加し、二千円以上になったところで終える。利息や手数料はないものとする。

let balance = 800;
let additions = 0;
while (balance < 2000) {
  balance = balance + 300;
  additions = additions + 1;
}
console.log(additions, balance);

出力は 4 2000。開始時に条件を調べるため、初めから二千円以上あれば本体を一度も実行しない。while は「必ず一回実行する」書き方ではない。零回が正しい場面もあるので、テストから外さないようにする。

今回、残高は毎回三百円ずつ増える。目標は有限で、更新が目標へ近づく向きなので停止する。追加額を零にしたり、更新の行を消したりすると、条件が真のまま変化せず、終わらなくなる。

一回のずれを防ぐ

日番号を一から始めて五以下で続ける場合は五回だが、五未満なら四回になる。零から始めて五未満なら再び五回になる。開始値、比較、更新幅をひとまとまりで読もう。配列では添字が零から始まるので、要素数未満という条件がよく現れる。

反復の中に反復を置くと、外側の一回ごとに内側が最初から動く。外側が三回、内側が四回なら、内側の本体は合計十二回である。ただし内側の条件が外側の値によって変わる場合は、単純な掛け算で済まない。各回の回数を表にして足す必要がある。

break は反復を途中で終了し、continue はその回の残りを飛ばして次の回へ進める。便利だが、更新処理まで飛ばすと停止しなくなる書き方もある。初学時は、飛び先と次の条件判定までを矢印で追うとよい。

注意： 動きを試す前に、終了へ近づく更新があるかを確認しよう。ブラウザで無限反復を動かすと画面が応答しなくなることがある。このページの例は回数が有限で、出力も少数になるようにしている。

用語

用語	意味
反復	条件に従い処理を繰り返す構造
継続条件	次の回を実行するかを決める条件
累積	以前の結果へ新しい値を加えて保持すること
カウンタ	回数や位置を数える変数
無限反復	継続条件が変わらないなどの理由で終わらない反復

確認問題

練習の例を三日間に変えると、最後の表示の三つの値は何か。
貯金の初期額が二千円なら、反復回数と最後の残高はどうなるか。
balance = balance + 300 を消した場合、なぜ終了しないかを条件の変化から説明しよう。

問1の解答例を見る

最後の表示は3 8 18。三日目は4＋（3−1）×2＝8分であり、累積は4＋6＋8＝18分となる。

問2の解答例を見る

反復は0回、表示は0 2000。最初からbalance < 2000が偽なので、追加せずに終了する。

問3の解答例を見る

balanceが800のまま変化せず、balance < 2000がずっと真になるためである。additionsだけを増やしても、終了条件に使う残高は変わらない。