【環境】v0をBolt.newですぐにお試しできる環境を用意したい

0. はじめに

こんにちは。
やっと開発関係の生成AIをさわり始めた腰重エンジニアです。最近はVueやDjangoをメインに仕事をしています。

どの生成AIから手をつけるか迷いましたが、とりあえず Bolt.new と v0 が相性良さそうとのことなのでこの2つを試しました。

とりあえず試して出力されたコードは shadcn/ui というUIコンポーネントを利用しているようでした。shadcn/uiは聞いたことも使ったこともなかったですがこれも試してみようということで、今回はv0が出したコードを、Bolt.newを使ってすぐに誰でも試せるような環境を用意していこうと思います。

Bolt.newで何ができるのかまだ全体はわかっていないんですが、とりあえずコードをサクッと実行したり、プロジェクトをブラウザ上で開始できるようになります。
v0はこういう画面作りたいとプロンプトで指示するとプレビューとコードを一緒に返してくれます。
双方まだ試し始めた段階なので、説明等間違っていたらスミマセン。

1. 使用言語、技術

• Docker：https://www.docker.com/ja-jp/
• Vite：https://vite.dev/guide/
• React：https://ja.react.dev/
• React Router：https://reactrouter.com/en/main/start/tutorial
• TypeScript：https://www.typescriptlang.org/
• Tailwind CSS：https://tailwindcss.com/docs/guides/vite
• shadcn/ui：https://ui.shadcn.com/docs/installation/vite

Docker, Viteまわりの設定は以下に従いました。

Dockerビギナーなので、非常に丁寧でわかりやすい説明がありがたかったです。

あとは基本的に公式のドキュメントに従ってインストール等していくだけですが、１か所にまとまっていれば嬉しいかもなと思ってこの記事を書いています。

2. 環境を作る

2-1. Vite + React + TypeScript (+ Docker)

1.のQiita記事に従ってVite + React + TypeScriptまで用意します。
Dockerは個人的に身につけていきたい技術なので使用していますが、今回の目的としてはマストではないです。
詳しい説明は上記の記事をご参照ください。

terminal

# Vite + React + Typescript
npm create vite@latest
# ✔ Project name: … sample_project
# ✔ Select a framework: › React
# ✔ Select a variant: › TypeScript + SWC

# 依存関係インストール
cd sample_project
npm install

# Docker用
touch Dockerfile compose.yaml

Dockerfile

FROM node:22-slim
WORKDIR /app
COPY package.json package-lock.json ./
RUN npm install
CMD ["npm", "run", "dev"]

compose.yaml

services:
  app:
    build: .
    ports:
      - "3000:3000"
    volumes:
      - .:/app
      - /app/node_modules

vite.config.ts

import { defineConfig } from "vite";
import react from "@vitejs/plugin-react-swc";

// https://vitejs.dev/config/
export default defineConfig({
  plugins: [react()],
  server: {
    host: "0.0.0.0",
    port: 3000,
  },
});

動作確認

terminal

# Viteローカル起動
npm run dev
# Docker環境で起動(デタッチ)
docker compose up -d

動作確認できたらvite初期状態のいらないファイルや記述は消しておきます。
以下削除対象例

• public/vite.svg(ファイル自体不要)
• assets/react.svg(ファイル自体不要)
• App.css(空にする)
• App.tsx(フラグメント以外の要素とインポート)
• index.css(空にする)

以下Git設定

bolt.newから参照できるよう、リモートリポジトリはPublicで作成します。

terminal

git init
git add -A
git commit -m "[環境]: Vite、React、Typescript、Docker環境作成"

git remote add origin https://github.com/[ユーザー]/[リポジトリ].git
git branch -M main
git push -U origin main

2-2. Tailwind CSS

shadcn/uiはTailwind CSSに依存しているので先にこちらの設定を済ませます。

terminal

npm install -D tailwindcss postcss autoprefixer
npx tailwindcss init -p

tailwind.config.js

