GAS で Slack アプリ作る

$ npx clasp create --type webapp
$ npx clasp deploy

$ npx eslint --init
✔ How would you like to use ESLint? · problems
✔ What type of modules does your project use? · esm
✔ Which framework does your project use? · none
✔ Does your project use TypeScript? · Yes
✔ Where does your code run? · browser
✔ What format do you want your config file to be in? · JavaScript
Local ESLint installation not found.
The config that you've selected requires the following dependencies:

@typescript-eslint/eslint-plugin@latest @typescript-eslint/parser@latest eslint@latest
✔ Would you like to install them now with npm? · Yes

$ npm i -D prettier eslint-config-prettier

// eslint-disable-next-line no-undef
module.exports = {
    "env": {
        "browser": true,
        "es2021": true
    },
    "extends": [
        "eslint:recommended",
        "plugin:@typescript-eslint/recommended",
        'prettier',
    ],
    "parser": "@typescript-eslint/parser",
    "parserOptions": {
        "ecmaVersion": 12,
        "sourceType": "module"
    },
    "plugins": [
        "@typescript-eslint"
    ],
    "rules": {
    }
};

    "lint": "eslint \"src/**/*\" --ignore-path .gitignore --ext .js --ext .ts",
    "type-check": "tsc --noEmit --skipLibCheck",

$ npm i -D jest ts-jest @types/jest
$ npx jest --init
The following questions will help Jest to create a suitable configuration for your project

✔ Would you like to use Jest when running "test" script in "package.json"? … yes
✔ Would you like to use Typescript for the configuration file? … yes
✔ Choose the test environment that will be used for testing › node
✔ Do you want Jest to add coverage reports? … yes
✔ Which provider should be used to instrument code for coverage? › v8
✔ Automatically clear mock calls and instances between every test? … no
$ npx ts-jest config:init

describe("test", () => {
    test("test", () => {
        expect(1 + 2).toBe(3)
    })
})

$ npm test
> jest

 PASS  src/example.test.ts
  test
    ✓ test (2 ms)

----------|---------|----------|---------|---------|-------------------
File      | % Stmts | % Branch | % Funcs | % Lines | Uncovered Line #s 
----------|---------|----------|---------|---------|-------------------
All files |       0 |        0 |       0 |       0 |                   
----------|---------|----------|---------|---------|-------------------
Test Suites: 1 passed, 1 total
Tests:       1 passed, 1 total
Snapshots:   0 total
Time:        1.84 s
Ran all test suites.

$ npx mrm@2 lint-staged

module.exports = {
  "**/*.ts": (filename) => ["tsc -p tsconfig.json --noEmit", "eslint"],
};

{
	"blocks": [
		{
			"type": "section",
			"text": {
				"type": "mrkdwn",
				"text": "こんにちは！\n問い合わせの種類を以下から選択してください！"
			}
		},
		{
			"type": "divider"
		},
		{
			"type": "section",
			"text": {
				"type": "mrkdwn",
				"text": "新規開発に関する質問"
			},
			"accessory": {
				"type": "button",
				"text": {
					"type": "plain_text",
					"text": "質問する",
					"emoji": true
				},
				"value": "develop",
				"action_id": "question_develop"
			}
		},
		{
			"type": "section",
			"text": {
				"type": "mrkdwn",
				"text": "バグ報告"
			},
			"accessory": {
				"type": "button",
				"text": {
					"type": "plain_text",
					"text": "バグを報告",
					"emoji": true
				},
				"value": "bug",
				"action_id": "question_bug"
			}
		}
	]
}

/**
 * Slack API をコールする
 */
export const slackApi =
  (token: string) => (apiMethod: string) => (payload: object) =>
    UrlFetchApp.fetch(`https://www.slack.com/api/${apiMethod}`, {
      method: "post",
      contentType: "application/x-www-form-urlencoded",
      headers: { Authorization: `Bearer ${token}` },
      payload: payload,
    });

/**
 * response_url を使って応答するとき
 */
export const respond = (responseUrl: string, payload: object | string) =>
  UrlFetchApp.fetch(responseUrl, {
    method: "post",
    contentType: "application/json; charset=utf-8",
    payload: JSON.stringify(
      typeof payload === "string" ? { text: payload } : payload
    ),
  });

/**
 * Slack に応答する
 */
export const ack = (payload: object | string) =>
  ContentService.createTextOutput(
    typeof payload === "string" ? payload : JSON.stringify(payload)
  );

export type Command = Record<
  string,
  (payload: any) => GoogleAppsScript.Content.TextOutput
>;

