🕌

Claude Codeのカスタムスラッシュコマンドを活用してコーディング以外も任せる

に公開

最近のプロジェクトでClaude Codeを積極的に活用しており、かなり重宝しています。
生成されるコードの精度が高く、複数のセッションを並行で稼働させることで開発生産性も大幅に向上しています。

一方で、コーディング自体はClaude Codeに任せることができるものの、動作確認やPR作成などのコーディング以外の部分については人間が対応する必要があり、そこがボトルネックになっていると感じていました。

そこで今回は、カスタムスラッシュコマンドを活用してClaude Codeにコーディング以外の部分も任せる方法を紹介します!

カスタムスラッシュコマンドについて

Claude Codeには、/help/mcpといった組み込みのスラッシュコマンドがありますが、これに加えて独自のカスタムスラッシュコマンドを作成することができます。
頻繁に使うプロンプトやコマンドを定義することで、生産性の向上を図ったりチーム内での作業を統一化したりすることができます。

カスタムスラッシュコマンドは、ルートまたはプロジェクトの.claude/commands/ディレクトリ配下にMarkdownファイルを配置することで利用できます。

詳しくは公式ドキュメントを参照してください。

https://docs.anthropic.com/ja/docs/claude-code/slash-commands#カスタムスラッシュコマンド

作成したカスタムスラッシュコマンド

今回はプロジェクト配下の.claude/commands/ディレクトリにコマンドを定義していきます。

check-api

check-apiはAPIサーバーの動作確認をするためのコマンドです。
(普段GraphQLを使用しているため、GraphQL APIの動作確認用のコマンドになっています)

下記のようにAPIを指定して実行することで、スキーマを確認して必要なBodyを生成し、curlコマンドを実行してAPIの動作確認を行います。

/check-api createPost

全体構成

このコマンドは複数のシェルスクリプトとコマンドの定義用のMarkdownファイルで構成されています。

.claude/commands/check-api/
├── body.json       # APIリクエストのbodyを保存するJSONファイル
├── check-api.md    # カスタムスラッシュコマンドの定義ファイル
├── request.sh      # APIリクエスト実行用のスクリプト
├── response.json   # APIレスポンスを保存するJSONファイル
├── run.sh          # メイン実行スクリプト(curlコマンドによるAPIテスト)
├── summary.sh      # API実行結果の要約を生成するスクリプト
├── summary.md      # API実行結果の要約を保存するMarkdownファイル
└── token.txt       # APIの認証トークンを保存するファイル

request.sh / run.sh

request.shrun.shは、APIリクエストを実行するためのシェルスクリプトです。
request.shは別ファイルに保存された認証情報とリクエストボディを使用して、指定されたAPIに対してリクエストを送信します。
認証情報とリクエストボディは動的なので、編集しやすいようにそれぞれtoken.txtbody.jsonとして分離しています。

request.sh
#!/bin/zsh

SCRIPT_DIR="$(dirname "$0")"
BASE_URL=""
ACCESS_TOKEN="$(cat "$SCRIPT_DIR/token.txt")"

curl -X POST "$BASE_URL" \
  -H "Content-Type: application/json" \
  -H "Authorization: Bearer $ACCESS_TOKEN" \
  -d "@$SCRIPT_DIR/body.json"

run.shはこのrequest.shを呼び出して、レスポンスをファイルに保存します。

run.sh
#!/bin/zsh

SCRIPT_DIR="$(dirname "$0")"

# request.shを実行して結果をresponse.jsonに書き込み
"$SCRIPT_DIR/request.sh" | jq > "$SCRIPT_DIR/response.json"

echo "🎉 Response saved to response.json"

summary.sh

summary.shは、APIの実行結果をまとめてsummary.mdに保存します。
ここでまとめた内容をPRに添付したりするため、機密情報は含まれないようにしています。

#!/bin/zsh

SCRIPT_DIR="$(dirname "$0")"

# 出力内容を作成
OUTPUT=""

# request.shの内容
OUTPUT+="**curl**\n\n"
OUTPUT+="\`\`\`shell\n"
OUTPUT+="$(cat "$SCRIPT_DIR/request.sh")\n"
OUTPUT+="\`\`\`\n\n"

# body.jsonの内容
OUTPUT+="**body**\n\n"
OUTPUT+="\`\`\`json\n"
OUTPUT+="$(cat "$SCRIPT_DIR/body.json")\n"
OUTPUT+="\`\`\`\n\n"

# response.jsonの内容
OUTPUT+="**response**\n\n"
OUTPUT+="\`\`\`json\n"
OUTPUT+="$(cat "$SCRIPT_DIR/response.json")\n"
OUTPUT+="\`\`\`\n"

