反復で画像を並べる

指導者向けの公開補足

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

指導の焦点

初期化・条件判定・本体・更新の順を追い、最後に実行する値と終了時の値を区別させる。部品の生成と文書への追加も別の操作として扱う。

一歩踏み込んだ背景

DOMへ同じ要素を追加し直しても複製にはならないので、反復の中で新しい部品を生成する。再描画では既存要素の消去の有無によって結果の件数が変わる。

授業での確かめ方

四回の反復でiの値を記録し、条件を一か所変更して件数を比べる。再描画を二回行い、replaceChildrenの有無による4枚と12枚の違いを確かめさせる。

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

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の初期化・条件・更新と、実行回数を説明できる。
• HTMLの部品をJavaScriptで生成し、ページへ追加できる。
• 同じ処理を再実行したときの重複を防げる。

ナビのひとこと

同じ画像を四つ並べるなら、似た命令を四回書く以外に方法はあるかな。

用語

• 反復：条件を満たす間、同じ処理を繰り返すこと。
• カウンター：回数などを数えるために使う変数。
• 要素の生成：createElementなどで、ページへ加える部品を作ること。

画像を生成して追加する

下の全体をgallery.htmlとして保存する。開いたときに四つの画像が並び、「並べ直す」を押しても四つのままであることを確かめよう。

gallery.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>
  <button id="redraw" type="button">並べ直す</button>
  <div id="gallery"></div>
  <script>
    const gallery = document.getElementById("gallery");
    const imageSource = "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";

    function renderGallery() {
      gallery.replaceChildren();
      for (let i = 1; i <= 4; i++) {
        const figure = document.createElement("figure");
        const image = document.createElement("img");
        image.src = imageSource;
        image.width = 120;
        image.alt = "緑の丸";
        const caption = document.createElement("figcaption");
        caption.textContent = i + "枚目";
        figure.appendChild(image);
        figure.appendChild(caption);
        gallery.appendChild(figure);
      }
    }

    document.getElementById("redraw").addEventListener("click", renderGallery);
    renderGallery();
  </script>
</body>
</html>

createElement("img")は画像の部品を作るだけで、その時点ではまだ画面に追加されていない。srcなどを設定し、appendChildで表示先へ追加する。

figureの中に画像と説明のfigcaptionをまとめている。同じ部品を使い回すのではなく、反復の中で毎回新しい部品を作っている。

forの順番を追う

for (let i = 1; i <= 4; i++)は、次の順で進む。

1. 初めに一度だけ、iを1にする。
2. i <= 4を調べる。trueなら波括弧内の処理をする。
3. i++で1増やし、再び条件を調べる。
4. iが5になると条件がfalseとなり、反復を終える。

処理中のi	生成する説明
1	1枚目
2	2枚目
3	3枚目
4	4枚目

条件をi < 4に変えると3回になる。更新を削除すると条件が変化せず、際限なく部品を追加して画面が応答しなくなるおそれがある。反復を動かす前に、止まる理由を説明しておこう。

ナビのひとこと

開始の数だけでなく、最後に処理する数と、終了するときの数を分けて追ってみよう。

再実行すると増え続ける？

replaceChildren()で表示先を空にしてから作り直すため、ボタンを何度押しても四つである。この行を外すと、押すたびに四つずつ追加される。「毎回作り直す」のか「追加する」のか、目的に応じて選ぶ。

本物の画像ファイルを使う場合は、image.src = "photo" + i + ".jpg";のように番号からファイル名を組み立てる方法もある。その場合はphoto1.jpgからphoto4.jpgをHTMLと同じフォルダーへ用意し、内容に合った代替テキストも設定しよう。

ナビのひとこと

部品を作る処理と、表示先へ追加する処理。二つとも必要なんだね。

確認問題

1. 初期値1、条件i <= 4、更新i++では、反復処理の中のiはいくつずつになるか。
2. createElement("img")で作っただけの画像が、まだ表示されないのはなぜか。
3. 元のコードで並べ直すボタンを2回押した後、画像はいくつあるか。replaceChildren()を外すといくつか。

問1の解答例を見る

処理中のiは1、2、3、4となり、合計4回実行する。更新で5になった後、条件がfalseとなり終了する。

問2の解答例を見る

部品を作っただけで、表示中の文書へまだ追加していないため。画像の属性を設定し、appendChildなどで表示先へ追加する必要がある。

問3の解答例を見る

元のコードでは毎回表示先を空にするので4枚のまま。replaceChildrenを外すと初回表示の4枚に、クリック2回分の8枚が加わり、12枚になる。

まとめ

反復で部品を繰り返し生成できる。回数と停止条件、再実行時の扱いを確かめる。次は配列で画像の見出しを管理するへ進もう。

参考

• MDN：ループと反復処理
• MDN：Document.createElement()
• MDN：Element.replaceChildren()