Magazine

みんなのコードマガジン

活動レポートをお届けするウェブマガジン

高校の授業でVibeコーディングをやってみた〜千葉県立柏の葉高校 前編〜

こんにちは。みんなのコードの永野です。私は主に高校における生成AIやプログラミング教育の教員研修などを担当しています。

いま、生成AIとともにプログラムを作成する「Vibeコーディング」が注目されています。2025年7月11日、千葉県立柏の葉高校の1年生と2年生を対象に、Vibeコーディングの授業を実施しましたので、その様子をお伝えします。


Vibeコーディングはノリと勢いのプログラミング!?

生成AIはここ数年で様々な業務に活用されるようになりました。特に「プログラミング」の世界は、生成AIによってこれまでとは大きく異なる状況になっています。

言語の処理に特化している生成AIですが、「ハルシネーション」問題に代表されるように、唯一無二の正解を求めるのは、あまり適した生成AIの利用方法とはいえません。しかしながら、芸術などの創造性や、人間の感情など「その人らしさ」に起因する表現もまた、生成AIに全てを委ねるべきではありません。

プログラミングは使用する言語ごとに文法規則がありますが、ある目的を達成するための記述方法は一つに限りません。このように「ある程度の制約に則りつつ、様々な目的を達成していくための手続きを言語で表現する」という営みであるプログラミングは、生成AIが最も得意とする領域といえます。

そこで、「生成AIはプログラミングが得意」という特性を利用し、「こんなものを作りたい」というざっくりとした指示を与えながら、生成AIと一緒にプログラムをつくってしまうのが「Vibeコーディング」です。

OpenAIの共同創業者であるアンドレイ・カルパシーによって2025年2月に提唱された造語であり、Vibeは「バイブス」つまり雰囲気とかノリ、といったニュアンスです。

Vibeコーディングはまさに知識不要、ノリで作るプログラミングです。


高校生たちが初めてチャレンジ!Vibeコーディング

ここからは当日の授業の内容についてお伝えしていきます。1コマ50分という短い時間の中で、Vibeコーディングとは何か、について簡単に説明した後、生徒たちにはさっそくプログラム作成にとりかかってもらうことにしました。

今回の作品は手軽さを考え「HTML + CSS + JavaScript」で作るよう指定しました。

コーディングにはオンラインのプログラミング環境「Replit」を使います。ログインすれば無料でVibeコーディングをすぐに行うことができます。

ただし、Vibeコーディングといえど、生成AIを生徒が利用するということは教員が規約などを踏まえて、適切に対応しなければなりません。

柏の葉高校情報理数科では、すでに保護者による生成AIに関する利用承諾済みであり、生徒たちが生成AIの留意点について学習していました。そのため、生徒も日常的に生成AIを利用しており、今回の授業が1コマという短時間で実施できた要因ともいえます。

日常から生成AIを扱っている環境であれば、Vibeコーディングのような新たなチャレンジも積極的に進められることになります。

私はプログラミング教育において、「どんなプログラムをつくるか」というアイデアが最も大事なことだと考えていますが、今回はとにかく「つくってみる」ことを重視しました。

Vibeコーディングに費やす作業時間は20分間に設定しました。例示がまったくないのも厳しいと思い、生徒たちにはテーマ例として以下の5つを提案しました。


生徒たちの自由な発想

生徒たちが作業時間に入ると、私はすぐに驚かされることになりました。

私が例示した中からテーマを選ぶものと思っていましたが、数人を除きほとんどの生徒は自分で何を作るか考えはじめたのです。私は、生徒たちをみくびっていたのかもしれません。教員からの例示は取り組みやすさを促す反面、生徒たちの思考を誘導してしまいやすいという側面もあります。今回の授業は、はじめから生徒各自にアイデアを出してもらっても充分に可能であった、と授業後に反省しました。

生徒たちと生成AIの対話がはじまると、作業から5分程度で次々とプログラムが形となって画面に現れてきました。

生徒たちから「おお、すごい」とか「ちょっと思ってたのと違うな」などの声が聞こえてきました。

生徒たちは「もっとこうして」とか「こんな機能を追加して」などと、生成AIに次々に指示を与えながら、自分の作品をブラッシュアップしていきました。

40人ずつ、計80個ほどのプログラムがみるみるうちに形になっていくスピード感は、これまでの通常のプログラミングの授業では見たことがありませんでした。


生徒たちの作品紹介!

20分の作業時間が終わると、生徒たちにスライドを作成してもらいました。

  • プログラムのタイトル
  • プログラムの簡単な説明
  • スクリーンショット
  • 作品のURL
  • 感想

を5分程度で各自1枚のスライドにまとめてもらいます。

スライドは全員で共有しているので、生徒たち同士でスライドを相互に参照し、友達のプログラムを試してもらう時間を10分程度設けました。

個人情報や暴力的なものは扱わないように、と指示していたので問題のありそうな作品はありませんでしたが、万が一のことを考え、各自のプログラムは「デプロイ(インターネットに公開して誰でも利用できるようにする)」はせず、プレビュー段階のプログラムを参照することにしました。

どれも個性ある素晴らしい作品でしたが、いくつかピックアップしてみます。

1年生

  • 基数変換学習ゲーム
  • いちごオセロ
  • 相手のコマも動かせる将棋
  • ボールを動かす物理パズル
  • 積分マスター
  • 200色の白色をあてるゲーム
  • ホトトギス大喜利

2年生

  • 世界遺産ジグソーパズル
  • 10秒で打て!ドキドキ五目並べ
  • 3D迷路
  • 動物の声で音声合成
  • たけのこにょっき
  • 少し違うオセロ
  • Running Shoes Management

どれも本当に素晴らしいものばかりです。

学習系アプリから、ジョークゲームまで多様な作品が出揃いました。

特に印象に残ったのは、「200色の白色を当てるゲーム」と「Running Shoes Management」です。「200色の白色を当てるゲーム」は「白って200色あんねん」という某タレントの有名な発言をゲームにしたものです。微妙な白色の違いを、フルカラーのデジタル表現でうまく生かしていることもさることながら、とにかくアイデアが面白く、よく5分でこんなことを思いつくものだと感心してしまいました。

もう一つは「Running Shoes Management」。陸上部の生徒の作品です。彼はランニングシューズが好きでたくさん持っているらしいのですが、使うシューズが偏るとすぐにダメになってしまうため、シューズごとに走った距離や日時などを記録しておくためのアプリだそうです。グラフ化もでき、これをもとに次の日に使うシューズを決めるわけです。

これこそまさに「自分ならではの課題」を捉えている好例だと思います。

そのほか、白と赤のいちごによる「いちごオセロ」、ボタン連打でたけのこがにょきにょき伸びるゲーム「たけのこにょっき」は女子生徒による作品で、かわいいデザインにこだわりが感じられました。

Vibeコーディングでは、「多くの人に受け入れられる」ものよりも、自分の「つくりたいもの」を突き詰めることに、大きな価値があるように感じました。

このVibeコーディングをプログラミング教育の観点からどう考えるべきなのでしょうか。

後編に続きます!

SHARE