【藤井聡太竜王も実践】岡崎市でも話題の「バイブコーディング」、英単語タイピングゲームを実際に作ってみたら色々気づきました!~AI時代のプログラミング教育~

導入:将棋の天才もハマる「バイブコーディング」とは?

年末年始の休みを利用して、今エンジニア界隈だけでなく、世間を騒がせている「バイブコーディング(Vibe Coding)」を実践してみました。

皆さんはこの言葉をご存じでしょうか? 実はあの藤井聡太竜王もハマっているということで、一気に知名度が上がった新しいプログラミングのスタイルです。

これまでのプログラミングは、一文字一句間違えないようにコードを記述する必要がありましたが、「バイブコーディング」は少し違います。 「こんな雰囲気(Vibe)で!」「ざっくりこんな機能がほしい!」とAIに指示を出すだけで、AIが実際のプログラムコードを書いてくれるのです。

今回は、この手法を使って、当教室のカリキュラムにも関連する「英単語タイピングゲーム」を作成してみました。その過程で見えてきた、「AI時代に本当に必要な力」についてお話しします。


検証環境と作ったもの

今回使用したのは、「Cursor(カーソル)」というAI搭載の次世代コードエディタです。 月額$20(約3,000円)のProプランに加入し、本気で挑みました。

Screenshot

作成したアプリ:英単語タイピングゲーム 当教室(MYマナビスタイル)には英語コースもプログラミングコースもあります。「せっかくなら両方のスキルが伸びるものを」と考え、英単語を覚えながらタイピング練習ができるWEBアプリ(SPA / Vue.jsベース)を作ることにしました。


衝撃のスタート:10分で「ほぼ完成」

「バイブコーディング」の醍醐味は、詳細な設計図を書かずに「ノリ」で作り始めることです。 今回もあえて細かい指示書は作らず、「Vue.jsを使ったSPA(シングルページアプリケーション)で、英単語タイピングを作って」とだけ伝えました。

すると……。

ものの10分ほどで、動くプロトタイプ(試作品)が完成してしまいました。 しかも、デザインが最初から整っていて、普通に見やすいのです。

これには正直、驚愕しました。 かつて同じようなアプリをすべて手作業で作った経験があるからこそ、その速さと精度の高さに戦慄しました。

「これ、プログラミング初心者の新卒エンジニアは本当にいらなくなるのでは……?」

一瞬、そんな極端な未来が頭をよぎるほどの衝撃でした。


AI開発のリアル:ここからが本当の勝負

しかし、ここからが「バイブコーディング」の真のスタートでした。 10分でできたのはあくまで「それっぽいもの」。 実際に生徒さんが使えるレベル(商品レベル)に仕上げようとすると、壁にぶつかります。

  • 「もっとネイティブっぽい発音機能を入れたい」
  • 「間違えた時の挙動をこうしたい」
  • 「スマホでも崩れないようにしたい」

AI(LLM:大規模言語モデル)は優秀ですが、私の脳内を透視できるわけではありません。 「なんとなくいい感じに」では、ここからの微調整が効かないのです。

あれこれ指示を出し、修正を繰り返し、結局完成までにかかったのは約1週間(実働時間は3日分くらい)。

完成したゲームはこちらです: https://wkstyle.jp/typing (ぜひ遊んでみてください!)

Screenshot

以前自分でコードも書いてつくったときは1ヶ月くらいかかったので(土日作業ですが)3倍以上の速度アップになっていると思います。


AI時代に「人間」に求められるスキルとは?

今回の開発を通して、開発者兼、教育者として非常に大きな気づきがありました。

AIを使えば、誰でも簡単にアプリが作れる時代にはなりました。しかし、「より良いものを、効率よく作る」ためには、以下の2つのスキルが圧倒的に有利に働きます。

1. プログラミングの基礎知識と設計力

AIに対して「バグを直して」と言うのと、「データの受け渡し方が間違っているから、Vue.jsのライフサイクルを見直して」と指示するのとでは、解決スピードが段違いです。 データ設計、UI(画面)設計、システム全体の構造……これらを知っている人間が「司令塔」になることで、AIは真の力を発揮します。

2. 英語力

最新のAIモデルやプログラミング情報は、やはり英語がベースです。日本語でいれたものを、AIが英語に翻訳してるのです。AIへの指示(プロンプト)も、英語の構造を理解している方が論理的に伝わりやすい場面が多々あります。

3. 文章を正しく読み取る力

AIは文章を正確に解釈するため、指示の微妙なニュアンスや前後の文脈を理解する力が求められます。文章を正しく読み取り、必要な情報を整理して伝える国語力がある人ほど、AIを効果的に使いこなせます。


結論:AIは「魔法の杖」だが、振るのは「人間」

「バイブコーディング」は素晴らしい技術です。 これだけ気軽にWEBアプリが作れるようになれば、今後、個人のアイデアが詰まった「おもしろアプリ」が世の中に溢れてくるでしょう。四次元ポケットをもつドラえもんが、まさに家にやってきたような感覚です。色々な夢をかなえてくれる可能性が広がりました。

しかし、AIが進化すればするほど、「どう作りたいか(要件定義)」や「裏側で何が起きているか(仕組みの理解)」を知っている人の価値は高まる感覚も持ちました。

当教室が「読解力」「プログラミング力」と「英語力」に力を入れている理由は、まさにここにあります。 AIに使われるのではなく、AIという優秀なパートナーを使いこなし、自分のアイデアを形にできる子を育てていきたい。 今回の開発で、その思いを新たにしました。

・文章を正しく読み取る国語力
・世界とつながるための英語力
・答えのない問題に向き合い、考えながら前に進む力(プログラミング的思考と自発性)

こうした力を、小学生という吸収力の高い時期に、遊びながら・試しながら身につけていくことが、これからの時代ますます重要になってくると感じています。

「何をしたらいいかわからない」という場合でも、お受験などを通じて学ぶことも一つの方法です。プログラミングに限らず、幼少期から脳を鍛える経験を積むことで、考える力や集中力、表現力を自然に育むことができます。

AIに使われるのではなく、AIをパートナーとして使いこなし、自分のアイデアを形にできる人へ。子どもも大人も、楽しみながら「脳を使う習慣」を続けていきたいですね。

!!ご注意!!

お子様にバイブコーディングをさせる場合、サブスクのようで制限超えると従量課金になるので、リミットや、小まめな金額監視をしないと高額請求がありえますのでお気をつけください。そういった意味では楽天モバイルが神に見えますwww

次回はもう少し本格的に管理アプリをつくってみたので、その詳細をレポートをしてみたいと思います。

近々バイブコーディングクラスを新設しようと画策しております。ご興味あるかたはご連絡ください。