<p data-line="0" class="code-line">コーディングエージェントを使うようになって、少なく見積もっても5割以上は、AIにコードを書いてもらうようになりました。自分も他の人のやり方を真似しつつという感じではありますが、まあ色んな人のやり方がネットに転がってても良いかなと思ったので、ここに記載してみます。</p>
<h2 id="%E4%BD%BF%E3%81%A3%E3%81%A6%E3%81%84%E3%82%8B%E3%83%84%E3%83%BC%E3%83%AB%E3%81%9F%E3%81%A1" data-line="2" class="code-line">
<a class="header-anchor-link" href="#%E4%BD%BF%E3%81%A3%E3%81%A6%E3%81%84%E3%82%8B%E3%83%84%E3%83%BC%E3%83%AB%E3%81%9F%E3%81%A1" aria-hidden="true"></a> 使っているツールたち</h2>
<p data-line="4" class="code-line">※一ヶ月、もしくは数週間もしたら変わってるかもですが、現時点のラインナップ。</p>
<ul data-line="6" class="code-line">
<li data-line="6" class="code-line">Claude Code: メインのコーディングエージェント。</li>
<li data-line="7" class="code-line">VS Code: エージェントが書いたコードを確認・修正する用。</li>
<li data-line="8" class="code-line">Roo Code: o3のAPIで設計相談。モードごとにモデルを切り替えられるのが便利。</li>
</ul>
<p data-line="10" class="code-line">Claude Codeの好きなところは、メモリファイル（ruleファイル）が「プロジェクト単位」「ローカル（個人ルール）単位」「ユーザー単位」と3段階で分かれてる点です。たとえば「自分だけ日本語で返してほしい」みたいな要望も、ユーザーのメモリに書いておけば他の人に影響しないので嬉しいです。</p>
<p data-line="12" class="code-line">また、Claude Codeは単純にCLIなので、ターミナルを開けば良いので個人的にウィンドウ管理やエージェント複数立ち上げが他よりもやりやすいと感じています。（※他のIDEなどでも、できることはできるので、この辺は好みの問題）</p>
<p data-line="14" class="code-line">ちなみに現時点だとWindsurfがルール指示に関して似たようなことができそう &amp; 使ってみた手触り感も良かったので、次点で気になってます。</p>
<h2 id="%E3%82%A8%E3%83%BC%E3%82%B8%E3%82%A7%E3%83%B3%E3%83%88%E6%B4%BB%E7%94%A8%E3%81%AE%E3%82%B3%E3%83%84" data-line="16" class="code-line">
<a class="header-anchor-link" href="#%E3%82%A8%E3%83%BC%E3%82%B8%E3%82%A7%E3%83%B3%E3%83%88%E6%B4%BB%E7%94%A8%E3%81%AE%E3%82%B3%E3%83%84" aria-hidden="true"></a> エージェント活用のコツ</h2>
<p data-line="18" class="code-line">基本はこちら <a href="https://www.anthropic.com/engineering/claude-code-best-practices" target="_blank" rel="nofollow noopener noreferrer">https://www.anthropic.com/engineering/claude-code-best-practices</a> に従うというだけ。</p>
<h3 id="%E3%83%AB%E3%83%BC%E3%83%AB%E8%A8%AD%E8%A8%88" data-line="20" class="code-line">
<a class="header-anchor-link" href="#%E3%83%AB%E3%83%BC%E3%83%AB%E8%A8%AD%E8%A8%88" aria-hidden="true"></a> ルール設計</h3>
<p data-line="22" class="code-line">Claude Codeだと <code>CLAUDE.md</code>、GitHub Copilotだと <code>.github/copilot-instructions.md</code> といった、カスタムの指示ファイルが大抵存在するので、それをちゃんと書きます。<br>
以下の点に気をつけます。</p>
<ul data-line="25" class="code-line">
<li data-line="25" class="code-line">指示は多すぎるとぼやけるので、一般的な名前や形式があればそれを使って短くまとめる。
<ul data-line="26" class="code-line">
<li data-line="26" class="code-line">▲: <code>関数コメントは次のように記載して。: {任意のコメント例を書く}</code>
</li>
<li data-line="27" class="code-line">⚪︎: <code>関数コメントは JSDoc 形式で記載してください</code>
</li>
</ul>
</li>
<li data-line="28" class="code-line">実装中に「これ毎回直してるな」と思ったら、その都度ルールに追加。</li>
</ul>
<p data-line="30" class="code-line">ちなみに、自分は使うツールが変わった時のために、ルールファイルはGitHubで管理してます。<br>
<a href="https://github.com/suzukenz/ai-rules" target="_blank" rel="nofollow noopener noreferrer">https://github.com/suzukenz/ai-rules</a></p>
<p data-line="33" class="code-line">以下の記事など、先人の知恵をだいぶ参考にさせてもらいました。<br style="display:none">
<span class="embed-block zenn-embedded zenn-embedded-card"><iframe id="zenn-embedded__ad0690c25f497" src="https://embed.zenn.studio/card#zenn-embedded__ad0690c25f497" data-content="https%3A%2F%2Fzenn.dev%2Ferukiti%2Farticles%2F2503-cline-express" frameborder="0" scrolling="no" loading="lazy"></iframe></span><a href="https://zenn.dev/erukiti/articles/2503-cline-express" style="display:none" target="_blank">https://zenn.dev/erukiti/articles/2503-cline-express</a></p>
<h3 id="%E3%83%97%E3%83%AD%E3%83%B3%E3%83%97%E3%83%88%E3%81%AE%E5%B7%A5%E5%A4%AB" data-line="36" class="code-line">
<a class="header-anchor-link" href="#%E3%83%97%E3%83%AD%E3%83%B3%E3%83%97%E3%83%88%E3%81%AE%E5%B7%A5%E5%A4%AB" aria-hidden="true"></a> プロンプトの工夫</h3>
<ol data-line="38" class="code-line">
<li data-line="38" class="code-line">既存の良い実装があれば、それを参考にさせる。</li>
</ol>
<p data-line="40" class="code-line">よく使うプロンプト例：</p>
<div class="code-block-container"><pre class="language-plaintext"><code class="language-plaintext code-line" data-line="42">まず、 `{ファイル名}` を見て、データ取得やコンポーネント分割のパターンを理解してください。
次に、それを参考にして、 ~~の要件に従って `{ファイル名}` を実装してください。
</code></pre></div><ol start="2" data-line="47" class="code-line">
<li data-line="47" class="code-line">
<p data-line="47" class="code-line">参考になる実装がなければ、強いモデル（例：o3 を使った RooCode Architectモード）で設計から壁打ち。</p>
</li>
<li data-line="49" class="code-line">
<p data-line="49" class="code-line">長丁場の修正や設計は、一旦markdownで方針を書き出してからAIに参照させると、自分自身も後から見返せて便利。</p>
</li>
</ol>
<h2 id="ai%E3%82%B3%E3%83%BC%E3%83%87%E3%82%A3%E3%83%B3%E3%82%B0%E3%81%AE%E8%89%AF%E3%81%84%E3%81%A8%E3%81%93%E3%82%8D" data-line="51" class="code-line">
<a class="header-anchor-link" href="#ai%E3%82%B3%E3%83%BC%E3%83%87%E3%82%A3%E3%83%B3%E3%82%B0%E3%81%AE%E8%89%AF%E3%81%84%E3%81%A8%E3%81%93%E3%82%8D" aria-hidden="true"></a> AIコーディングの良いところ</h2>
<ul data-line="53" class="code-line">
<li data-line="53" class="code-line">実装方針が決まっていれば、早く大量に実装できる
<ul data-line="54" class="code-line">
<li data-line="54" class="code-line">その「方針決め」自体もAIと一緒にやれるようになってきたのが最近のパラダイム</li>
</ul>
</li>
<li data-line="55" class="code-line">タイポや変数名ミスのようなしょぼミスが減る</li>
<li data-line="56" class="code-line">ドキュメントやテストもAIが書いてくれて億劫になりにくい</li>
</ul>
<h2 id="%E3%81%8A%E3%81%BE%E3%81%91%EF%BC%9Araycast%E3%81%AE%E6%B4%BB%E7%94%A8%E6%B3%95" data-line="58" class="code-line">
<a class="header-anchor-link" href="#%E3%81%8A%E3%81%BE%E3%81%91%EF%BC%9Araycast%E3%81%AE%E6%B4%BB%E7%94%A8%E6%B3%95" aria-hidden="true"></a> おまけ：Raycastの活用法</h2>
<p data-line="60" class="code-line"><a href="https://www.raycast.com/" target="_blank" rel="nofollow noopener noreferrer">Raycast</a>を使うと、ショートカット一発でクリップボードや選択中テキストをAIに投げられて便利なので、使っています。</p>
<p data-line="62" class="code-line">具体的には</p>
<ul data-line="64" class="code-line">
<li data-line="64" class="code-line">gitでstaging中のdiffをpbcopyして、ショートカット一発でcommit message生成
<ul data-line="65" class="code-line">
<li data-line="65" class="code-line">具体的には <code>diffs（カスタムコマンド）</code> → <code>alt + G</code> で即コミットメッセージができる</li>
</ul>
</li>
<li data-line="66" class="code-line">選択中テキストをショートカットでPerplexity検索
<ul data-line="67" class="code-line">
<li data-line="67" class="code-line">エラーメッセージなどで詰まった時に重宝</li>
</ul>
</li>
</ul>
<p data-line="69" class="code-line">みたいな使い方をしています。</p>
<hr data-line="71" class="code-line">
<p data-line="73" class="code-line">まとめると、「ルールをしっかり設計して」「良い設計・実装を参考にさせる」というだけなので、それほど言うことがなかったですね・・・。</p>
<p data-line="75" class="code-line">一旦、現場からは以上です。</p>


私のAIコーディングのやり方

Discussion