<h1 id="%E3%81%AF%E3%81%98%E3%82%81%E3%81%AB" data-line="0" class="code-line">
<a class="header-anchor-link" href="#%E3%81%AF%E3%81%98%E3%82%81%E3%81%AB" aria-hidden="true"></a> はじめに</h1>
<p data-line="1" class="code-line">実務ではモバイルのクライアントとサーバーサイドを開発しています。<br>
機能実装する際に、クライアントとサーバーをどちらも1人で実装することもよくあるため、特定の領域だけに特化したAIエージェントの使い方よりも、クライアントとサーバーサイドのどちらでも安定した出力を出すことができる方法を模索しています。</p>
<p data-line="4" class="code-line">今回は、現時点での実務で実装する際のClaudeCodeの使い方を共有します。</p>
<h1 id="cladecode%E3%82%92%E5%8B%95%E3%81%8B%E3%81%99%E3%83%87%E3%82%A3%E3%83%AC%E3%82%AF%E3%83%88%E3%83%AA%E3%81%AE%E5%85%A8%E4%BD%93%E5%83%8F" data-line="6" class="code-line">
<a class="header-anchor-link" href="#cladecode%E3%82%92%E5%8B%95%E3%81%8B%E3%81%99%E3%83%87%E3%82%A3%E3%83%AC%E3%82%AF%E3%83%88%E3%83%AA%E3%81%AE%E5%85%A8%E4%BD%93%E5%83%8F" aria-hidden="true"></a> CladeCodeを動かすディレクトリの全体像</h1>
<div class="code-block-container"><pre><code class="code-line" data-line="7">- workingDir -&gt; このディレクトリをCursorで開き、ClaudeCodeを起動
    |- backend_repo -&gt; このディレクトリをInteliJで開く
    |- ios_client_repo -&gt; このディレクトリをXcodeで開く
    |- android_client_repo -&gt; このディレクトリをAndroidStudioで開く
    |- .claude -&gt; cluade関連のファイルはここに格納
    |   |- contexts
    |   |- doc
    |   |- done
    |   |- tmp
    |   |- commands
    |- CLAUDE.md
