「自分が書いたものが、画面に出た」─ コードに触れた最初の夜

2026年6月17日（水）19時、未来クライム第4期アドバンスコースの本編第1回を開催しました。体験会ではAIに「テキスト」を作ってもらいましたが、今回はそこから一歩進んで、ブラウザで動く「Webページ」を自分の手で作ります。

Webアプリって何？ ─ 体験会の続きから始まる

「体験会から今日まで、AIを使った人はいますか？」。講師の問いかけに、何人かの手が上がりました。体験会で触ったGeminiをその後も仕事で試してみた人もいて、それぞれの使い方を聞くところからスタートしました。

続いて、このコースで作る「Webアプリ」について説明しました。Googleマップ、YouTube、楽天。普段何気なく使っているこれらは、すべて「Webアプリ」です。インストール不要で、URLを送るだけで誰でも使える。そして制作時にAIとの相性が抜群にいい。「みなさんもこれから、使う側から作る側に回ります」という言葉に、会場の空気が少し引き締まりました。

環境づくり ─ VSCodeとDiscordを自分のペースで

今回の環境構築は、講師が手順を一つずつ見せる形式ではなく、教材を見ながら各自のペースで進めてもらいました。チェックリストは4つ。VSCodeのインストール、拡張機能の導入、Discordへの参加、そしてLive Serverの動作確認です。

すでにVSCodeが入っている人はDiscordの設定へ、それも終わっている人は教材の先のチャプターを読み進める。一方、初めてのインストールに手間取る人にはスタッフが個別にサポートに入りました。

VSCodeの役割についても簡単に触れました。ただのメモ帳とは違い、コードの役割に応じた色分けや、履歴管理ができる高機能なエディタです。「Japanese Language Pack」で日本語化し、「Live Server」を入れることで、保存するだけでブラウザの表示が自動更新されるようになります。

こんにちは！ ─ 画面に文字が出た瞬間

環境が整ったところで、全員で最初のHTMLファイルを作りました。デスクトップにフォルダを作り、VSCodeで開き、index.htmlというファイルを作成。教材のサンプルコードを貼り付けて保存すると、Live Serverを通じてブラウザに「こんにちは！」の文字が現れます。

自分が書いたものが画面に表示される。プログラミングが初めての人にとって、この瞬間は小さな、でも確かな感動です。見出しの文字を変えて保存するだけでブラウザがリアルタイムに更新される様子に、「おお」という声が漏れていました。

プロンプトの型 ─ 指示の出し方で結果が変わる

HTMLの基本を押さえたあとは、AIへの指示の出し方を学びました。体験会でも「具体的に書くと結果が良くなる」ことは体感していましたが、今回はさらに踏み込んで、3つの「型」を紹介しました。役割を指定する、出力形式を指定する、段階的に指示を出す。この3つを組み合わせるだけで、AIの出力は劇的に変わります。

実際にGeminiで実演してみせると、「ホームページ作って」と一言だけ送った場合と、役割・形式・具体的な情報を添えた場合の差は歴然でした。

AIに作らせて、自分で直す ─ 開発の基本サイクル

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

まず講師が、AIを使った開発の基本サイクルを実演しました。プロンプトを送る、生成されたコードをVSCodeに貼り付ける、Live Serverで確認する、気になるところをAIに修正依頼する。このサイクルを繰り返すことで、Webページが形になっていきます。

「1回で完璧は出ない。対話を重ねる」。この言葉が、AI開発の本質を端的に表しています。

あえて手動でCSSを修正する場面も見せました。色やフォントサイズを変えるだけでも、コードの構造を把握して該当箇所を見つけるのは初心者には骨が折れます。「今は大変ですよね。第5回でClaude Proを使い始めたら、この苦労が嘘みたいに楽になります」。まだ見ぬツールへの伏線が、静かに張られました。

自分の手で作ってみる ─ プロンプト改善演習

いよいよ参加者の番です。お題は「自分の会社（または架空の会社）の紹介Webページ」。情報を整理し、プロンプトを組み立て、AIに送り、結果を確認して修正を依頼する。3回は改善を重ねるというルールのもと、全員が手を動かしました。

営業時間やサービス内容を盛り込んだWebページが次々と生まれていきます。HTMLとCSSのコードをVSCodeに貼り付け、Live Serverで表示を確認し、「もう少し色を変えたい」「レイアウトを整えたい」とAIに修正を依頼する。講師が先ほど見せたサイクルを、参加者一人ひとりが自分の手で回していました。

演習の最後には、隣の人同士でお互いのページを見せ合いました。同じお題でも、選ぶ情報やデザインの方向性は人それぞれ。「こんなプロンプトの書き方があるんだ」と、他の人の工夫から学ぶ場面もありました。

当日、参加者からは

「AIがある程度Webサイトを形にしてくれたので、『この機能を追加しよう』『ここの説明を詳細にしよう』と、次に何をするか方針を決めやすかった」

との声が聞かれました。

これからの道のり

次回は2026年7月1日（水）19:00から。JavaScriptを使って、今日作ったWebページに「動き」を加えます。ボタンを押したら表示が切り替わる、入力した内容に応じて結果が変わる。そんなインタラクティブな要素が加わると、Webページは一気に「アプリ」に近づきます。

体験会でAIに触れ、第1回でコードに触れた。次は「動く」を体験する番です。

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

未来クライムとは

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

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

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

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