Webアプリやサーバー処理で、エラーやイベント発生時に Slack に通知を送る方法をまとめました。
ここでは Incoming Webhook を使った通知 の実装手順を紹介します。
1. SlackでWebhook URLを取得
① Slack API > Your Apps にアクセス
②「Create New App」 → 「From scratch」を選択
③ App name と対象 Workspace を入力
④ 左メニューの「Incoming Webhooks」を有効化
⑤「Add New Webhook 」をクリックして通知先のチャンネルを選択
⑥ 表示された Webhook URL をコピー
この URL は外部に漏れないよう注意。
2. 環境変数に追加
Webhook URL はソースコードに直接書かず、環境変数で管理します。
Loading code...Next.js などで利用する場合は process.env.SLACK_WEBHOOK_URL で参照できます。
3. 通知関数を作成
TypeScript で汎用的に使える関数を作成します。
Loading code...説明
message: Slackに送るメインテキストdetails: オブジェクト形式の詳細情報をfieldsとして表示blocksを使うことで、より見やすいメッセージを送信可能- 環境変数が設定されていない場合は警告を出して処理を中断
fetchで Webhook URL に POST し、失敗した場合はコンソールにエラー出力
4. 利用例
Loading code...details を渡すと、Slack のメッセージに key/value 形式で追加情報を整形して表示できます。
