📌

WebStormでGAS+clasp+TypeScriptを扱うための手順

2020/12/09に公開

TypeScript

tech

前書き

この記事はUnityゲーム開発者ギルド2 Advent Calendar 20209日目の記事です。
前回はりべるんさんの自作ゲームのストーリーや設定についてあれこれ考えたお話でした！

今回は最近趣味で触っている「Google App Script(GAS)」について書こうと思います。

GASはどんなことに使えるのかは、こちらの記事を見ていただいた方がイメージも付きやすいと思うので参考にしていただければと思います。

Google Apps Script(GAS)でできること・活用事例25選｜Yoshio Kimura｜note

GASはブラウザ上のエディタでも記載することが可能なのですが、claspというライブラリを使うことで、ローカルのIDE(VisualStudioCodeやWebStormなど)で記述することが可能になります。

UDGDの中には「Unity」で使う「Rider」も含まれてる「Jetbrains All Products Pack」を買ってる方もいらっしゃると思うので、今回はその中に含まれている「WebStorm」を用いてclasp環境でGAS+型を指定できるTypeScriptを導入して書いてみようと思います。

動作、確認環境

Windows10
WebStorm 2020.2.2

claspの導入

導入自体は、以下の記事が参考になりましたので、説明は省かせていただきます。

GAS用のCLIツール clasp を使ってGASをローカルで開発して実行するの巻。 - Qiita

ローカル環境構築

ローカル環境にclaspを入れ、WebStormのプロジェクトの作成までの流れを説明します。
以下の記事を参考にしています。

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

スプレッドシートIDの取得

まずはclasp環境を構築するために必要なGASのプロジェクトのスクリプトIDをコピーするために、先にGASのプロジェクトを作っておきます。

作成後、ファイル→プロジェクトのプロパティを選択後、無題のプロジェクトの名前を変更するとScriptIDが表示されますのでコピーします。

実行環境のClasp対応

次にclaspを入れるフォルダを作成します。
今回は説明のためフォルダ名を「test_clasp」にします。

次にコマンドプロンプトを起動し、先程作成した「test_clasp」までcdで移動し、下記のコマンドを上から順に入力します。

<scriptId>の部分は先程コピーしたスクリプトIDを入力してください。

npm入れてる前提なので、インストールされてない方はインストールをしてください。

clasp clone <scriptId>
npm init -y   // package.json作成
npm install @google/clasp tslint -D  // claspのパッケージとtypescriptのlintを追加
npm install @types/google-apps-script -S  // gasの型定義パッケージ
tslint --init // ここがうまくいかなかったので、事前にnpm install tslint typescript -g をした

今回ソースコードをsrc用のフォルダに記載したかったので、
srcフォルダを作成し、.clasp.jsonにrootDirを追加します。

{
  "scriptId":"scriptIDが入っています",
  "rootDir": "src"
}

このsrcフォルダがGASと同期するコードのディレクトリにしたいので、appscript.jsonもここに移動します。

ここまで来るとフォルダ構成が以下のようになっているはずです。

test_clasp
|-- src            
	  |-- appsscript.json
    |-- Code.ts    //このあと追加するファイル。このファイルをCode.gsに変換させる役割を持つ。
|-- .clasp.json  
|-- Code.js        //これはClone時のCode.gs。今回はTypeScriptを使うためこれは使わないので消しても大丈夫
|-- package.json   
|-- tsconfig.json
|-- tslint.json

WebStormでスクリプト編集

次にWebStormのIDEを開き、「File」→「Open」を選択し、先程作成したClaspのフォルダを指定するとプロジェクトが開かれます。

次にsrcフォルダ直下に「Code.ts(TypeScriptFile)」を追加します。

今回はローカルの環境がウェブの環境に反映がされてるか確認するため、実行されたら「シート1」という名前のシートの1行1列目にHelloWorldと記述する簡易的なスクリプトを作ります。

function HelloWorld(){
    const sheet = SpreadsheetApp.getActive().getSheetByName('シート1');
    sheet.getRange(1,1).setValue('HelloWorld');
}

上記の設定がうまく行っていると、GASについてのインテリジェンスも効くようになっているはずです。

ウェブ上のエディタに反映させる

再びコマンドプロンプトに戻り、以下のコマンドを上から順番に入力します。

clasp push  //これでCode.tsの内容をGASに反映させる
clasp open  //ウェブのGASのエディタを開く

ウェブのエディタが開かれると、Code.gsが先程のTypeScriptのコードがJavaScriptに変換された状態で記述されています。

// Compiled using ts2gas 3.4.4 (TypeScript 3.6.4)
var exports = exports || {};
var module = module || { exports: exports };
function HelloWorld() {
    var sheet = SpreadsheetApp.getActive().getSheetByName('シート1');
    sheet.getRange(1, 1).setValue('HelloWorld');
}