Claude Code の Skill で複雑な既存仕様をすっきり整理しよう

Transcript

1. Claude Code の Skill で複雑な既 存仕様をすっきり整理しよう
2. ⾃⼰紹介 © asken Inc. 2 髙橋　佑一朗 株式会社asken プロダクト開発本部 - 10年⽬の iOS アプリエンジニア - askenには去年の10⽉に⼊ったばかり - デザイナーもﾁｮｯﾄやってた - ⽢いものとゲームが好き - ⼦供と育成ゲームをやったり - 中世の騎⼠になって叫んだり
3. 本⽇のアジェンダ 既存仕様のキャッチアップを効率化する新しいアプローチ 1 既存コードを理解する際の課題 2 Claude Code の Skill を活⽤した解決策 3 実際に使ってみて得られた導⼊効果 © asken Inc. 1
4. 00 ちょっと⾃語り © asken Inc. 3
5. ちょっと⾃語り 私の今の状況 - あすけんに⼊りたての新兵 - 基本的には新規機能の開発担当 - iOSエンジニアは全体で4⼈いるが⾃分のグループには1⼈ - もちろん他のメンバーの助けも借りているが、なるべく1⼈で動けるよう にしたい © asken Inc. 4
6. 01 既存コード理解の課題 © asken Inc. 3
7. 課題① 理解に時間がかかりすぎる 初めて触る機能の把握には時間がかかる - 機能追加の前にまず既存実装の把握から始める必要がある - クラス構成、処理フロー、状態管理の調査だけで2時間くらい経過する - クラス図やシーケンス図で整理しようとするともっとかかる - コードジャンプを繰り返し、脳内でパズルを組み⽴てるような作業が発⽣ - 調査に時間がかかり、本来の実装フェーズになかなか⼊れない © asken Inc. 4
8. 課題② ⾒落としによる⼿戻り 不完全な理解がバグやレビューでの指摘を招く - 既存のユーティリティクラスに気づかず、⾞輪の再発明をしてしまう - デバッグメニューや開発者設定の存在を後から知るリスク - 境界条件のテストケースを⾒落とし、PRで指摘を受けてから⼿戻りが発⽣ - 仕様の暗黙知を掘り起こす作業が属⼈的になりがち © asken Inc. 5
9. 02 Claude Code による解決策 © asken Inc. 6
10. 解決策：Claude Code Skill Claude Code に任せよう！ - コマンド⼀つで特定機能の全体像をレポート化する仕組みを構築 - Claude Code の Skill を使い、AIに「コード探索のワークフロー」を学習させた - 開発者は機能名を指定するだけで、網羅的な情報を取得可能 - 属⼈的な調査を再現可能な⾃動化プロセスへ変換 - 100%は⽬指さない - 70%くらいをさっと理解できるを⽬指す © asken Inc. 7
11. 03 実際の出⼒イメージ © asken Inc. 9
12. 出⼒されるレポートの内容 サンプルはこちらから © asken Inc. 8 https://github.com/yuichirokato/Feature-analysis-Sample
13. 出⼒されるレポートの内容 あったらいいなを詰め込みました 機能概要 境界条件を 含む 仕様の要約 クラス構成 クラス図で 構造可視化 処理フロー ユースケース別 シーケンス図 状態遷移図 複雑なStateの 遷移関係 並⾏処理 並列処理の種類 タイミングの ⼀覧 テストケース 既存テストの網 羅的な⼀覧 © asken Inc. 8 画⾯遷移 関連する前後の 画⾯への遷移 API連携 リクエスト レスポンス の詳細 エラー処理 主要なエラー 処理の⼀覧 ユーティリティ プロジェクト 固有の 便利クラス
14. 出⼒されるレポートの内容 あったらいいなを詰め込みました 機能概要 境界条件を 含む 仕様の要約 クラス構成 クラス図で 構造可視化 処理フロー ユースケース別 シーケンス図 状態遷移図 複雑なStateの 遷移関係 並⾏処理 並列処理の種類 タイミングの ⼀覧 テストケース 既存テストの網 羅的な⼀覧 © asken Inc. 8 画⾯遷移 関連する前後の 画⾯への遷移 API連携 リクエスト レスポンス の詳細 エラー処理 主要なエラー 処理の⼀覧 ユーティリティ プロジェクト 固有の 便利クラス
15. 1.クラス構成 周辺機能の関連クラスが⼀⽬でわかる！ - 「関連クラスをPresentation‧Domain‧Dataのレイヤーに分類し、各ク ラスの責務‧依存関係の⽅向‧プロトコルの境界を整理してください。」 - Mermaid を使ったクラス図を出⼒ - 責務もまとめてくれるので似たようなクラスがあっても違いがすぐわ かる - 特に⽬新しさはないが数分でサクッと出してくれるのは重宝する © asken Inc. 7
16. 1.クラス構成 周辺機能の関連クラスが⼀⽬でわかる！ © asken Inc. 7
17. - 「主要なユーザーシナリオを洗い出し、各ユースケースの事前条件‧事後条件と 処理の流れを追跡してください」 - Mermaid を使ったシーケンス図を出⼒ - 全体をなんとなく把握したら次は実際の処理フローを追っていく - 機能が⼤きい場合シーケンス図がとんでもないことになるのでユースケース ごとに分割 - 特に⽬新しさはないが数分でサクッと出してくれるのは重宝する(2回⽬) 2.処理フロー 機能の動作イメージが明確に！ © asken Inc. 7
18. 2.処理フロー 機能の動作イメージが明確に！ © asken Inc. 7
19. - 「画⾯間の遷移トリガーと遷移先を特定し、条件分岐を含む遷移フローと Navigation/Routerの実装パターンを整理してください」 - 関連する機能と前後の画⾯を⼀覧で表⽰ - 導線の表⽰条件なども⼀緒に記載 - 着⼿時より実装した後の動作確認の時に重宝するかも 3.画⾯遷移 「これどこから遷移するの？」にさよなら👋 © asken Inc. 7
20. 3.画⾯遷移 「これどこから遷移するの？」にさよなら👋 © asken Inc. 7
21. - 「機能が依存する共通コンポーネント‧ユーティリティクラスを特定し、各々 の役割‧利⽤箇所‧他機能との共有度合いを整理してください」 - ⼤体ありそうなものはわかるが置き場所や命名はまちまち - ex) Date の extension に⽣えている or DateCalculator のようなクラスが いる - 実装をAIに任せることも増えてきたがAIくんも意外と⾒落としがち - デバッグメニューも項⽬の有無を探すのは結構⼤変 4.ユーティリティ/デバッグメニュー いや、もうあったんかーい！ © asken Inc. 7
22. 4.ユーティリティ/デバッグメニュー いや、もうあったんかーい！ © asken Inc. 7
23. 04 導⼊のメリット © asken Inc. 9
24. - ⾃分とチームメンバーの時間を削減できる - ⾃分ではここまでやるのに2-3時間ほどかかるが Claude なら10分 - 他のメンバーに対⾯で説明してもらったり、調べてもらうコストもかから ない - Skill にすることで知⾒をメンバーに共有し、そのまま使える - レビュー時の指摘や⼿戻りも、少なく済む 導⼊のメリット Claude にやってもらって助かっていること © asken Inc. 7
25. - 今は⾃分が使いやすいと思ったオレオレフォーマット - 現在 iOS チームでは AI-DLC というフローを採⽤して設計を⾏っている - 基本的に仕様 -> 設計という流れだがコードから必要なファイルを出してみる のも有⽤そう 今後の改善 チームで利⽤しやすい形に寄せる © asken Inc. 7 出展: https://aws.amazon.com/jp/blogs/news/ai-driven-development-life-cycle/
26. 採⽤告知 asken ではエンジニアを募集しています！ - 「あすけん」の開発を通じて、⼈々の健康を⽀えるエンジニアを募集中 - iOS / Android / バックエンドなど幅広いポジションがあります - AI活⽤などの新しい技術への挑戦を歓迎する⽂化です - 少しでも興味があれば、まずはカジュアル⾯談でお話ししましょう - https://hrmos.co/pages/asken/jobs © asken Inc. 14
27. Thank you! © asken Inc. 9