Almondo流！AI駆動開発 〜デザインと実装の未来/TDD開発〜

AI Agent勉強会 Vol.2での依田さん(https://x.com/libknt )の登壇資料
※本資料はgensparkによって生成されています。

▼イベントリンク
https://almondo.connpass.com/event/354364/

Transcript

1. Almondo流！AI駆動開発 〜デザインと実装の未来/TDD開発〜 0→1から運用まで見据えた、 高速・高品質なソフトウェア開発への挑戦 依田 拳太郎 (Yoda Kentaro) Almondo Inc. 20250523
2. 自己紹介 依田 拳太郎 Kentaro Yoda 株式会社 Almondo 経歴 42Tokyo Common Core 修了 医療系スタートアップ フルスタックエンジニア Next.js・PHP・AWS を活用し、フルスタックエンジニアとしてプロダクト開発に従事 株式会社 Almondo バックエンド・インフラ統括 SaaS 開発チームでバックエンドおよびインフラのリードを担当。AI サービスのバックエンド／イン フラの設計・実装・運用を統括 株式会社 Almondo AI ソリューション事業 PM／エンジニア／ソフトウェアチームマネージャー 複数案件の進行管理とエンジニア育成を担当。要件定義から実装まで幅広く携わり、開発プロセスの 標準化とマネジメントを推進
3. 概要  問い "エンジニアだけどデザインも…""個人開発で全部やるのが大変…""同じコードを何度も書く..." そんな事思ったことはありませんか? もし、AIがデザインから実装までをシームレスに繋ぎ、 高速な試行錯誤と品質維持を両立できるとしたら？  本日のアジェンダ 1. バックエンド 2. フロントエンド 3. まとめ バックエンド開発の「壁」とAIへの期待 AlmondoのAI駆動開発：基本戦略と活用の心得 Almondo流AIエージェント活用術①： AIによる「暗黙知」の形式知化 Almondo流AIエージェント活用術②： TDD × AIによる高品質・高効率な開発フロー 総括：AI駆動バックエンド開発がもたらす価値 なぜ「デザイン×AI」なのか？ 従来のAIデザインツールの課題 Almondoが目指す理想の開発体験 Almondo流！Cursor と Storybook による AI駆動開発フロー
4. バックエンド開発、こんな「壁」ありませんか？ AIでこれらの「壁」を壊し、 開発をもっとスムーズにできないか？      開発標準が バラバラ...  言語、フレームワーク、インフラ、開発フ ローの統一ができない  技術継承も困難な状況 属人化した ノウハウ  個人の経験に依存する開発プロセス  新メンバーの立ち上がりに時間がかかる 開発スピード が上がらない  手戻りや修正が多発  品質を担保するには時間が必要
5. AIを「賢い相棒」に！AlmondoのAI駆動開発  AI活用の心得 AIは万能ではない。過度な期待は禁物。「どう使うか」が重要。  Almondoの基本戦略  目指すは「AIとの協調」による開発力向上    繰り返し可能な判断はAIへ 人間は本質的な思考に集中。ルールや手順など、繰り返し可能な判断はAIに委任して効率化。  AIで一貫性を担保 開発フローや実装スタイルをAIがサポート。統一された基準でプロジェクト全体の品質を維持。  開発者はAIと対話し判断 AIを壁打ち相手に、設計やレビューにおいて、仕様の背景や目的を対話的に検討。より良い判断を導く。 
6. チームの知恵をAIで「見える化」：開発基盤の強化  狙い AIでチームの「暗黙知」を「形式知」に変え、 属人化を防ぎ、開発の標準化を促進  AIによる言語化プロセス  効果  属人化の解消 特定のメンバーに依存していた知識やノウハウを共有財 産化  ナレッジ共有の促進 チーム内の暗黙知が形式化され、全メンバーがアクセス 可能に  オンボーディング効率化 新規メンバーの立ち上がり時間を短縮し、早期の戦力化 を実現 ルールの明文化  プロジェクト固有のルール、慣習などをAIとの対話を通じて書き出し 例：命名規則、エラーハンドリング方針など 隠れた判断基準の発見  AIが既存コードからパターンを学習し、暗黙の判断基準や設計意図を顕在化  コード解析  対話的質問  パターン認識 継続的なブラッシュアップ  AIとの対話を繰り返し、言語化された内容の精度を向上させる継続的な改善  時間とともに精度が向上 → チームの知的資産に 1 2 3
7. 「TDD × AI」で安定とスピードを両立する開発フロー ? なぜAI開発にTDD（テスト駆動開発）？ AIに「良い感じに」は通用しない。AIには明確な「ゴール」と「制約」が必要。 TDDがAIの能力を最大限に引き出す道しるべとなる。  TDDがAI開発にもたらす主なメリット  明確なゴール設定 テストがAIの「目的」と「完了条件」を明確に定義  実装範囲の限定 AIがどこまで何をすべきか明確に定義できる  AIの迷走防止 実装のブレを減らし、AIが複雑な問題に深入りするのを防ぐ  生きたドキュメント テストコードがAIへの仕様伝達手段として機能  Almondo流 TDD×AIサイクル   AIによる的確なサポートで、開発の安定性と品質を向上  1. テストを書く [AI]   2. レビューする [人]   3. 実装する [AI]   4. レビューする [人]   5. リファクタリン グ [人&AI]
8.  Almondoが考える「AI駆動バックエンド開発」の提供価値  開発効率UP  定型作業の自動化  手戻りの削減  反復タスクの効率化  属人化を解消  ノウハウの共有促進  チーム全体の能力向上  新メンバーの立ち上がり短縮  品質安定＆向上  ルール遵守の自動化  TDDによる品質担保  一貫した実装スタイル  創造性の解放  単純作業からの解放  本質的な課題への集中  創造的思考の時間確保 AIとの協調が生み出す、バックエンド開発の未来  AIとのより良いパートナーシップで、 高速・高品質な開発を実現しましょう
9. はじめに：なぜ「デザイン×AI」なのか？  従来のFigma中心のデザインプロセス 課題 意図の齟齬やコミュニケーションコスト 修正・変更に手間がかかる デザインと実装の一貫性維持が難しい  AIの進化とフロントエンド開発の変化  v0.dev等AIによるUI構築ツールの登場 「コードを用いてデザインする」時代の幕開け  Almondoではデザインをどうしていたか エンジニアがFigmaでデザインまで行っていた 引き継げない 育成コストが高い  → 実際にAIのUI構築ツールを用いて エンジニアがデザインできないかと考えた  静的なデザインカンプをデザイナーが作成  エンジニアが手作業でコードに「翻訳」  デザイナー→エンジニアへの受け渡しが発生  デザインと実装の間にズレが生じる
10. 従来のAIデザインツールの課題 VS  主な課題と限界 課題 1 チャットセッションの独立性  複数画面開発時のコンテキスト維持が困難 各セッションが独立しているため、全体的な一貫性を保つのが 難しい 課題 2 生成コードの編集同期不可  v0: エディタ変更が同期されない 0→1開発には有用だが、反復的な開発プロセスには不向き 結論  中規模以上のシステム開発での 一貫したデザイン管理が困難  AI設計ツールのメリット  自然言語でUI生成 テキストプロンプトからUIデザインを自動的に 生成  高速なデザイン試行 短時間で複数のデザイン案を生成・比較可能  コード生成 デザインと同時に実装可能なコードを生成
11. 理想の開発体験  v0のような対話型UI生成体験 AIとの対話でUIデザインと実装を一気通貫  デザインの即時フィードバック  会話形式での反復的な改善  一貫したデザインルールの適用 システム全体で統一されたUI/UXの実現  コンポーネント間の統一されたスタイル  全画面での一貫したユーザー体験  Figma代替としてのデザイン運用 コードベースでのデザインの継続的なメンテナンスと俯瞰的な確認  デザインの変更履歴管理  プロジェクト全体の一覧性確保  エンジニアでもデザインできる環境 デザイナーとエンジニアの垣根を取り払う新しいワークフロー  専門知識なしでのデザイン生成  デザイン→開発のサイクル短縮 これらを実現するためのアプローチとは？  私たちが求める理想の姿
12.  高速開発  品質向上  効率的な反復 Almondo Almondo Almondo Almondo Almondo流！ 流！ 流！ 流！ 流！ 統一されたデザインとコンポーネントによる 高品質な画面を効率的に生成する +      Action 
13. Cursor と Storybook によるデザインから開発まで AI・デザイン・コンポーネントが融合する新しいワークフロー  シームレスなデザイン・開発フロー  高速開発  一貫したデザイン  チーム協業の効率化    AIエディタ Cursor 対話でUIを高速生成 AIとのチャットで自動コーディ ング アイデアを素早く形に  shadcn/ui & .cursorrules コードベースのUIコンポーネン ト群 開発ルールの定義と適用 デザインの一貫性を実現  Storybook UIコンポーネントを一覧化・可 視化 デザインの確認・テストを効率 化 Figmaのようなデザイン運用
14. 実際にstorybookをホスティング コンポーネントライブラリをブラウザですぐに確認できる環境 Almondo Component Library - Storybook Almondo UI Components Button Primary Secondary Input Field 入力してください... Card Card Title Card content goes here Badge NEW INFO SUCCESS  今すぐアクセス！ QRコードをスキャンして 実際のStorybookをご覧ください  Storybookを開く 実際に活用しているStorybookをホスティングして公開しています！  デザイン確認  コンポーネント共有  リアルタイム更新 
15. ご清聴ありがとうございました！ ご清聴ありがとうございました！  AI駆動開発のキーポイント 暗黙知の明文化 AIとの対話によるチーム内暗黙知の言語化・共有の実現 TDDの活用 テスト駆動開発によるAIの迷走防止と品質担保 デザイン×AI CursorとStorybookによる効率的なUI開発プロセス 開発効率向上 属人化の排除と高速な開発サイクルの実現 依田 拳太郎 Kentaro Yoda | Almondo Inc. 質問はXで！