今日の準備でやること
- デスクトップの
algorithm2026/フォルダを開く（前回作った場所） - ポータルから
03_20260423_data.zipをダウンロード algorithm2026/の中で解凍して配置- VSCode で
03_20260423_dataフォルダを開く lesson/index.htmlを Live Server で表示- Google AI Studioあるいは自分で使ってるAI をブラウザで開いておく
先生のハンズオン or チューターとのレスキュー、どちらかに合わせてこの6つを揃えます。次のスライドで進め方を選びます。
今の自分は、どっち？
質問はひとつだけ。答えに応じて進め方が変わります。
一緒に Live Server を導入
前ページのチェックリストを進める
「形にする力」を、育てる
現象を「雰囲気」や「感覚」だけで捉えるのではなく、
構造でとらえ直して、「どうすればできるか」の思考に繋げる。
頭の中のイメージを、世界に出せるもの にする。
「欲しい」「困った」を、自分で解決できる形 に変えていく。
今日はまず、ITO というゲームを題材に。
ITO（蜘蛛の糸）を実際に遊んでみよう — やることは3つだけ
- 1〜100 のカードが1枚配られる
— 自分だけが見られる。数字は絶対に他の人には言わない - お題に沿って、自分の数字を "言葉" で表現する
— 数字が大きいほど強い、というイメージで - 全員のヒントを聞いて、小さい順に並べて出す
— 正しい順で出せたら成功！
ヒントの出し方（例 — お題「温度の高いもの」）
自分のカードが…
ヒント → 「熱々のラーメン」
高めだけど、最高じゃない
自分のカードが…
ヒント → 「冷めた緑茶」
明らかに低い
今日のお題
数字が大きいほど「大切」の度合いが強い、というイメージで
自分のカードを "言葉" にしてみよう
実際に遊んでみよう
- グループごとにカードを配ります（先生が配布）
- お題に沿って、自分のヒントを考える
- 順番に声に出してヒントを言う
- グループで相談して、小さい順に並べる
- 「せーの」で公開して、答え合わせ
目安 — 15分
ITOゲーム を、自分たちの手で "動くアプリ" にする
カードなしで、みんなのスマホだけでできるように、
デジタル版Itoゲームを作ってみよう！
今日のゴールは、これを 自分の手で動くアプリに仕立てる こと。
このブレインストーミングは、その 設計図づくりです。
守るルール — この3つの制約の中で考えてください！
プレイヤーがいる
複数作らない
繰り返し遊べる
A. 遊び方を「物語のように」書き出す
デジタル版Itoゲーム（これから作る）の、遊び方の流れを 時系列で 書き出してみよう！
仕組みはまだ気にしないで、アナログでやった体験を思い出しながら、普通の言葉で
OK。
例 — 早押しクイズの場合
- 司会者が問題を読み上げる
- プレイヤーが「押す」ボタンをタップ
- 最初に押した人だけが回答できる
- 正解なら得点+、不正解ならライフ-
B. 画面に必要なものを挙げる
Aで書いた遊び方を実現するために、アプリ画面に何の情報があればいいかを考えて書き出そう
（数字の番号は絶対に必要だと思います。笑）
例 — 早押しクイズの画面イメージ
グループごとに話し合い→チューターさんにも相談＆チェック
brainstorm.md に書いていってください。他のメンバーは記録係の画面を覗き込みながら、一緒に考える形でOK。
A・B を埋めるのが今回のゴール。書くのは相談しながらでOK、焦らず。
※ 指定されたブレイクアウトルームに移動してくださいね！
担当チューターさんとの相談タイムでは以下をチェック！
- 3つのルールは守ってる？
- A. 遊び方に無理はない？
- アプリ画面に表示する内容は、A. 遊び方に合ってる？
index.html を開いて、カードの見た目を確認しよう
↑ こう見えれば OK
配布データの中の lesson/index.html を
Chromeで開いてみよう。
左のような "カード" が 画面に1枚 現れるはず。
このカードで、何度も遊べる？
数字 "72" は表示できている。でも — もう一度遊ぶには、どうする？
それだと、前提の「何度も繰り返し遊べる」が守れない
（そもそもアナログのカードと変わらない）
そこで JavaScript を使うと —
自動で繰り返し遊べる仕組み がコードの中に作れる。
→ 今日これから触るのが、その JavaScript
アプリに必要なパーツや情報をHTML に書き出してみよう
ブレインストーミングで書いた 「B. 画面に必要なもの」 を見ながら、
自分の手でアプリに必要な HTMLタグを書いてみよう。
やること
- B の項目を1つずつ見る
- 対応する HTML タグで書き起こす
- 書けないタグは一旦飛ばして OK — このあと ヒント 1 と ヒント 2 を紹介します
1 パーツ ＝ 1 HTML タグ で対応している
さっきの画面で使われていたタグの一例
| 見えているもの | 対応するタグ |
|---|---|
| アップロードアイコン | <img> |
| 課題提出フォーム | <h1> |
| 以下のフォーム…（説明文） | <p> |
| 基本情報 | <h2> |
| 氏名を入力してください ★ | <label> |
| 入力欄 ★ | <input> |
★ = 初登場
AIに相談するときは、"文脈を3つ" 先に共有する
いきなり「〇〇を教えて」と聞かない。順番はこの通り。
-
ブレインストーミングの内容を共有
作りたいアプリの概要 ＋ B のリスト（brainstorm.mdから貼る） -
いま書いている HTML の内容を共有
index.htmlを丸ごとコピペ。途中でも OK -
具体的に何を知りたいか質問
「〇〇に相当するタグが分からない」など、ピンポイントで
→ 次のスライドに、3 つ全部を含んだ「聞き方のテンプレ」があります
聞き方のテンプレ
以下のようなものを作りたいと思っています。
[作りたいアプリの概要をここに貼る] ← 手順 1
必要な要素は 以下のように整理しました —
[ブレインストーミングのB のリストをここに貼る] ← 手順 1
いま書いている HTML はこうです —
[index.html の内容] ← 手順 2
このうち、「〇〇」がわからず、何のHTMLを使えばいいのか相談したいです。 ← 手順 3
（大学の講義で今日初めてHTMLに触れています）
※ 修正が必要な箇所だけ教えてください（index.html 全文は不要です）AIから返ってきた HTML、どう扱う？
■ 貼る場所
表示したい内容は必ず<body> 〜 </body> の間に
<body>
画面に表示したい情報は
全てこのエリアに書く！
</body>■ 貼ってみて違ったら
もう一度 AI に相談して OK。
やりとりで仕上げていく。
・「こう変えたい」と伝える
・AI は修正版を
ピンポイントで返してくれる
→ 1回で完璧じゃなくていい
往復して仕上げる
コードの中の /* ... */ や <!-- ... --> はコメント（メモ書き）。触らなくてOK
CSS は「デザインを決めるための指示書」
指示書には、こんなことが書かれている
- どこのデザインを
- どんな感じにしてほしいか
配布された style.css を開いてみよう
lesson/style.css を開くと、既にこんなコードが書かれている。これ、全部デザインの指示
body {
background: #f7f8fc;
...
}
.card {
background: #fff;
width: 240px;
...
}
.card-title {
font-size: 20px;
...
}
.card-number {
font-size: 48px;
...
}
class — 同じタグを区別する "名前"
class で目印 をつければ、 CSS で その目印を指定して別々にデザインできる。
■ HTML に名前をつける
<p class="theme">
あなたにとって大切なもの
</p>
<p class="body">
ヒントを入力してください
</p>■ CSS は名前を指定して書く
.theme {
font-size: 24px;
color: navy;
}
.body {
font-size: 14px;
color: gray;
}
「この <p> だけ」「このボタンだけ」を作るための道具 → class
class と見た目の連動を、手を動かして確かめよう
配布ファイルの .card-number（数字）を使って、2つの実験。
■ 実験 1 — CSS を書き換える
style.css の .card-number に color: red; を1行追加
.card-number {
font-size: 48px;
color: red; ← 追加
}→ 数字が赤くなる
■ 実験 2 — HTML の class 名を変える
index.html の class="card-number" を
別の名前にしてみる
<p class="card-number">
↓
<p class="card-xxx">→ 数字の指定が効かなくなる
HTML の class 名と CSS の .xxx が同じときだけ、見た目が繋がる
CSS で、自分のアプリの見た目を整えよう
HTML の骨組みに、CSS で色・サイズ・余白をつけて、
"自分たちのアプリらしい見た目" に仕上げる。
やること
- どんな印象にしたいか決める（かわいい／クール／シンプル…）
-
HTML 章で使った「聞き方のテンプレ」を応用して AI に相談
※ 「配布された class を壊さず整えてほしい」と必ず伝える - 返ってきた CSS を
style.cssの下に追記 → Live Server で確認 - 気になるところは自分で書き換えて試す
AIに相談したCSSは、どう扱う？
■ 追記する場所
style.css の 下に積み重ねる
/* style.css */
body { ... }
.card { ... } ← 配布の class
.card-title { ... }
← ここに追加していく
（配布の class は壊さない）■ 違ったらもう一度相談して OK
「こう変えたい」と伝えれば、
ピンポイントで返してくれる。
・「配布の class を壊さず、
〇〇風に整えて欲しい」
→ 1回で完璧じゃなくていい
往復して仕上げる
同じ名前のルールを上書きすると、後から書いた方が勝つのが基本。壊したら Cmd + Z
JavaScript は「機能の指示書」
Webアプリは 3つの指示書 でできている。役割を整理すると —
表示内容の指示書
何を画面に
並べるか
デザインの指示書
どこを
どんな感じに
機能の指示書
いつ・何が
起きるか
→ 今日これから触るのが JavaScript。Itoカードに "動き" を加えていく
4つのステップで、動きを足していく
- ページを表示したら数字が変わる
- ボタンを押したら数字が変わる
- ボタンを押したら数字がランダムに変わる
- 変数を使ってコンピューターにも人間にもわかりやすい状態を作る
各ステップで、手を動かす → 少し変えてみて、何が起きるかを確かめる
プログラミング＆AI ＝ コンピューターへの "お願い"
「画面の数字を変えて」「ボタンを押したら動いて」—
そういう 頼みごと を、
コンピューターが読める形で書いていく。
ただし、コンピューターはあいまいなお願いだと言うこときいてくれない
だから、ちゃんと 分解して 伝える必要がある。
やりたいことを、3つに分解する
JavaScript でコードを書く前に、日本語で やりたいことを3つに分解する。
- What（何を／どこに） — 変える対象はどこ？何？
- How（どうする） — どう変える？
- When（いつ） — どのタイミングで動かす？
やりたいこと → 分解 → コード の順で考える。
いきなりコードから書かない。
ページを表示したら数字が変わる
日本語で言うと —「ページを開いたら、画面の数字を '85' に書き換える」
3つに分解すると
- What —
class="card-number"に表示されている文字 - How —
'85'に書き換える - When — ページを開いた瞬間（自動で動く）
分解したら、JSに当てはめる
document.querySelector('.card-number').innerHTML = '85';querySelector('.card-number')→ What の "どこ"（.は class の目印）.innerHTML→ What の "何"（中身）= '85'→ How
試してみる
'.card-number' の部分を、HTML に書いた別の class 名に書き換えてみる。
→ 書き換わる場所が変わるはず。
ボタンを押したら数字が変わる
Step 1 との違いは When。自動ではなく、ボタンが押された瞬間に動かしたい。
3つに分解すると
- What —
class="card-number"の文字 - How —
'42'に書き換える - When — 「配る」ボタン
class="deal-btn"がクリックされた瞬間
"いつ" を仕込む — addEventListener
document.querySelector('.deal-btn').addEventListener('click', function() {
document.querySelector('.card-number').innerHTML = '42';
});- 外側
addEventListener('click', …)→ When - 内側の
{ … }は、Step 1 と同じ What + How の組
試してみる
'.deal-btn' の部分を、HTML に無い class 名に書き換える。
→ ボタンを押しても何も起きないはず。
ボタンを押したら数字がランダムに変わる
Step 2 との違いは How。固定の '42' から、毎回違う数字になる。
document.querySelector('.deal-btn').addEventListener('click', function() {
document.querySelector('.card-number').innerHTML = Math.ceil(Math.random() * 100);
});
Math.ceil(Math.random() * 100) は 1〜100 のランダムな整数 を返す型。
深く考えずに、まずコピペして動かしてみよう。
変数を使って、人にもコンピューターにもわかりやすく
Step 3 のコードを、変数 を使って書き直す。
document.querySelector('.deal-btn').addEventListener('click', function() {
let card = Math.ceil(Math.random() * 100);
document.querySelector('.card-number').innerHTML = card;
});
card という "箱" に数字を入れて、そのあとで card を使う。これが 変数。
変数の動き方を、試して確かめる
試してみる
cardを別の名前（例 —number）に変える → 動く？let card = …;とinnerHTML = card;の順番を入れ替える → 動く？
名前は自由に決められる。でも 使う前に "箱を作っておく" 順番 は守らないといけない。
今日ブレインストーミングで考えたアプリを、形にして提出する
チームで出した「遊び方」と「画面に必要なもの」を土台に、
自分の手で動くアプリを完成させる。
ポイント
まずはブレインストーミングで相談した内容を実現しよう！
できる人は、いろいろなものを勝手に加えてもらってOK！
提出物
以下一式を、03_20260423_data フォルダごと提出
一式の中身
brainstorm.md— チームで作った仕様書（今日書いたもの）index.html— HTML 一式style.css— CSS 一式-
script.js— JavaScript 一式（もしくはindex.html内の<script>）
自由時間 + 担当チューターのチェック
最後の30分は、課題に着手する時間。この時間内で担当チューターが、各グループを巡回してチェックする。
時間の使い方
- 担当チューターが 各グループに10分ずつ（3グループ × 10分 = 30分）
- 自分のグループの番が来るまでは、課題を進める
- 理想 — 今日この時間で課題まで完成させる
チューターのチェック時は、今の状態と 自分の工夫として何を足そうとしているかを伝えよう。