未来クライム第4期アドバンスコース第二回レポート

「同じページなのに、全然違う」─ 3つの言語の役割を体で知った夜

2026年7月1日（水）19時、未来クライム第4期アドバンスコースの第2回を開催しました。前回はHTMLでWebページを作りましたが、CSSやJavaScriptについてはほとんど触れていませんでした。今回は「Webページは3つの技術でできている」ことを、実際にファイルを作りながら体験します。

前回の振り返り ─ 「CSSって何だったんだろう？」

まず前回の内容をおさらいしました。VSCodeをインストールし、HTMLを書いてブラウザに表示し、AIにWebページを作らせて自分で修正するところまで。「前回AIが作ったコードにはHTMLだけじゃなくてCSSも含まれていました。でもCSSって何なのか、ちゃんと説明していませんでしたよね」。今日はそこを整理するところから始めます。

Webページを構成する3つの技術について、コピペで手を動かす前にまず全体像を説明しました。HTMLは「何を表示するか」を決める骨組み。CSSは「どう見せるか」を決めるデザイン。JavaScriptは「どう動くか」を決めるスイッチ。家に例えるなら、柱と壁がHTML、壁紙や塗装がCSS、電気やスイッチがJavaScriptです。

3つのファイルを順番に作る ─ 変わっていく画面を見ながら

役割の説明を終えたら、すぐに手を動かします。今回は前回のファイルとは別に、デスクトップに「card」という新しいフォルダを作るところからスタートしました。

最初に作ったのは card.html。教材のコードをコピーして貼り付け、保存してLive Serverで開くと、名前と肩書き、メッセージ、ボタンが画面に表示されます。ただし見た目はかなり素っ気ない。文字は左上に寄っていて、ボタンも地味です。これがHTMLだけの状態。内容はあるけれど、見た目は何も整えられていません。

次に style.css を作り、HTMLに1行追加して読み込ませます。保存してブラウザを見ると、同じページなのに見た目がまったく変わっていました。背景がグレーになり、カードが白く浮き上がり、ボタンが青くなり、全体が中央に配置されている。HTMLの中身は一切触っていません。CSSを追加しただけで、見た目だけが変わりました。

最後に script.js を作り、同じくHTMLに1行追加して読み込ませます。「ひとこと変更」ボタンを押してみると、メッセージが切り替わりました。HTMLもCSSも変えていないのに、JavaScriptを追加しただけでページに「動き」が生まれた瞬間です。

講師と一緒に1ステップずつ進める形で全員が同じペースで体験できました。CSSの読み込み方でつまずく場面もありましたが、HTMLの <head> の中に <link> タグを追加する位置を確認しながら、全員が無事に3つのファイルを完成させました。

「こういうものを、今からAIに作らせます」

休憩を挟んで後半戦。ここからが今日のメインイベントです。

まず講師が完成品のデモを見せました。ボタンを押すと数字が増えるクリックカウンター、身長と体重を入力するとBMIを計算してくれるアプリ。前半で学んだHTML・CSS・JavaScriptの3つが組み合わさって動いています。「こういうものを、今からAIに作らせます」。プロセスは見せず、完成品だけを見せる。ゴールを知ったうえで手を動かすほうが、迷いなく進められます。

AIに作らせて、自分で読み解く ─ 制作演習

教材の「制作お題リスト」から好きなお題を選んで、AIにWebアプリを作らせる演習に入りました。初級のクリックカウンター、中級のBMI計算機や単位変換器、上級のTODOリスト。教材にプロンプト例が載っているので、まずはそのまま送ってOK。動いたら自分なりにカスタマイズしてみる、という流れです。

AIが生成したコードをVSCodeに貼り付け、Live Serverで確認する手順は前回で経験済み。今回はそこに加えて、「生成されたコードのどこがHTMLで、どこがCSSで、どこがJavaScriptか」を意識してもらいました。前半で3つのファイルを自分の手で作った経験があるからこそ、AIが生成した1つのHTMLファイルの中にも同じ3層構造が見えてくるはずです。

エラーが出た人には「F12を押してConsoleを開いてみて。赤い文字が出ていたら、それをそのままAIに貼り付けて聞いてみよう」とアドバイス。DevToolsを使ったデバッグの入口にも触れることができました。

演習の最後には、隣の人同士で作ったものを見せ合いました。同じお題でも、色やレイアウト、追加した機能は人それぞれ。前回と同じく、他の人の工夫から学ぶ時間になりました。

これからの道のり

次回は2026年7月15日（水）19:00から。Git/GitHubを使って、作ったコードを「保存」して「公開」する準備を学びます。今回AIに作らせたWebアプリを、インターネット上で誰でも見られる状態にする。その第一歩が、次回のGit入門です。

体験会でAIに触れ、第1回でコードに触れ、第2回で「3つの技術の役割」を知った。次は作ったものを世に出す番です。

コース全体の流れについては、体験会レポートをご覧ください。

未来クライムとは

なりたい自分になる。やりたい仕事を、やり続ける。そんな未来を手に入れるためには、険しい山を登るように、たくさんの学びや出会い、そして挑戦が必要です。

未来クライムは、「なりたい自分」を目指すみなさんを支えるために、出会いと学びの場を届けていきます。

第4期目を迎えた今年度の「未来クライム～PROGRAMMING ACADEMY BIBAI～」でも、美唄市からIT人材を世に送り出していくために、生成AIやプログラミングを継続的に学べる場を提供していきます。

小さな一歩の積み重ねが、やがて大きな成長につながります。仲間とともに学び合いながら、生成AIとプログラミングの世界を、一歩ずつ一緒に進んでいきましょう！