今日の準備でやること

最終的に、Chrome に以下のように表示されればOK

Live Server を「プライベートモード」で開く設定にしましょう

VSCode の設定を1か所だけ変えます。

1. VSCode の 設定 を開く
   （Mac は Cmd + ,）
2. 上の検索欄に live server custom browser と入れる
3. Custom Browser の選択肢から chrome:PrivateMode を選ぶ

テクノロジー = コンピューターへの "お願い"

今、みなさんは何をやっているのか？実はこれだけです！

色々なものを学んでいきますが、 やりたいことをしっかり言語化できれば
色々なことができるようになって、それこそAIとも仲良くなれます！

4つの段階で進める

1. 完成見本を触ってみる
   どんなアプリか、まずは体験
2. 動きを日本語で書き出す（言語化）
   「もし〜なら、〜する」の形で
3. 日本語を JavaScript に翻訳する
   if／else if／else に当てはめる
4. 自分のアプリを作る（課題）
   同じやり方で、自分のアイデアを形に

サンプルアプリ — お天気アドバイザー

気温を入れると、その日のおすすめの服装を教えてくれるアプリです！
まずは以下の画像をクリックし、サンプルアプリの動きを確認してください！

「服装をチェック」はボタンです！

入力される気温によって、表示される内容が変わることを確認してください！

サンプルアプリで起きていることを、順番に書き出そう

まずはアプリを触りながら、画面で起きていることを順番に書き出してみましょう！（brainstorm.md に書いてみてくださいね！）

1. アプリを触って、画面の変化を見る 気温の数字をいろいろ変えて、結果がどう変わるか試す
2. 人がアプリ上で行う操作と、画面で起きることを順番に書く
3. あとから読んでも、他の人やコンピューターにも分かるように、丁寧に書き直す

料理レシピのように手順を細かく分けてみよう

3つの観点で、丁寧に書き直してみる — When・What(Where)・How

以下の3つの観点で、さっき書いた内容をもう少し具体的にしてみよう!

グループで考えて、チューターに確認してもらう

お困りごとがあれば、現地メンバーにお声がけくださいね！

HTML — アプリに表示したいものを書く指示書

「●●を表示する」 という、コンピューターへの指示が書かれたもの。

CSS — デザインのお願いをする指示書

「〇〇のHTMLタグを、●●な感じにデザインする」

「〇〇の」表し方・その1 — タグの名前で場所を伝える

<h1>お天気アドバイザー</h1>

h1 {
  color: blue;
}

h1 と書けば すべての <h1> がまとめて青色になります。

「〇〇の」表し方・その2 — 目印の名前で場所を伝える

<h1 class="title">
  お天気アドバイザー
</h1>

.title {
  color: blue;
}

配ったアプリの中身を読んでみよう

lesson/index.html を VSCode で開いてください！

<input> は前回も少し見た「入れる場所」を作るタグ。今日はこれを実際に使います。

デザインのつき方（CSS）をチェックしよう

lesson/style.css に CSS が書いてあります。中身を覗いてみよう。

前回の復習を兼ねて読むだけでOKですが好きなところを書き換えしてもいいですよ！

JavaScript — アプリの動きを作る指示書

画面の部品に対して、いつ・何を起こすか をコンピューターに伝えるもの。

日本語で書いた内容を、JavaScriptに翻訳する

さっき書き出した内容の中に、こんな文があるかもしれません。

まずはこの1文を、JavaScriptに翻訳してみましょう

Where — 「どこ？」をHTMLの目印で伝える

人間は画面を見れば、「服装をチェック」ボタンがどれか分かります。
でも、JavaScriptには HTMLのどの場所か を、タグや class の目印で伝える必要があります。

HTML を見ると、ボタンに class の目印がついています

<button class="button">服装をチェック</button>

↓

この目印を辿って、JavaScript から指す

document.querySelector('.button')

「. は class の目印」 — 前回も触れた書き方。

When — 「いつ動く？」をJavaScriptで伝える

When — ボタンが押されたとき

↓

document.querySelector('.button').addEventListener('click', function () {
  // ここに「押されたあとにやること」を書く
});

Where / What / How — 押されたあとに何を表示する？

