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

by yuichiro_takahashi

Embed

Start on current slide

Slide 1

Slide 1 text

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

Slide 2

Slide 2 text

⾃⼰紹介 © asken Inc. 2 髙橋　佑一朗株式会社asken プロダクト開発本部 - 10年⽬の iOS アプリエンジニア - askenには去年の10⽉に⼊ったばかり - デザイナーもﾁｮｯﾄやってた - ⽢いものとゲームが好き - ⼦供と育成ゲームをやったり - 中世の騎⼠になって叫んだり

Slide 3

Slide 3 text

本⽇のアジェンダ既存仕様のキャッチアップを効率化する新しいアプローチ 1 既存コードを理解する際の課題 2 Claude Code の Skill を活⽤した解決策 3 実際に使ってみて得られた導⼊効果 © asken Inc. 1

Slide 4

Slide 4 text

00 ちょっと⾃語り © asken Inc. 3

Slide 5

Slide 5 text

ちょっと⾃語り私の今の状況 - あすけんに⼊りたての新兵 - 基本的には新規機能の開発担当 - iOSエンジニアは全体で4⼈いるが⾃分のグループには1⼈ - もちろん他のメンバーの助けも借りているが、なるべく1⼈で動けるようにしたい © asken Inc. 4

Slide 6

Slide 6 text

01 既存コード理解の課題 © asken Inc. 3

Slide 7

Slide 7 text

課題① 理解に時間がかかりすぎる初めて触る機能の把握には時間がかかる - 機能追加の前にまず既存実装の把握から始める必要がある - クラス構成、処理フロー、状態管理の調査だけで2時間くらい経過する - クラス図やシーケンス図で整理しようとするともっとかかる - コードジャンプを繰り返し、脳内でパズルを組み⽴てるような作業が発⽣ - 調査に時間がかかり、本来の実装フェーズになかなか⼊れない © asken Inc. 4

Slide 8

Slide 8 text

課題② ⾒落としによる⼿戻り不完全な理解がバグやレビューでの指摘を招く - 既存のユーティリティクラスに気づかず、⾞輪の再発明をしてしまう - デバッグメニューや開発者設定の存在を後から知るリスク - 境界条件のテストケースを⾒落とし、PRで指摘を受けてから⼿戻りが発⽣ - 仕様の暗黙知を掘り起こす作業が属⼈的になりがち © asken Inc. 5

Slide 9

Slide 9 text

02 Claude Code による解決策 © asken Inc. 6

Slide 10

Slide 10 text

解決策：Claude Code Skill Claude Code に任せよう！ - コマンド⼀つで特定機能の全体像をレポート化する仕組みを構築 - Claude Code の Skill を使い、AIに「コード探索のワークフロー」を学習させた - 開発者は機能名を指定するだけで、網羅的な情報を取得可能 - 属⼈的な調査を再現可能な⾃動化プロセスへ変換 - 100%は⽬指さない - 70%くらいをさっと理解できるを⽬指す © asken Inc. 7

Slide 11

Slide 11 text

03 実際の出⼒イメージ © asken Inc. 9

Slide 12

Slide 12 text

出⼒されるレポートの内容サンプルはこちらから © asken Inc. 8 https://github.com/yuichirokato/Feature-analysis-Sample

Slide 13

Slide 13 text

出⼒されるレポートの内容あったらいいなを詰め込みました機能概要境界条件を含む仕様の要約クラス構成クラス図で構造可視化処理フローユースケース別シーケンス図状態遷移図複雑なStateの遷移関係並⾏処理並列処理の種類タイミングの⼀覧テストケース既存テストの網羅的な⼀覧 © asken Inc. 8 画⾯遷移関連する前後の画⾯への遷移 API連携リクエストレスポンスの詳細エラー処理主要なエラー処理の⼀覧ユーティリティプロジェクト固有の便利クラス

Slide 14

Slide 14 text

Slide 15

Slide 15 text

