BLOGGAS+Clasp+TypeScript環境作ってみた

たっちゃん
  1. HOME
  2. ブログ
  3. バックエンド
  4. GAS+Clasp+TypeScript環境作ってみた

今回はタイトルに記載した環境を作ってみようと思います。
経緯としては、slackコミュニティを手動で招待するのがしんどくなったので、GoogleFormからリクエストがきたら招待メールを自動で発行したいと思っていました。
その中で一番手軽に実装できそうだったのでこちらを採用しました。
自動招待は次回やるとして、今回は環境だけ作成しようと思います。

目次

  1. 使う環境
    1. GAS
    2. Clasp
    3. TypeScript
  2. いざ環境構築
    1. Claspのインストール
    2. Claspでローカル環境を作成
    3. ローカル開発用のパッケージを導入していく
    4. TypeScriptの利用準備
    5. appsscript.jsonをちょこっと修正
    6. eslintの設定
  3. まとめ

使う環境

GAS

Google Apps Scriptの略
Googleのサービスの処理をこなす便利なスクリプト

Clasp

GASのローカル環境を提供してくれるツール
そのままGASで開発するとしんどいので、ローカルで編集するために導入します。

TypeScript

JavaScriptをベースに静的型付け言語
書き方は基本はJavaScriptと書き方一緒ですが、補完でバンバン書けるようになるので便利!
次回投稿予定のSlack API利用時に説明します。

いざ環境構築

Claspのインストール

Claspをグローバルにインストール

npm i -g @google/clasp

Claspでローカル環境を作成

作業ディレクトリを作成して以下コマンドを入力

googleアカウントでログイン

clasp login

プロジェクトを作成
質問されるので、standaloneを選択

clasp create <プロジェクト名>
? Create which script?
❯ standalone
  docs
  sheets
  slides
  forms
  webapp
  api

ローカル開発用のパッケージを導入していく

作業ディレクトリに移動して、パッケージ周りを導入していく
必要なパッケージと同時にeslintなども一緒に導入

npmの初期化

npm init

パッケージを一気に導入

npm i -S @google/clasp @types/google-apps-script @types/node @typescript-eslint/eslint-plugin @typescript-eslint/parser eslint eslint-config-prettier eslint-plugin-prettier prettier@typescript-eslint/parser eslint

TypeScriptの利用準備

プロジェクトルートにtsconfig.jsを作成して以下を記述

{
  "compilerOptions": {
    "lib": ["esnext"], // esnextを使用
    "types": [
      "@types/node", 
      "@types/google-apps-script"
    ] // プロジェクトで使用する型定義を列挙
  }
}

appsscript.jsonをちょこっと修正

timezoneをAsia/Tokyoに変更

{
    "timeZone": "Asia/Tokyo",
    "dependencies": {
    },
    "exceptionLogging": "STACKDRIVER",
    "runtimeVersion": "V8"
  }
}

eslintの設定

これは必須じゃないのですが、コードを綺麗に保つために入れます。
今回の記事とは主旨がずれてしまうので、説明はありません

module.exports = {
  extends: [
    'eslint:recommended',
    'plugin:prettier/recommended'
  ],
  plugins: [
    '@typescript-eslint',
    'prettier'
  ],
  parser: '@typescript-eslint/parser',
  parserOptions: {
    sourceType: 'module',
  },
  rules: {
    'prettier/prettier': [
      'error',
    ],
  }
}

以上!

まとめ

今回は環境構築だけなので、これで何作れるの?って感じですが、
次回実際に使いながら説明した記事を投稿しようと思います。
それでは〜