モバイルアプリからWebへの横展開を加速した話_Claude_Code_実践術.pdf

Transcript

1. モバイルアプリから Webへの横展開を加速した話 Claude Code 実践術 2025/08/26
2. 自己紹介 Software Engineer @Ubie, Inc. Kazuya Sakamoto X: @sakamotokazuyat GitHub: @kazuya-sakamoto AIパートナーユビー の開発 最近は App → Web への展開の開発のリード
3. 3 Confidential 目次 1. 開発の背景 2. Claude Code 実践術 3. Claude Codeで見えてきた課題 4. まとめ
4. どんな開発だったのか 既存のアプリに存在する 「AIパートナーユビー」 を Webにも展開する。 アプリではユーザーの情報を蓄積し、長期的に寄り添うパートナーとして展開している が、Webで簡単にAIパートナーユビーと会話の体験ができるようにする。
5. Claude Code を使用して、 1週間程で Web の MVPサービスをリリース デザイン UIロジック その他 ナレッジ BackEnd API MVPリリース ・React Nativeで実装されているものを Next.js用 に転換 ・ログの実装パターン ・LangGraph Agent による状態管理を共通基盤とし て使用 ・Nodeの分離による依存関係の明確化 ・Design Docs など仕様ドキュメント ・Figmaなどのデザインファイル 新規で開発する部分
6. 6 Confidential 目次 1. 開発の背景 2. Claude Code 実践術 3. Claude Codeで見えてきた課題 4. まとめ
7. Hooks - 作業の完了を知らせる通知
8. Hooks とは？ Claude Code が特定のイベントの発生時に自動的にコマンドを実行する仕組み • Stop ◦ 応答が完了する直前に実行 • PreToolUse / PostToolUse ◦ ツールを実行する前後 • SessionStart ◦ 新規/セッション開始 /再開時 イベント（例） 使用するポイント 💡 • コード変更時の自動整形 • 作業タスク完了通知 • 作業ログの記録 • 追加コンテキストの注入
9. 作業完了時に通知音を鳴らす 🐽
10. Context - 実装に必要な情報をうまく伝えるために
11. • UIの実装 ◦ Ubie UI MCP / Figma MCP ▪ デザインシステムとデザインファイルを参照して UI実装を楽にする ▪ 社内デザインシステムを MCPサーバー化したら UI実装が爆速になった • GitHub MCP ◦ PRのURLから変更点や背景を簡単に理解させたり、レビューをさせたりが可能 MCPを利用してナレッジを最大活用する 外部システムと連携をすることで、 Claude Code で複数のコンテキストを効率的に利用 することができる
12. Plan Mode × UltraThink で設計重視の開発 実装を開始する前に、全体像・段取り ・リスクを計画として提示させるモード Plan Mode UltraThink 思考予算（内部の推論 /計画ステッ プ）を増やし、論点の洗い出しと整合 性を高める 複雑な実装でも、設計ブレ / 漏れを最小化できる 認知負荷を抑えたまま、並列に設計を進められる • タスクは独立コンテキスト（別タブ）に分離し、個別に設計を進める • 方針が固まったものから実装に着手し、スループットを最大化させる
13. 全てのプロジェクトからコンテキストを理解させやすい構造 アプリから Webで展開するために、既存のサービスの横断的なコンテキストの理解のた めに構造に変更し参照しやすくする • 一時的 /add-dir • 永続的 settings.json.permissions.ad ditionalDirectories
14. カスタムスラッシュコマンドでコンテキストを素早く理解 commands/xxx.md の形式で、頻繁に使用するプロンプトを Markdownファイルとし て定義することで、 Claude Codeで実行が可能 • コードレビュー • フォーマット • PRの作成など Git操作など • 移行が必要なコンテキストを素早く理 解させる 使用するポイント 💡
15. ▪消去対象 • 過去の会話履歴 • ファイルの参照記録 • 学習済みのコンテキスト • 一時的な設定 蓄積されたコンテキストを解放する ▪保持対象 • プロジェクトの概要 • 重要な設計決定 • 完成済みの要約 • 設定・制約事項 ▪消去対象 • 詳細に実装議論 • 試行錯誤の過程 セッションの履歴を完全にリセット 重要な情報を要約して保持する
16. 16 Confidential 目次 1. 開発の背景 2. Claude Code 実践術 3. Claude Codeで見えてきた課題 4. まとめ
17. Claude Code で見えてきた課題感 • 開発者同士での活用レベルの差が出てしまう • 並列実行ではコンテキストに限りがある • レビューや受け入れのためのテストに時間がかかる • 開発者に偏りが発生してしまう Claude Code は 従来のn倍開発速度もあがり、プロダクト開発全体の出力は上がる が、以下のような課題が存在する
18. シン・開発プロセスを支える自社エージェント Uvin による実装 Slack から リファイン させて実装まで指示をし、 PRを作成してもらう
19. 自社Agentを利用するメリット Scale out your Claude Code ~自社専用Agentで10xする開発プロセス ~ 詳しく気になる方は 👇 • クラウドで動いてくれるので認知負荷が少なく並列で開発しやすい ◦ 手元で複数のタブで実行していくには認知負荷が激しい • 開発の各フェーズに自然に介入して自立して動いてくれる ◦ リファイン , PBI化, 実装 など、どのフェーズからでも実行可能 • 特定の開発者に依存せず民主化される（デザイナーや POでも実装が可能）
20. 20 Confidential 目次 1. 開発の背景 2. Claude Code 実践術 3. Claude Codeで見えてきた課題 4. まとめ
21. まとめ • Claude Codeによりシンプルに開発のスピードは上がった • プロンプトエンジニアリングが求められるようになった • コンテキストを資産として残していく重要性が高まった
22. ご清聴ありがとうございました