</code></pre></div><p data-line="21" class="code-line">なぜこのような構成にしているかというと、workingDirをCursorまたはClaudeCodeで開いておくことで、クライアントとサーバーサイドを横断的に扱うことができ、サクッと何か調べたい時に、具体的に指定せずとも自律的に対応してくれるので便利だからです。</p>
<h1 id="%E9%96%8B%E7%99%BA%E3%83%95%E3%83%AD%E3%83%BC" data-line="23" class="code-line">
<a class="header-anchor-link" href="#%E9%96%8B%E7%99%BA%E3%83%95%E3%83%AD%E3%83%BC" aria-hidden="true"></a> 開発フロー</h1>
<p data-line="24" class="code-line">毎回のタスクで安定した出力を出すために、開発フローは<strong>決められたカスタムスラッシュコマンドを順番通りに実行していく</strong>だけのワークフローを採用しています。</p>
<p data-line="26" class="code-line">ワークフローの型はAnthropicが公開しているClodeCodeを使用したAIエージェントコーディングのベストプラクティスに基づいています。<br>
<code>Explore(探索) -&gt; plan(計画) -&gt; code(実装) -&gt; commit(コミット)</code><br style="display:none">
<span class="embed-block zenn-embedded zenn-embedded-card"><iframe id="zenn-embedded__c072342bb7f07" src="https://embed.zenn.studio/card#zenn-embedded__c072342bb7f07" data-content="https%3A%2F%2Fwww.anthropic.com%2Fengineering%2Fclaude-code-best-practices" frameborder="0" scrolling="no" loading="lazy"></iframe></span><a href="https://www.anthropic.com/engineering/claude-code-best-practices" style="display:none" target="_blank" rel="nofollow noopener noreferrer">https://www.anthropic.com/engineering/claude-code-best-practices</a></p>
<p data-line="30" class="code-line">特に、<code>Explore(探索) -&gt; plan(計画)</code>が重要と言っているので、<code>plan</code>の完成度を高めるために、AIに提供するコンテキストと、それによって出力される<code>plan</code>を自身でレビューしアップデートするというサイクルをループするようにしています。</p>
<p data-line="32" class="code-line">コンテキストが明確で軽量な場合は、探索はせずに、<code>/design</code>コマンドに渡します。<br>
コンテキストが不明瞭な場合や、問題が複雑な場合等は、一度<code>/analysis</code>コマンドで探索を実施し、その出力をもって、<code>/design</code>コマンドに渡します。</p>
<ul data-line="35" class="code-line">
<li data-line="35" class="code-line">Explore(探索)が
<ul data-line="36" class="code-line">
<li data-line="36" class="code-line">必要な場合
<ul data-line="37" class="code-line">
<li data-line="37" class="code-line">context -&gt; <code>/analysis</code> -&gt; <code>/design</code> -&gt; <code>/implement</code>
</li>
</ul>
</li>
<li data-line="38" class="code-line">必要でない場合
<ul data-line="39" class="code-line">
<li data-line="39" class="code-line">context -&gt; <code>/design</code> -&gt; <code>/implement</code>
</li>
</ul>
</li>
</ul>
</li>
</ul>
<h3 id="%E9%96%8B%E7%99%BA%E3%82%BF%E3%82%B9%E3%82%AF%E3%82%92%E5%AF%BE%E5%BF%9C%E3%81%99%E3%82%8B%E9%9A%9B%E3%81%AE%E4%B8%80%E9%80%A3%E3%81%AE%E6%B5%81%E3%82%8C" data-line="42" class="code-line">
<a class="header-anchor-link" href="#%E9%96%8B%E7%99%BA%E3%82%BF%E3%82%B9%E3%82%AF%E3%82%92%E5%AF%BE%E5%BF%9C%E3%81%99%E3%82%8B%E9%9A%9B%E3%81%AE%E4%B8%80%E9%80%A3%E3%81%AE%E6%B5%81%E3%82%8C" aria-hidden="true"></a> 開発タスクを対応する際の一連の流れ</h3>
<p data-line="44" class="code-line"><img src="https://storage.googleapis.com/zenn-user-upload/f8c562c2d2ff-20251012.png" class="md-img" loading="lazy"></p>
<p data-line="46" class="code-line">基本的に、AIが出力した成果物にユーザーが手を加えることはしないようにしていて、入力コンテキストである<code>requirements.md</code>のみを編集することにしています。</p>
<p data-line="48" class="code-line">各カスタムスラッシュコマンドでは、mdファイルを成果物として生成するようにしていて、<code>.claude/tmp/</code>配下に格納するようにしています。<br>
生成されたmdファイルは、後続のカスタムスラッシュコマンドの引数として入力するようにしています。</p>
<ol data-line="51" class="code-line">
<li data-line="51" class="code-line">
<code>/requirements</code>コマンドで、コンテキストを記載するためのテンプレートmdファイル<code>requirements.md</code>を生成する。</li>
<li data-line="52" class="code-line">
<code>requirements.md</code>にコンテキストを記載する。</li>
<li data-line="53" class="code-line">探索が必要であれば、<code>/analysis</code>コマンドで、ソースコードの解析を実行します。</li>
<li data-line="54" class="code-line">
<code>/design</code>コマンドで、<code>requirements.md</code>を引数として渡し、実装プランを作成します。<br>
成果物は<code>design.md</code>として出力されます。<br>
前段で<code>/analysis</code>コマンドを実行している際は、参照できるように<code>requirements.md</code>に<code>analysis.md</code>ファイルのパスを記載します。</li>
<li data-line="57" class="code-line">
<code>design.md</code>をレビューし、修正点がある場合は、<code>requirements.md</code>に加筆修正を加え、再度<code>/design</code>コマンドを実行します。</li>
<li data-line="58" class="code-line">
<code>/implements</code>コマンドで、 <code>design.md</code>を引数に渡し、実装します。</li>
<li data-line="59" class="code-line">
<code>/review</code>コマンドの引数にdiffファイルを渡し、実装した内容をレビューします。</li>
<li data-line="60" class="code-line">レビューによる修正が必要な場合は、<code>/fix-review</code>コマンドの引数に<code>review.md</code>を渡し、指摘修正を実行します。</li>
<li data-line="61" class="code-line">
<code>/done</code>コマンドで、<code>tmp</code>ディレクトリをクリーンし、<code>done</code>ディレクトリに使用したmdファイルや最終的な対応内容のサマリをmdファイルとして保存するようにしています。</li>
</ol>
<h1 id="%E3%81%BE%E3%81%A8%E3%82%81" data-line="63" class="code-line">
<a class="header-anchor-link" href="#%E3%81%BE%E3%81%A8%E3%82%81" aria-hidden="true"></a> まとめ</h1>
<p data-line="64" class="code-line">今回は実務で実際に使用しているClaudeCodeの使い方について紹介しました。</p>
<p data-line="66" class="code-line"><code>Explore(探索) -&gt; plan(計画) -&gt; code(実装) -&gt; commit(コミット)</code>をカスタムスラッシュコマンドで順番通りに実行していくことで、適当にVibe Codingする際と比べて、AIの出力が安定していると感じています。</p>
<p data-line="68" class="code-line">今後の改善点としては、カスタムスラッシュコマンドの精度向上とワークフローの効率化に注力して、日々の実務の中でアップデートしていくことが重要だと考えています。</p>
<h1 id="%E6%9C%80%E5%BE%8C%E3%81%AB" data-line="70" class="code-line">
<a class="header-anchor-link" href="#%E6%9C%80%E5%BE%8C%E3%81%AB" aria-hidden="true"></a> 最後に</h1>
<p data-line="71" class="code-line">株式会社ジャンボではエンジニアを絶賛募集中です！<br>
少しでも気になった方はぜひカジュアルにお話しましょう！<br>
Wantedly: <a href="https://www.wantedly.com/companies/company_725162" target="_blank" rel="nofollow noopener noreferrer">https://www.wantedly.com/companies/company_725162</a><br>
HP Recruit: <a href="https://jambo-inc.io/recruit/" target="_blank" rel="nofollow noopener noreferrer">https://jambo-inc.io/recruit/</a></p>


実務でのClaudeCodeの使い方

CladeCodeを動かすディレクトリの全体像

開発タスクを対応する際の一連の流れ

Discussion