# summary.txtに書き込み
echo -e "$OUTPUT" > "$SCRIPT_DIR/summary.md"

echo "🎉 Information saved to summary.md"

実行すると、下記のような内容がsummary.mdに保存されます。

summary.md
**curl**

```shell
#!/bin/zsh

SCRIPT_DIR="$(dirname "$0")"
BASE_URL=""
ACCESS_TOKEN="$(cat "$SCRIPT_DIR/token.txt")"

curl -X POST "$BASE_URL" \
  -H "Content-Type: application/json" \
  -H "Authorization: Bearer $ACCESS_TOKEN" \
  -d "@$SCRIPT_DIR/body.json"
```

**body**

```json
{
  "query": "query CreatePost($input: CreatePostInput!) { createPost(input: $input) { id title content } }",
  "variables": {
    "input": {
      "title": "New Post",
      "content": "This is the content of the new post."
    }
  },
  "operationName": "CreatePost"
}
```

**response**

```json
{
  "data": {
    "createPost": {
      "id": "1",
      "title": "New Post",
      "content": "This is the content of the new post."
    }
  }
}
```

check-api.md

check-api.mdはコマンドの定義ファイルです。
上記で紹介したシェルスクリプトを使用して、APIの動作確認を行うための指示を定義しています。

このコマンドでは、指定したAPIのスキーマを確認してbody.jsonを生成し、run.shを実行してAPIの動作確認を行います。
APIの実行が成功した場合は、summary.shを実行してAPIの実行結果を要約し、summary.mdに保存された内容をクリップボードにコピーします。
実行が失敗した場合はbody.jsonを修正し、再度実行するように指示しています。

自分は基本的に実装する際は、最初に自動テストと一緒に実装を行うようにClaude Codeに指示をしています。
そのため、自動テストが通ることを確認してから実際のAPIの動作確認を行うため、実装の修正は指示に含めていません。
APIを実行しながら実装の修正を行いたい場合は、そのような指示を追加しても良いと思います。

この構成により、定型部分はスクリプトで定義してリクエストや要約のフォーマットは固定化しつつ、bodyの生成など動的で手間のかかる部分をClaude Codeに任せることができます。

また、今回はGraphQL APIを対象にしていますが、APIの名前ではなくパスなどを受け取るようにすることで、REST APIでも対応できるかなと思います。

---
allowed-tools: Bash(./run.sh), Bash(./summary.sh), Bash(cat:*), Bash(pbcopy)
description: WebサーバーのAPIをテストして動作確認を行います
---

GraphQL APIに対してcurlを実行して、レスポンスを確認します。

# 関連ファイル

- `body.json` - APIリクエストのbodyを保存するJSONファイル
- `request.sh` - APIリクエスト実行用のスクリプト
- `response.json` - APIレスポンスを保存するJSONファイル
- `run.sh` - メイン実行スクリプト(curlコマンドによるAPIテスト)
- `summary.sh` - API実行結果の要約を生成するスクリプト
- `summary.md` - API実行結果の要約を保存するMarkdownファイル

# 対象のAPI

