4月1日から体制変更があり、CTO室という部署が爆誕して、そこでCTOこと id:myfinder の下で、AI技術を活用してあれこれ開発していくぞ！という業務に従事しています。その中で、今週ずっとv0と向き合っていたので、現時点での見解を述べておこうと思います。

前提

自分は、

AIに関する技術について、専門的に学んだ経験はありません
AIに関するサービスを活用した経験としては、ChatGPTやCursorに課金して、日常生活や日々の業務で使っていた程度です

雑感

プロトタイピングを作るには本当に有用
- 「こういうデータを収集するフォームを作りたいです」みたいな感じでv0のChatで対話していくと、30分もあればそれっぽいものが仕上がる
- 文字で説明するよりもfigmaなど実際の画面のイメージとして見えた方が情報量が多くなるのと同様で、実際にブラウザ上で触れるとより情報量が多くなって、たくさんのフィードバックが得られる
一方で、コードの規模が大きくなると辛くなってくる
- 処理の時間が長くなってくる
- 出力の精度も悪くなってくる、ような気がする…
なので、このように使うといいのではないか:
- v0で見た目（フロントエンド）のプロトタイプを用意する
- バックエンドについては、v0で書かせつつ、必要に応じてCursorなど手元で開発
とにかく「小さく作る」という意識がないと、どんどん辛くなる
- そう考えると、「フロントエンド」と「バックエンド」をそれぞれ別のv0のプロジェクトで作って、それをAPI等で連携させる、という手も有効かもしれない
- v0にAPIを実装させた上でドキュメントも書き出させて、そのドキュメントを別のv0のプロジェクトで読み込ませると、うまいことAPIで連携する、ということは実現できた

TIPS（？）

v0で、例えば（OpenAIなどの）APIトークンを使いたいときは、環境変数で設定することができる
- Chatで「環境変数を設定したいです」みたいな感じで書くと、いい感じに入力するフォームを出してくれて便利
- 環境変数はv0のプロジェクト単位で設定するので、1プロジェクト＝1アプリケーション、という構成にするのが良さそう
  - 異なるコンテキストのアプリケーションを1つのプロジェクトで作るのは避ける
- 1つのプロジェクトで複数のChatが作れるが、これはforkして新バージョンの開発に使ったり、同じコンテキストで別の用途に特化したアプリケーションを作るために使うのが良さそう
スマホでの見た目を確認したい場合、URL欄の右側に「Open in new tab」というボタンがあるので、これで新規タブを開いてデベロッパーツールで見れば良さそう、だが…
- 「Open in new tab」すると、環境変数が引き継がれないので、APIトークンなどを環境変数で設定している場合はうまく動作しない、らしい
- このためにAPIトークンを埋め込むのもな… という気がするので、現状は一旦Deployしてしまって、デプロイしたものを実機やデベロッパーツールで確認する、というのが良さそう
  - なにかいい方法があったら教えて下さい…

多分、今後高速に状況が変わっていく（v0やその周辺技術の変化もあるし、自分自身も知見を得て変わっていくはず）と思うので、定期的に見解をダンプしておくことは有用… なのではないかな、と思っています。隔週か月1くらいの頻度で、v0などAI関連技術を使ってみた感想は書いていこうと思います。