clasp/typescriptを使ってGASを書いてみよう

GAS
この記事は約8分で読めます。

今回はGASをGAS IDEで開発するのではなく、typescriptを使ってローカルのエディター(VScodeなど）で開発するための方法を紹介していきます。

このブログでも数多くGASで実装できるものの紹介などしていますが、実はほとんど私はclasp/tsで実装しています。好きな方を選んでもらえればいいとは思いますが、githubでの管理なども含めてローカルエディターでの開発が個人的にはメリットも多く採用しています。（github管理については、github assistantでも対応できますので、そちらで足りる方はassistant使ってもらうといいかと思います）

スポンサーリンク
もしも_楽天

claspで開発するメリット

個人的にclasp/typescriptを利用する理由としては、以下の点が自分の開発においてメリットがあるからです。

・typescriptでかけるため、型定義（正確には型注釈ではありますが）可能

・ローカルのgit管理が可能になる

・自分の好きなエディタで開発可能

上のようなメリットの恩恵が大きい方は、GASのメリットの一つである環境構築不要という点を破棄してでもやる価値はあるかと思います。

そうでないなら、GAS IDEで開発でも問題ないと思います。

それでは、インストールの方法から順番に見ていきます。

claspのインストール方法

ターミナルで以下を実行すればOKです。

npm install -g @google/clasp

npm（jsのパッケージマネジャー）をインストしていない人はそこからお願いします。

claspのログイン方法

インストールが終わったら、早速自分がGASを扱いたいアカウントにログインしていきましょう。ターミナルで以下のコマンドを実行するだけです。

clasp login

実行すると、以下のようなアカウント選択の画面がブラウザに立ち上がります。アカウントを選択して、認可を許可すると”Logged In….”というメッセージが表示されますので、これで無事ログインできました（ブラウザ閉じてもOKです）。

claspでGASを使うための事前準備

さて、これで早速コードを書いていきましょう！・・・・とはならず、もう少し設定にお付き合いください。

以下の説明は、googleのclaspライブラリ内をのdocsを説明しているだけなので、github見ながらやるよって方は以下のリンクを見ながら実施してもらってOKです。

https://github.com/google/clasp/blob/master/docs/typescript.md
github.com

claspのバージョンを確認する

まずは、以下のコマンドでinstallしたclaspのバージョンを確認してください。versionは1.5.0以上である必要があるので、それ以前のものをinstallしている場合、updateしてください。

clasp -v

この記事を見ながら、記事公開日時点でインストールされた方であれば、だいたい2.3系が入ってきていると思うので、無視していただいてもOKです。

npmにGASのためのtypescriptの定義を取り込む

このままだとnpmにGASの定義系が何も入っていない段階なので、まずはそこから取り込んでいきましょう。

npm i -S @types/google-apps-script

config fileを作成する（tsconfig.json)

次に、ECMASの設定などをするためのjsonファイルを作成していきます。

{
    "compilerOptions": {
      "lib": ["esnext"],
      "experimentalDecorators": true
    }
  }

libで利用するECMAScriptを選択できます。esnext以外でもes2019/es2018などでの設定も可能です。esnextとは、現状最新バージョンのECMAS＋次世代リリース機能も織り込む形になります。（ECMASは毎年更新されるので、数値が大体年次の数値です）。ただ、GASだとECMASの将来版までサポートしてるか毎回確認するのも億劫なので、自分は大体2019を使ってます（2021/6時点だったらの話で将来は別ですよ）。このポイントに関しては、先日頑張って調べて見たので、後ほど別記事にしてみます。

