今日の準備でやること

物事や現象を、細かい工程に分けて考える

この講義で練習しているのは、 目の前で起きていることを観察し、 順番のある工程 として整理することです。

今はその練習題材として、 Webアプリを作っています。

完成アプリの使い方を噛み砕いて言語化の練習

画面で何が起きているかを言葉にしてもらいながら、言語化の練習をしています。そのために必要な道具（コンピューターへの指示の仕方）を少しずつ学んでいただいています。

前回まで学んだ道具事例

document.querySelector('.result').innerHTML = "書き換えたい文字";

let temperature = document.querySelector('.input').value;

if (temperature >= 30) {
  // 暑いときの処理
}

前回まで学んだ道具事例

document.querySelector('.btn')

Math.ceil(Math.random() * 100) // 1~100のどれかが生成

document.querySelector('.btn').addEventListener('click', function(){
    // ボタンが押されたときの処理
});

今日は「まとめて記憶する」がテーマ

記憶力ゲーム

6個のお題を覚えて、 どれだけお題を記憶できるかで遊ぶゲーム

3ステップで進めます

どちらの STEP も lesson/brainstorm.md に書いていきます。

完成版で遊んでみる

完成形のアプリを グループで一度遊んでみましょう。

STEP 1 — 記憶力ゲームの遊び方を、 ふだんの言葉で書き出す

lesson/brainstorm.md の STEP 1 に、 友達に 「これ、 こうやって遊ぶんだよ」 と説明するつもりで、 順番に書きましょう。

書き方の例（ITO ゲームだったら）

1. ゲーム画面を表示する
2. スタートボタンを押したら、
3. 数字が表示されるエリアに、 1〜100のうちのランダムな数字が1つ表示される

この粒度感で、 記憶力ゲームの遊び方を自分たちの言葉で書こう。

料理レシピのように、 細かく分ける

観察したことを、 レシピのような番号付きの手順 として書き下します。

大事なのは、 順番 と 1工程の細かさ。 後から読んでも同じ手順を再現できる粒度に。

STEP 2 — コンピューターに伝わる言葉に書き換える

STEP 1 で書いた工程を、 これまで習った語彙で言い換えます。

グループや周りの人とチェックしあう・可能であればチューターさんチェック

困ったら、 現地メンバーにお声がけくださいね。

記憶力ゲームで起きる場面を整理する

みなさんが書いた工程は、 大きく分けると4つの場面になります。 これを前回までの道具で書こうとするとどうなるかを、 順に見ていきます。

場面B・D は前回までの道具で素直に書けます。 ここからは、 ちょっと癖がある 場面C に注目します。

場面C — 前回までの道具で書いてみると

「カードがクリックされたら、 そのカードに答えを出す」 を、 前回までの道具で1枚ずつ書くとこうなります。

// もし1番のカードが押されたら、 1番のお題を表示
document.querySelector('.card-1').addEventListener('click', function () {
  document.querySelector('.card-1').innerHTML = "平等院鳳凰堂";
});

// もし2番のカードが押されたら、 2番のお題を表示
document.querySelector('.card-2').addEventListener('click', function () {
  document.querySelector('.card-2').innerHTML = "沖縄ちゅら海水族館";
});

// ↑ 同じ形を、 3番〜6番まで別のお題で書く（合計 6回）

場面A — モーダルにお題を並べるのも、 同じ調子で書ける

「画面を開くと、 モーダルの6つの場所にお題が並ぶ」 も、 前回までの道具で1か所ずつ書くとこうなります。

document.querySelector('.modal-topic-1').innerHTML = "平等院鳳凰堂";
document.querySelector('.modal-topic-2').innerHTML = "沖縄ちゅら海水族館";
document.querySelector('.modal-topic-3').innerHTML = "広島平和記念公園";
// ↑ 4番〜6番も別のお題で書く（合計 6回）

ここで 「平等院鳳凰堂」 、 場面C でも書きましたよね。

同じことを何度も書く...?

場面A（モーダル表示） と 場面C（カードの答え） の 両方 に「平等院鳳凰堂」 と書きました。 つまり 1つのお題につき2か所、 同じ文字列を打ち込んでいます。 お題6個分だと、 合計 12回 の書き込みになります。

お題のデータを 1か所にまとめて 持って、 場面A・C から 番号で取り出せれば、 一気にスッキリ。
それが今日学ぶ 配列。

配列 — 複数のデータをまとめておく仕組み

6個のお題を 1つのリスト としてまとめて持つ仕組みが 配列。

const topics = [
  '平等院鳳凰堂',
  '沖縄ちゅら海水族館',
  '広島平和記念公園',
  '太宰府天満宮',
  '近江町市場',
  '鶴岡八幡宮',
];

リストから1つだけ取り出す — 番号で特定する

