SCALE — Build Lab
開発パターン · TYPESCRIPT PATTERN

Slack Bot 連携

CATEGORY開発パターン TYPETypeScript Pattern EFFORT90〜240分 DIFFICULTY
PRIMARY CODE
ts
// Slack Bot 投稿(Bot Token + chat.postMessage)
export async function slackPost(opts: {
  token: string;
  channel: string;
  text: string;
  thread_ts?: string;
  blocks?: any[];
}): Promise<{ ok: boolean; ts?: string; error?: string }> {
  const res = await fetch('https://slack.com/api/chat.postMessage', {
    method: 'POST',
    headers: {
      'Authorization': `Bearer ${opts.token}`,
      'Content-Type': 'application/json; charset=utf-8',
    },
    body: JSON.stringify({
      channel: opts.channel,
      text: opts.text,
      ...(opts.thread_ts && { thread_ts: opts.thread_ts }),
      ...(opts.blocks && { blocks: opts.blocks }),
    }),
  });
  return await res.json();
}

// 使い方:
// await slackPost({
//   token: process.env.SLACK_BOT_TOKEN!,
//   channel: '#general',
//   text: '本日の日報を投稿しました',
//   blocks: [
//     { type: 'header', text: { type: 'plain_text', text: '日報 2026-05-04' } },
//     { type: 'section', text: { type: 'mrkdwn', text: '*完了:* タスクA / タスクB' } },
//   ],
// });
前提条件
Tailwind CSS v4TypeScript 5
USE CASES
  • 日報自動投稿
  • 通知システム

Slack Bot 連携

:LiTarget: 用途

Slack Bot Token で投稿・スレッド返信・通知を送るパターン。

:LiSparkle: 特徴

  • 投稿
  • スレッド返信
  • ブロックキット
  • リアクション

:LiCode: コード(コピペ用)

// Slack Bot 投稿(Bot Token + chat.postMessage)
export async function slackPost(opts: {
  token: string;
  channel: string;
  text: string;
  thread_ts?: string;
  blocks?: any[];
}): Promise<{ ok: boolean; ts?: string; error?: string }> {
  const res = await fetch('https://slack.com/api/chat.postMessage', {
    method: 'POST',
    headers: {
      'Authorization': `Bearer ${opts.token}`,
      'Content-Type': 'application/json; charset=utf-8',
    },
    body: JSON.stringify({
      channel: opts.channel,
      text: opts.text,
      ...(opts.thread_ts && { thread_ts: opts.thread_ts }),
      ...(opts.blocks && { blocks: opts.blocks }),
    }),
  });
  return await res.json();
}

// 使い方:
// await slackPost({
//   token: process.env.SLACK_BOT_TOKEN!,
//   channel: '#general',
//   text: '本日の日報を投稿しました',
//   blocks: [
//     { type: 'header', text: { type: 'plain_text', text: '日報 2026-05-04' } },
//     { type: 'section', text: { type: 'mrkdwn', text: '*完了:* タスクA / タスクB' } },
//   ],
// });

:LiHandPointer: 使い方

対象プロジェクトに該当ファイルをコピーして、props を流し込むだけ。

:LiAlertCircle: 注意事項

  • 依存パッケージを忘れず追加