/** @type {import('tailwindcss').Config} */
export default {
  content: [
    "./index.html",
    "./src/**/*.{js,ts,jsx,tsx}",
  ],
  theme: {
    extend: {},
  },
  plugins: [],
}

index.css

@tailwind base;
@tailwind components;
@tailwind utilities;

App.tsx

export default function App() {
  return (
    <h1 className="text-3xl font-bold underline">
      Hello world!
    </h1>
  )
}

画面見てTailwindのレイアウトが適用されていたらOK

terminal

git add -A
git commit -m "[環境]: Tailwind CSS を導入"

2-3. shadcn/ui

@でsrcフォルダ参照できるようにするやつです。

tsconfig.json

{
  "files": [],
  "references": [
    {
      "path": "./tsconfig.app.json"
    },
    {
      "path": "./tsconfig.node.json"
    }
  ],
  "compilerOptions": {
    "baseUrl": ".",
    "paths": {
      "@/*": ["./src/*"]
    }
  }
}

tsconfig.app.json

{
  "compilerOptions": {
    // ...
    "baseUrl": ".",
    "paths": {
      "@/*": [
        "./src/*"
      ]
    }
    // ...
  }
}

terminal

npm i -D @types/node

vite.config.ts

import path from "path"
import { defineConfig } from "vite";
import react from "@vitejs/plugin-react-swc";

export default defineConfig({
  plugins: [react()],
  server: {
    host: "0.0.0.0",
    port: 3000,
  },
  resolve: {
    alias: {
      "@": path.resolve(__dirname, "./src"),
    },
  },
})

shadcnのコンポーネントを使えるようにします

terminal

npx shadcn@latest init
# ...
# ✔ Which style would you like to use? › New York
# ✔ Which color would you like to use as the base color? › Zinc
# ✔ Would you like to use CSS variables for theming? … no / yes
# ...

# Buttonコンポーネントで動作確認
npx shadcn@latest add button

App.tsx

import { Button } from "@/components/ui/button"

export default function Home() {
  return (
    <div>
      <Button>Click me</Button>
    </div>
  )
}

画面見てボタンがいい感じに表示されていればOK
npx shadcn@latest add [コンポーネント]のような形で必要に応じて追加します。
コンポーネントは並べて書くと一度に複数に追加できます。

terminal

git add -A
git commit -m "[環境]: shadcn/ui を導入"

2-4. React Router

何も指示しないとv0からはNext.jsのルーティングぽいのが書かれてきますが、私はReact Routerを使用したいので入れておきます。

terminal

npm install react-router-dom

main.tsx

import { StrictMode } from 'react'
import { createRoot } from 'react-dom/client'
import {
  createBrowserRouter,
  RouterProvider,
} from "react-router-dom";
import App from './App.tsx'
import './index.css'

const router = createBrowserRouter([
  {
    path: "/",
    element: <App />,
  },
]);

createRoot(document.getElementById('root')!).render(
  <StrictMode>
    <RouterProvider router={router} />
  </StrictMode>,
)

画面見て表示変わっていなければOK

terminal

git commit -am "[環境]: React Router を導入"
git push

3. Bolt.newで表示する

githubのリポジトリのhttps://の後にbolt.new/を追加すると、自動で

• クローン
• 依存関係のインストール
• プロジェクト起動

まで実施してプレビューが表示されます。

コードタブから編集も可能なので、v0が出力したコードをブラウザ上で試せるようになりました。

手順は以上です。
一度通しで確認はしていますが、万が一不備があればなおしますので教えてください。

4. おわりに

v0が出力したコードをお試し、まで書くか悩みましたが、どれくらい調整が必要かを手を動かして体感して欲しいのでぜひお手元で動かしてみてください。

私の感想としては「すご」です。

個人的には最低限表示に必要なデータを固定値で作ってくれるので、どういう値が必要か、のあたりをつけやすくなるのが良いです。爆速でモックを作れるようなイメージ。

今後は部品や枠はAIに作ってもらいつつ、プロンプト変えるよりも直接コードを変えた方が早い部分を、手早く実装したり直したりする力が求められるのだろうなと思いました。

以上。