🔰

新卒エンジニアが実践で学ぶ「Claude Code」活用術 - 広告管理システム開発で掴んだAIペアプロの知見

に公開

はじめに:散らばった広告管理を統合したい

社内のメディアチームが各メディアサイトでWordPressを使って広告を管理していましたが、広告コンテンツが各メディアサイトに分散しており、統一的な効果測定ができない状況でした。また、既存のWordPressプラグインでは新しい広告の作成や配布に時間がかかるという課題もありました。

この問題を解決するために、チーム開発の前に個人でClaude Codeを使って新しい広告管理システムのMVP機能を作ってみることにしました。

なぜClaude Codeを選んだか

Claude Codeはファイル構造やコードベース全体を把握してくれますし、ターミナルとも統合されているので、コマンド実行からデバッグまで一貫してサポートしてくれます。何より、長時間作業しても会話の継続性が保たれて、履歴もローカルに残るのが便利でした。

Claude Codeを活用した開発ワークフロー

カスタムコマンドによる定型作業の自動化

.claude/commands/ディレクトリにカスタムコマンドを配置することで、頻繁に使う操作を自動化できました。これが本当に便利で、開発効率が大幅に向上しました。

実際に業務で作成したカスタムコマンドを一部紹介します。

コマンド 機能 具体的な動作
/create-issue GitHub issue作成とブランチ作成 ・会話コンテキストから要件を抽出し、適切なissueを生成
・事前に用意したissueテンプレート(bug.md / task.md)から自動選択
・既存ラベルから適切な選択
・ブランチ名の自動生成(feature/[issue番号]_[機能名]
/create-pr コミット分割とPR作成 ・変更内容を論理的な単位で分割してコミット
・コードベースの概要を表すREADME.mdの自動更新
・PRテンプレート適用
・関連issue自動リンク
/update-pr 既存PR内容更新 ・リモートの最新コミットを分析してPR説明を更新
・コミット内容の自動分析
・影響範囲の特定
/read-issue issue分析とソリューション提案 ・既存のissue内容を分析し、実装難易度別の複数案を提示
・Bug/Task自動分類
・関連コード特定
・MVP最小限の実装、拡張性の高い実装、完全実装の3案を提示
/tidy コードベース整理 ・不要なコードや冗長な部分の自動検出と整理
実装例:/create-issue
# GitHub Issue作成とブランチ作成の手順

## 前提条件

- リポジトリ:<your-repo-name>
- 参考にする内容:Claude Codeとの会話コンテキスト(これまでのやり取りの内容)

## 実行手順

1. **Issueテンプレート選択**
    - リポジトリ内の @.github/ISSUE_TEMPLATE? から適切なテンプレートを選択
    - 利用可能なテンプレート:bug.md / task.md など
    - テンプレートが見つからない場合は適切な形式で作成

2. **Issue作成**
    - タイトル:Claude Codeとの対話で特定された課題や機能を簡潔に表現
    - 内容:これまでのClaude Codeとの会話内容に基づいて以下を記載
        - 発見された問題の詳細または実装すべき機能要件
        - Claude Codeが提案した解決策や実装方法
        - 期待する結果・完了条件
        - 関連するファイルパスやコードスニペット(あれば)
    - ラベル:**既存のラベルのみ使用**すること(存在しないラベルは付与しない)

3. **ブランチ作成とIssue紐付け**
    - ブランチ名形式:
        - 機能追加、タスク:`feature/[issue番号]_[機能名]`
        - バグ修正:`bugfix/[issue番号]_[修正内容]`
    - mainブランチから新しいブランチを作成
    - Issue番号をブランチ名に含めることでGitHubが自動的に紐付け

## 確認事項

- Issue作成後、Issue番号(#xxx)とURLを記録
- ブランチが正常に作成され、リポジトリに存在することを確認
- IssueとブランチがGitHub上で関連付けられていることを確認
- Claude Codeとの対話内容が適切にIssue内に反映されていることを確認

プロジェクトメモリ(CLAUDE.md)

新しいプロジェクトを始める際に/initを実行してプロジェクトメモリを作成し、その後PRごとに更新する習慣をつけることで、開発がすごくスムーズになりました。

/initコマンドとは?
プロジェクトを初期化し、CLAUDE.mdガイドを作成するコマンドです。新しいプロジェクトを始める際や、大きな変更を加えた後に実行することで、プロジェクトの最新状態がCLAUDE.mdに反映されます。

CLAUDE.mdにはプロジェクトの概要や目的、APIエンドポイントの命名規則、エラーハンドリングのパターン、チーム固有のコーディング規約、頻出エラーと解決策、環境変数の説明などを記載しています。これで、Claude Codeが常に最新のプロジェクト情報を把握できるようになります。

プランモードによる手戻り削減

複雑な機能を実装する前に、プランモード(Shift+Tab 2回押し)で全体設計を行うようにしたところ、早期段階で認識齟齬を防げるため、手戻りがぐっと減りました。

直面した問題

Calude Codeにより、開発がより効率的に進んだ一方、いくつかの問題にも直面しました。

問題1:複数リポジトリ間の連携

実装時に、広告管理システムのAPIを修正するたびにWordPress側のプラグインも修正が必要となり、2つのClaude Codeセッション間でコンテキストをコピペするのが本当に面倒でした。また、実装方法のずれやAPI仕様の不整合なども発生しやすい状況でした。

解決策
/add-dirでWordPressリポジトリを同一セッションに統合することで、この問題を解決できました。

/add-dirコマンドとは?
Claude Codeが追加の作業ディレクトリにアクセスできるようにするコマンドです。複数のプロジェクトやリポジトリを同じコンテキストで扱えるようになり、プロジェクト間の連携や依存関係を考慮した開発が可能になります。

# 使用例:WordPressプラグインのリポジトリを追加
/add-dir ../wordpress-ad-plugin

API設計の統一も可能になり、JSONデータ構造も一貫管理できます。デバッグも両方のコードを参照しながら解決できるようになって、作業効率が格段に向上しました。

問題2:長時間作業によるコンテキストの肥大化

夢中になって作業していると、いつの間にかコンテキストに無関係な情報が混在し、セッションが重くなる問題が発生しました。作業履歴が膨大になって本来の目的を見失ったりします。

解決策
Claude Codeの機能を活用することで解決できました。定期的に/clearでコンテキストをクリアしたり、重要ではない前提内容は/compactでまとめたりします。/agentsを使って専門タスクごとにエージェントを分離するのも効果的でした。

今後試したい機能

Git worktreeでの並列開発を試してみたいです。機能Aと機能Bを並列で開発できれば、さらに効率的になる可能性があります。

# 機能Aと機能Bを並列で開発
git worktree add ../project-feature-a feature-a
git worktree add ../project-feature-b feature-b

画像参照も活用できそうで、デザインカンプを直接読み込んでUI実装したり、スクショからバグ修正したりできたら便利ですね。

まとめ:Claude Codeは開発の相棒

開発経験の浅い私が、Claude Codeと共に広告管理システムを無事に構築できたのは、プロジェクト全体を深く理解してくれるパートナーがいたおかげです。ファイル構造や依存関係、さらにはビジネスロジックまで把握し、継続的な対話を通じて常に文脈を維持してくれました。

また、ベストプラクティスを提案してくれるだけでなく、エラーが発生した際には原因究明までサポートしてくれます。スタックトレースの解析から段階的なデバッグ手法の提案まで、その的確な支援は、まるでベテランエンジニアが隣にいてくれるような安心感がありました。

この経験から、Claude Codeは特に新人エンジニアや新しい技術に挑戦する方にとって、非常に心強い味方になると思っています。

参考リンク

ポート株式会社 エンジニアブログ

Discussion