1. はじめに

こんにちは、カレーにキャベツが好きなキャベツ六郎です。
近年、AI技術の発展により、開発者の開発効率は飛躍的に向上しました。
私も普段からChatGPTさんには大変お世話になっています。

そんな巷では、AI駆動開発という言葉が聞かれるようになったと感じています。
どういった開発手法を指すのかについて気になったので調査してみることにしました。

本記事では、生成AI”v0.dev”を使って簡単なWebアプリを作成し、AI駆動開発とはどのような
開発手法であるのかについて入門記事としてまとめてみました。
皆さんにとってこの開発手法を知るきっかけとなれば幸いです。

ぜひ、一緒に試してみてください！　

2. “v0.dev”とは

出典：https://v0.dev/

“v0.dev”の概要

Next.jsの開発元であるVercel社が提供する”v0.dev”は、UIコード生成に特化したAIツールです。
shadcn/uiとTailwind CSSライブラリを活用してモダンなデザインのコードを簡単に生成できます。
また、生成されたコードはnpxコマンドを使用するとローカルのプロジェクトにダウンロード可能です。

“v0.dev”を利用することで、テキストプロンプトやデザインモックアップから直接コードを生成でき、
開発者は迅速にプロジェクトを立ち上げられます。
その結果、開発にかかる時間と労力を大幅に節約することが可能になります。
　

3. AI駆動開発とは

AI駆動開発とは、AI技術を活用してソフトウェア開発の効率と品質を向上させる手法であり、
設計段階からAIを使う前提の開発方式です。

AIによるコード生成、バグ検出、テスト自動化、ドキュメント作成などを通じて、開発プロセスを
自動化・最適化します。
これにより、開発時間の短縮やリソースの効率的な利用が可能となり、開発者はより創造的な
作業に集中できます。

一方で、学習コストやAI依存のリスクも考慮する必要があります。
今後の技術進化により、AI駆動開発はさらに普及し、ソフトウェア開発の在り方を変革することが
期待されています。
　

4.”v0.dev”を実際に使ってみた

4-1.導入手順

”https://v0.dev/”こちらのサイトへアクセスすると上記のようなページが開きます。
ここで早速プロンプトを打とうとしたのですがアカウントがないと使用できないようです…💦
ですので触ってみたい場合は、指示に従って「Sing Up」のボタンを押下しアカウントを作成しましょう。

押下後、メールアドレスの入力を求められます。
メアド以外にもgitlabやgithubのアカウントがあればアカウント登録できるようです。

4-2.UIデザインの作成で試してみたこと

先ず、todoアプリを作るように指示を行いました。
プロンプトは参考にしたサイトを元に英語で作成し、テンプレートはchatGPTで生成しています。

UI Generation Blocks allows v0 to generate client-side UI components in React, Vue,
Svelte, and HTML with CSS. You can copy or download the code for these generations
as well as install them directly into your codebase via the shadcn CLI.

引用元：https://v0.dev/docs

また、公式の説明に上記の様な説明がありました。
折角なので”React・Tailwind CSS”,”html・css”で比較してみました。
　

4.2.1．todoアプリを作るように指示する。

プロンプトはこのような感じです。

Please create a ToDo application using {ココをReactかhtmlにする}.
The application should include the following features:
Add, edit, delete, and mark tasks as completed.
Store the task list in localStorage so that the data persists after a page refresh.
Include a simple and clean UI styled using ｛CSSまたはTailwind CSS｝Modules.
Make the application responsive and ensure it works on both desktop and mobile devices.
Provide detailed comments in the code explaining the functionality of each part.

画面表示を以下に示します。

・Reactで作成したもの

• ・HTML・CSSで作成したもの
  

Reactで指示した場合はプレビューで確認できたのですが、
なぜかhtml・cssで作成した場合は表示できないようでした。
しかし、どちらの方法でもコードの生成は１分もかからずに生成が完了しました。

