AI時代のフロントエンド開発手法FE-SDD について 〜カギは実装分割にあり〜

Transcript

1. AIネイティブなフロントエンド開発手法 FE-SDD のススメ Speaker: スナガク 〜秘訣はロジックとUIの分割にあり〜 (Dec. 11, 2025) AI 駆動開発勉強会 フロントエンド支部 #1 w/あずもば
2. 自己紹介 スナガク • ソフトウェアエンジニア • 趣味: 個人開発 サウナ • 最近は Claude Code と Devinにハマり中 個人開発 https://lovady.app/ • AIに気軽に恋愛相談できるアプリ Lovady • 現在 やりたいこと管理アプリを開発中 2/20
3. 今日、話すこと 1. AI を用いたフロントエンド開発での課題 2. FE-SDD を使った開発効率化について 3. AI でフロントエンドを実装する時に気をつけること 3/20
4. 今日、話すこと 1. AI を用いたフロントエンド開発での課題 2. FE-SDD を使った開発効率化について 3. AI でフロントエンドを実装する時に気をつけること 4/20
5. AI を用いたフロントエンド開発での課題 • ざっくり指示だと AI に任せても上手くいかない ◦ 1番自立性が高い（？）Devin ですら上手くいかない ◦ デザインの実装漏れが起こる • コード生成量がかなり多く、レビュー負荷が高い ◦ バックエンドよりもコード量は多くなりがち ◦ コンポーネントなどの数も多く、ファイル数も増える • 重複コードが大量発生する ◦ Figma を渡せば、同じ見た目のコンポーネントは作れる ◦ 新規作成が多く、既存コンポーネントは使いまわせない 5/20
6. フロントエンド開発は、まだAI任せにできない • UI のバグは、人が介入する必要がある ◦ コード上は問題なくても、挙動がバグってる場合が多々ある... ◦ AI がうまく修正できない場面も多い... ◦ 適宜、人が確認や修正する必要がある • 共通コンポーネントの再利用は、死活問題 ◦ ここを放置すると、メンテコストがかなり大きくなる • フロントエンド開発は、まだ人がレビューする必要がある ◦ であれば、人がレビューしやすい実装をさせる 6/20
7. AIにどう任せればレビューが楽になる？ • デザインの実装漏れがある ◦ 各コンポーネントにFigmaリンクを紐付けて、かつ AI に参照させる • コード重複が起こる ◦ 仕様駆動開発で回避可能では？ ◦ 共通コンポーネントの利用を計画書に明記すればいい • レビューしにくい ◦ シンプルにコードの変更量を減らせばいい ◦ UI とロジックが混在してる ▪ コード変更量が増加 ▪ ロジック修正でUIデグレを気にするのが辛い ▪ UIとロジックを分離すれば、レビュー軽減できそう 7/20
8. SDDを工夫して行えば、解決できるのでは？ 8/20
9. 今日、話すこと 1. AI を用いたフロントエンド開発での課題 2. FE-SDD を使った開発効率化について 3. AI でフロントエンドを実装する時に気をつけること 9/20
10. SDD(仕様駆動開発) について • Spec-Driven Development の 略 • 仕様ドキュメントを先に定義し、それに従ってコーディングを進める手法 • バイブコーディング時の課題を解決できる ◦ 事前に設計書を作ることで、構造化されたコードを生成 ◦ 仕様のブレや実装漏れを回避しやすい • いくつか SDD を実装するためのフレームワークが存在 ◦ 今回は、@gota_bara さんが作成された「cc-sdd」を利用 10/20
11. cc-sdd とは？ • @gota_bara さんが作っているツール ◦ SDD で実装するためのフレームワーク ◦ OSS で導入も簡単（npx cc-sdd@latest） • 各種AI エージェントツールで利用可能 ◦ Claude Code, Cursor, Codex CLI 等で利用できる • コマンド入力だけで仕様作成から実装まで進められる ◦ /kiro:spec-init <機能名> で要件定義書の土台作成 ◦ /kiro:spec-design <spec名> で要件定義書の作成 @gota_bara 11/20
12. FE-SDD について • SDD を フロントエンド (FE) の実装に特化させたもの • スナガクの造語 ◦ もし以前に言ってる人がいたらごめんなさい... • 主な特徴 2選 ◦ 仕様ドキュメント作成時に、実装予定のUI イメージ図を作成させる ▪ AI との認識のずれを可視化して、実装漏れに気づく ▪ 仕様ドキュメントの作成時点で指摘できる ◦ UI 実装 と ロジック実装を分ける ▪ 別々にレビューができるので、一度に見るコード量が減る ▪ 関心事が分離されているので、レビュー時の認知負荷が下がる ▪ UI を維持したまま、ロジック だけ AI に書き直させられる 12/20
13. FE-SDD 開発フロー 1. UI を SDD を利用して実装する 2. ロジックを SDD を利用して実装する 13/20
14. FE-SDD UI実装パート • cc-sddを用いて、UI 部分を実装する • ロジックは書かず、モックデータで表示部分だけ作る • この段階で見た目を完成させておく • コンポーネント分割の単位を指定する ◦ ロジック実装フェーズでコンポーネント構成をいじらなくて済む ◦ それにより、ロジック修正時の原因切り分けが行いやすくなる • Figma URL も仕様書に含める ◦ コンポーネントごとにFigma URLを紐づけると精度が上がる • 仕様書にUIのイメージ図を含める ◦ 正しく Figma URL を読み込めているか？の判断も可能に • 実装依頼時、右側のプロンプトを後ろに添付するのをオススメ！ https://zenn.dev/link/comments/d25550bc0a5c54 14/20
15. UI 実装結果 • 見た目は、ほぼ完璧な実装を再現できた • 今回はトップページのみではあるが、精度は高かった。 • 事前にコンポーネント構成を指定してる ◦ 構造的な手戻りが発生しない ◦ 修正はスタイルだけなので、サクッと行える 15/20
16. • cc-sddを用いて、ロジック部分を実装する • 基本的に ロジック実装部分の差分しか出ない ◦ 差分が少ないので、レビューもすぐ終わる ◦ 本当に見るべきロジック部分に注力できる • 動かなければ、もう一回生成させることもできる ◦ UI 部分は実装できているので、手戻りが少ない ◦ Token 消費量も抑えられる FE-SDD ロジック実装パート https://zenn.dev/link/comments/37ca032cffa89e 16/20
17. 今日、話すこと 1. AI を用いたフロントエンド開発での課題 2. FE-SDD を使った開発効率化について 3. AI でフロントエンドを実装する時に気をつけること 17/20
18. フロントエンド 実装時に気をつけること • 再利用可能なコンポーネントがないか確認する工程を入れる ◦ 明示的に仕様書に組み込むと、再利用してくれる • UI と ロジックを分けて開発する ◦ レビュー負荷やデグレリスクを下げられる ◦ ロジックだけ再生成できるので、複数パターン比較も行いやすい • 必要に応じて、Plan モードを使い分ける ◦ 簡単なロジックなら SDD 使わない方が速い ◦ UI は完成済みなので、実装のボリュームは小さめになる • 画面に複数ロジックがある場合は、分けて実装する ◦ 例） データ取得 と Drag & Drop は、別々に実装する ◦ 単機能ずつ実装するなら、精度高く実装してくれる ◦ 複数を同時実装すると、AI でも修正しにくくなり、デバッグも困難に 18/20
19. まとめ • レビューがいるなら、レビューしやすい実装をさせる • UI とロジックを分けて開発する • 仕様書作成時に 既存コンポーネントの再利用を検討する • 実装前にイメージ図を作成、認識ズレの有無を確認する • 画面に複数ロジックがある場合は、分けて実装する 19/20
20. ご清聴ありがとうございました！ よかったら X フォローしてください！ @suna_gaku 20/20