2025/12/22 製造ビジネステクノロジー部 ⽥中聖也 クラスメソッドのReact事情⼤公開スペシャル #7 フロントエンドを書けない私が Vercel v0とvibecodingでなんとかやり切った話 

はじめに 

はじめに 3 私はフロントエンドの開発経験が0に近いです。 フロントエンドの考え⽅、Reactの最新技術等には⼀切触れません。 ずーっと、フロントエンド開発を あたふた しながら実施した話をします。 ポテチとジュースを飲みながら楽な気持ちで & 貴族のような寛⼤な気持ちで発表を⾒守って頂け ると幸いです。 

⽬次 4 ● ⾃⼰紹介 ● 話の全体像 ● Vercel v0について ● なんとかやり切った話 ● うまくできなかった部分 ● まとめ 

⾃⼰紹介 

⾃⼰紹介 6 ● 2017.04~2021.07 製造業の⽣産技術部 ○ 設備の保全全般(事後,予防,予知) ○ IATF16949取得に向けた取り組み ● 2021.08~2025.01 SES ○ AI, OCRを活⽤した製造業向けの業務アプリ ○ AWSを活⽤したWebシステム ● 2025.02~ クラスメソッド⼊社  ○ メーカー様 担当 ■ 製品の需要予測PoC ■ 原材料管理 業務改善 ● 部署 ○ 製造ビジネステクノロジー部 ● 名前（ニックネーム） ○ ⽥中聖也(うどん) ● 好きな⾔葉 ○ 現場‧現物‧現実 ● マインド ○ とりあえず、やってみる 

話の全体像 

話の全体像 8 あるプロジェクトでバックエンド、フロントエンド、インフラを全て担当することになりました。 バックエンドとインフラの経験はありますが、フロントエンドの経験は0に近いです。 (APIとの繋ぎこみ、画⾯のバグ対応 ぐらいはしたことありますが、画⾯を0から構築したことはあ りません) しかも、以前の経験からフロントエンドにすごい苦⼿意識がありました。 そんな私がVercel v0とvibecodingを駆使して、どうやってフロントエンド開発を実施したのかとい う話なります。 根本的な部分を0から設計、実装したわけでは なく、部署内のフロントエンド有識者に基礎 となる部分(フォルダ構成、ルーティング、 API呼び出し、エラーハンドリング)はサンプ ルとして作ってもらっています。 

Vercel v0について 

Vercel v0について 10 ● ⼿書きのワイヤーフレーム等の画像をアップロード するだけでスタイルを分析して、希望に近いデザイ ンを⽣成可能 ○ Figmaとの連携も可能 ● ⽣成された画⾯は、テキスト指⽰ or ソースコードか ら修正可能 ● クレジットを消費することでAIに指⽰ができる ※以降、Vercel v0はv0と記載 

Vercel v0について 11 

なんとかやり切った話(本題) 

なんとかやり切った話 13 v0でレイアウトや遷移は決まっていた ● ⼯場の作業者が使⽤するアプリなので要件定義段階からユー ザーを含めて、必要な機能やレイアウト、画⾯遷移を⼀緒に決 めていた ● v0でデモアプリを開きながら、ユーザーの意⾒をその場で画⾯ に反映させていた ○ これが、v0のいいところ ● ただ、当時はv0が⽣成するコードの品質が良くないことを私で も判断できるようなレベルでした フロントエンドのことは分らんが、⾃分でメンテナンスできるレベルの品質は必要 さぁ、どうしよか！！ 

なんとかやり切った話 14 v0のソースコードをmockとして参照する ● レイアウトや画⾯遷移は、そのまま流⽤できる ○ そもそも、どうやって画⾯遷移させるかも当時は知らな かった ● ⽣成AIにfrontend-mockの内容を参照させればなんとかなるか も？ ● フォルダ構成やAPI呼び出し部分はサンプルがあるので、それを 参照させればなんとかなるかも？ ● ⾃分である程度、理解できる粒度でissueを分割すれば、「後で 何にも分らん」的なことにはならないはず‧‧‧ src frontend frontend-mock やってみよ！！ 

なんとかやり切った話 15 v0とvibecodingを駆使するぞ 参照 成果物 指⽰&フィードバック 仕様変更があれば修正 プロンプト例 ● issue XXXの内容を読み込んで実装計画を⽴てろ。レイアウトや画⾯遷移はfrontend-mockディレ クトリを参照しなさい。API呼び出し、エラーハンドリングは既存の実装内容を参考にしなさい。 ○ 想定外の実装計画があればフィードバックする ● 〇〇画⾯のレイアウトが変更しました。frontend-mockを参照してレイアウト変更しなさい。 無事にやりきった！！！ 

うまくできなかった部分 

うまくできなかった部分 17 ● v0のルーティングpathを参照して異なるpathになっている ○ v0では/home/product ■ 要件定義段階では「商品」の表記をどうするか決まっていなかった ○ 本当は/home/merchandiseにしたい ○ v0の⽅を/home/merchandiseに変更しようとすると、修正がうまくいかず ■ ルーティングpathが完璧に修正できていない or ルーティングpathを追加してしまう ● 仕様変更でv0に修正した後の作業が⾯倒 ○ 修正後のv0ソースコードをlocalにダウンロードする → frontend-mockに反映する ■ 今はGithubと連携できるので楽になっているはず ● 他にも細かい所があったが忘れてしまいました。。。 ○ 次回からはメモとります 

まとめ 

まとめ 19 ● frontendの開発経験が少なくても、⽣成AIを駆使すれば「動くもの」は作成できる ○ ただ、frontendの有識者に初期段階ぐらいはレビューする機会が必要だなと感じた ● すでに決定されたレイアウトや画⾯遷移があるので、「できている」‧「できていない」 の判断がつきやすい ● 個⼈的に好ましい開発経験ではあったので、ブラッシュアップしていきたい ○ ただ、frontendの勉強は必要 過去の登壇で似たような話をしているので、興味があれば是⾮!! ● 第6回 クラメソおおさか IT 勉強会「Midosuji Tech」にて「Vercel v0で爆速デモアプリ作成 」という題名で登壇しました ● 「⽣成AIを上流⼯程で使い倒す」というタイトルでDevelopersIO 2025 Osakaに登壇しまし た 

No content