4週目：Web基礎をAIと一緒に読む（HTML/CSS/JS）

ゴール

• 「AIが書いたコードを読み解ける」状態になる（自分でゼロから書ける必要はまだない）
• HTML/CSS/JSそれぞれの役割を区別できるようにする

Day1：HTML/CSSを読む

• AIに簡単な自己紹介ページ（HTML+CSS）を生成してもらい、1行ずつ「これは何をしている行か」を説明してもらう
• 到達条件：タグ・クラス・スタイル指定の役割を説明できる

Day2：JSの基本を読む

• 変数・関数・条件分岐を使った簡単なJSコードをAIに生成してもらい、説明してもらいながら読む
• 到達条件：「この変数は何を保存しているか」「この関数は何をするか」を説明できる

Day3：コードを少し改造する

• AIが生成したコードの一部（色・文言・条件の数値など）を自分で変更し、表示の変化を確認する
• 到達条件：1箇所変更→動作確認のサイクルを3回以上回した

Day4：ブラウザの開発者ツールを使う

• ブラウザの開発者ツールでHTML要素の確認、CSSの変更、コンソールでのJS実行を体験する
• 到達条件：開発者ツールを開き、要素を選択して情報を確認できる

Day5：理解の確認

• 自分が読んだコードについて、HTML/CSS/JSそれぞれの役割を自分の言葉でまとめる
• 到達条件：「HTMLは構造、CSSは見た目、JSは動き」という役割分担を具体例で説明できる

AIプロンプト例

• 「このコードを1行ずつ、プログラミング初心者向けに説明して」
• 「このCSSのこの部分を変えたら、見た目はどう変わる？変える前に教えて」
• 「このJSの関数が何をしているか、たとえ話で説明して」

よくある詰まりどころと回復手順

• 用語が分からない → その単語だけを抜き出してAIに聞く（「クラスって何？」など）
• 変更したら表示が崩れた → 1箇所だけ変えて確認する癖をつける（複数箇所同時に変えない）
• コンソールにエラーが出て不安になる → エラー文をそのままAIに貼って意味を聞く

自己チェックリスト

進捗チェック

進捗を記録するには ログイン してください。

参考

• MDN Web Docs（HTML/CSS/JSの標準的なリファレンス）