夏休みの挑戦

お盆休み。子供は短期留学に行って暇だ。。。

そうだ、「バイブコーディング」を試してみよう！！

突如始まった、お盆休みのバイブコーディングの挑戦。

「一行もコードを書かない」でコーディング。さてどこまでできるのか。

今回の挑戦ではReactを使うことにした。普段の仕事ではReactを触ったことがないどころか、JavaScriptもほとんど書かない。

AIを駆使すればどこまでできるのか？初めての人にも参考になるかと思う。

本アプリでの挑戦：

バイブコーディングでどこまで作れるかを試したい
Gemini Canvasができたのでどこまでできるか試したい
コーディングは自分では一切書かない。全てAIにやらせる
１週間でどこまでできるか
無料枠でどこまでできるか
作成するのは子供の勉強に使えるように自分で登録できる4択クイズアプリ
間違った問題は復習ができる（エビングハウスの忘却曲線）
友達とシェアができる
AIで問題が作成できる

今回、１週間で作成したアプリはこちら：

▶ QuizA - 自分で作れる4択クイズアプリ https://quiza-app-e0271.web.app

サクッと試したい場合は、クイズ検索で「サンプル」と入力して検索、またはギフトコードで「2MQP-P2DK-2WE6-6」でクイズを追加　でどうぞ。

謝辞：

・Gemini Canvas、Firebase の無償枠（Firestore、Authentication、および Hosting）を活用しています。とても感謝です。良い時代になりましたなー。

AIの期待と裏切り

巷ではGemini Canvasはどんな願いでも叶えてくれると。 

そういえば夏休みに下の子供が漢字練習を繰り返し実施することで、かなり正解率が上がったな。。。 

せっかくなので、復習ができる4択クイズを作ってみよう！

とりあえず、Gemini先生にお願いしてみる。

子供の勉強に使えるように自分で登録できる4択クイズアプリ「QuizA」
エビングハウスの忘却曲線を元に復習ができる
友達とシェアができる
１つのクイズは最大で１００問
ページは「home, profile,createQuiz,findQuiz]で右上にハンバーガーで表示
homeは復習、クイズを解く
復習はクイズを解いたもので間違っていたものをエビングハウスの忘却曲線を元に復習（即時、１日後、３日後、７日後）
profileはユーザ情報。ニックネーム、生年月日は編集可能、メールアドレスは編集不可。
createQuizは問題作成。公開するかしないかも選択可能。各問題に解いた時の説明文も登録可能。AIを使って問題を作れるように。
findQuizは公開された問題を検索して追加可能。
レイアウトはポップな感じで

Gemini先生は、ふんわりした僕の「バイブス」を完璧に理解し、コードをどんどん生成してくれる。

始めて出力された画面↓

追加でどんどん願いを伝えても、どんどん叶えてくれる。
「このままなら3日で終わるな」
しかし、そんな甘い期待は、すぐに打ち砕かれる、、、

記憶喪失になるAI：地獄のデバッグ作業

対話が長くなるにつれ、AIは以前の指示を忘れ始めた。「ポップなデザインで」と頼んだはずなのに、次に生成されたのは無機質なモノクロ画面。機能を追加しようとすると、前に作った機能がいつの間にか消えている……。（トークンの影響か。。。）

まるで、昨日まで一緒に酒を飲んでいた戦友が、翌日には俺のことを忘れてしまっているようだった。

ソースとタスクの分割

人間もそうだが、覚えておかないといけない範囲が広いと忘れてしまう。AIも同じだ。ならば、AIに覚えてもらう範囲を狭めればいい。

俺はソースコードの分割を決意した。Gemini先生にReactの流行りの構成を聞いて、その単位で分割してもらう。記憶喪失になりがちな先生。そのたびに、ソースをダウンロードして、もう一度アップロードし、分割の指示を繰り返す。

まるで、忘れ物が多い子供に毎日同じ宿題を解かせる親のようだった。

一度コンパイルが通るまでが大変だったが、そこを乗り越えれば。。。

俺の役割は、AIが忘れた”記憶”を都度、正確に提供すること。

指示なき機能：AIが見えない世界

一行もコードを書かずにコーディングはできる。しかし、それはあくまで「動く」という最低限のレベルだ。

クイズアプリの公開準備を進める中で、AIとの新しい攻防が始まった。

「このクイズアプリを公開したい。Firebase Hostingにデプロイして」とお願いすると、AIは一瞬でデプロイ用のコードを生成してくれる。

しかし、その先に待ち受けていたのは、AIが見えない（知らない）領域だった。

セキュリティルール：

ユーザーが勝手に他人のクイズを書き換えないように、Firestoreのセキュリティルールをどう設定すればいいのか？ AIは教えてくれない。

コスト削減：

無料枠で運用したいのに、クイズの読み込み回数が無駄に多くなっていないか？ AIはそんなことまで考えてくれない。

運用・パフォーマンス：

OGP（SNSでシェアした時の画像やタイトル）をどう設定するか、ウェブページの表示速度を上げるにはどうしたらいいか？これらは「コード」ではない部分であり、AIは指示しない限り動かない。

AIは、我々の「バイブス」を理解し、コードを生成してくれる。しかし、それはあくまで「指示されたタスク」の範囲内だ。
プロジェクトの健全性や、ユーザー体験、そして「運用」という視点は、AIにはない。

アプリを公開するには、「QuizA」を「動くもの」から「使えるもの」へと育てていく過程が必要だった。

そして、その過程で、AIがまだ持たない「プロダクトへの責任」という、エンジニアの最も重要な価値に気づかされたのだ。

所感：AI時代に、エンジニアの価値はどこにあるのか

一行もコーディングをせずにとりあえず動くもはできた。

この挑戦を終えて、これからのエンジニアの役割について深く考えさせられた。

テックリードの役割はさらに重要になる：

AIがコード生成やテスト作成など、開発タスクを効率化するにつれて、プロジェクト全体を俯瞰し、戦略を立てるテックリードの役割はますます重要になる。

AIは個々のタスクを高速にこなせるが、プロジェクトのビジョンを理解し、技術選定、アーキテクチャ設計、リスク管理を行うのは人間のテックリードの専門分野。

これからの開発者の役割は、間違いなく「AIを使いこなす」ことにシフトしていく。

小規模開発:

小規模開発では、テックリードが自らAIを駆使して、より迅速なプロトタイプ開発や機能追加を行う「ハンズオンな技術者」としての役割が重要になる。

大規模開発:

大規模開発では、より興味深い変化が起こるかもしれない。

AIの進化によって、コード品質のばらつきは減少し、海外の優秀なオフショアチームとの連携が、よりスムーズになる可能性がある。

それは同時に、単に国内でコーディングだけをやっているエンジニアは、より低コストな海外の人材に仕事を奪われるリスクが高まることを意味する。

国内のテックリードが全体の設計や品質保証を担い、各オフショアチームがAIを駆使して開発を進める...。そんな未来は、もうそこにあるのかもしれない。

ただでさえ、優秀なテックリードはなかなか育たない。今後のIT業界にとって、「AI時代のテックリードをどう育てていくか」は、最大の課題になるだろう。

【QuizA：バイブコーディング奮闘記】は次回へ続く

このアプリを開発する中で、様々な機能でAIとの攻防があった。

次回の記事では、その攻防について詳しく、開発の裏側を深掘りしていきたいと思う。