claspを使ってGoogle Apps Scriptの開発環境を構築してみた

はじめに

アノテーションの髙嶋です

今回はGoogle Apps Script（以降、GAS）の開発環境を自端末内に構築した際の手順を書いています。

GASにはGoogleが提供しているWEBエディターがあるので、そちらを使用すればすぐにプログラムを書き始めることができます。 私はVisual Studio Code（以降、VSCode）を使用したいので、今回のような環境を構築しています。

実行環境

今回の実行環境の情報です。
claspというNode.jsのパッケージを使用するため、Node.jsがインストールされている必要があります。

node --version
v16.8.0

npm --version
7.22.0

claspの詳細はこちらで確認できます。
https://github.com/google/clasp

環境構築

設定

下記からGoogle Apps Script APIを有効化します。
https://script.google.com/home/usersettings

パッケージインストール

npmを使用して必要なパッケージをインストールします。実行はVSCodeのターミナルから行っています。

npm init -y
npm install @google/clasp -g
npm install @types/google-apps-script

※@types/google-apps-scriptはコーディング時に、GASの関数を表示してくれるようになるパッケージです。

処理が完了すると、下記のようにフォルダーとファイルが作成されます。
（今回は触りませんので、中身に関しては割愛します）

./
├ node_modules
├ package.json
└ package-lock.json

Googleアカウントの認証

下記コマンドを実行してGoogleへの認証を行います。 認証することでGoogle環境とファイルのやり取りができるようになります。

clasp login --no-localhost

コマンドを実行すると、ターミナル上にURLが出力されます。そのアドレスへアクセスすると、ログインと権限の許可が求められます。

アカウントを選択して、

claspからのアクセスを許可して、

表示された認証コードをコピーして、

ターミナルへ貼り付けます。

認証されれば、環境構築は完了です。

プログラム作成

構築した環境でプログラム作成＆デプロイします。

新規作成

下記コマンドを実行して、アプリケーションを新規作成します。 どの形式で作成するか確認されるので、今回は"standalone"を選択します。

clasp create

たとえばsheetsを選択するとスプレッドシートと紐づいた状態で作成されます。そうするとスプレッドシートが更新されたタイミングで処理を実行する、などということができるようになります。

処理が完了すると下記のファイルが作成されます。
（これも今回は触りません）

./
├ .clasp.json
└ appsscript.json

また、マイドライブ直下にアプリケーションが作成されます。

次にソースファイルを作成します。 今回はログを出力するだけの簡単な処理を書いています。

main.js

function test() {
    console.log('Hello World!');
}

おまけ

前述したパッケージを入れていると、GASの関数を記述する際にこのような感じで表示してくれます。

デプロイ

pushコマンドを実行して、作成したソースファイルをGoogle環境へデプロイします。

clasp push

openコマンドを実行すると、Google環境にあるアプリケーションがWEBエディターで表示されます。

clasp open

ローカル環境で作成したソースファイルがデプロイされていることが確認できました。 ファイルの拡張子がgsとなっていますが、これはpush時にclaspが変換してくれます。

動作確認

WEBエディター上で実行します。
実行ボタンを押すことでログが出力され、動作することが確認できました。

もしローカル環境でプログラムを修正したら、再度pushすればGoogle環境のソースを更新できます。

注意

pushするとすべてのソースファイルがローカル環境のものに入れ替わります。
もしGoogle環境にしか存在しないソースファイルがあった場合はそのファイルは削除されます。

もしWEBエディター側で修正した場合

下記コマンドを実行することで、Google環境にあるソースをローカル環境側へ取得できます。 この時、拡張子はgsからjsへ変換して取得されます。

clasp pull

claspを使用するメリット/デメリット

私が思うclaspを使用するメリット/デメリットです。人によってはもっと色々あると思います。

メリット

• 自分が慣れたエディターを使用できる
• オフラインでもコーディングできる
• バージョン管理システムを使った管理がしやすい

デメリット

• 開発環境の構築が必要になる
• パッケージのコマンドを覚える必要がある

最後に

今回はGASの開発環境の構築に関して書いてみました。 環境構築の手間はありますが、これによりVSCodeの拡張機能やnpmのパッケージが使用できるようになります。

たとえばLinterを使用することで未使用の変数やバグになりそうな箇所を教えてもらえるので、品質向上が図れます。それらに関しても今後、記事を書ければと思います。

最後までお読みいただきありがとうございました。 それでは、また次の記事でお会いしましょう。

アノテーション株式会社について

アノテーション株式会社は、クラスメソッド社のグループ企業として「オペレーション・エクセレンス」を担える企業を目指してチャレンジを続けています。「らしく働く、らしく生きる」のスローガンを掲げ、様々な背景をもつ多様なメンバーが自由度の高い働き方を通してお客様へサービスを提供し続けてきました。現在当社では一緒に会社を盛り上げていただけるメンバーを募集中です。少しでもご興味あれば、アノテーション株式会社WEBサイトをご覧ください。