Slack Bot：Claude Code 实战指南

Slack Bot开发を通过 Claude Code 提高效率

Slack Botを使えば、チーム内の工作流を自动化し、業務効率を大幅に改善可以。Bolt SDK使用…的开发は比較的很简单が、事件処理や模态框构建には多くの模板代码が是必要的。Claude Codeを活用して、高效地Slack Botを构建吧。

项目のセットアップ

> Slack Botの项目をBolt SDKで创建して。
> TypeScript、Socket Mode支持で。

npm init -y
npm install @slack/bolt @slack/web-api
npm install -D typescript @types/node tsx

// src/app.ts
import { App, LogLevel } from '@slack/bolt';

const app = new App({
  token: process.env.SLACK_BOT_TOKEN!,
  signingSecret: process.env.SLACK_SIGNING_SECRET!,
  socketMode: true,
  appToken: process.env.SLACK_APP_TOKEN!,
  logLevel: LogLevel.INFO,
});

// ボットの起動
(async () => {
  await app.start();
  console.log('Slack Bot is running!');
})();

export default app;

スラッシュコマンドの实现

> /task コマンドで任务管理する機能を作って。
> 添加、列表、完成の3つのサブコマンドに支持して。

// src/commands/task.ts
import { App } from '@slack/bolt';

interface Task {
  id: string;
  title: string;
  assignee: string;
  completed: boolean;
  createdAt: string;
}

const tasks = new Map<string, Task[]>();

export function registerTaskCommand(app: App) {
  app.command('/task', async ({ command, ack, respond }) => {
    await ack();

    const [action, ...args] = command.text.split(' ');
    const channelId = command.channel_id;

    switch (action) {
      case 'add': {
        const title = args.join(' ');
        if (!title) {
          await respond('タスク名を入力してください: `/task add タスク名`');
          return;
        }

        const channelTasks = tasks.get(channelId) || [];
        const newTask: Task = {
          id: `task-${Date.now()}`,
          title,
          assignee: command.user_id,
          completed: false,
          createdAt: new Date().toISOString(),
        };
        channelTasks.push(newTask);
        tasks.set(channelId, channelTasks);

        await respond({
          blocks: [
            {
              type: 'section',
              text: {
                type: 'mrkdwn',
                text: `タスクを追加しました: *${title}*`,
              },
            },
          ],
        });
        break;
      }

      case 'list': {
        const channelTasks = tasks.get(channelId) || [];
        if (channelTasks.length === 0) {
          await respond('タスクはありません');
          return;
        }

        const taskList = channelTasks
          .map((t, i) => {
            const status = t.completed ? '~' : '';
            const check = t.completed ? ':white_check_mark:' : ':black_square_button:';
            return `${check} ${status}${t.title}${status}`;
          })
          .join('\n');

        await respond({
          blocks: [
            {
              type: 'section',
              text: { type: 'mrkdwn', text: `*タスク一覧*\n${taskList}` },
            },
          ],
        });
        break;
      }

      default:
        await respond('使い方: `/task add タスク名` | `/task list`');
    }
  });
}

模态框の实现

> フィードバック发送用の模态框实现。
> 表单の输入验证も含めて。

// src/views/feedback-modal.ts
import { App } from '@slack/bolt';

export function registerFeedbackModal(app: App) {
  // 模态框を開くショートカット
  app.shortcut('open_feedback', async ({ shortcut, ack, client }) => {
    await ack();

    await client.views.open({
      trigger_id: shortcut.trigger_id,
      view: {
        type: 'modal',
        callback_id: 'feedback_submission',
        title: { type: 'plain_text', text: 'フィードバック' },
        submit: { type: 'plain_text', text: '送信' },
        blocks: [
          {
            type: 'input',
            block_id: 'category_block',
            label: { type: 'plain_text', text: 'カテゴリ' },
            element: {
              type: 'static_select',
              action_id: 'category',
              options: [
                { text: { type: 'plain_text', text: 'バグ報告' }, value: 'bug' },
                { text: { type: 'plain_text', text: '機能要望' }, value: 'feature' },
                { text: { type: 'plain_text', text: 'その他' }, value: 'other' },
              ],
            },
          },
          {
            type: 'input',
            block_id: 'description_block',
            label: { type: 'plain_text', text: '詳細' },
            element: {
              type: 'plain_text_input',
              action_id: 'description',
              multiline: true,
              min_length: 10,
              max_length: 1000,
            },
          },
          {
            type: 'input',
            block_id: 'priority_block',
            label: { type: 'plain_text', text: '優先度' },
            element: {
              type: 'radio_buttons',
              action_id: 'priority',
              options: [
                { text: { type: 'plain_text', text: '高' }, value: 'high' },
                { text: { type: 'plain_text', text: '中' }, value: 'medium' },
                { text: { type: 'plain_text', text: '低' }, value: 'low' },
              ],
            },
          },
        ],
      },
    });
  });

  // 模态框发送の処理
  app.view('feedback_submission', async ({ ack, view, client, body }) => {
    await ack();

    const values = view.state.values;
    const category = values.category_block.category.selected_option?.value;
    const description = values.description_block.description.value;
    const priority = values.priority_block.priority.selected_option?.value;

    // フィードバックチャンネルに发布
    await client.chat.postMessage({
      channel: process.env.FEEDBACK_CHANNEL_ID!,
      blocks: [
        {
          type: 'section',
          text: {
            type: 'mrkdwn',
            text: `*新しいフィードバック*\n*カテゴリ:* ${category}\n*優先度:* ${priority}\n*内容:* ${description}\n*投稿者:* <@${body.user.id}>`,
          },
        },
      ],
    });
  });
}

事件リスナー

// src/events/index.ts
import { App } from '@slack/bolt';

export function registerEvents(app: App) {
  // メンション支持
  app.event('app_mention', async ({ event, say }) => {
    await say({
      text: `<@${event.user}> お呼びですか？ \`/task\` コマンドで何かお手伝いします！`,
      thread_ts: event.ts,
    });
  });

  // 新メンバー参加時
  app.event('member_joined_channel', async ({ event, client }) => {
    await client.chat.postMessage({
      channel: event.channel,
      text: `<@${event.user}> さん、ようこそ！チャンネルガイドを確認してくださいね。`,
    });
  });
}

总结

Slack BotのBolt SDKとClaude Codeを組み合わせれば、チーム業務の自动化ツールを快速构建可以。チャットボット开发指南やWebhook实现也可以参考。

Slack Bolt SDK的详细信息请参阅Bolt for JavaScript官方文档。