クラスメソッドのReact事情大公開スペシャル #7 フロントエンドを書けない私が Vercel v0とvibecodingでなんとかやり切った話

フロントエンド開発経験がほぼゼロのエンジニアが、Vercel v0と生成AI（vibecoding）を駆使して、フルスタック案件を完遂した奮闘記です。 「生成されたコードをmockとして扱い、実装コードに落とし込む具体的なワークフロー」まで、AIを活用して技術的なギャップを埋めるための実践的なノウハウを公開しています。フロントエンドに苦手意識がある方や、生成AIを実開発に組み込みたい方におすすめの事例です。

Transcript

1. 2025/12/22 製造ビジネステクノロジー部 ⽥中聖也 クラスメソッドのReact事情⼤公開スペシャル #7 フロントエンドを書けない私が Vercel v0とvibecodingでなんとかやり切った話
2. はじめに
3. はじめに 3 私はフロントエンドの開発経験が0に近いです。 フロントエンドの考え⽅、Reactの最新技術等には⼀切触れません。 ずーっと、フロントエンド開発を あたふた しながら実施した話をします。 ポテチとジュースを飲みながら楽な気持ちで & 貴族のような寛⼤な気持ちで発表を⾒守って頂け ると幸いです。
4. ⽬次 4 • ⾃⼰紹介 • 話の全体像 • Vercel v0について • なんとかやり切った話 • うまくできなかった部分 • まとめ
5. ⾃⼰紹介
6. ⾃⼰紹介 6 • 2017.04~2021.07 製造業の⽣産技術部 ◦ 設備の保全全般(事後,予防,予知) ◦ IATF16949取得に向けた取り組み • 2021.08~2025.01 SES ◦ AI, OCRを活⽤した製造業向けの業務アプリ ◦ AWSを活⽤したWebシステム • 2025.02~ クラスメソッド⼊社  ◦ メーカー様 担当 ▪ 製品の需要予測PoC ▪ 原材料管理 業務改善 • 部署 ◦ 製造ビジネステクノロジー部 • 名前（ニックネーム） ◦ ⽥中聖也(うどん) • 好きな⾔葉 ◦ 現場‧現物‧現実 • マインド ◦ とりあえず、やってみる
7. 話の全体像
8. 話の全体像 8 あるプロジェクトでバックエンド、フロントエンド、インフラを全て担当することになりました。 バックエンドとインフラの経験はありますが、フロントエンドの経験は0に近いです。 (APIとの繋ぎこみ、画⾯のバグ対応 ぐらいはしたことありますが、画⾯を0から構築したことはあ りません) しかも、以前の経験からフロントエンドにすごい苦⼿意識がありました。 そんな私がVercel v0とvibecodingを駆使して、どうやってフロントエンド開発を実施したのかとい う話なります。 根本的な部分を0から設計、実装したわけでは なく、部署内のフロントエンド有識者に基礎 となる部分(フォルダ構成、ルーティング、 API呼び出し、エラーハンドリング)はサンプ ルとして作ってもらっています。
9. Vercel v0について
10. Vercel v0について 10 • ⼿書きのワイヤーフレーム等の画像をアップロード するだけでスタイルを分析して、希望に近いデザイ ンを⽣成可能 ◦ Figmaとの連携も可能 • ⽣成された画⾯は、テキスト指⽰ or ソースコードか ら修正可能 • クレジットを消費することでAIに指⽰ができる ※以降、Vercel v0はv0と記載
11. Vercel v0について 11
12. なんとかやり切った話(本題)
13. なんとかやり切った話 13 v0でレイアウトや遷移は決まっていた • ⼯場の作業者が使⽤するアプリなので要件定義段階からユー ザーを含めて、必要な機能やレイアウト、画⾯遷移を⼀緒に決 めていた • v0でデモアプリを開きながら、ユーザーの意⾒をその場で画⾯ に反映させていた ◦ これが、v0のいいところ • ただ、当時はv0が⽣成するコードの品質が良くないことを私で も判断できるようなレベルでした フロントエンドのことは分らんが、⾃分でメンテナンスできるレベルの品質は必要 さぁ、どうしよか！！
14. なんとかやり切った話 14 v0のソースコードをmockとして参照する • レイアウトや画⾯遷移は、そのまま流⽤できる ◦ そもそも、どうやって画⾯遷移させるかも当時は知らな かった • ⽣成AIにfrontend-mockの内容を参照させればなんとかなるか も？ • フォルダ構成やAPI呼び出し部分はサンプルがあるので、それを 参照させればなんとかなるかも？ • ⾃分である程度、理解できる粒度でissueを分割すれば、「後で 何にも分らん」的なことにはならないはず‧‧‧ src frontend frontend-mock やってみよ！！
15. なんとかやり切った話 15 v0とvibecodingを駆使するぞ 参照 成果物 指⽰&フィードバック 仕様変更があれば修正 プロンプト例 • issue XXXの内容を読み込んで実装計画を⽴てろ。レイアウトや画⾯遷移はfrontend-mockディレ クトリを参照しなさい。API呼び出し、エラーハンドリングは既存の実装内容を参考にしなさい。 ◦ 想定外の実装計画があればフィードバックする • 〇〇画⾯のレイアウトが変更しました。frontend-mockを参照してレイアウト変更しなさい。 無事にやりきった！！！
16. うまくできなかった部分
17. うまくできなかった部分 17 • v0のルーティングpathを参照して異なるpathになっている ◦ v0では/home/product ▪ 要件定義段階では「商品」の表記をどうするか決まっていなかった ◦ 本当は/home/merchandiseにしたい ◦ v0の⽅を/home/merchandiseに変更しようとすると、修正がうまくいかず ▪ ルーティングpathが完璧に修正できていない or ルーティングpathを追加してしまう • 仕様変更でv0に修正した後の作業が⾯倒 ◦ 修正後のv0ソースコードをlocalにダウンロードする → frontend-mockに反映する ▪ 今はGithubと連携できるので楽になっているはず • 他にも細かい所があったが忘れてしまいました。。。 ◦ 次回からはメモとります
18. まとめ
19. まとめ 19 • frontendの開発経験が少なくても、⽣成AIを駆使すれば「動くもの」は作成できる ◦ ただ、frontendの有識者に初期段階ぐらいはレビューする機会が必要だなと感じた • すでに決定されたレイアウトや画⾯遷移があるので、「できている」‧「できていない」 の判断がつきやすい • 個⼈的に好ましい開発経験ではあったので、ブラッシュアップしていきたい ◦ ただ、frontendの勉強は必要 過去の登壇で似たような話をしているので、興味があれば是⾮!! • 第6回 クラメソおおさか IT 勉強会「Midosuji Tech」にて「Vercel v0で爆速デモアプリ作成 」という題名で登壇しました • 「⽣成AIを上流⼯程で使い倒す」というタイトルでDevelopersIO 2025 Osakaに登壇しまし た