Claude CodeのHooks機能を使ってTask完了時にSlack通知してみた
2025.07.01はじめに
Claude CodeのCHANGELOG.mdを眺めていると、v1.0.38でhooksなるものが追加されていました。
ドキュメントによると、LLMによる実行判断に依存せずに、特定のアクションが常に実行される機能のようです。
今回はシンプルにTaskが完了したらSlack通知するアクションを設定してみたいと思います。
やってみた
Slack設定
まずはじめに以下の手順に従い、SlackのWebhook URLを作成します。
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上に通知が飛んできました。
カスタマイズすれば詳細な情報を載せることもできそうです。
まとめ
v1.0.38で追加されたhooksを使ってSlack通知を行ってみました。
LLMの実行判断に依存しない仕様のようなので、必ず実行したいアクションを設定しておくと色々できそうですね。
どなたかの参考になれば幸いです。
![[プレビュー] AWS Knowledge MCP Serverを使ってみた](https://images.ctfassets.net/ct0aopd36mqt/4AJd3M26yescaNaY21CYmQ/9730e95c53a7b3049c6da6d4c0b1dec9/mcp.png)
![[新機能] Amazon S3 Tables MCP (Model Context Protocol) Server をClaude Codeで試してみた！](https://images.ctfassets.net/ct0aopd36mqt/wp-thumbnail-066beb776f0c57ce64255fadcc072f60/82b2f6687ab5774cd73f9176dcac7855/amazon-s3)