export type Commands = {
  channelEvent?: Command;
  globalShortcut?: Command;
  messageShortcut?: Command;
  blockAction?: Command;
  viewSubmission?: Command;
  slashCommand?: Command;
};
const parseRequest = (e: GoogleAppsScript.Events.DoPost) => {
  if (e.postData.type === "application/json") {
    return JSON.parse(e.postData.contents);
  } else if (typeof e.parameters.command !== "undefined") {
    return Object.fromEntries(
      Object.entries(e.parameters).map(([key, val]) => [key, val[0]])
    );
  } else if (
    e.postData.type === "application/x-www-form-urlencoded" &&
    Array.isArray(e.parameters.payload) &&
    e.parameters.payload.length > 0
  ) {
    return JSON.parse(e.parameters.payload[0]);
  } else {
    return { token: "" };
  }
};

const isChannelEvent = (commands: Commands, payload: any) =>
  typeof payload?.event.channel !== "undefined" &&
  typeof commands?.channelEvent[payload.event.channel] === "function";

const isGlobalShortcut = (commands: Commands, payload: any) =>
  payload.type === "shortcut" &&
  typeof commands?.globalShortcut[payload.callback_id] === "function";

const isMessageShortcut = (commands: Commands, payload: any) =>
  payload.type === "message_action" &&
  typeof commands?.messageShortcut[payload.callback_id] === "function";

const isBlockActions = (commands: Commands, payload: any) =>
  payload.type === "block_actions" &&
  Array.isArray(payload.actions) &&
  payload.actions.length > 0 &&
  typeof payload.actions[0].action_id !== "undefined" &&
  typeof commands?.blockAction[payload.actions[0].action_id] === "function";

const isViewSubmission = (commands: Commands, payload: any) =>
  payload.type === "view_submission" &&
  typeof commands?.viewSubmission[payload.view.callback_id] === "function";

const isSlashCommand = (commands: Commands, payload: any) =>
  typeof payload.command !== "undefined" &&
  typeof commands?.slashCommand[payload.command] === "function";

export const createCommands =
  (command: Commands) =>
  (e: GoogleAppsScript.Events.DoPost): GoogleAppsScript.Content.TextOutput => {
    // 不正リクエスト
    if (typeof e.postData === "undefined") return ack("invalid request");
    const payload = parseRequest(e);
    if (payload.token !== process.env.SLACK_VERTIFICATION_TOKEN)
      return ack("invalid request");

    // チャレンジリクエスト
    if (typeof payload.challenge !== "undefined") return ack(payload.challenge);

    // チャンネルイベント
    if (isChannelEvent(command, payload))
      return command.channelEvent[payload.event.channel](payload);

    // グローバルショートカット
    if (isGlobalShortcut(command, payload))
      return command.globalShortcut[payload.callback_id](payload);

    // メッセージショートカット
    if (isMessageShortcut(command, payload))
      return command?.messageShortcut[payload.callback_id](payload);

    // ブロックアクション
    if (isBlockActions(command, payload))
      return command?.blockAction[payload.actions[0].action_id](payload);

    // モーダルの送信イベント
    if (isViewSubmission(command, payload))
      return command?.viewSubmission[payload.view.callback_id](payload);

    // スラッシュコマンド
    if (isSlashCommand(command, payload))
      return command?.slashCommand[payload.command](payload);

    // その他
    return ack("");
  };

global.doPost = createCommands({
  slashCommand: {
    "/hello": () =>
      ContentService.createTextOutput(
        JSON.stringify({
          text: "Hello World!!",
          response_type: "in_channel",
        })
      ).setMimeType(ContentService.MimeType.JSON),
  },
  globalShortcut: {
    question: (payload) => {
      slackApi(process.env.SLACK_BOT_TOKEN)("views.open")({
        view: JSON.stringify(questionStart()),
        trigger_id: payload.trigger_id,
        user_id: payload.user.id,
      });
      return ack("");
    },
  },
  blockAction: {
    question_bug: (payload) => {
      slackApi(process.env.SLACK_BOT_TOKEN)("views.push")({
        view: JSON.stringify(bugModal()),
        trigger_id: payload.trigger_id,
      });
      return ack("");
    },
    question_develop: (payload) => {
      slackApi(process.env.SLACK_BOT_TOKEN)("views.push")({
        view: JSON.stringify(devModal()),
        trigger_id: payload.trigger_id,
      });
      return ack("");
    },
  },
  viewSubmission: {
    "post-bug": (payload) => {
      const state = toInputValues(payload.view.state.values);
      slackApi(process.env.SLACK_BOT_TOKEN)("chat.postMessage")({
        channel: "dev",
        text: `<@${payload.user.id}> さんからバグの報告がありました！\n\n*URL*\n\n${state.url}\n\n*やったこと*\n\n${state.actions}\n\n*期待する動き*\n\n${state.expect}\n\n*実際の動き*\n\n ${state.actual}`,
      });
      return ack("");
    },
  },
});