ここからは、気になった日に読む仕組みの話です。全部覚えず、自分の画面と名前を一つ結び付けてみましょう。
ここからは、気になったときに読む回です。前半で試した画面を思い浮かべながら、必要なところから開いてください。
置くものと、見た目には名前がある
知らない名前が並ぶと身構えますよね。部屋の家具と色を分けて考えるように、画面に置くものと見せ方を分けてみます。
同じ画面を支える、違う役割
HTML
見出し・入力欄・ボタン
CSS
文字の色・大きさ・間隔
JavaScript
追加した後の動き
HTMLは内容と構造、CSSは色や間隔、JavaScriptは操作後の動きなどを扱います。資料 HTML資料 CSS資料 JAVASCRIPT 下の図を、自分の見出しやボタンに重ねて見ましょう。
役割をAIへ聞く
いまの読書メモで、見出しを書く場所、文字の色を決める場所、追加した後の処理を一つずつ教えてください。コード全文より、画面との対応を知りたいです。
ここだけ、試してみよう
見出しかボタンを選び、担当する部分をAIに聞いて、画面と見比べます。
押したあと、動くしくみを見てみる
追加を押した後の動きと、記録を残す処理は別です。今のページで何が起きるか、日本語で聞いてみましょう。資料 JAVASCRIPT資料 STORAGE
動く場所と、保存する場所
画面
入力を受け、一覧を表示
手元のサーバー
必要なときに起動
記録の保存先
ブラウザー内など
手元で試すサーバーは、必要な作り方で使う道具です。資料 LOCAL_TEST 全部そろえる課題ではありません。画面が動く場所と、記録の保存先を分けて考えます。
動きと保存をAIへ聞く
いまの読書メモで、追加を押してから一覧に出るまでを日本語で教えてください。記録を残す処理と保存先も教えてください。なければ、ないと説明してください。
ここだけ、試してみよう
- 追加の動きを思い出す
- 順番と保存先をAIに聞く
- 再読み込みの結果と比べる
演習：気になる一か所だけ聞く
この章は、読んで戻るだけでもかまいません。
見出しかボタンを一つ選び、何が担当するかAIに聞きます。
解答例を読む
自分の画面で確かめた一か所を、一行で残します。
この回で確かめること
- 見出しかボタンを一つ選ぶ。
- 何が担当するかAIに聞く。