アルアカ - Arcadia Academia

Arcadia Academiaは「エンジニアリングを楽しむ」を合言葉に日本のデジタル競争力を高めることをミッションとするテックコミュニティです。

Vite + React構成のポートフォリオをV0を活用し作る方法

Featured image of the post

フロントエンド開発者の間で急速に注目を集めているUIビルダー「V0」。

自然言語でUIを設計し、Reactコンポーネントを自動生成できるという革新的なツールです。

ただし、生成されたコードを活かすにはNext.jsなどのフレームワークが必要……と思われがちで、ペライチ(1ページだけの静的サイト)を作りたいだけなどの場合は、オーバーエンジニアリングに感じますよね。実はVite + React構成であれば、もっと軽量に、もっと高速にペライチのポートフォリオを公開できます。

今回は、V0で作ったUIをVite + React構成でポートフォリオとしてまとめる方法を紹介します。

💡
前提条件:
Next.js、およびReactの基礎を理解していること

[目次を開く]

ステップ1:V0でUIを生成する

まずはV0.devにアクセスし、次のようなプロンプトを入力します。

“A simple portfolio page with a hero section, about section, and project cards.”

すると、すぐにReact(JSX)形式でUIコードが生成されます。

コードはコピー可能なので、あとでViteのプロジェクトにそのまま貼り付ける準備をしておきましょう。


ステップ2:Vite + React プロジェクトを作成

次に、Viteを使ってReactプロジェクトを立ち上げます。以下のコマンドを実行:

npm create vite@latest my-portfolio --template react
cd my-portfolio
npm install

開発サーバーを起動して動作確認もしておきましょう。

npm run dev

ステップ3:V0のコードを貼り付ける

src/App.jsx を開いて、V0で生成されたコードを貼り付けます。

Tailwind CSSを使っている場合は、以下のように事前にセットアップが必要です。

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

tailwind.config.jsindex.css をV0のスタイルに合わせて調整しましょう。


ステップ4:自分の情報に差し替える

V0が生成したダミーコンテンツを、自分のプロフィールやプロジェクト情報に差し替えていきます。

<h1 className="text-4xl font-bold">こんにちは。私はUIエンジニアです。</h1>
<p>Reactを使ってUXをデザインすることができます。</p>

必要に応じて、GitHubやX(旧Twitter)などのSNSリンクも追加すると、よりプロフェッショナルに仕上がります。


ステップ5:ビルドして公開

ビルドして静的ファイルに書き出します:

npm run build

生成されたdist/フォルダの中身を、GitHub PagesNetlifyFirebase Hostingなどにアップロードすれば公開完了!

特にGitHub Pagesなら、以下のような設定でサクッと公開できます:

npm install gh-pages --save-dev

package.jsonに以下を追加:

"homepage": "https://yourname.github.io/my-portfolio",
"scripts": {
  "predeploy": "npm run build",
  "deploy": "gh-pages -d dist"
}

※homepageの個所は適宜、ご自身の情報に置き換えてください。
そして、

npm run deploy

でデプロイ完了!


まとめ:V0 × Viteはペライチにベストマッチ

  • UIはV0で爆速生成
  • 軽量構成はVite + React
  • デプロイもGitHub Pagesでお手軽

Next.jsほどの機能は不要だけど、Reactの柔軟性は使いたい——そんなあなたにこそ、V0 × Vite構成のペライチはベストな選択です。

デザインもクオリティも妥協しない、そんなモダンなポートフォリオを今日から始めましょう!

あなたを爆速で成長させるメンタリングプログラムはこちらから↓↓

RUNTEQ(ランテック) - 実践型Webエンジニア養成プログラミングスクールの入会