youtube版(スライド付き) 関連リンク Claude Code × Claude Design で趣味のアプリを作った話 本書は、開発者の広瀬氏がAIコーディングエージェント「Claude Code」とUIモック生成ツール「Claude Design」を駆使し、個人で筋トレ記録アプリを開発した体験レポートです。新人エンジニアにとって、最新のAIアシスタントと協働する「次世代のシステム開発フロー」を学ぶ上で非常に参考になる内容となっています。 1. 開発の概要と技術構成 電波の弱いジムでも快適に動くよう「オフラインファースト」を掲げたモバイルアプリを開発。技術選定や詳細設計は、Claude Codeに相談しながら一つずつ決定されました。 フロントエンド: Expo SDK 54 (React Native), TypeScriptバックエンド: Supabase (Postgres, Auth, RLS)状態管理: TanStack Query (キャッシュを利用したオフライン対応) 2. AIと人間が協働する「開発フロー」 開発は、設計・実装を担当する「Claude Code」と、UIデザインを担当する「Claude Design」をシームレスに行き来しながら進められました。 計画・設計(Claude Code): 要件(オフライン対応、指標計算など)を伝えて、データモデルや画面構成、分割されたタスクの提案を受け、対話しながら設計を決定。プロジェクト専属「Skill」の育成: 繰り返し行う手順(型定義の再生成、UIスタイルガイドなど)をMarkdown形式の手順書(Skill)として定義。AIが自律的にこれを参照して開発を進める仕組みを構築。デザインモックの生成(Claude Design): Claude Codeに詳細なデザイン仕様を書き出してもらい、それをClaude Designに渡すことでイメージに沿ったUIモック(JSX)を生成。実装(Claude Codeへの受け渡し): モックのデザインファイルをClaude Codeに読み込ませ、React Nativeの実装コードへ自動変換。ズレの監査とテスト: 自動でモックと実装コードの差分をチェックする監査エージェントを動かしつつ、最終的には自身の目で実機確認。また、コードの崩壊を防ぐため、機能ごとにJest(ユニットテスト)やMaestro(E2Eテスト)によるテストをこまめに実行。 3. 新人エンジニアが持ち帰りたい教訓 AIに毎回同じ説明をしない: 共通の前提やルールをあらかじめドキュメント(Skill)にまとめておくことで、指示の精度が上がり、開発テンポが向上します。こまめなテストで手戻りを防ぐ: AIは高速に大量のコードを出力するため、最後にまとめて確認するとバグの特定が困難になります。テストを小刻みに挟むことが成功の秘訣です。「作る楽しさ」を主目的にする: 評価軸や技術選定をすべて自分で決められる「趣味の個人開発」は、エンジニアとしての視野を広げ、結果として業務に活きる大きな経験値となります。 最新ツールを組み合わせることで、一人でも設計・デザイン・実装・テストの全工程を高品質に回し切れる、夢のある開発手法を示した好例です。 引用元: https://blog.asial.co.jp/6808/ AIウォーターフォール開発:コンテキストゼロのAIを一人前にする仕組み 本書は、AIを活用したシステム開発において、AIが過去の設計判断やドキュメントのつながりを理解できないという課題を解決するための新しい開発手法を提案しています。 1. AI開発における課題:記憶喪失の「新人」 Claude Codeなどの高度なAIツールは非常に優秀ですが、セッションを開始するたびに記憶(コンテキスト)がリセットされてしまいます。プロジェクトの背景や過去の意思決定をその都度説明し直す必要があり、まるで「毎朝記憶を失ってやってくる新人エンジニア」に指示を出すような状態になってしまいます。ただ関連資料を渡すだけでは、仕様の矛盾や他への影響範囲にAI自身が気づくことは困難です。 2. 解決策:ドキュメントの「トレーサビリティ(追跡可能性)」 この課題を解決するため、従来のウォーターフォール開発が持つ「トレーサビリティ(設計のつながりを追いかけられる状態)」の仕組みを導入します。「どの要件が、どの仕様に紐づき、どのテストで検証されるか」というドキュメント同士の「つながり」を、AIが自分で辿れるように設計します。 具体的には、以下のレイヤーでドキュメントを体系化し、相互に関連付けます。 ADR(設計判断...
続きを読む
一部表示