Typescriptを使ったGAS開発

Posted: 2020年01月06日/Under: News, IT technique, GCP/By: Akiyasu Maeda
Typescriptを使ったGAS開発

最初に

GASは以前までJavascript(Ecmascript)でしか開発ができず、またGoogleから提供される公式のローカルPCでの開発ルールがなかったため、クラウド上でコードを編集するのが標準的で、コードの管理もGitなどの管理ツールでできませんでした。
ただ、2018年にGoogleからClaspのツールが提供され、ローカルにjavascriptのコードをCloneやまたクラウド上にPushすることが可能になりました。
これにより一度Googleクラウド上からGASのプログラムを取得し、特定のGitサーバで管理し、最終的にGoogle Appにリリースするという方法が可能となりました。
さらに複数での共同開発も可能になったと言えるでしょう。

付け加えて、現在はローカルでTypescriptで編集し、それをそのままPushでき、Googleクラウド上で動作させることができるようになっています。
Javascriptだけでの開発だと開発者としては古い技術で開発をさせられていると感じてしまい、Typescriptでできるというのはモチベーションのアップや、今後Typescriptをやっていきたい人の練習にちょうど良いと考えております。

それでは今回はGAS開発する上で導入すると便利になるローカルの開発環境構築およびプログラムをGASにアップするプロセスについて記載させて頂きます。

node.jsやnpmのインストールなどは割愛します。

開発環境

  • iOS Version 10.15.1
  • VSCode Version: 1.41.1
  • Node.js Version: 11.9.0
  • npm Version: 6.13.4
  • TSlint Version: 5.20.1

Claspのインストール

ローカルのコンソールを開き、次のコマンドを実行してください。
npm i @google/clasp -g

GITのリポジトリの作成およびCloneの実行

よく使用されているGitサーバで各自作成をしてください。（弊社ではよくGitlabを使っています。）
プロジェクトのフォルダを作成し、そのフォルダにGITのCloneを実施します。
※Gitを使用しない場合はこの手順をスキップしても問題ありません。

GAS開発環境作成およびプロジェクト作成

    1. configure Google Apps Script API”の機能をONにします。
      下記のページで確認/変更ができます。
      https://script.google.com/home/usersettings

    2. ClaspでGASにログインを行います。
      ターミナルで下記のコマンドを実行してください。
      clasp login
      そうするとブラウザが開き、Googleのログイン画面が開きます。
      ログイン情報を入力し、ログインを行ってください。
      （ログイン後のページは閉じも大丈夫です。）
    3. GASのプロジェクトを作成します。プロジェクト名は”TS-sample”として作成します。
      下記のコマンドを実行します。
      clasp create TS-sample
    4. 下記の質問が表示されます。今回はサンプルのため”standalone”を選択します。
    5. 成功すると下記のメッセージが表示されます。
      “Created new standalone script: https://script.google.com/d/xxx-j_FUBeR4nTw7CK5gAkOOrmOzk8vi7Iud3szJX6mplzt1if3e4swBV/edit”
      このURLに含まれている下記の文字列が”scriptId”となります。
      “xxx-j_FUBeR4nTw7CK5gAkOOrmOzk8vi7Iud3szJX6mplzt1if3e4swBV”
  1. package.jsonを作成するため、下記のコマンドを実行します。
    npm init -y
  2. 次にClasp tslintをインストールするため、下記のコマンドを実行します。
    npm install @google/clasp tslint -D
  3. GASの定義ファイルをインストールするため、下記を実行します。
    npm install @types/google-apps-script -S
  4. tslintの定義ファイルを作成するため、下記を実行します。
    tslint --init
  5. prettierをインストールするため、下記を実行します。
    npm install prettier tslint-config-prettier tslint-plugin-prettier -D
  6. tslintの定義ファイル(tslint.json)の定義とprettierの設定を行います。tslint.jsonファイルを開き、下記のように編集してください。
    {
    "defaultSeverity": "error",
    "extends": [
    "tslint:recommended",
    "tslint-config-prettier"
    ],
    "jsRules": {},
    "rules": {
    "prettier": true,
    "interface-name": [false]
    },
    "rulesDirectory": ["tslint-plugin-prettier"]
    }

Visual Studio Codeのコードフォーマッタの設定

  1. VSCodeを開き、”Setting”画面を開きます。
  2. ファイルのアイコンを押下します。json形式のsettingファイルが表示されます。
  3. 下記のようにTypescriptファイルのときのみフォーマッタが行われるように設定し、保存します。

    {
    "[typescript]": {
    "editor.formatOnSave": false,
    "editor.codeActionsOnSave": {
    "source.fixAll.tslint": true
    }
    }
    }

プログラミング

  1. 環境が揃ったので、プログラムを変更していきます。
    ”Code.ts”ファイルを作成します。※すでに”Code.js”ファイルが存在する場合はファイル名を”Code.ts”に変更します。
  2. constとして文字列を宣言し、ログを出力するというプログラムを作成します。
    function myFunction() {
    const text = "Hello World";
    Logger.log(text);
    }

Google Cloud上へのpush

動作確認のため、Google Appにプログラムをpushします。
下記のコマンドを実行します。
clasp push

そうするとプログラムが自動でGASにコンバートされ下記のようになっています。

このプログラムを実行するとGASだけで開発した場合と同様に動作することが確認できます。

GitへのPush

下記のファイルをGitにcommitしpushしておけば、ソース管理や共同開発が可能になります。

  • GAS用のTypescriptファイル
  • GAS用の定義ファイルappsscript.json
  • npmの定義ファイルpackage.json
  • TSlint定義ファイルtslint.json

最後に

Claspの提供およびTypescriptの対応により、格段に開発のしやすさがアップし、Microsoft Excelのマクロのようなイメージは払拭されると思われます。
Gmail, Google Sheet, G-DriveなどGoogle Appsのサービスをコントロールできるため、これらのサービスを普段使用されている方は、自分のいつもの作業を自動化できるかもしれませんので、一度チャレンジしてもらえたら嬉しいです。

参考文献

Google Clasp Guide
GASをClaspとTypescriptでローカル開発してみた。(Clasp / Typescript / TSLint / Prettier)

カテゴリー