Whenで「ボタンが押されたとき」を伝えました。次は、そのあと画面で何が起きるかを書きます。

↓

JavaScript に翻訳

document.querySelector('.result').innerHTML = '半袖がおすすめ';

日本語の 3つの部分 が、そのまま JavaScript の 3か所 に対応します。

When と Where / What / How を組み合わせる

さっき書いた「いつ動く？」と「押されたあとに何を表示する？」を1つにまとめます。

気温に関係なく、ボタンを押したら 必ず「半袖がおすすめ」と出る 状態を作りましょう。

document.querySelector('.button').addEventListener('click', function () {
  document.querySelector('.result').innerHTML = '半袖がおすすめ';
});

「読み取る」と「判断する」に分けて考える

お天気アドバイザーの動きを、もう少し細かい工程に分けて考えます。

工程を分けると、JavaScriptに翻訳しやすくなります。料理のレシピと同じですね！

読み取った気温を、次の工程で使えるようにする

コンピューターは言われたことしかしない→確認した気温データを自動では覚えてくれません。
2つ目以降の工程で使うには、「あとで使う（から覚える）」と分かる形にしておく必要があります。

変数 — 名前をつけてコンピューターにデータを覚えさせる

let temperature = 25;

• let — 値を覚えさせておくための目印（これがあると覚えさせる仕組みが使える）
• temperature — 覚えさせたデータにつける名前
• = 25 — 覚えさせておくデータそのもの

「気温を覚えておく」をJavaScriptに翻訳する

日本語 — 覚えておきたいこと

↓

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

青の部分は 「入力欄を指して、中身を確認する」 ところです。
.input の目印を辿って、 .value で中身を確認しています。

状況によって、やってほしいことを変える — if

ifを使うと、その時の状況に合わせて、実行する内容を変えることができます！

気温

↓

状況ごとの処理を if にする

if (temperature >= 30) {
  document.querySelector('.result').innerHTML = '半袖をおすすめ';
} else if (temperature >= 20) {
  document.querySelector('.result').innerHTML = '長袖をおすすめ';
} else {
  document.querySelector('.result').innerHTML = '上着を着るのがおすすめ';
}

書き出した内容を、JavaScript に翻訳してみましょう

これまで学んだ 変数 と if を使って、 brainstorm.md に書いた内容を script.js に書き換えていきます。

分からないところは、 言語化したものをそのまま AI に貼って相談 でOK。

気温を比べたのに、思った通りに動かない人へ

同じ「25」でも、コンピューターにとっては 2種類の使い方 があります。

入力欄から取れるのは、最初は 「名前として並んだ数字」。 気温として比べるには、計算する数字に書き換える 必要があります。

「計算できる形に、確実に変換する」 = Number()

入力欄から取れる「名前として並んだ数字」を、 確実に計算できる形に変換する のが Number(...) のお願い。

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

気温データを確認 → 計算できる形に変換 → temperature というラベルで記憶。

Number() を入れない場合 — 文字のまま

入力欄から取った値は、まず 文字として並んだ数字 として扱われます。

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

// temperature は "25" （文字）
if (temperature >= 30) { ... }

Number() を入れる場合 — 計算できる数字に変換

Number(...) で囲むと、入力欄の中身を 計算できる数字 として扱えます。

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

// temperature は 25 （計算できる形）
if (temperature >= 30) { ... }

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

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

前回のITOカードを再現した上で、ifでメッセージを足す

前回作ったITOカードを再現した上で、今日学んだifを使った機能を付け加えてください！

ITOメッセージカードで作る機能

• ランダムな数字 — ボタンを押すと、1〜100の数字が出る
• 数字の表示 — 出た数字をカードに表示する
• ifによる切り替え — 数字の大きさに合わせて、表示させるメッセージを変える

数字に合わせて、表示するメッセージを変える

前回やったITOでは、「出た数字 = どれくらい大切かの度合い」として考えました。
数字の大きさに合わせて考え方のヒントを表示する機能を追加しましょう！

メッセージ内容や境目の数字は、自分の言葉で変えてOKです。

今日と同じ流れで、課題を進める

いきなりコードを書くのではなく、まず起きることを書き出してからJavaScriptに翻訳します。

提出物

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

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

自由時間 — 自分のアプリに着手してみましょう

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