概要
vercelのv0が引き続き性能が上がっているとのことなので試してみました。
前回の佐渡トライアスロンで自分好みのアスリートトラッカーを作ったのですが、あのときはReact + Next.jsで一から手書きでコーディングしていました。今回はAIの力でどこまで楽にできるのか実験してみることにしました。
vercelのv0を使ったことが無い方のために簡単に説明すると、これはプロンプトを入力するだけでReactコンポーネントを自動生成してくれるツールです。まさにプロンプトエンジニアリングの時代って感じですね。
早速作ってみた
以前作ってみたアスリートトラッカーと同じようなものを作らせてみました。
プロンプトは「佐渡トライアスロンのリアルタイム結果を表示するトラッカーアプリを作って。フィルタ機能とソート機能、ラップタイム表示機能を含めて」みたいな感じで入れました。英語で入れた方が精度が高いという噂もありますが、日本語でも十分に動いてくれます。
まず、たった5分で以下のクオリティのものができました。
v3で上記の物ができたので、3回のプロンプトだけで作れています。
最初のプロンプトで基本的なテーブルレイアウトができて、2回目で「フィルタリング機能を追加して」、3回目で「ラップタイム表示の機能を追加して」という感じで段階的に機能を追加していきました。
これは本当に驚きました。前回手動でコーディングしたときは、tailwindCSSのクラス名を調べながら、stateの管理を考えながら、イベントハンドラを書いて…という作業を延々とやっていたのに、今回は自然言語で指示するだけでほぼ同等の機能が実装されています。
特に感動したのは、フィルタリングのロジックがちゃんと部分一致で動いていることと、テーブルのソート機能も最初から実装されていたことです。データの型定義もちゃんとTypeScriptで書かれているし、レスポンシブデザインにも対応していました。
それ以降、デザインを調整したり機能を追加したりすると自分のやりたい方向とはズレてきたり、基本機能がリグレッションしたりするので諦めました。
これがAI開発の現実ですね。最初の数回のイテレーションは魔法のように素晴らしいのですが、細かい調整をしようとすると途端に意図しない動作をするようになってきます。
たとえば「背景色をもう少し暗くして」とお願いすると、なぜかフィルタリング機能が動かなくなったり、「ボタンのサイズを大きくして」と言うとテーブルのソート機能が消えてしまったり。まるで風船を膨らませすぎて割れてしまうような感覚です。
たとえば、v11は以下のような感じ。
v11では見た目はかなり洗練されていて、ダークモードっぽい配色になっていてカッコいいのですが、肝心のフィルタリング機能が正常に動作しなくなっていました。検索ボックスに文字を入力しても反応しないし、ラップタイム表示のモーダルも開かない状態でした。
これは多分、プロンプトを重ねていくうちにコンテキストが混乱してしまって、どの機能が重要なのかAIが判断できなくなってしまったんだと思います。人間のプログラマーも同じような問題を抱えることがありますが、AIの場合はより顕著に現れるようです。
v3のときのソースコード
こちらにおいておきます。
ソースコードを見てみると、ちゃんとReact HooksのuseStateとuseEffectが適切に使われていて、filterとsortの処理も効率的に書かれています。型定義もしっかりしているし、可読性も高いです。正直、自分が手書きで書いたコードよりも綺麗かもしれません…
特に印象的だったのは、テーブルのヘッダーをクリックしたときのソート処理の実装です。昇順・降順の切り替えもちゃんと実装されているし、ソートされているカラムにはアイコンも表示されています。この辺りの細かい配慮は、人間のプログラマーでも忘れがちな部分だったりします。
今回の実験で学んだこと
v0のようなAIコーディングツールは、プロトタイプや基本機能の実装には非常に優秀だということがわかりました。特に、「こんな感じのアプリが欲しい」というふわっとした要求を形にするのは得意みたいです。
ただし、細かいカスタマイズや複雑な要求には向いていないということも同時にわかりました。結局、本格的に運用するものを作るなら、v0で生成したコードをベースに手動でカスタマイズしていく必要がありそうです。
今後の展望
今回の実験結果を踏まえて、来年の佐渡トライアスロンでは以下のようなアプローチを取ってみようと思います：
1. v0でベースとなるコードを生成
2. 生成されたコードを自分の環境に移植
3. 細かい機能は手動で実装
これなら開発時間を大幅に短縮できそうです。特に、UIのレイアウトやスタイリングの部分はv0にお任せして、ビジネスロジックの部分は自分で実装するという分業体制が良さそうです。
AIとの協働でコーディングする時代が本格的に到来している感じがします。完全にAIに任せるのではなく、AIの得意分野と人間の得意分野を使い分けることが重要ですね。
あわせて読みたい
自分好みのアスリートトラッカーを作ってみました
佐渡トライアスロン 2024 Aタイプ完走記
Specialized Shivを買って、200km乗ってみた感想
コメント