バックエンドエンジニアがReactでVibe Codingしてみた

経緯

今年に入りAIのAgentモードで開発を行うようになり、開発が以前よりも格段に楽しく感じていました。
そこで最近Vibe Codingというものに興味が湧きました。
中途でエンジニアになり5年目ですが、未だそれらしいポートフォリオを作ったことがなかったので、これを機にVibe Codingしてみることにしました。

やったこと

1. Geminiと壁打ちして、ポートフォリオの企画案を作成
2. CursorでVibe Coding ※Cursor Proプラン
3. Vercelを使用してポートフォリオを公開

成果物

GitHub

サンリオキャラクター大賞 分析サイト ※PC推奨

AIを使用する前に題材を決定

どうせなら自分のテンションが上がるものを作りたいと思い、私が好きなサンリオにまつわるものを作ろうと思いました。
最終的に、サンリオキャラクター大賞の順位を分析するサイトを作成することに決めました。

DBは使用せずに、かねてから勉強してみたかったReactを使用した、SPAサイトにしました。

企画案の壁打ち

Geminiとのchat履歴

なんとなく作りたいものは決まったので、より詳細を詰めていくために、まずは気軽に使用できるGeminiに壁打ち相手をしてもらいました。

最初に下記のようなプロンプトから始めました。

下記のようなWebページを作成しようとしています。
案出しのために、壁打ち相手になってください。

[概要]
歴代のサンリオキャラクター大賞の結果についてまとめ・分析するサイト

[想定する画面]
- 直近5年の、top30までのランキングの推移を見れる
- 直近5年の、top10までの各キャラクターの得票数と、その推移を見れる
- 最近のキャラクター大賞でtop30に入ったキャラクターが、現在何周年か見れる

[技術案]
- html/css, js
- react

[その他]
- 過去のデータを元にするサイトなので、DBは不要でハードコーディングで考えている

あなたの見解を教えてください。

長いので全文は割愛しますが、下記の内容を提案してくれました。

• ターゲット層を明確にする
• 既存の案に加えて、新たなコンテンツの提案
• 技術面での提案

そこでターゲット層と、サイトの目的を新たにGeminiに伝え、最終的に.mdファイルに企画案をまとめてもらいました。

過去のデータを元にするサイトなので、DBは不要でハードコーディングで考えている

コードベースという意図を伝えたかっただけなのに、間違った文章で指示してしまいました。
すると下記のようにJSONファイルで管理することを提案してくれた。
1ラリー少なくて済んだのでとても助かる👏

ハードコーディングを想定されているとのことですが、JSONファイルなどでデータを管理すると、メンテナンス性が向上します。
例えば、以下のようにデータを構造化しておくと、後から年やキャラクターを追加・修正する際に便利です。

Vibe Coding

いよいよCursorのAgentモードを使用して、Vibe Codingです。
はじめに使用したプロンプトはこんな感じです。

@proposal.md このファイルを参考に、Webサイトを開発してください。
jsonファイルには仮のデータを入れてください。

Geminiに作成してもらった企画案をもとに、開発を依頼しただけです。
そうしたらサクサク作成してくれて、あっという間にほぼ形になってしまいました😳
README.mdまで良い感じにしてくれて大助かりです。

過剰に機能を実装していたり、見づらい箇所があったので、
あとは下記のように追加で修正してもらいながら完成させました。

追加で修正してください。
- 最新データは2025年が存在するので、それを作成してください。データをwebから見つけられない場合は仮データで良いです。
- 「ランキング推移分析」の「表示キャラクター選択」のチェックボックスが少し見づらいです。縦列を揃えてみてください。
- 「ランキング推移分析」は、表示順位を現状の30位から、20位までに変更してください。
- 「キャラクターとデビュー年の関連性分析」の「年代別キャラクター数」と「年代別平均順位」の2つの棒グラフは、削除してください。

ちなみに正しいランキングデータは、Geminiに公式サイトから取得して欲しかったのですが上手くいきませんでした。
スプレッドシートにまとめてくださった方がいらっしゃったので、使用させていただきました🙏

csv出力して、JSONファイル形式に直して！と丁寧にお願いすれば終了です。

build & deploy

初めてReactでポートフォリを作成し、サーバーとドメインをどこで取得しようかなぁと思い、Geminiに質問しました。
そうしたらVercelをオススメされたので採用することにしました。

なんとVercelのアカウント作成して、GitHubのリポジトリを連携するだけで、build & deploy が完了、無課金で公開することができました🚀

※deployボタン的なのも押した記憶ない...

感想

開発期間は2日でしたが、工数は1人日くらいでした。
※むしろこのQiitaを執筆する方が面倒に感じる...

自分で作ったと言って良いのか分からないくらい、お手軽に開発できてしまいましたが、
この短時間で得られ難い達成感を感じることができました！

特にVercelがそうですが、自分の引き出しにないものをAIが提案してくれるのは、本当に助かりますし、学びになります。

また何か作りたくなったらVibe Codingしてみたいと思います！

参考記事