1.クラス構成周辺機能の関連クラスが⼀⽬でわかる！ - 「関連クラスをPresentation‧Domain‧Dataのレイヤーに分類し、各クラスの責務‧依存関係の⽅向‧プロトコルの境界を整理してください。」 - Mermaid を使ったクラス図を出⼒ - 責務もまとめてくれるので似たようなクラスがあっても違いがすぐわかる - 特に⽬新しさはないが数分でサクッと出してくれるのは重宝する © asken Inc. 7

Slide 16

Slide 16 text

1.クラス構成周辺機能の関連クラスが⼀⽬でわかる！ © asken Inc. 7

Slide 17

Slide 17 text

- 「主要なユーザーシナリオを洗い出し、各ユースケースの事前条件‧事後条件と処理の流れを追跡してください」 - Mermaid を使ったシーケンス図を出⼒ - 全体をなんとなく把握したら次は実際の処理フローを追っていく - 機能が⼤きい場合シーケンス図がとんでもないことになるのでユースケースごとに分割 - 特に⽬新しさはないが数分でサクッと出してくれるのは重宝する(2回⽬) 2.処理フロー機能の動作イメージが明確に！ © asken Inc. 7

Slide 18

Slide 18 text

2.処理フロー機能の動作イメージが明確に！ © asken Inc. 7

Slide 19

Slide 19 text

- 「画⾯間の遷移トリガーと遷移先を特定し、条件分岐を含む遷移フローと Navigation/Routerの実装パターンを整理してください」 - 関連する機能と前後の画⾯を⼀覧で表⽰ - 導線の表⽰条件なども⼀緒に記載 - 着⼿時より実装した後の動作確認の時に重宝するかも 3.画⾯遷移「これどこから遷移するの？」にさよなら👋 © asken Inc. 7

Slide 20

Slide 20 text

Slide 21

Slide 21 text

- 「機能が依存する共通コンポーネント‧ユーティリティクラスを特定し、各々の役割‧利⽤箇所‧他機能との共有度合いを整理してください」 - ⼤体ありそうなものはわかるが置き場所や命名はまちまち - ex) Date の extension に⽣えている or DateCalculator のようなクラスがいる - 実装をAIに任せることも増えてきたがAIくんも意外と⾒落としがち - デバッグメニューも項⽬の有無を探すのは結構⼤変 4.ユーティリティ/デバッグメニューいや、もうあったんかーい！ © asken Inc. 7

Slide 22

Slide 22 text

Slide 23

Slide 23 text

Slide 24

Slide 24 text

- ⾃分とチームメンバーの時間を削減できる - ⾃分ではここまでやるのに2-3時間ほどかかるが Claude なら10分 - 他のメンバーに対⾯で説明してもらったり、調べてもらうコストもかからない - Skill にすることで知⾒をメンバーに共有し、そのまま使える - レビュー時の指摘や⼿戻りも、少なく済む導⼊のメリット Claude にやってもらって助かっていること © asken Inc. 7

Slide 25

Slide 25 text

- 今は⾃分が使いやすいと思ったオレオレフォーマット - 現在 iOS チームでは AI-DLC というフローを採⽤して設計を⾏っている - 基本的に仕様 -> 設計という流れだがコードから必要なファイルを出してみるのも有⽤そう今後の改善チームで利⽤しやすい形に寄せる © asken Inc. 7 出展: https://aws.amazon.com/jp/blogs/news/ai-driven-development-life-cycle/

Slide 26

Slide 26 text

採⽤告知 asken ではエンジニアを募集しています！ - 「あすけん」の開発を通じて、⼈々の健康を⽀えるエンジニアを募集中 - iOS / Android / バックエンドなど幅広いポジションがあります - AI活⽤などの新しい技術への挑戦を歓迎する⽂化です - 少しでも興味があれば、まずはカジュアル⾯談でお話ししましょう - https://hrmos.co/pages/asken/jobs © asken Inc. 14