Slack Incoming Webhookで通知を作る 個人開発のモニタリングに使う実装

結論

Slack Incoming Webhookは、設定5分・コード10行で個人開発のサイトからSlackに通知を送れる仕組みだ。問い合わせ受信・エラー検知・デプロイ通知などのモニタリングに活用できる。Webhook URLは環境変数で管理し、コードに直接書かないことが唯一の注意点だ。

Incoming Webhookの設定

1. Slackアプリの追加

Slack APIのページ（api.slack.com/apps）にアクセスして「Create New App」→「From manifest」を選ぶか、Slackのアプリディレクトリで「Incoming Webhooks」を検索して追加する方法がある。

より簡単な方法：Slackワークスペースの設定 → アプリ → 「Incoming Webhooks」を検索して追加する。

2. Webhookを追加

「Incoming Webhooksを有効にする」をオンにして、「ワークスペースにWebhookを追加」を押す。通知を送りたいチャンネルを選択する。

3. Webhook URLのコピー

生成された Webhook URL（https://hooks.slack.com/services/T.../B.../...の形式）をコピーして保存する。このURLがあれば、HTTPSのPOSTリクエストを送るだけでSlackにメッセージが届く。

最もシンプルな実装

Webhook URLにJSONをPOSTするだけで通知が送れる。

cURL（テスト用）：

curl -X POST https://hooks.slack.com/services/YOUR/WEBHOOK/URL \
  -H 'Content-Type: application/json' \
  -d '{"text": "テスト通知です"}'

これを実行すると、指定したSlackチャンネルに「テスト通知です」というメッセージが届く。

JavaScript（Fetch API）：

async function sendSlackNotification(message) {
  const webhookUrl = process.env.SLACK_WEBHOOK_URL;
  
  await fetch(webhookUrl, {
    method: 'POST',
    headers: { 'Content-Type': 'application/json' },
    body: JSON.stringify({ text: message }),
  });
}

// 使い方
await sendSlackNotification('問い合わせが届きました。');

実際の活用パターン

パターン1：問い合わせフォームの受信通知

フォームが送信されたとき、内容をSlackに通知する。

async function notifyNewInquiry({ name, email, message }) {
  const text = [
    '📩 *新しいお問い合わせ*',
    `*氏名:* ${name}`,
    `*メール:* ${email}`,
    `*内容:*\n${message}`,
  ].join('\n');

  await fetch(process.env.SLACK_WEBHOOK_URL, {
    method: 'POST',
    headers: { 'Content-Type': 'application/json' },
    body: JSON.stringify({ text }),
  });
}

パターン2：エラー発生時の通知

APIのエラーが発生したときに通知する。個人開発では24時間監視できないため、エラーが起きたらSlackで気づけると助かる。

async function notifyError(error, context) {
  const text = [
    '🚨 *エラーが発生しました*',
    `*コンテキスト:* ${context}`,
    `*エラー:* ${error.message}`,
    `*発生時刻:* ${new Date().toLocaleString('ja-JP')}`,
  ].join('\n');

  await fetch(process.env.SLACK_WEBHOOK_URL, {
    method: 'POST',
    headers: { 'Content-Type': 'application/json' },
    body: JSON.stringify({ text }),
  });
}

// 使い方
try {
  await processData();
} catch (error) {
  await notifyError(error, 'processData()');
}

パターン3：Supabase Edge Functionsからの通知

Supabase Edge Functionsの中でSlack通知を送る場合、APIキーはSupabaseの環境変数（secrets）に設定する。

// supabase/functions/my-function/index.ts
const slackWebhookUrl = Deno.env.get('SLACK_WEBHOOK_URL');

await fetch(slackWebhookUrl, {
  method: 'POST',
  headers: { 'Content-Type': 'application/json' },
  body: JSON.stringify({ text: '処理が完了しました' }),
});

絵文字とフォーマットで見やすくする

Slackのメッセージは絵文字とMarkdown書式が使える。

const message = {
  text: '✅ *デプロイ完了*\n`main`ブランチが本番環境にデプロイされました',
};

Markdown記法：

• *太字*：太字
• `コード`：コード（インライン）
• ```コードブロック```：コードブロック
• >引用：引用

Block Kitでリッチな通知を作る（応用）

シンプルなtextより視覚的な通知が欲しい場合は、Block Kitを使う。

const body = {
  blocks: [
    {
      type: 'header',
      text: { type: 'plain_text', text: '📩 新しいお問い合わせ' },
    },
    {
      type: 'section',
      fields: [
        { type: 'mrkdwn', text: `*氏名:*\n${name}` },
        { type: 'mrkdwn', text: `*メール:*\n${email}` },
      ],
    },
    {
      type: 'section',
      text: { type: 'mrkdwn', text: `*内容:*\n${message}` },
    },
  ],
};

await fetch(process.env.SLACK_WEBHOOK_URL, {
  method: 'POST',
  headers: { 'Content-Type': 'application/json' },
  body: JSON.stringify(body),
});

Block KitのUIはSlack公式の「Block Kit Builder」で視覚的に作成できる。

Webhook URLの安全な管理

Webhook URLはAPIキーと同様に機密情報として扱う。

• コードにハードコードしない
• GitHubにプッシュしない（.gitignoreに.envを含める）
• Vercel環境変数・Supabase secretsとして設定する

漏洩した場合は、Slack側でWebhookを無効化して新しいURLを再生成する。

問い合わせフォームの全体実装は問い合わせフォームをSupabase+Resend+Slackで作るで、Resendのメール送信実装はResendでメール送信を実装するで解説している。

まとめ

Slack Incoming Webhookは、HTTPSのPOSTリクエストを送るだけでSlackにメッセージを届けられる最もシンプルな通知の仕組みだ。問い合わせ受信・エラー通知・デプロイ完了など、個人開発のモニタリングに使える用途は多い。Webhook URLを環境変数で管理することと、エラーハンドリングを入れておくことを忘れなければ、実装はシンプルで安定して動く。