- $ARGUMENTSで指定されたAPI
- GraphQL Schemaは@graphql/schema/*.graphqls に定義されています

# 確認手順

## GraphQL Schemaの確認

- 対象のAPIのGraphQLスキーマを確認して、必要なフィールドや型を把握してください

## APIのリクエストBodyの生成

- $ARGUMENTSで指定されたGraphQL APIのリクエストbodyを生成します
- リクエストbodyはJSON形式で、GraphQLのクエリやミューテーションを含む必要があります
- @.claude/commands/check-api/body.json にリクエストbodyを保存します
- リクエストbodyの例:

```json
{
  "query": "query CreatePost($input: CreatePostInput!) { createPost(input: $input) { id title content } }",
  "variables": {
    "input": {
      "title": "New Post",
      "content": "This is the content of the new post."
    }
  },
  "operationName": "CreatePost"
}
```

## curlコマンドの実行

- !`.claude/commands/check-api/run.sh` を実行して、curlコマンドを使用してAPIをテストします
- @.claude/commands/check-api/response.json にレスポンスが保存されるので、実行後に内容を確認してください
- エラーが発生した場合は、レスポンスの内容を確認して問題を特定して、body.jsonを修正して再度実行してください
- APIの実行が成功している場合は、!`.claude/commands/check-api/summary.sh` を実行して、APIの実行結果を要約します


## APIの実行結果のコピー

- !`cat .claude/commands/check-api/summary.md | pbcopy` を実行して、APIの実行結果をクリップボードにコピーします

check-fe

check-feはフロントエンドの動作確認をするためのコマンドです。

下記のようにURLを指定して実行することで、Playwright MCPを使用して実際のブラウザでの動作確認を行います。

/check-fe http://localhost:3000/dashboard

全体構成

定義用のMarkdownファイルの他に、Playwrightの設定ファイルや動画保存用のディレクトリなどがあります。
Playwrightの設定ファイルや動画保存用のディレクトリは、設定でファイルパスを指定するのでどこに定義しても問題ないです。

.claude/commands/check-fe/
├── videos/                     # Playwrightの動画保存ディレクトリ
├── check-fe.md                 # カスタムスラッシュコマンドの定義ファイル
└── playwright-mcp-config.json  # Playwrightの設定ファイル

Playwright MCP

このコマンドでは、Playwright MCPを使用しているので事前にセットアップが必要です。
設定ファイルを指定するために引数に--configオプションを指定して登録します。

claude mcp add playwright npx @playwright/mcp@latest -- --config .claude/commands/check-fe/playwright-mcp-config.json

今回は動作確認時の動画を保存したいので、下記のように設定ファイルを定義しています。
これによりPlaywrightを実行した際の動画が.claude/commands/check-fe/videos/ディレクトリに保存されます。

playwright-mcp-config.json
{
  "browser": {
    "browserName": "chromium",
    "contextOptions": {
      "recordVideo": {
        "dir": ".claude/commands/check-fe/videos/"
      }
    }
  }
}

その他のPlaywright MCPの使い方については、公式リポジトリを参照してください。

https://github.com/microsoft/playwright-mcp

check-fe.md

check-fe.mdはコマンドの定義ファイルです。
Playwright MCPを使用してフロントエンドの動作確認を行うための指示を記述しています。

---
description: アプリケーションの画面にアクセスしてフロントエンドの動作確認を行います
---

Playwright MCPを使用して、指定された画面の動作確認を行います。

# 対象の画面

- $ARGUMENTSで指定されたURL

# 確認手順

- Playwright MCPを起動して、指定されたURLにアクセスします
- 指示された内容を実行して動作確認をします

注意点

フロントエンドの動作確認はMCPサーバーとのやり取りが多くなるため、操作のスピードがかなり遅くなってしまうのと、処理中にスタックしてしまう場合があり、その際は手動でセッションを終了して再実行する必要があります。

そのため、現時点では常用するには工夫が必要かなと思います。

今後MCPの性能向上や安定性の改善により、よりスムーズに動作確認が行えるようになれば、もっと頻繁に活用できると思います。

create-pr

create-prはGitHub CLIを使用してPRを作成するためのコマンドです。

下記のように実行することで、直近の差分を確認してPRを作成します。
デフォルトではmainブランチに対してPRを作成しますが、引数で別のブランチを指定することも可能です。

/create-pr
or
/create-pr <branch-name>

定義ファイルは下記のようになっています。
各種gitコマンドで直近の差分を確認し、特定のフォーマットに従って内容を記述してPRを作成します。
作成が完了したら、ブラウザでPRを表示するように指示しています。

create-pr.md
---
allowed-tools: Bash(gh:*), Bash(git:*)
description: "Create a Pull Request"
---

コンテキストを確認し、PRの作成と表示を行います。

# コンテキスト

- !`git status`で現在のGitの状態を確認してください
- !`git diff HEAD`で現在の変更点を確認してください
- !`git branch --show-current`で現在のブランチを確認してください
- !`git log --oneline -10`で直近のコミットを確認してください

# PRの作成

現在のブランチをリモートリポジトリにプッシュします。
上記の変更に基づいて、以下のコマンドを使用してPRを作成します。

```bash
TARGET_BRANCH="${ARGUMENTS:-main}"
gh pr create -d -B "$TARGET_BRANCH" --title "<変更の要約>" --body "
## やったこと
- <変更の内容を簡潔に説明>

## 背景
- <変更の目的や背景を説明>

## 動作確認

## 参考情報
- <レビューアに向けてのメッセージや注意点を記載>
```

# PRの表示

- PRの作成が完了したら!`gh pr view --web`でPRをブラウザで表示します

まとめ

今回はカスタムスラッシュコマンドを活用することで、コーディング以外の部分もClaude Codeに任せる方法を紹介しました!
このような使い方によって単純にコードを書くだけでなく、開発プロセス全体を効率化することができると思います。
フロントエンドの動作確認については課題はありますが、その他のコマンドについてはかなり便利に活用できています。

動作確認の結果をghコマンドを使用してPRへ自動でコメントするようにしたりと、さらに便利にするアイディアもあるので、今後も改善を続けていこうと思います!

株式会社ドクターズプライム

Discussion