配列で画像の見出しを管理する

指導者向けの公開補足

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

指導の焦点

添字と人に見せる順番を分け、0から始まる添字とlength未満という条件の関係を説明させる。三要素の成功だけでなく増減と空配列も検証する。

一歩踏み込んだ背景

配列を反復する際、lengthと等しい添字は通常の末尾要素を指さない。表示する内容はtextContentで設定し、文字列をHTMLとして解釈させない仕組みも確認する。

授業での確かめ方

三要素、四要素、空配列へと順に変更し、件数・見出し・画像数を比較する。条件を一時的に<=へ変えてundefinedが現れる理由を添字の表で説明させる。

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

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

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

• 配列の要素と添字を区別できる。
• 配列の長さに応じて反復し、各要素を表示できる。
• 要素を増減した場合や、配列が空の場合の動きを確かめられる。

ナビのひとこと

画像を増やすたびに、繰り返す回数まで書き直す必要はあるかな。

用語

• 配列：複数の値を順番にまとめて扱うためのデータ構造。
• 要素：配列に含まれる一つ一つの値。
• 添字：要素を指定する番号。この実習のJavaScript配列では0から始まる。
• length：配列の長さを調べるためのプロパティ。

見出しの違う画像一覧

丸の図を「朝の丸」「昼の丸」「夜の丸」と名付けて表示する。下の全体をcaptions.htmlとして保存し、見出しの順序を確かめよう。

captions.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>
  <p id="count" aria-live="polite"></p>
  <div id="gallery"></div>
  <script>
    const titles = ["朝の丸", "昼の丸", "夜の丸"];
    const gallery = document.getElementById("gallery");
    const count = document.getElementById("count");
    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();
      count.textContent = titles.length + "件";
      for (let i = 0; i < titles.length; 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 + 1) + "番：" + titles[i];
        figure.appendChild(image);
        figure.appendChild(caption);
        gallery.appendChild(figure);
      }
    }

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

表示番号と添字は違う

表示する順番	添字i	titles[i]
1番	0	朝の丸
2番	1	昼の丸
3番	2	夜の丸

titles[0]が最初の要素である。表示上は1番から数えたいのでi + 1を使い、取り出すときは0からのiを使っている。

前の実習のようにiを1から始めるなら、最初の要素を取り出す添字はi - 1となる。この例は配列の添字に合わせて0から反復するので、引き算は必要ない。

ナビのひとこと

人が読む「何番目」と、プログラムが使う添字を分けて考えるんだね。

lengthと反復を組み合わせる

titles.lengthはこの配列では3となる。i < titles.lengthにより、iが0、1、2のときだけ処理する。<=にすると、存在しない添字3まで読んでundefinedと表示してしまう。

配列の末尾へ"雨の丸"を追加してみよう。lengthも4となるので、反復の条件を書き直さなくても四つ表示される。constは変数への再代入を禁止するが、配列の中身の変更まで禁止するわけではない。

次に、配列の定義をconst titles = [];へ変えて実行しよう。件数は0、画像は0枚となる。最初の条件判定から0 < 0がfalseなので、一度も反復しない。

この例では文章をtextContentで設定している。見出しに<などが含まれても、HTMLのタグとしてではなく文章として扱われる。

自分のギャラリーへ

画像も一つずつ替えるなら、見出しだけでなく画像のファイル名や代替テキストも一組にして管理するとよい。要素としてオブジェクトを持つ配列が使える。まずはこの実習で、添字・順番・件数が一致していることを確認しよう。

ナビのひとこと

三つのときだけ動くコードではなく、四つでもゼロでも、意図した結果になるか試そう。

確認問題

1. 元の配列で「昼の丸」を取り出す添字はいくつか。表示上の順番はいくつか。
2. 条件をi <= titles.lengthにすると、元の配列では何回実行され、最後に何が表示されるか。
3. 配列を空にしてもエラーにならず、画像が0枚になるのはなぜか。

問1の解答例を見る

添字は1で、表示上は2番目である。JavaScriptの配列の添字は0から始まるので、順番より一つ小さい番号になる。

問2の解答例を見る

iが0、1、2、3の合計4回実行する。添字3の要素は存在しないため、最後は「4番：undefined」と表示される。

問3の解答例を見る

lengthが0なので、最初の条件0 < 0がfalseとなり、反復本体を実行しない。件数だけ0件と表示し、画像の部品は作らない。

まとめ

配列で内容を管理し、反復で表示する。添字と表示番号を区別し、要素の増減と空の配列も確かめよう。基礎の整理には配列の教材も使える。

参考

• MDN：配列
• MDN：Node.textContent