v0でフロントエンド実装をして挫折した話

記事を読んでいただきありがとうございます。 AIでの開発にいろいろと進展がある中、私もAIでフロントエンド実装をしてみた！となりいろいろとやって挫折した話になります。

やったこと

以下の通りAIでいろいろやってフロントエンド実装部分でダメだ。。。となりました。

• ChatGPTで設計書を作成
  • 要求定義
  • 要件定義
  • 基本設計
• V0で設計書を元に以下の実装
  • 設計書を元にデザイン化
  • 一部ロジック実装（画面に関わる部分）
• GitHub Copilotで残りのロジック実装 ※やりたいがまだできてない

何で挫折したの？

結論を言うと「クレジット」の消費が激しすぎて数日でプレミアムプランのクレジットを使い果たしたことです。

約2日で1か月分を使い切りました。 2日と言っても丸々2日稼働したわけでなく隙間時間でやった程度です。

原因

私が書いた別な記事で「v0で生成するコードをAtomic Designにするプロンプト」というのがあります。

この内容を元にAPIつなぎ込みなどを抜いたフロントエンドの実装部分をv0で全部やっちゃおうと考えてました。

これが原因でした。

inputに大量の設計ドキュメント、outputにAtmic Designでの出力、v0がデフォルトで有効にしているライブラリを使わないといった運用フェーズを考慮した実装をした結果クレジットがあっさりとなくなりました。

解決策

やはりv0が本来求めている内容で実装を進めるのがクレジットの消費観点で言うと良いのかなと感じました。

次のサービスを作るときはもう少し制約を減らしてクレジットの消費を抑える方向にしてみようと思います。

最後に

結局お金か！と少し落ち込んでいるのですが、フロントエンド開発を楽にしたい欲はずっとあるので継続して何か良い方法がないか模索しようと思います。

でも誰かエンジニアにお願いするって考えたらクレジット買ったほうが安いんですよね。。。