【APPS JAPAN 2025 登壇資料】AIで変わるアプリケーション開発 〜Web・モバイルにおけるAIツール実践活用〜

Transcript

1. AIで変わるアプリケーション開発 〜Web・モバイルにおけるAIツール実践活用〜 エクステム株式会社　改野 由尚 Copyright 2025 Yoshihisa Kaino / XTEM Inc. All rights reserved. 1 / 24
2. 自己紹介 改野 由尚 (Yoshihisa Kaino) 2001年生まれ 23歳 N高等学校 → 慶應 SFC（AI活用におけるUI/UXの研究） → エクステム株式会社 代表取締役 AI 駆動開発の研修・導入支援 特定非営利活動法人ニュークリエイター・オルグ 理事長 子ども・先生向けのAI教育 GitHub: github.com/yosh1 Copyright 2025 Yoshihisa Kaino / XTEM Inc. All rights reserved. 2 / 24
3. アジェンダ（40 分） 1. AI 駆動開発の今 - 2025年の現実 2. なぜ今がタイミングなのか - 技術とビジネスの観点から 3. 最新ツール比較 - 実践的な使い分け 4. ライブデモ - 要件定義 → UI → API & テスト 5. プロンプト設計の極意 - 成功率を上げる3つのコツ 6. リスクとガバナンス - 避けるべき落とし穴 7. 明日から始める第一歩 - 具体的アクションプラン Copyright 2025 Yoshihisa Kaino / XTEM Inc. All rights reserved. 3 / 24
4. ご質問やご意見はこちらでリアルタイムで受け付けております！ Copyright 2025 Yoshihisa Kaino / XTEM Inc. All rights reserved. 4 / 24
5. AI 駆動開発とは？ 従来の開発 vs AI駆動開発 工程 従来 AI駆動 要件定義 人が全て考える AIが選択肢を提示、人が選択 設計 人が設計書を作成 AIが設計案を生成、人がレビュー 実装 人がコードを書く AIがコード生成、人が検証 テスト 後回しになりがち AIが先にテストを生成 AI 駆動開発 = 開発の各工程でAIと協働し、生産性を飛躍的に向上させる開発手法 " Copyright 2025 Yoshihisa Kaino / XTEM Inc. All rights reserved. 5 / 24
6. なぜ今がタイミングなのか 技術面の成熟（2025年現在） などなど ビジネス面の要望 Claude Opus 4 / GPT-o3 - マルチモーダル対応で設計図から実装へ Windsurf / Cursor - フロー状態を維持する自律型IDE v0.dev - UIモックから本番コードを30秒で生成 GitHub Copilot - コード補完・リファクタリング エンジニア採用コストが高い・定着が難しい 開発期間を短縮したい AI活用企業の生産性が上がっている Copyright 2025 Yoshihisa Kaino / XTEM Inc. All rights reserved. 6 / 24
7. いま、どんな課題を抱えていますか？ よくある開発現場の悩み 似たようなCRUDを毎日書いている テストコードを書く時間がない ドキュメントが常に古い レビューに時間がかかりすぎる 新技術のキャッチアップが追いつかない これらは全てAIが得意とする領域です " Copyright 2025 Yoshihisa Kaino / XTEM Inc. All rights reserved. 7 / 24
8. 開発プロセスはこう変わる Before / After（中規模Webサービスの新機能開発） 従来（3ヶ月） AI駆動（3週間） 要件定義・仕様書作成 2週間 AI支援で要件整理・仕様生成 3日 アーキテクチャ設計 1週間 AIとの対話で設計検証 2日 フロントエンド実装 3週間 v0.dev + Cursorで高速実装 1週間 バックエンド実装 3週間 Claude Code支援で実装 1週間 テスト・バグ修正 2週間 AI自動テスト生成・修正 3日 ドキュメント作成 1週間 AIで自動生成・更新 1日 結果：開発期間75%短縮、不具合70%減少、技術的負債の蓄積を防止 Copyright 2025 Yoshihisa Kaino / XTEM Inc. All rights reserved. 8 / 24
9. AIツールの比較 ツール 得意分野 最新アップデート 価格 Cursor IDE統合・高速補完 o1-pro/o3推論モデル対応、Composer機能 $20/月 Claude Code 長文理解・リファクタリング CLI統合、MCP対応、ultrathink機能 $20/月〜 v0.dev UI生成・プロトタイピング Figma連携、リアルタイムプレビュー 無料〜$200/月 GitHub Copilot エンタープライズ対応 Copilot Chat、セキュリティ機能強化 $10/月〜 Devin 自律エージェント Wiki生成、マルチエージェント協調 $20〜$500/月 Copyright 2025 Yoshihisa Kaino / XTEM Inc. All rights reserved. 9 / 24
10. デモ：タスク管理アプリを作る 作るもの：チームタスク管理アプリ 機能概要： 技術スタック： タスクの作成・編集・削除（CRUD） チームメンバーへのタスク割り当て 進捗ステータス管理（Todo/進行中/完了） リアルタイム更新 レスポンシブデザイン フロントエンド：Next.js 14 + TypeScript + Tailwind CSS バックエンド：Next.js API Routes データ管理：ローカルステート + localStorage（DB接続なし） Copyright 2025 Yoshihisa Kaino / XTEM Inc. All rights reserved. 10 / 24
11. Step 1: 要件定義（ChatGPT）- 3分 Copyright 2025 Yoshihisa Kaino / XTEM Inc. All rights reserved. 11 / 24
12. Step 1: 要件定義（ChatGPT）- 3分 プロンプト例 営業職のマネージャー向けの社内で利用する、PCで動作するタスク管理アプリのベータ版を作りたいです。 Next.js + TypeScript + Tailwind CSSを使用して開発します。 UIは白黒を基調とし、モダンなデザインを意識してください。 要件定義がまだ行えていないので、UI関連に絞って私にかんたんなヒアリングを行い、その内容をもとに要件定義を行ってください。 作成するコンポーネントの数はできるだけ少なくしておいてください。 要件定義が完了したら、その内容をもとにUIを生成するので、仕様書を作成してください。 ChatGPTの回答をそのまま次のステップへ Copyright 2025 Yoshihisa Kaino / XTEM Inc. All rights reserved. 12 / 24
13. Step 2: UI生成（v0.dev）- 5分 Copyright 2025 Yoshihisa Kaino / XTEM Inc. All rights reserved. 13 / 24
14. Step 2: UI生成（v0.dev）- 5分 v0.devの特徴 追加指示の例 - ダークモード対応を追加してください。 - アニメーションを滑らかにしてください。 - アクセシビリティを考慮してください。 ChatGPTの出力をそのまま貼り付け可能 短時間で動作するReactコンポーネントが生成できる Tailwind CSSやShadcn UIできれいなデザインが生成できる Copyright 2025 Yoshihisa Kaino / XTEM Inc. All rights reserved. 14 / 24
15. Step 2.5: ローカルにプロジェクトをインポート Copyright 2025 Yoshihisa Kaino / XTEM Inc. All rights reserved. 15 / 24
16. Step 3: バックエンド実装（Claude Code）- 9分 効果的な指示の出し方 # 基本的な指示パターン claude "既存のフロントエンドのコードを読み込んで、必要なAPI routeをMarkdownファイルとして保存して" claude "API RoutesでタスクのCRUD処理を実装して。データはDBを使わず、メモリ内配列で管理してください。" # 段階的な実装指示 claude "まずタスクのデータ構造を設計して" claude "次にAPI routesの基本構造を作成" claude "エラーハンドリングを追加して" # テスト生成 claude "APIのユニットテストを作成してください。外部依存なしでビジネスロジックをテストしてください。" Copyright 2025 Yoshihisa Kaino / XTEM Inc. All rights reserved. 16 / 24
17. ツール組み合わせパターン 用途別おすすめ構成 シナリオ 推奨ツール組み合わせ 理由 スタートアップMVP v0 + Cursor 高速開発とデプロイ エンタープライズ GitHub Copilot セキュリティとコンプライアンス リファクタリング Claude Code + Cursor 深いコード理解が必要 UI/UXプロトタイプ Figma MCP + v0 デザイン連携が重要 自律開発 Devin + GitHub or Claude Code 非同期での作業委譲 なぜ組み合わせが重要なのか 1. 各ツールの強みを最大化 : v0はUI、Claude Codeはロジック、Cursorは統合 2. 開発フローの継続性 : 一つのツールの出力が次のツールの入力に 3. リスク分散 : 単一ツール依存を避け、柔軟性を確保 Copyright 2025 Yoshihisa Kaino / XTEM Inc. All rights reserved. 17 / 24
18. プロンプト設計の3つの極意 1. 技術スタックを明確に ✘ 「Todoアプリを作って」 ◦ 「Next.js 14 App Router + Prisma + PostgreSQL でTodoアプリを作って」 2. 期待する出力形式を指定 ◦ 「src/components/TodoList.tsxというファイル名で、 型安全なコンポーネントを生成して」 3. 段階的な改善を前提に ◦ 「まず基本機能を実装し、その後エラーハンドリングを追加」 Copyright 2025 Yoshihisa Kaino / XTEM Inc. All rights reserved. 18 / 24
19. リスクとガバナンス - 知っておくべき落とし穴 技術的リスク ガバナンス対策 ハルシネーション 存在しないAPIを使用するケースも セキュリティ脆弱性 AIが危険なコードを生成してしまう可能性も コードレビュー必須 AI生成コードも人間がレビュー データ保護 機密情報をAIに渡さない仕組み Copyright 2025 Yoshihisa Kaino / XTEM Inc. All rights reserved. 19 / 24
20. これからのAI駆動開発（予想） 次に来る技術トレンド 1. マルチエージェント協調 Devinのような複数AI協働がスタンダードに 2. バイブコーディング2.0 音声指示だけで開発が完結 3. 自己修復システム 本番環境のバグをAIが自動修正 4. AI駆動アーキテクチャ システム設計自体をAIが最適化 Copyright 2025 Yoshihisa Kaino / XTEM Inc. All rights reserved. 20 / 24
21. まとめ 私のおすすめの最初の一歩 1. 気軽に触ってみる 2. 少しずつ実務に v0.devで遊んでみる（無料です） 既存UIの改善アイデアを聞いてみる 低リスクな部分から試す うまくいったら周りに伝える 失敗しても学びになる Copyright 2025 Yoshihisa Kaino / XTEM Inc. All rights reserved. 21 / 24
22. 質疑応答 質問・感想をお待ちしています 個別相談・お問い合わせ kaino@xtem.jp までお気軽にお問い合わせください。 X: @yoshi1125hisa にDM/メンション Copyright 2025 Yoshihisa Kaino / XTEM Inc. All rights reserved. 22 / 24
23. ご清聴ありがとうございました 私がお伝えしたいこと お問い合わせ kaino@xtem.jp までお気軽にお問い合わせください。 「AIは開発者を置き換えるのではなく、開発者を強化させる」 " Copyright 2025 Yoshihisa Kaino / XTEM Inc. All rights reserved. 23 / 24
24. エクステムのAI駆動開発研修 Copyright 2025 Yoshihisa Kaino / XTEM Inc. All rights reserved. 24 / 24