場面C の「1番のカードが押されたら、 1番のお題を表示」 のように、 リストから 1つだけ 取り出したい時は、 番号 で指定します。 学生1人を 学籍番号 で区別するのと同じ感覚。

const topics = ['平等院鳳凰堂', '沖縄ちゅら海水族館', '広島平和記念公園'];

topics[0]  // → '平等院鳳凰堂'
topics[1]  // → '沖縄ちゅら海水族館'
topics[2]  // → '広島平和記念公園'

[ ] の中に 番号 を入れて、 リストから1つを取り出します。

番号は0から数える

配列の番号は 0始まり です。 慣れるまで少し戸惑うところです。

配列で書き換えると、 場面A・C はこうなる

場面A・C はどちらも、 表示したいデータを 毎回直接書く（"平等院鳳凰堂" と打ち込む） 代わりに 「配列でまとめたデータのうちのこれ」 という言い方でまとめられます。

// お題を1か所にまとめる
const topics = ['平等院鳳凰堂', '沖縄ちゅら海水族館', '広島平和記念公園',
                '太宰府天満宮', '近江町市場', '鶴岡八幡宮'];

// 場面A — モーダルにお題を並べる
document.querySelector('.modal-topic-1').innerHTML = topics[0];
document.querySelector('.modal-topic-2').innerHTML = topics[1];
// ↑ 3〜6番も同じ形

// 場面C — カードを押すと答えが出る
document.querySelector('.card-1').addEventListener('click', function () {
  document.querySelector('.card-1').innerHTML = topics[0];
});
document.querySelector('.card-2').addEventListener('click', function () {
  document.querySelector('.card-2').innerHTML = topics[1];
});
// ↑ 3〜6番も同じ形

ほら、 もう 同じ文字列を場面A・C の両方に書く必要がない。 お題は配列の中に 1か所書くだけで済む。

場面A — モーダルの6つの場所に番号つきでお題を並べる

配列の中身を、 番号で1つずつ取り出して、 人間が見る番号と一緒に6つの場所へ書き入れます。

document.querySelector('.modal-topic-1').innerHTML = '1. ' + topics[0];
document.querySelector('.modal-topic-2').innerHTML = '2. ' + topics[1];
document.querySelector('.modal-topic-3').innerHTML = '3. ' + topics[2];
document.querySelector('.modal-topic-4').innerHTML = '4. ' + topics[3];
document.querySelector('.modal-topic-5').innerHTML = '5. ' + topics[4];
document.querySelector('.modal-topic-6').innerHTML = '6. ' + topics[5];

前回までの innerHTML に、 配列の topics[番号] を組み合わせるだけ。

場面B — 「回答タイム」 でモーダルを消す

document.querySelector('.answer-time-button').addEventListener('click', function () {
  document.querySelector('.modal').style.display = 'none';
});

場面C — カードをクリックしたら答えに書き換える

押されたカードの中身を、 配列の対応する番号で書き換えます。

document.querySelector('.card-1').addEventListener('click', function () {
  document.querySelector('.card-1').innerHTML = topics[0];
});
document.querySelector('.card-2').addEventListener('click', function () {
  document.querySelector('.card-2').innerHTML = topics[1];
});
// ... 6番まで同じ形で続く

カードの番号 と 配列の番号 が、 1ズレで対応している（カード1 → topics[0]）。

場面D — 「もう一度」 でページを最初に戻す

document.querySelector('.reset-button').addEventListener('click', function () {
  location.reload();
});

AIの助けを借りる場合

実はブレインストーミングで書いた文章がしっかりとしていると、AIへの指示もしやすくなります

lesson/prompt.md にテンプレートを置いてあります。

少しいじって挙動を確かめる

少しいじって、 何が変わるかを見るのが 一番の練習。

第4回ITOカードに、 お題リストを足す

第4回で作った ITOカード（数字とメッセージ）に、 今日学んだ 配列 を使って お題のランダム表示機能 を追加します。

• ページを開くと — お題リストから1つランダムに選ばれて表示される（リロードで変わる）
• ボタンを押すと — 数字（1〜100）＋ ヒントメッセージ が更新される（お題は固定）

assignment/ にファイル一式あり。 まずは 課題完成形 で動きを確認。

ITOゲームの構造を思い出す

ITOではお題は 1ラウンド固定。 数字を引くたびに同じお題で具体例を答えていくゲームなので、 お題はページを開いたときに1つだけ決まる形にします。

今回使うお題

今日の課題では、 お題を自分で増やすよりも、 配列からランダムに1つ取り出して表示する流れ を作ることを優先します。

やること

お題は memo.md に5つ用意されています — 自分で考える必要はありません。

提出物

以下の一式が含まれていることを確認し、 05_20260507_data フォルダごと提出してください。

提出場所 — https://lecture-cms.tatsuyakosuge.com/submit

自由時間

この時間で 課題が形になるところまで 進められたら理想です。