高校生とスマホでバイブコーディング！AI時代の働き方と学び方の講演をしました！
こんにちは、リテールアプリ共創部の戸田駿太です。
先日、愛知総合工科高等学校にて高校生向けに、生成AIの活用方法やバイブコーディングの実演を通じて、新しいAI時代の働き方や学び方について話しました。その内容をブログにします。
まずはこちらから
今回の講演で高校生にスマホでバイブコーディングしてもらい、それを集めた一覧ページです。
講演の内容
目次
- 自己紹介と技能五輪の経験
- AI時代の変化
- 体験タイム：AIでアプリを作ってみよう
- バイブコーディング実演：リアルタイムでアプリを作る
- 技術理解の重要性
- 高校生へのメッセージ
スライド資料
自己紹介と技能五輪の経験
まず自己紹介と技能五輪国際大会（WorldSkills Lyon 2024）での経験を少しだけ話しました。
60カ国から集まった選手たちと競い合った話や、ウェブ技術で世界中の人に価値を届けられることの魅力について話しました。
AI時代の変化とツールの紹介
AIの急速な進化とその影響について解説しました。ChatGPT、Claude、Geminiといった主要なAIモデルの特徴や、Claude CodeやCursorなど実務で使っているツールも紹介しました。
特にNano Banana Proは衝撃を受けた画像生成AIだったので学校にまつわる題材で実演して画像生成AIの凄さを伝えました。
体験タイム：AIでアプリを作ってみよう
講演のメインパートとして、生徒たちに実際にClaudeを使ってアプリを作ってもらう体験タイムを設けました。
体験の準備
準備として生徒たちにスマホでClaudeにアクセスしてもらい、Googleアカウントなどでログインしてもらいます。（PCでも可）
Claudeではアーティファクトという機能でチャット上で作ったアプリをブラウザ上で動かすことができます。
これによりコードを全く知らない初心者でも簡単にアプリを作って動かすことができます。
アプリの作り方の解説
まずは私が生徒たちに対してClaudeのArtifact機能を使ったバイブコーディングの流れを解説しました。
- Claudeを起動してチャット画面を開く
- チャット欄に作りたいアプリの要件を入力する
- Claudeにアプリのコードを生成してもらう
- 作ったアプリを動かしてみる
- 修正箇所があればClaudeに修正点を入力する
- 3~5を繰り返してアプリを完成させる
- 完成したアプリのコードをコピーしてGoogleフォームに送信する
実際の画面の例
| チャット画面 | 実行画面 | コード表示 |
|---|---|---|
 |
 |
 |
お題と制約
お題は完全自由にしました。以下のようなアイデア例を提示しましたが、あくまで参考程度にお題は指定しませんでした。
- 自己紹介ページ
- クイズアプリ
- ゲーム（インベーダーゲームなど）
- 好きなものを紹介するページ
- その他、思いついたもの何でも
唯一の必須プロンプトは「HTMLで作成してください」だけです。
これは、ClaudeのArtifact機能を使ってブラウザ上で動くアプリを作るために必要なプロンプトです。
好きなアプリをバイブコーディングする
色々と解説したところで生徒たちにバイブコーディングをしてもらいました。
バイブコーディング中は生徒同士で周りの生徒と見せ合いながら楽しい雰囲気で体験していました。
特にここで口出しなどはせずに生徒がどんなことをしているのか見回りながら質問やフォローをしました。
成果物の収集
作成したアプリは、以下の情報をGoogleフォームに送信してもらいます。
- 作成者のニックネーム
- 作成したアプリのHTMLのコード（コードをコピーして貼り付けてもらう）
このデータは後のバイブコーディング実演で使用します。
バイブコーディング実演：リアルタイムでアプリを作る
体験タイムで生徒たちが作成した成果物を使って、バイブコーディングの実演を行いました。
この完成系が最初に見ていただいた一覧ページになります。
実演の流れ
-
Googleフォームに送信されたデータをスプレッドシートで確認
- 生徒たちが作成したアプリの情報が一覧で表示されている
- 作成者のニックネーム、HTMLのコードが記録されている
-
スプレッドシートをCSVファイルとしてダウンロード
- データをローカル環境で扱えるようにする
-
Claude Codeを起動して、リアルタイムでアプリを作成
- 「このCSVデータを使って、生徒たちが作成したアプリの一覧ページを作って」
- 「カード形式で表示して、画像も表示できるようにして」
- 「各アプリのURLにリンクできるようにして」
- といった指示を出しながら、AIと会話してアプリを作っていく
-
完成したアプリをその場で公開
- GitHub Pagesを使って即座に公開
- 生徒たちに実際のURLを見せる
完成したアプリ
実演で作成したアプリはこちらです。
生徒たちが作成したアプリが美しいカード形式で一覧表示され、それぞれのアプリにアクセスできるようになっています。このアプリは講演中に約15分ほどでAIと会話しながら作成しました。
この実演で伝えたかったこと
バイブコーディング実演を通じて、以下のことを伝えることができました。
- AIと会話しながらアプリが出来上がっていく様子をリアルタイムで見てもらう
- みんなの成果物をまとめて別のアプリにできるという応用例
- 実務でもこうやってデータを活用していること
- プロンプトエンジニアリングの実際（具体的な指示の出し方）
- 短時間でも実用的なアプリが作れるという可能性
特に、生徒たちが自分の作ったアプリが一覧に表示されているのを見て、「自分の成果物が誰かに使われる」という体験をしてもらえたのが良かったです。
技術理解の重要性
講演の後半では、AIを使う上で大切なことについても話しました。
個人的に現在の開発手法としてAIと協力しながら働くという視点が重要と感じています。現段階では技術を理解しているからこそAIを使いこなせるということを伝えました。
また、TypeScriptやPythonといった情報量の多い言語を学ぶこと、型やリンターなどAIを補助するツールの重要性についても話しました。
高校生へのメッセージ
最後に、高校生の皆さんへのメッセージとして以下のことを伝えました。
頭の良いAIと一緒に物事を考え、一緒に作り上げていく時代になっています。その中に自分の考えや意見を混ぜて、自分だけのものを作り上げることが大切です。
ただし、AIに作らせてしまった場合にはAIのものになってしまいます。自分で考えたもの、自分だからできたことが重要視されると感じています。
質問回答とアンケート結果
今回はSlidoというアプリを使って質問回答とアンケートを行いました。
講義中に自由に質問や感想を送信できるようにしたことで、講演中にはコメントが100件以上寄せられました。
この結果からは多くの生徒がすでに何らかのAIツールに触れていることがわかりました。
他にも実践的な学び方やキャリア、実務で使うツールについての質問が多く、将来を見据えた意識の高さを感じました。
まとめ
今回の講演では、AI時代における新しい学び方や働き方について、体験を通じて伝えることができました。生成AIは確かに強力なツールですが、技術の理解があってこそ使いこなせるものです。
高校生の皆さんには、AIという最高の相棒と一緒に、一歩を踏み出してもらえたら嬉しいです。
参考リンク