また、tsconfig(jsconfig）の設定内容は以下を参考にして下さい。

jsconfig.json Reference
View the reference for jsconfig.json.
code.visualstudio.com

実際にプロジェクトを作ってみる

GASのプロジェクトの場合、スタンドアローン型とコンテナバインド型の２つが設定できます。基本的なコマンドの構文及びオプションの内容は以下になります。

clasp create [--title "プロジェクト名"]　　[--type [docs/sheets/slides/forms]] [--rootDir <dir>] [--parentId <id>]

[ ]はオプションを意味します。大体のドキュメントで、[ ]はオプション（なくても動くよって意味）を意味するので、覚えておきましょう。

オプションの概要は以下です。

オプション名内容
titleプロジェクト名の設定
type新しくpjを作成する場合で、typeを特定すると、特定したタイプのファイル＋スクリプトが生成される。ただし、parentIdが指定されている場合は、無視される。defaultはstandalone
e.g. –type sheetでコマンドした場合、スプレッドシート＋スクリプトが作成される
rootDirclaspがプロジェクトファイルを保存するローカルディレクトリ。指定しない場合、claspはデフォルトでカレントディレクトリを使用。
parentIdプロジェクトの親ID
作成されたスクリプトプロジェクトがバインドされている親ファイルのドライブID。つまり、Google Doc、Google Sheet、Google Form、またはGoogle SlidesファイルのIDです。設定されていない場合は、スタンドアロンのスクリプトプロジェクトが作成されます。
clasp create options説明

それぞれでの、プロジェクトの作成方法を見ていきます。

スタンドアロンプロジェクトを作成する方法

まずは、保存用のフォルダを準備して、そちらに移動します。フォルダ名は自由に作成してください。

mkdir standalone
cd standalone

対象フォルダでコマンド実行します。スタンドアロンであれば、以下のコマンドだけで設定可能です。

clasp create

プロジェクト名やディレクトリなどを指定したい場合は、上のoptionを参考に追加していってください。

以下のような選択肢が表示されます。standaloneを作りたいので、今回はstandaloneを選択します。

選択して実行すると、scriptとappsscript.jsonが作成されます。

そうすると、standalone dirに以下のように作成されます。

それぞれ作成された、ファイルの中身を見ていきます。

【clasp.json】

{"scriptId":"1tDtVqk97q8GAhSdzhTTMnbzoMBLfskytna1W40Ml1jG3u5uPFE_WHr4M"}

先ほどターミナルでも表示された、scriptIdが格納されています。

【appsscript.json】

{
  "timeZone": "America/New_York",
  "dependencies": {
  },
  "exceptionLogging": "STACKDRIVER",
  "runtimeVersion": "V8"
}

いつもGAS Editorで見るjsonファイル（appsscript.json manifestファイル）のデータが格納されていますね。timeZoneはAsia/Tokyoに変えておくのをお勧めします。

スクリプトファイルの作成

ここに、実際のファイルを作成していきます。今回はmain.tsを作っていきましょう。ここで作るts（jsだとts2gasコンパイラで変換されないので、間違えずtsで作りましょう）がスクリプトになっていきます。

touch main.ts

main.ts（typescriptファイル）が作成されると思いますので、そこに適当にスクリプトを作成します。新規フォルダでappscriptのtypescript定義が含まれていない場合は、以下のコマンドを再度実行します。

npm i -S @types/google-apps-script

GASの定義がちゃんと認識されていれば、package.jsonにdependenciesで@type/google-apps-scriptのバージョンが定義されているはずです。

GAS環境に適用する方法

ローカルでスクリプトを作成したら、次はGASの環境に作成したスクリプトを送り込む必要があります。コピペしないでくださいね。ちゃんとコマンドが存在します。

clasp push

これで、晴れてGAS IDEにローカルで作成したスクリプトが反映されたことになります。

コンテナバインドプロジェクトを作成する方法

スタンドアロンプロジェクトでスクリプトをGAS IDEに反映させることができたら、次はコンテナバインド型です。

と言っても、clasp createで作成する部分以外は基本一緒なので、プロジェクト作成の部分だけ紹介します。

clasp create --type [docs/sheets/slides/forms]

自分の作成したいファイル（ドキュメント・スプレッドシート・スライド・フォーム）を選択して、–typeに渡してあげればOKです。

この後の流れは、スタンドアロンと同じですので、上の流れを見てみてください。

まとめ

今回は、【clasp/typescriptを使ってGASを書いてみよう】というテーマでclasp環境の構築や基本的なファイルの使い方を説明してきました。

claspのメリットが大きい方は使ってみる価値があると思います。

次回以降で、GAS IDEですでに作成したプロジェクトをローカルでカスタマイズする方法などを紹介します。

スポンサーリンク