🚀 使い始めたきっかけ
社内運用予定の広告管理システムを開発することになり、TypeScript や React、Hono、TailwindCSS を使うことが決まっていました。
ところが、TypeScript を書いたことがなく、React も Hono も TailwindCSS も触れたことがありません。
そこで、AI にコードを書いてもらう開発をしてみようと思い、Claude Code を使用した開発を行いました。
同期の新卒メンバーも各々、 Claude Code を使って同じ技術スタックで開発を行いました！
📝 現在の使い方
大まかには以下の流れで使っています。
- マークダウンファイルに、やりたいことや要望、決まっている仕様をとにかく書き出す
- それを元に、Claude Code に仕様書を作成してもらう
- 仕様書を元に、実装手順書を作成してもらう
- 実装手順書を元に、コードを書いてもらう
- 書いてもらったコードを元に、動作確認・修正を行ってもらう
✨ 使ってよかったこと
TypeScript や React、Hono の知識がなくても、1 人で環境構築から開発まで行うことができました。
また、実際に動くコードを出力してもらえるので、学習コストが非常に低くなったと感じています。
ゼロからコードの書き方を調べる のと 動くコードを見ながら「何をしているのか」「なぜそう書くのか」を理解する のでは学習効率に天地の差があるため、非常に助かりました！
コーディングが楽になっただけでなく、実装計画を事前に作成してもらうことで、実装の全体像を把握しやすくなり、開発の見通しが立てやすくなりました。
⚠️ 気をつけないといけないなと思ったこと
Claude Code に頼りすぎて、実装の詳細を理解しないまま進めてしまうと、セキュリティホールやバグを生み出してしまう可能性があるなと感じました。
また、動作はするものの以下のような問題を抱えたコードが生成される可能性もあると感じています。
- パフォーマンスが悪い（正常に動作はするが、もっと効率的な書き方がある）
- 非推奨となっている昔のバージョンのメソッドが使われている
- 新しいバージョンで追加された便利な機能が活用されていない
- 利用ユーザー数の想定が考慮されていない
- 開発環境では Docker を使って、本番環境では Vercel を使う、AWS を使うなどは具体的に指示を出す必要があると感じました。
そのため、Claude Code を使う傍らで、自分でもしっかりとコードを理解し、勉強していくことで、適切にレビューできるようになる必要があると感じました。
💡 効率よく使うために行っていること
最初に設定したもの
1. 🔔 /hook コマンドを使って、通知が来るようにする
ユーザー設定で、確認を求められたときと、タスク完了時に通知が来るようにしています。
（Mac の設定でスクリプトエディタからの通知を許可する必要があります！）
設定手順は、以下の記事が参考になります：
自分は、通知音は鳴ってほしくなかったので、以下の 2 つの command を設定しています：
-
Notification（許可確認時）
osascript -e 'display notification "Claude Codeが許可を求めています" with title "Claude Code" subtitle "確認待ち"'
-
Stop（タスク完了時）
osascript -e 'display notification "タスクが完了しました" with title "Claude Code" subtitle "処理終了"'
自動的に Claude Code を使っている VSCode のウィンドウをアクティブにするスクリプトもあるそうです！
個人開発を行っている時などは便利そうです。
参考：Claude Code Hooks で通知したときに VSCode をアクティブにしてくれませんか！
スクリプトエディタで VSCode をアクティブにする
{
"hooks": {
"Notification": [
{
"matcher": "",
"hooks": [
{
"type": "command",
"command": "osascript -e 'tell application id \"com.microsoft.VSCode\" to activate'"
}
]
}
],
"Stop": [
{
"matcher": "",
"hooks": [
{
"type": "command",
"command": "osascript -e 'tell application id \"com.microsoft.VSCode\" to activate'"
}
]
}
]
},
"alwaysThinkingEnabled": false
}
2. 🔌 MCP を活用する
使ったことがある MCP：
-
- 参考記事：Claude Code を 10 倍賢くする無料ツール「Serena」の威力とトークン効率化術
-
Serena は、この専門書のために非常に優秀な「目次」と「索引」を自動で作成してくれる秘書のような存在です。
-
- 参考記事：【Claude Code】Sub agents × Context7 で依存ライブラリのコード品質を向上させる
-
Context7 は、最新のコード例とドキュメントを LLM のコンテキストに直接取得します。
-
- 参考記事：Chrome DevTools MCP で実現した次世代 Web 開発体験
-
Chrome でウェブページを直接デバッグし、DevTools のデバッグ機能とパフォーマンス分析情報を活用できます。
-
- 現在は、Figma で作成していただいたデザインを Export して、PNG ファイルや SVG ファイルを Claude Code に渡して開発してもらっていますが、Figma MCP を使うことで、より正確なデザインをより簡単な指示で実装してもらえるのではないかと考えています。
使ってみた感想
- Serena MCP
- コード内検索の精度についてはあまり体感できませんでしたが、オンボーディングによる生成ドキュメントがとても有用だと感じました！コードの品質が向上するだけでなく、実装時、型チェックや linter チェック、テスト実行などを自動で行ってくれるようになり、追加修正の指示を出すことも減りました。
- 参考: 【Claude Code】Serena の導入で AI 活用を加速！
- Context7
- 少しだけ使っただけで、ほとんど未使用に近く、あまり体感できていません。
- chrome-devtools
- MCP がブラウザ上の操作を行い、動作確認を行ってくれますが、許可を頻繁に求められるため、自分で動作確認し、その結果を伝えた方が早いなというのが現在の感想です。
- Figma MCP
- デザインデータ大きいためか、一度に扱えるコンテキストの上限に引っかかりやすく、個人的には、Figma から Export した PNG や SVG を渡して実装してもらう方がまとめて指示を出しやすいと感じました。
3. 🎯 既存のプロジェクトに Claude Code を導入する時に、まず /init する
既存のプロジェクトの状態や記載されているルールを理解し、CLAUDE.md にまとめてくれます。
可能であれば一緒に ultrathink も使うことをオススメします。
参考：【Claude Code】 /init + ultrathink で拡張思考モードを使いながら CLAUDE.md を作ってみた
新規プロジェクトでカスタムルールを設定したい場合も、最初に /init して作成された CLAUDE.md を編集してから開発を始めると良いでしょう。
公式の Claude Code: Best practices for agentic coding でも以下のように紹介されています：
CLAUDE.md は、Claude が会話を開始する際に自動的にコンテキスト（文脈）に読み込む特殊なファイルです。このため、以下のような情報を記述しておくのに最適な場所となります。
- よく使う bash コマンド
- コアファイルやユーティリティ関数
- コーディングスタイルガイドライン
- テストの手順
- リポジトリの利用ルール（例：ブランチの命名規則、マージとリベースの使い分けなど）
- 開発環境のセットアップ情報（例：pyenv の使用、動作するコンパイラなど）
- プロジェクトに特有の予期せぬ動作や警告
- その他、Claude に記憶させておきたい情報
4. 👥 チーム運用を行う際は、設定ファイルも Git 管理して共有する
チームで Claude Code を使う場合、CLAUDE.md や設定ファイルを Git で管理することで、メンバー全員が同じルールでコーディングできるようになります。
開発中に都度意識していたもの
5. 🧠 ultrathink を使って、しっかりしたドキュメントを作成してもらう
自分は、実装を行ってもらう前に仕様書や実装手順書を作成してもらうようにしています。
その際、指示の最後に ultrathink と付け加えることで、より詳細でしっかりしたドキュメントを作成してもらえます。
実装の前段階でしっかりとしたドキュメントを作成してもらうことで、実装の手戻りが少なくなり、効率よく開発を進めることができています！
memo.md にプロジェクトの概要や、要件、使ってほしい技術スタックを記載したので、まずは詳細な仕様書を /plan/docs に作成してください。
その後、作成した仕様書を元に技術スタックやディレクトリ構成、実装機能などを記述したreadmeと、実装の具体的な手順を詳細に記述した /plan/plan.md を作成してください。
ultrathink
もちろん、実装を行ってもらう際にも、最初に指示を出す時に ultrathink を付け加えています。
/plan/plan.md に記載されている実装手順を元に、まずはバックエンドの実装を行ってください。
ultrathink
Claude Code のプランによっては使用回数に制限がありますが、実装よりもプランニングや設計段階で ultrathink を使うのがオススメです！
6. 🧹 こまめにコンテキストを綺麗にする（/clear）
実装手順書を元にコードを書いてもらう際、一気に実装してもらおうとすると、途中でコンテキストが足りなくなり、実装が中途半端になったり、間違った実装をされてしまうことがあります。
そのため、タスクを区切って /clear コマンドでコンテキストをリセットしてから、次のステップの実装を行ってもらうようにしています。
実装手順書をマークダウンファイルで出力してもらっておくことで、/clear した後に「現状どこまで完了していて、次に何を行ってほしいのか」を Claude Code に簡単に伝えることができるので、タスクのファイル出力はオススメです！
7. 📋 決まっていることはしっかり Claude Code に伝える
ただ、「Todo アプリを作って」と指示するのではなく、以下のような決まっていることは最初にしっかりと伝えるようにしています：
- 技術スタック（React + Hono を使ってほしい、など）
- モノレポ構成（pnpm workspaces を使ってほしい、など）
- バージョン（最新のものを使ってほしい、など）
文章として整理されていなくても、順番がバラバラでも、箇条書きでも大丈夫です。
伝えてさえいれば、Claude Code がうまくまとめてくれます！
8. 📎 参考になるものはしっかり Claude Code に渡す
言葉での説明やプロンプトでの指示より、参考になるものを渡した方が、圧倒的に自分のイメージに近いものを作ってもらえます！
具体例：
- 技術スタックやディレクトリ構造で過去の作成したプロジェクトなど参考になるリポジトリがあれば、Clone して
CLAUDE.mdを作成する際にそのリポジトリを読み込ませる- 他の人が作成したリポジトリを参考にする場合は、ライセンスに注意してください！
- 作ってほしいデザインが決まっている場合は、そのデザインを PNG や SVG、Figma MCP などを使って実装時に読み込ませる
🔮 使ってみたい機能：サブエージェント
現在はサブエージェントを使わず、1 つのエージェントだけで開発を行っていますが、知識が増えてプロジェクト規模が大きくなってきた際には、「テスト・動作確認用」「コードの品質管理用」「ドキュメント作成用」など、目的に応じたサブエージェントを用意してさらに効率的に開発を進められたらと考えています。
📚 参考記事
ポート株式会社は、「社会的負債を、次世代の可能性に。」をパーパスに掲げ、人材領域およびエネルギー領域を主力事業とした事業を展開しています。人材領域では、「キャリアパーク！」「就活会議」「みん就」などのサービスを提供しています。
Discussion