【GAS開発】VSCodeでのデバッグと連携方法を徹底解説
今日はGASをVSCodeで開発する方法を学びたい。やっぱりエディタはVSCodeでしょ
猫男
catman
よし、catmanがGASとVSCodeの連携からデバッグ、実行まで徹底解説しよう。まずは、基本操作から押さえていこうか。
GASとVSCodeの連携方法
まずはGASをVSCodeで開発できる環境を整えるところから始めよう。
GAS連携の準備
VSCodeでGASを開発するためには、まずGASのAPIを有効化する必要があります。
また、Clasprという公式CLIツールを利用しましょう。
-
- まず、ターミナルを開いて以下のコマンドでClasprをインストールする。
npm install -g @google/clasp
-
- GoogleアカウントでClasprにログインします。コマンドを入力して、表示されたURLからログインします。
clasp login
-
- 次にプロジェクトファイルをダウンロードしたいプロジェクトのIDを取得し、プロジェクトをクローン。
clasp clone [プロジェクトID]
GASをVSCodeで開発する
これで、プロジェクトをVSCodeで開き、スクリプトの編集が可能になります。
GAS用の補完機能は、GAS専用の拡張機能をインストールすることで利用できます。
GASをVSCodeでデバッグする
VSCodeでデバッグを行うには、何をすればいいの？GASのエラーを見つけるのが難しくて…
猫男
catman
まずは、VSCodeでのデバッグ方法を学んでおくといい。主にクラウド上のデバッグになるが、シンプルなエラーチェックはVSCodeでも行えるのさ。
VSCodeでデバッグ
残念ながら、VSCode単体ではGASを直接デバッグすることはできません。
しかし、Logger.log()を使って、GAS内での変数や処理の流れを確認することができます。
また、ドキュメントやスプレッドシートに結果を出力して確認する方法もよく使われます。
function checkDebug() {
Logger.log('このメッセージがデバッグに使われます');
}
VSCodeからGASを実行する方法
次は、書いたGASスクリプトの実行についてです。
GASの実行
プロジェクトをVSCodeで編集したら、ターミナルから以下のコマンドを使ってアップロードし、実行できます。
clasp push
clasp run [スクリプト名]
これにより、編集したコードをGoogleの環境にプッシュし、実行することができます。
なるほど！これでGASの開発が楽にできるようになるんだね。
猫男
catman
その通りさ。実際に活用してみるといい。次のステップはバグをチェックして改善していくことだ。
練習問題
ここまでの内容を理解したか確認するために、簡単な問題を用意しました。
問題
以下のスクリプトを、VSCodeとClaspでGASに反映して実行してください。結果はConsoleで確認できます。
function testFunction() {
var message = 'Hello, GAS and VSCode!';
Logger.log(message);
}
解答・解説
解答手順
-
- VSCodeで新規にスクリプトファイルを作成し、上記のコードを貼り付けます。
- クローンしてあるプロジェクトフォルダに変更を保存。
- ターミナルでプロジェクトディレクトリへ移動し、次のコマンドを実行して反映：
clasp push
-
- 次に次のコマンドでGASを実行：
clasp run testFunction
- GASのダッシュボードまたは、claspの実行結果を確認し、ログに結果が出力されているのを確かめます。
解説
スクリプト内でLogger.log()を用いることで、実行中の状態を観察できます。
これを使いこなせれば、スクリプトのデバッグがより容易に進められるでしょう。