見出し画像

v0でちゃんとアプリ作る / 非エンジニアでもアプリを作れる！は本当か

ティッチ / AIエンジニア

v0とは

まず、v0はAIと対話しながらモックUI的なものが作れるサービスです。

私も専門であるNext.jsを開発したチームが作ったホスティングサービス「vercel」が提供しており、最近Xで話題になってました。

v0も素晴らしいですが、個人的にはvercelのtemplateのAI系テンプレート + Cursorもアツいです。こちらではエンジニア知識なくても本当にChatGPTもどきも作れるので、別記事で公開します。

非エンジニアでもアプリが作れるか？

「非エンジニアでもアプリ作れた！」みたいなツイートが結構あり、おそらく非エンジニアの人との知識格差を利用していいねを稼いでる感じがあったので、一応言及しておくと、

残念ながらあくまでこれはフロントエンド（見た目）を作るものなので、v0だけで完結して動くアプリケーションを作ることはできません。

実際に「v0で作った！」と言っているツイートの多くはDifyやCursorを使用しており、コーディングはしないとしても設計の知識がある前提になっています（嘘はついてないしこれも面白い開発アプローチ）。

私はプログラムは手段だと思っているビジネス系エンジニアなので、バイアスはありません。むしろDify使うしAI大好きです。

個人的な予測では、あと1年くらいすると特定の領域に限り（例えば管理画面やECなど）、本当にノーコードで画面を見ながらアプリケーションを開発できる未来がくると思っており、エンジニアの仕事は減ると思っています。

v0でちゃんとアプリを作る手順（開発者向け）

ドキュメントは以下になります（英語）

【前提1】作成画面は2タイプ

初期プロンプトを入力して好みのものを選択していく形式の旧画面と、最近になってChatGPTっぽくチャット対話で細かく指定していく新しい作成画面がリリースされました。

個人的には詳細のコーディングはCursorでやるので叩き台を作ることが多く、旧画面の選択していく形式が好きだったりします（用途に応じて）。

【前提2】見ながら作れるのはNext.js（React）のコード

HTMLのコードも生成できますが、プレビューはできないので、あんまり意味ないです（ChatGPTと変わらない）。

【前提3】イケてるっぽい見た目は「shadcn/ui」

実際のこのサービスの価値の4割くらいはイケてるUIが生成される部分だと思っていて、それはv0を使わずとも利用できます。

shadcn/ui

シンプルかつモダンでかっこいいですよね。デフォルトではこのshadcn/uiのコンポーネントを使ってコードが生成されるようになっています。

開発の流れ

  • ① create-next-app + v0 initで環境構築

  • ② v0の作成画面でコンポーネントを作成

  • ③ npx v0@latest add [id] でコンポーネントを追加

  • ④ Cursorでいじいじする

① reate-next-app + v0 initで環境構築

npx create-next-app@latest --typescript --tailwind --eslint
npx v0@latest init

② v0の作成画面でコンポーネントを作成

Codeを開くと右上にCLIコマンドが記載

③ npx v0@latest add [id] でコンポーネントを追加

$ npx v0 add NP1v5E7BLK6
Need to install the following packages:
v0@2.2.5
Ok to proceed? (y) y

✔ What should we name the component? … Header
✔ Done.

④ Cursorでいじいじする

リファクタや微調整はCursorでいじいじ。バックエンドとの繋ぎこみもできます。個人的には主流なORMやfirebase / supabaseなど、コミュニティが豊富なものを使う方が元データが多いので精度も高いです。

綺麗にまとまったコードではあるので、自分で書いたクソコードコンポーネントよりもCusorでいじいじしやすいのも利点です。

おすすめの生成方法

イメージが決まっている場合は、ワイヤーフレームの画像 + プロンプトがおすすめです。

また、イメージがまだ固まっていない場合は、UIの叩き台としても優秀なので旧生成画面で思いついたままにプロンプトを書いていくのが最適ですが、より詳細な指定をしたい場合には新生成画面（チャット形式）で作っていく、という使い分けになるかと思っています。

個人的には一度生成したあとはCursorでいじるのが最適ですが、v0の精度や機能追加が進んでくるとオンラインエディタで全部完結する未来も来るかもしれないなと思っています。

AIまとめ

AIと対話しながらモックUIを作れるv0は、非エンジニアでもアプリのフロントエンドを作ることができます。

しかし、完全なアプリケーションを作るにはDifyやCursorなど他のツールを組み合わせる必要があります。

将来的にはノーコードでアプリケーションを開発できる時代も来るかもしれませんが、エンジニアの役割は減ることはないでしょう。

v0の使い方や進化についてはドキュメントを参照してください。

是非、v0を活用して自分のアプリ開発に挑戦してみてください！さらに詳しい情報や他の記事もチェックしてくださいね。

この記事が気に入ったらサポートをしてみませんか？