DiscordのWebhookを使った通知パターン

DiscordのWebhookを使った通知パターン

TypeScriptとDiscord Webhookを使い、アプリケーションの出来事を自動で通知する仕組みを解説します。コード例を交えながら、分かりやすく通知を送るための手順を網羅しています。

Typescript #Discord#Typescript#通知

DiscordのWebhookを使った通知パターン

サムネイル

TypeScriptとDiscord Webhookを使い、アプリケーションの出来事を自動で通知する仕組みを解説します。コード例を交えながら、分かりやすく通知を送るための手順を網羅しています。

更新日: 7/6/2025

DiscordでWebhook URLを取得する

まず、通知を送信したいDiscordサーバーでWebhookのURLを取得します。

  1. Discordサーバーの設定メニューから「連携」を選択します。
  2. ウェブフック」の項目へ進み、「新しいウェブフック」ボタンをクリックします。
  3. ウェブフックの名前(ボット名として表示されます)と、通知を投稿したいチャンネルを設定します。
  4. 作成が完了したら、「ウェブフックURLをコピー」し、後で使えるように安全な場所に保管しておきます。このURLは外部に漏れないよう、厳重に管理してください。

通知パターンの実装例

Discordへの通知は、embedsという機能を使うことで、色やレイアウトを柔軟にカスタマイズできます。ここでは、いくつかの代表的な通知パターンを紹介します。

1. お知らせ

システムのメンテナンス情報など、汎用的なお知らせを送るための通知です。色は落ち着いた青色に設定しました。

async function sendInfoNotification(webhookUrl: string, title: string, message: string): Promise<void> {
  const payload = {
    embeds: [{
      title: `ℹ️ ${title}`,
      description: message,
      color: 3447003, // 青色
      timestamp: new Date().toISOString(),
    }],
  };
  // fetchによる送信処理は省略
  await fetch(webhookUrl, { method: 'POST', headers: {'Content-Type': 'application/json'}, body: JSON.stringify(payload) });
}

// 実行例
sendInfoNotification(
  process.env.DISCORD_WEBHOOK_URL || '',
  'システムメンテナンスのお知らせ',
  '7月3日 2:00-4:00の間、サービスを一時停止します。'
);

2. 成功

処理が正常に完了したことを知らせる通知です。ユーザー登録や記事公開など、ポジティブなイベントに使えます。色は分かりやすく緑色にしました。

async function sendSuccessNotification(webhookUrl:string, title: string, fields: {name: string, value: string}[]): Promise<void> {
  const payload = {
    embeds: [{
      title: `✅ ${title}`,
      color: 3066993, // 緑色
      fields: fields,
      timestamp: new Date().toISOString(),
    }],
  };
  // fetchによる送信処理は省略
  await fetch(webhookUrl, { method: 'POST', headers: {'Content-Type': 'application/json'}, body: JSON.stringify(payload) });
}

// 実行例
sendSuccessNotification(
  process.env.DISCORD_WEBHOOK_URL || '',
  '新規ユーザーが登録されました',
  [{ name: 'ユーザーID', value: 'user-12345' }, { name: '登録プラン', value: 'プレミアム' }]
);

3. 警告

即時の対応は不要なものの、確認を促したいイベントに使用します。例えば、特定のキーワードを含むコンテンツが投稿された際のレビュー依頼などに活用できます。色は警告を示す黄色です。

async function sendWarningNotification(webhookUrl: string, title: string, description: string): Promise<void> {
  const payload = {
    embeds: [{
      title: `⚠️ ${title}`,
      description: description,
      color: 16705372, // 黄色
      timestamp: new Date().toISOString(),
    }],
  };
  // fetchによる送信処理は省略
  await fetch(webhookUrl, { method: 'POST', headers: {'Content-Type': 'application/json'}, body: JSON.stringify(payload) });
}

// 実行例
sendWarningNotification(
  process.env.DISCORD_WEBHOOK_URL || '',
  'コンテンツの確認依頼',
  '「要確認」という単語を含む下書き記事が作成されました。レビューをお願いします。\n[記事を見る](https://example.com/drafts/xyz)'
);

まとめ

このように、embedscolortitlefieldsといった要素を使い分けることで、状況に応じた多彩な通知を簡単に実装できました。

通知の種類によって色やアイコンを変えて表現してみました。個人的にはSlackの通知よりも使用感よさげだったので、これからは個人で通知をつくるならDiscordかなと思ってます。

検索

検索条件に一致する記事が見つかりませんでした