概要
https://zenn.dev/chiilog/articles/17cb9efc840d3c
詳細内容
## AIコーディングで「保活手帳」というアプリをリリースした
https://zenn.dev/chiilog/articles/17cb9efc840d3c
Claude Codeを駆使して「保活手帳」アプリを開発・リリースした筆者が、AIコーディングの実践を通じて得られた具体的な課題と独自の解決策、そして開発者の成長視点での知見を共有します。
**Content Type**: ⚙️ Tools
**Scores**: Signal:5/5 | Depth:4/5 | Unique:4/5 | Practical:5/5 | Anti-Hype:5/5
**Main Journal**: 91/100 | **Annex Potential**: 90/100 | **Overall**: 92/100
**Topics**: [[Claude Code, AIコーディングワークフロー, プロンプトエンジニアリング, サブエージェント, Webアプリケーション開発]]
この記事は、筆者が「保活手帳」というReact/TypeScript製Webアプリを、AIコーディングツール「Claude Code」と要件定義ツール「Kiroidea」を使い約1.5ヶ月で開発した実体験を共有しています。AIコーディングは開発速度を大幅に向上させる一方で、「CLAUDE.md」の無視、関数・クラスコンポーネントの混在、重複ファイルの生成といったClaude Code特有の課題に直面したと述べられています。
Webアプリケーションエンジニアにとって重要なのは、これらの課題に対し筆者が考案した実践的な解決策です。具体的には、LintやTypeScriptチェック、JSDoc整備を行う`/check`、Conventional Commitsに従ったコミットを促す`/pr-create`、TDDでのファイル作成を支援する`/tdd`といった「カスタムスラッシュコマンド」を導入。これにより、AIによるコード生成プロセスに開発者の意図や規律を強制的に組み込むことができます。さらに、DRY/KISS、SOLID、React/TypeScript公式ドキュメント準拠、QA視点など、多様な観点からコードレビューを行う「サブエージェント」を活用し、コード品質の自動的な向上を図っています。
また、セキュリティと事故防止のために、`git push`や`rm -rf`、`sed`といった危険なコマンドや`.env`、秘密鍵などの読み込みを禁止する詳細な「denyリスト」を設定している点は、AIを開発ワークフローに組み込む上でのリスク管理の重要性を示唆しています。
AIコーディングの利便性を享受しつつも、筆者は「テスト知識の不足」や「具体的な修正指示を出す能力の欠如」といった、AIの出力コードを評価・改善するための自身の基礎知識の重要性を痛感しています。これは、AIがコードを生成する時代においても、エンジニアが設計原則、テスト戦略、コード品質基準といった根本的なスキルを磨き続ける必要性を明確に提示しており、今後のキャリア形成における指針となります。AIを単なるツールとして使うだけでなく、自身の成長を促すパートナーとして捉え、積極的にフィードバックループを回していくアプローチは、すべてのWebエンジニアが学ぶべき教訓です。