【Claude Codeチャレンジ日誌7】カスタムスラッシュコマンドを使う方法

Claude Codeでは .claude/commands/ フォルダを作成し、よく使う命令をスラッシュコマンドとして定義することで、効率的な操作が可能になります。
さらに、コマンドに引数を持たせることで、柔軟なカスタマイズも可能です。

---

📂 フォルダ構成とセットアップ

プロジェクトルートに .claude/commands/ ディレクトリを作成し、その中にカスタムコマンドファイル（.md）を配置します。

my-project/
├── .claude/
│   └── commands/
│       ├── trans.md
│       ├── test.md
│       └── deploy.md

---

🧰 実行例（USAGE）

以下の５つのパターンでカスタムコマンドの活用方法を説明します：

---

1. trans.mdを使ったシンプルな翻訳

コマンド定義 (.claude/commands/trans.md):

#翻訳依頼

指定されたファイルを{{language}}に翻訳し、カレントディレクトリに翻訳後のファイルを保存してください。

使用方法：

/trans 中国語 ＠翻訳したいファイル名   # → {{language}} が "中国語" に置換され、指定したファイルが翻訳される
/trans English ＠翻訳したいファイル名# → {{language}} が "English" に置換され、指定したファイルが翻訳される

---

2. {{variable}} - 名前付きパラメータ

コマンド定義 (.claude/commands/test1.md):

# 名前付きパラメータテスト

以下の#情報だけを記載したtest1_output.mdをdocumentsフォルダ内に作成してください。

#情報
- 名前: {{name}}
- 年齢: {{age}} 
- 都市: {{city}}

使用方法：

/test1 斎藤 40 埼玉
/test1 name:斎藤 age:40 city:埼玉

どちらでもOK。

結果

# 情報
- 名前: 斎藤
- 年齢: 40
- 都市: 埼玉

ポイント
キー名が違うと置換されないので注意

---

3. $ARGUMENTS - 全引数取得

コマンド定義 (.claude/commands/test2.md):

# 全引数取得テスト

以下の#情報だけを記載したtest2output.mdをdocumentsフォルダ内に作成してください。

#情報
受け取った全引数: $ARGUMENTS

使用方法：

/test2 斎藤 40 埼玉

結果

受け取った全引数: 斎藤 40　埼玉

---

4. 複数引数の活用方法

コマンド定義 (.claude/commands/test3.md):

# 名前付きパラメータと全引数取得の混合テスト

以下の#情報だけを記載したtest3_output.mdをdocumentsフォルダ内に作成してください。

#情報
- 名前: {{name}}
- 年齢: {{age}} 
- 都市: {{city}}

全ての引数: $ARGUMENTS

使用方法：

/test3 斎藤 30 東京

結果

# 情報
- 名前: 斎藤
- 年齢: 30 
- 都市: 東京

全ての引数: 斎藤 30 東京

/test3 name:斎藤 age:30 city:東京

結果

# 情報
- 名前: 斎藤
- 年齢: 30 
- 都市: 東京

全ての引数: name:斎藤 age:30 city:東京

ポイント
キー名:値の形式で指定した場合は$ARGUMENTSにはそのまま「キー：値」の形式で情報が渡る。

---

5. 高度な活用例

コマンド定義 (.claude/commands/test4.md):

# 高度な活用例

以下の#情報だけを記載したtest4_output.mdをdocumentsフォルダ内に作成してください。

# 情報
## プロジェクト情報
- プロジェクト名: {{project}}
- 担当者: {{owner}}
- 優先度: {{priority}}

## タスクリスト
{{tasklist}}

---
作成日時: 2024-01-15
カテゴリ: #{{category}} #{{status}}

使用方法：

/test4 project:ECサイト owner:佐藤 priority:緊急 category:バグ修正 status:対応中 tasklist: - 決済機能のエラー修正<br> - ユーザー登録の不具合対応<br> - セキュリティパッチ適用

結果

# 情報
## プロジェクト情報
- プロジェクト名: ECサイト
- 担当者: 佐藤
- 優先度: 緊急

## タスクリスト
 - 決済機能のエラー修正
 - ユーザー登録の不具合対応
 - セキュリティパッチ適用

---
作成日時: 2024-01-15
カテゴリ: #バグ修正 #対応中

ポイント
<br>で改行してくれる。

---

🪜 クイック手順（QUICK STEPS）

1. コマンド用ディレクトリの作成

   mkdir -p .claude/commands
   

2. コマンドファイルの作成

   • .mdファイルに命令を記述（例：trans.md）

3. パラメータを使う

   • {{parameter}} の形式で引数を受け取り可能
   • $ARGUMENTS で全引数を単一文字列として取得

4. Claudeでテスト

   • /コマンド名 をチャットで入力して動作確認

5. チームと共有

   • .claude/ フォルダをリポジトリにコミットして運用

---

📁 リサーチコマンドの実行例

コマンド定義 (.claude/commands/research.md):

# 🔍究極のリサーチアシスタント

$ARGUMENTSについて包括的なリサーチを実行し、実用的な成果物を生成します。

## 🎯 実行内容

### 1. **多角的な情報収集** (並列実行)
- 📚 公式ドキュメント・GitHub（最新バージョン情報、変更履歴）
- 🌐 技術記事・ブログ（Zenn、Qiita、Dev.to、Medium）
- 💬 実践的な議論（Stack Overflow、Reddit、GitHub Issues）
- 🎥 動画チュートリアル（YouTube、Udemy無料コース）
- 📊 トレンド分析（Google Trends、GitHub Stars推移）
- 🔗 関連技術・代替案の調査

### 2. **自動判定による成果物生成**
リサーチ内容に基づいて、最適な成果物を自動選択：

#### 📋 **技術調査レポート** （新技術・ツール・フレームワーク向け）
#### 🛠️ **実装ガイド** （How-to系の検索向け）
#### 🐛 **問題解決プレイブック** （エラー・トラブル系）
#### 📊 **比較分析レポート** （vs, 比較, どっち系）
#### 🚀 **クイックスタートキット** （始め方、入門系）

## 📁 保存先
- `research/[カテゴリ]/[トピック]_[タイプ]_[日付].md`
- カテゴリ: tech/error/comparison/guide/quickstart
- 例: `research/tech/React_Server_Components_調査レポート_20250702.md`

使用例：

# 技術調査
/research "Next.js 14 App Router"

# エラー解決  
/research "npm install EACCES error"

# 比較検討
/research "Next.js vs Remix vs Astro"

# 実装方法
/research "Dockerでマルチステージビルド"

生成されるファイル例:

• research/tech/Next.js_14_App_Router_調査レポート_20250702.md
• research/error/npm_install_EACCES_トラブルシューティング_20250702.md
• research/comparison/Next.js_vs_Remix_vs_Astro_比較分析_20250702.md

# Next.js 14 App Router 利用手順書

**更新日**: 2024-03-15  
**対象バージョン**: Next.js 14.1.0

## 概要
Next.js 14のApp Routerは、React Server Componentsをベースにした新しいルーティングシステムです。従来のPages Routerと比較して、より直感的なファイルベースルーティングとサーバーサイドレンダリングの改善を提供します。

## メリット・活用シーン
- **パフォーマンス向上**: 自動的なコード分割とストリーミング
- **開発体験の改善**: ネストされたレイアウトと並列ルート
- **SEO最適化**: メタデータAPIの統合

## 前提条件
- Node.js 18.17以上
- React 18の基本知識
- TypeScript（推奨）

## インストール・セットアップ

### 新規プロジェクトの場合
```bash
npx create-next-app@latest my-app --typescript --app
cd my-app
npm run dev