順次・分岐・反復

指導者向けの公開補足

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

指導の焦点

順次・分岐・反復を、図の形の暗記ではなく実行順の追跡で捉える。分岐内の処理と、その後に続く処理を分けて読む。

一歩踏み込んだ背景

三つの基本制御構造で多くの処理を組み立てられることと、どんな書き方でも読みやすいことは別である。入れ子が深い場合は分解も検討する。

授業での確かめ方

掲載例の変数の値を一行ずつ記録させる。条件だけを変えて実行結果を予想し、実行後に予想との違いの原因を説明させる。

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

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

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

順次、分岐、反復の違いを説明できる。
短いプログラムの実行順と出力を説明できる。
繰り返しの回数を、変数の変化から確かめられる。

処理の流れは、三つに分けて考える

アルゴリズムは、問題を解くための手順だ。それをプログラミング言語で表したものがプログラムになる。

構造	何をするか	例
順次	書かれた順に処理する	代金を求めて、残金を求める
分岐	条件によって処理を選ぶ	予算以内なら購入候補にする
反復	決めた条件で処理を繰り返す	三つの品物の代金を順に足す

順次：上から順に計算する

工作用の紙を1枚80円で、3枚買うとする。金額や枚数を、名前のついた値として扱おう。値を扱うための名前を変数という。

const price = 80;
const count = 3;
const total = price * count;
const remaining = 500 - total;
console.log(total, remaining);

出力は 240 260 になる。* は乗算だ。JavaScriptでは、const で宣言した変数には、後から別の値を代入できない。

分岐：条件を先に確かめる

const total = 240;
const budget = 500;
if (total <= budget) {
  console.log("予算以内");
} else {
  console.log("予算を見直す");
}

total <= budget は「代金が予算以下か」という条件だ。この例では成り立つので、「予算以内」と表示する。else 側の処理は実行しない。

反復：値の変化を追う

三つの品物の価格を、配列という並びにまとめる。for...of は、配列の要素を順番に取り出す書き方だ。

const prices = [80, 120, 60];
let total = 0;
for (const price of prices) {
  total = total + price;
}
console.log(total);

let で宣言した total は、途中で値を更新できる。= は「左右が等しい」という主張ではなく、右辺で求めた値を左辺に代入する記号だ。

いつ	取り出した価格	加算後のtotal
1回目	80	80
2回目	120	200
3回目	60	260

出力は 260。要素が三つなので、加算も3回だ。

動きを確かめる方法

このページの各コードは、それぞれ独立した例だ。一つずつ、ブラウザの開発者ツールのコンソールやNode.jsで実行できる。複数の例を同じ場所に続けて貼ると、同名の const の再宣言でエラーになることがある。

出どころのわからないコードをコンソールへ貼り付けないこと。 自分で内容を確認できる短い教材だけを扱おう。

用語

用語	意味
アルゴリズム	問題を解くための手順
変数	値を扱うためにつける名前
配列	複数の要素を順番のある形でまとめたもの
代入	変数に値を設定すること

確認問題

分岐の例で、total を500に変えると、どちらが表示されるか。
配列を [50, 90] に変えると、加算は何回行われるか。
反復の例の console.log(total); を繰り返しの中へ移すと、表示はどう変わるか。

問1の解答例を見る

「予算以内」と表示される。条件はtotal <= budgetであり、500 <= 500は真になる。

問2の解答例を見る

二回。配列の二要素を一つずつ足し、合計は50＋90＝140となる。

問3の解答例を見る

加算後のtotalを表示する位置へ移すと、80、200、260を順に表示する。反復の外では、全要素を足した後の260だけを表示していた。