ちなみにhtml・CSSで作ったファイルは以下手順で画面確認することができました。
①ローカル環境にインストールして同じディレクトリに適当にいれる
②live server（vscodeの拡張機能）でローカルサーバーを立てる

こちらでは、UIだけでなくtodoアプリとしての機能も実装できていることも確認できました。
これだけ早く動くものを作ることができるのであれば開発者の作業効率は上がるように感じました。

次は、カレンダーUIを作成するまでの手順を以下で示します。
　

4.2.2 ．Googleカレンダーアプリを作るように指示する

こちらは画像を読み込ませた場合とプロンプトでReactで作ることを命令した場合で比較してみます。

Please create a like Google Calendar application using React.
The application should include the following requirements:
Include a simple and clean UI styled using Tailwind CSS Modules.
Make the application responsive and ensure it works on both desktop and mobile devices.
Provide detailed comments in the code explaining the functionality of each part.

画面表示を以下に示します。
　
　

・プロンプトのみ

いや、凄すぎます。
確かに我々が良く知っているGoogle Calendarのようなフロント画面が作成されました。

参考サイトからサンプルを保存して”v0.dev”にアップしてみました。
指示はシンプルに「Please create a like uploaded image application」としています。
　
　

・画像と簡単なプロンプト

見た目は完璧に仕上がっていたものの、「プロンプトのみ」では予約機能なども実装されており、
「プロンプトのみ」であっても明確な指示である方が実装者の意図をより忠実に再現できる可能性を感じました。
　

4.2.3．日本語でも指示してみた。

・プロンプト

Reactを使ってGoogle Calendarのようなアプリケーションを作成してください。
アプリケーションは以下の要件を含む必要があります： 
Tailwind CSS Modulesを使用したシンプルでクリーンなUIを含むこと。
アプリケーションをレスポンシブにし、デスクトップとモバイルの両方で動作するようにしてください。

　　　

　

・生成結果

英語で作成したものと比べて一般的なカレンダーに近いUIのような印象を受けます。
いつか指示を加えてGoogleカレンダーに近づくか試してみます。

　
　

・プロンプト(追加指示)

以下の3点の指示に従って改修お願いいたします。

・ハンバーガーメニューで開閉できるメニューを実装してください
・そのメニューには月表示のカレンダーとマイカレンダーとして自分の予定をカラーで色分け出来るチェックボックスを実装してください。
・その下には他のカレンダーとして日本の祝日などの色分け出来るチェックボックスを実装してください

　　
　

・生成結果

一気にGoogleカレンダーに近づきました👏
マイカレンダー欄のチェックボックスも想定通りの機能を実装できておりました！！
皆さんも気になったら是非触ってみてほしいです！！

　

4-3.使用感と初見の感想

”v0.dev”は、ChatGPTと異なり、プレビューを見ながら開発できる点が大きなメリットです。
要望を伝えるとすぐに画面に反映されるため、効率的に開発を進められます。

プロンプトの言語（日本語または英語）による生成結果の差はあまり感じられませんでした。
ただし、Reactを指定してもNext.jsTypeScriptで生成される場合があり、
開発者によっては使いにくいと感じるかもしれません。
また、同じプロンプトでもUIが毎回変わるので、理想のUIが出るまで再生成を繰り返してみるのも
面白いでしょう。

Figmaのデザインデータを入力として利用でき、デザインからのコード化やプロンプトによる微調整は、
開発効率の大幅な向上に繋がる可能性があります。
　

5. まとめ

本記事では、生成AI”v0.dev”を活用したWebアプリのフロント実装を通じて、
AI駆動開発という新しい開発手法について解説しました。
その開発スピードと表現力には目を見張るものがありました。

今後の展望として、”v0.dev”で作成したフロント実装を基にAPI連携機能を実装することで、
バックエンド開発の練習にも繋げられそうだと感じています。

最後までお読みいただき、ありがとうございました。