Claude Code でよく使うプロンプトをカスタムスラッシュコマンドを活用すると便利!
はじめに
こんにちは。フロントエンドエンジニアの下條です。
Gaji-Labo ではスタートアップ支援の中で、生成 AI をどう活用するか日々検討しており、直近では Claude Code の効率的な使い方について検証を進めています。
本記事では、Claude Code のカスタムスラッシュコマンド を取り上げ、1. カスタムスラッシュコマンドの設定方法 2. カスタムスラッシュコマンドの活用事例 を紹介しようと思います。
カスタムスラッシュコマンドとは
Claude Code のカスタムスラッシュコマンドは、よく使うプロンプトやワークフローを Markdown 形式でテンプレート化し、コマンドで呼び出せる機能です。
「このコードを分析し、観点XXX、観点YYY での問題を見つけ、最適化を提案してください:」
というプロンプトを /optimize
のようなコマンドだけで実行できるようになります。
https://docs.anthropic.com/en/docs/claude-code/slash-commands
1. 設定方法
カスタムスラッシュコマンドは、.md
ファイルとして作成します。
ファイル名とコマンド名が対応しており、例えば code-review.md
というファイル名を作成した場合は、/code-review
コマンドが利用できるようになります。
プロジェクト単位とユーザー単位の2つの方法があります。
- プロジェクト単位: プロジェクトのルートディレクトリに
.claude/commands
フォルダを作成し、その中にファイルを配置します。 - ユーザー単位: ホームディレクトリの
~/.claude/commands
に配置します。すべてのプロジェクトで共通して使用したいコマンドはこちらに設定します。
試しに実装計画を立てる plan.md
を作成してみましょう。
.claude/commands/plan.md
---
allowed-tools: Bash(git add:*), Bash(git status:*), Bash(git commit:*)
description: "実装計画の作成"
---
## あなたのタスク
経験豊富なReact開発者として、$ARGUMENTS に対して、
以下の手順で実装計画を作成してください。
1. ユーザーから提供された要件を分析
2. 不明な点があれば質問
3. 段階的な実装計画を作成
4. 実装に必要なファイル構成を提案
## コンテキスト
- 単体テストを行うコマンド: !`npm run test`
- コーディング規約は @docs/coding-style.md を参照
カスタムスラッシュコマンドでは、以下の特別なキーワードが使用できます。
ファイルの先頭には YAML フロントマターでコマンドのメタデータを定義できます。
allowed-tools
: このコマンドで使用できるツールを指定しますdescription
: コマンドの説明
$ARGUMENTS
は、コマンドの引数を参照します。/plan issue#1
と実行すると、$ARGUMENTS
は
に置き換わります。issue#1
!コマンドは、実行前にBashコマンドを実行します。現在の状態を確認してから処理を開始したい場合に使用します。
!git status
!npm run test
@ファイル参照は、指定ファイルの内容を参照します。設定ファイルやドキュメントの内容を基に処理を行う場合に使用します。
@package.json
@README.md
活用事例
いくつか、カスタムスラッシュコマンドの活用事例を紹介します。
1. Claude Code で得た知見を出力させる
Claude Code の会話の中で得た気づきや知見を体系的に記録し、後から参照しやすい形で保存するためのコマンドです。
Claude Code の開発でラリーを繰り返していくと、AI が生み出した解決策や知見が自分に残らないまま、終わる。という状況が生まれます。
単なる AI の操縦者になるのではなく、学び続けて成長する仕組みを作ることは、エンジニアとして重要だと感じています。
参考
.claude/commands/knowledge.md
---
description: 開発セッションの知見をObsidian形式でまとめる
---
# Knowledge Management
これまでの開発で得られた知見を Obsidian Daily にまとめます。
## Instructions
1. **知見の整理**
- 現在のセッションで得られた主要な学習内容を特定
- 技術的な発見や問題解決のアプローチを整理
2. **Obsidian Daily形式での記録**
- 今日の日付で Daily note を作成. 作成済みの場合は、ファイルの末尾に記録する.
- ## 開発知見 セクションを追加
- 技術スタック、問題、解決策の形式で記録
3. **知見の分類**
- [[技術タグ]] を使用してカテゴリ分類
- 将来の検索性を考慮した構造化
※ カスタムスラッシュコマンド例 の内容はあくまでも一例として掲載しているため、実務で利用する際は、実際の業務に即した形で、コンテキストや指示内容を充実させることを推奨します。
2. テスト駆動開発(TDD)で進める
テスト駆動開発のサイクルを実行するためのコマンドです。
Anthropic が紹介している Claude Code のベストプラクティスの記事「Claude Code: Best practices for agentic coding」でも紹介されている通り、テスト駆動開発はエージェントコーディングにおいて有用です。
.claude/commands/tdd.md
---
description: "テスト駆動開発"
---
# Test-Driven Development
$ARGUMENTS に対して、
TDD(テスト駆動開発)のサイクルに従って開発を進めます。
## Instructions
1. **Red: 失敗するテストを書く**
- 期待する動作を明確にしたテストを作成
- テストが失敗することを確認(Red)
2. **Green: 最小限の実装**
- テストを通すための最小限のコードを実装
- テストが成功することを確認(Green)
3. **Refactor: リファクタリング**
- 動作を保持しながらコードを改善
- コードの重複を排除
## コンテキスト
- 単体テストを行うコマンド: !`npm run test`
※ カスタムスラッシュコマンド例 の内容はあくまでも一例として掲載しているため、実務で利用する際は、実際の業務に即した形で、コンテキストや指示内容を充実させることを推奨します。
3. Gemini CLI を利用した検索
Gemini CLI を利用して検索機能を実現するコマンドです。
現状では、Claude Code と比較し、Web検索による情報収集の精度は Gemini CLI に軍配があるようです。
.claude/commands/search.md
---
allowed-tools: Bash(gemini:*)
description: "Gemini CLI を使用して Web 検索を実行する"
---
# Gemini Search
Web_Search ツールの代わりに Gemini CLI を Bash ツールで実行します.
このコマンドを実行するときは、組み込みの web_search ツールを使用しないでください。常にgemini コマンドを使用してください。
`/search [arguments]` のようなコマンドを実行した場合、
Gemini CLI で Google_Web_Search を実行します。
- 検索を実行するコマンド: !`gemini -p 'google_web_search:[arguments]'`
※ カスタムスラッシュコマンド例 の内容はあくまでも一例として掲載しているため、実務で利用する際は、実際の業務に即した形で、コンテキストや指示内容を充実させることを推奨します。
まとめ
カスタムスラッシュコマンドにより、複雑な指示を簡単なコマンドで実行できるようになります。チーム開発では作業の標準化にも貢献し、新しいメンバーの学習コストも削減できます。
生産性と品質の向上の手段として参考にしていただけると幸いです。
※ AI 分野のベストプラクティスは急速に進化しています。本内容は執筆時点での知見であり、新たな手法が既に登場している可能性があります。
Gaji-Labo は Next.js, React, TypeScript 開発の実績と知見があります
フロントエンド開発の専門家である私たちが御社の開発チームに入ることで、バックエンドも含めた全体の開発効率が上がります。
「既存のサイトを Next.js に移行したい」
「人手が足りず信頼できるエンジニアを探している」
「自分たちで手を付けてみたがいまいち上手くいかない」
フロントエンド開発に関わるお困りごとがあれば、まずは一度お気軽に Gaji-Labo にご相談ください。
オンラインでのヒアリングとフルリモートでのプロセス支援にも対応しています。
Next.js, React, TypeScript の相談をする!Gaji-Labo Culture Deck
Gaji-Laboでは、React経験が豊富なフロントエンドエンジニアを募集しています
弊社ではReactの知見で事業作りに貢献したいフロントエンドエンジニアを募集しています。大きな制作会社や事業会社とはひと味もふた味も違うGaji-Laboを味わいに来ませんか?
もちろん、一緒にお仕事をしてくださるパートナーさんも随時募集中です。まずはお気軽に声をかけてください。お仕事お問い合わせや採用への応募、共に大歓迎です!
求人応募してみる!