VSCodeでGASの開発をできるようにする
GASをVSCodeで書きたい
目次
GASはTypeScriptで書ける
Google Apps Scripts（GAS）はJavaScriptベースで作れた言語です。
初期のころはブラウザ上でコーディングしていく感じでしたがgoogleがclaspというツールを開発したおかげでローカル環境で開発、TypeScriptを変換してGASを書けるようになりました。
これによりVSCodeでも簡単に開発可能になりました。
-
TypeScriptを知らない方へ
TypeScriptはJavaScriptを静的型付をしてメンテナンス性を向上させた言語です。
型推論がある程度されるのでエディタが対応していれば入力補完がいい感じになります。
そしてVSCodeはTypeScriptの入力補完は高性能です。
(VSCode自体, Electron + Node.js + TypeScriptで作成されています)このページではTypeScript(.ts)前提で進めますが、JavaScript(.js)でもプッシュできます。
開発環境を構築する
1. Node.jsをインストールする
npmを使うのでNode.jsを使います。
LTS(推奨版)が無難です。この記事を書いたときは14.17.4でした
2. TypeScript、TSLinst、claspをインストール
TypeScriptで使うこの２つをインストール
1npm install -g typescript
2npm install -g tslint
で、今回の要であるclaspをインストール これにより、googleと通信可能になります
1npm install -g @google/clasp
3. Google Apps Script APIをオンにする
初期設定ではAPIは使えないようになっています。
Googleにログインして以下のURLからAPIをオンに変更してください。
https://script.google.com/home/usersettings
4. ワークスペースを作成する。
ワークスペースとなるディレクトリを作成します。
ここでは分かりやすくC直下にGASディレクトリを作成し、C:\GAS\test1で開発したいと思います。
1cd \
2mkdir GAS
3cd GAS
4mkdir test1
5cd test1
作成できたら
1npm init --y
でpackage.jsonを作成します。 そのあと定義ファイルが入ったファイルを取得します。
1npm i @types/google-apps-script --save-dev
これでVSCode上でも入力補完が使えるようになります。
5. claspを使っていろいろ弄ってみる
GASを弄るには最初にログインします。
1clasp login
を実行するとブラウザが立ち上がり、アクセス許可を聞いてくるので許可します。
次にプロジェクトを作成してみます。
"Hello"はプロジェクト名になります。
1clasp create --title "Hello" --rootDir ./src
すると以下のように聞いてくるので矢印キーで作成したいものを選びます。
1? Create which script? (Use arrow keys)
2> standalone
3 docs
4 sheets
5 slides
6 forms
7 webapp
8 api
ここではテストをしたいだけなのでstandaloneを選ぶことにします。
作成されたか確認してみます。
1clasp open
を実行するとブラウザで作成したプロジェクトが開かれます。
6. 実際に書いてpush, pullしてみる
ここからはVSCodeを使って実際に書いてみます。
1code .
このディレクトリをワークスペースとして開きます。 srcフォルダにHelloWorld.tsを作成し
1function Hello() {
2 Logger.log('HelloWorld')
3 }
をコピペして保存します。
このときlogを選択すると
1(method) GoogleAppsScript.Base.Logger.log(data: any): GoogleAppsScript.Base.Logger (+1 overload)
ちゃんとGASのメソッドの説明が読み込めていることが分かります。もちろん補完もされます。
これをプロジェクト側に反映したいと思います。
1clasp push
を実行するとpushします。
ブラウザでプロジェクトを確認するとHelloWorld.gsが作成されています
1// Compiled using test1 1.0.0 (TypeScript 4.3.5)
2function Hello() {
3 Logger.log('HelloWorld');
4}
逆にpullしたい場合はclasp pullをするだけです。
ブラウザ側でこんにちはに変えて保存
1// Compiled using test1 1.0.0 (TypeScript 4.3.5)
2function Hello() {
3 Logger.log('こんにちは');
4}
pullすると
1clasp pull
HelloWorld.jsがローカルに作成されます。
これでVSCodeで開発できるようになりました。
自分もこれで本格的にスプレッドシートのスクリプトを作成していきたいと思います。