Vercel v0を使って1時間でクリスマスを祝う
こんにちは！こちらは、クロスマート・テック Advent Calendar 2024の22日目の記事になります🎄
クリスマスイブイブイブということでなにかクリスマスっぽいものを作りたいなと思ったので、今回はVercelが提供する次世代AIコード生成ツール「v0」を使って、クリスマスツリーをデコレーションできるWebアプリケーションを1時間で作ってみました✨✨単に時間がなかった
v0とは
v0はVercel社が提供するAIツールで、自然言語による指示からReactベースのUIを自動生成できます。
特徴として
- shadcn/uiやTailwind CSSを活用したモダンなUI生成
- インタラクティブな要素の実装
- コンポーネント単位での生成と修正
- リアルタイムのプレビュー機能
が挙げられます。
開発プロセス
プロンプトエンジニアリング
まず、アプリケーションの要件を明確にするため、Claudeの助けを借りて以下のような詳細なプロンプトを作成しました。
主な機能：
画面中央に大きなSVGのクリスマスツリーを表示
サイドバーにドラッグ可能な飾りを配置（オーナメントボール、星、ライト、装飾品）
ドラッグ＆ドロップで飾りをツリーに配置できる機能
飾りの配置をローカルストレージに保存
「リセット」ボタンで飾りを全て取り除ける機能
UI/UXの詳細：
濃い緑色のツリーでモダンで華やかなデザイン
オーナメントは複数の色を用意（赤、金、銀、青）
ドラッグ時の滑らかなアニメーション
ツリー上のドロップ可能な場所を明確に表示
冬らしい背景デザイン
「あなたのクリスマスツリーを飾ろう！」というタイトル
追加の機能（可能であれば）：
背景に雪が降るアニメーション
元に戻す/やり直し機能
オーナメントを配置する時の効果音
アプリは直感的に使えるシンプルなものでありながら、ユーザーが理想のクリスマスツリーを作りたくなるような魅力的なデザインにしてください。
実装での課題と解決
最初に生成されたコードではPages Routerの実装が含まれており、上手く画面が動かなかったので、何度かv0と対話をし、App routerの形式に直して適切なコンポーネントの分離をしてもらいました。
できた！細かい違和感はあるもののちゃんと動いている！
プロジェクトの構成
生成されたプロジェクトは以下のような構造になっています
src/
├── app/
│ ├── page.tsx
│ └── layout.tsx
│
├── components/
│ ├── ChristmasTree.tsx
│ ├── Ornament.tsx
│ ├── Sidebar.tsx
│ └── SnowAnimation.tsx
│
└── lib/
└── utils.ts
ローカルでの動作確認
v0から「install」をクリックしてローカルマシンにプロジェクトを取り込み、以下の手順で動作確認を行いました。
プロジェクトの中身はこんな感じ
完成したアプリケーションでは以下の機能が実装されています
- SVGベースのインタラクティブなクリスマスツリー
- ドラッグ&ドロップによる装飾配置
- 装飾品の色やスタイルのカスタマイズ
- 状態の永続化
- レスポンシブデザイン
若干の調整は必要でしたがローカルでも立ち上げることができました☃️
まとめ
v0を使って1時間という制約の中でクリスマスツリーデコレーターを作ってみました。Claudeと組み合わせてプロンプトを作成し、少しの修正は必要でしたが、ドラッグ＆ドロップやローカルストレージへの保存など、基本的な機能は問題なく動作しています。生成されたコードはそのままReactプロジェクトに組み込めるので、実際の開発現場でも活用できそうです。
v0は日々アップデートが行われており、毎日のように新機能が追加されていて開発が非常に活発です。まだ試していない方は、ぜひチャレンジしてみてください🎅🏼Merry Christmas⭐️
Discussion