Claude CodeのHooks機能を使ってTask完了時にSlack通知してみた

Claude CodeのHooks機能を使ってTask完了時にSlack通知してみた

Clock Icon2025.07.01

はじめに

Claude CodeのCHANGELOG.mdを眺めていると、v1.0.38でhooksなるものが追加されていました。
ドキュメントによると、LLMによる実行判断に依存せずに、特定のアクションが常に実行される機能のようです。

https://github.com/anthropics/claude-code/blob/main/CHANGELOG.md#L1-L6

https://docs.anthropic.com/en/docs/claude-code/hooks

今回はシンプルにTaskが完了したらSlack通知するアクションを設定してみたいと思います。

やってみた

Slack設定

まずはじめに以下の手順に従い、SlackのWebhook URLを作成します。
https://api.slack.com/messaging/webhooks

Hooksの追加

Hooksの追加は/hooksスラッシュコマンドを実行するか、settings filesに記述する必要があります。
今回は環境変数も一緒に定義したいので、以下のようにsettings.local.jsonに直接設定を追加します。

.claude/settings.local.json
{
  "env": {
    "SLACK_WEBHOOK_URL": "https://hooks.slack.com/services/T00000000/B00000000/XXXXXXXXXXXXXXXXXXXXXXXX"
  },
  "hooks": {
    "Stop": [
      {
        "matcher": "",
        "hooks": [
          {
            "type": "command",
            "command": "curl -X POST -H 'Content-type: application/json' --data '{\"text\":\"🤖 Claude Code: タスクが完了しました。\"}' \"$SLACK_WEBHOOK_URL\""
          }
        ]
      }
    ]
  }
}

動作確認

早速Claude Codeにタスクを依頼して、完了時にSlack通知が飛んでくるか確認してみます。
簡単なTodoアプリの作成をお願いしてみます。

Claude Code
> @todosに簡単なTodoアプリを作成して下さい。

⏺ Update Todos
  ⎿  ☐ プロジェクト構造を確認し、適切な場所にTodoアプリを作成する
     ☐ HTML構造を作成する
     ☐ JavaScript機能を実装する(追加、削除、完了)
     ☐ CSS スタイリングを追加する

⏺ List(.)
  ⎿  Listed 5 paths (ctrl+r to expand)

⏺ Update Todos
  ⎿  ☒ プロジェクト構造を確認し、適切な場所にTodoアプリを作成する
     ☐ HTML構造を作成する
     ☐ JavaScript機能を実装する(追加、削除、完了)
     ☐ CSS スタイリングを追加する

⏺ Write(todos/index.html)
  ⎿  Wrote 20 lines to todos/index.html                                        
     <!DOCTYPE html>
     <html lang="ja">
     <head>
         <meta charset="UTF-8">
         <meta name="viewport" content="width=device-width, initial-scale=1.0">
         <title>Todo アプリ</title>
         <link rel="stylesheet" href="style.css">
     </head>
     <body>
         <div class="container">
     … +10 lines (ctrl+r to expand)

⏺ Update Todos
  ⎿  ☒ プロジェクト構造を確認し、適切な場所にTodoアプリを作成する
     ☒ HTML構造を作成する
     ☐ CSS スタイリングを追加する
     ☐ JavaScript機能を実装する(追加、削除、完了)

⏺ Write(todos/style.css)
  ⎿  Wrote 138 lines to todos/style.css   
     * {
         margin: 0;
         padding: 0;
         box-sizing: border-box;
     }
     body {
         font-family: 'Arial', sans-serif;
         background-color: #f5f5f5;
         color: #333;
     … +128 lines (ctrl+r to expand)

⏺ Update Todos
  ⎿  ☒ プロジェクト構造を確認し、適切な場所にTodoアプリを作成する
     ☒ HTML構造を作成する
     ☒ CSS スタイリングを追加する
     ☐ JavaScript機能を実装する(追加、削除、完了)

⏺ Write(todos/script.js)
  ⎿  Wrote 99 lines to todos/script.js                                    
     class TodoApp {
         constructor() {
             this.todos = JSON.parse(localStorage.getItem('todos')) || [];
             this.todoInput = document.getElementById('todoInput');
             this.addBtn = document.getElementById('addBtn');
             this.todoList = document.getElementById('todoList');
             this.init();
         }
     … +89 lines (ctrl+r to expand)

⏺ Update Todos
  ⎿  ☒ プロジェクト構造を確認し、適切な場所にTodoアプリを作成する
     ☒ HTML構造を作成する
     ☒ JavaScript機能を実装する(追加、削除、完了)
     ☒ CSS スタイリングを追加する

⏺ Todoアプリをtodos/フォルダに作成しました。以下の機能が含まれています:

  - タスクの追加
  - タスクの完了/未完了切り替え
  - タスクの削除
  - ローカルストレージでのデータ保存
  - レスポンシブデザイン

  todos/index.htmlをブラウザで開いてお使いください。

程なくしてタスクが完了するとSlack上に通知が飛んできました。

Capture-2025-07-01-184724

カスタマイズすれば詳細な情報を載せることもできそうです。

まとめ

v1.0.38で追加されたhooksを使ってSlack通知を行ってみました。
LLMの実行判断に依存しない仕様のようなので、必ず実行したいアクションを設定しておくと色々できそうですね。
どなたかの参考になれば幸いです。

Share this article

facebook logohatena logotwitter logo

© Classmethod, Inc. All rights reserved.