GAS×Claspを用いて最高なGAS開発環境の構築方法
この記事で学べる事
今回の記事では、Clasp×Gitを用いたGASのローカルでの管理方法とフォーマッタ―の利用の方法までを解説していこうと思います！
注意
今回の記事では、Node.jsやGitのセットアップについては省略させていただきます。まだの方は下のリンクよりセットアップをお願いします
なぜGASをローカルで管理する必要があるのか？
GASはオンラインエディター上で編集、実行することができるし、変更履歴などの機能が充実しているので一見,ローカルで管理する必要ないように思えてしまいます。しかし！オンラインエディター上では,VsCodeやCursorで利用できる生成ＡＩのアシスタント機能やGitによるバージョン管理やGithubActionsによるCl/CD,フォーマッターによるコードの整形などがすることができません！このような強力なツールを使用する事がオンラインエディター上ではできないため、これらを利用するためにローカルで管理する必要があるのです！
操作手順
- Claspの導入
- プロジェクトを作成or既存のプロジェクトに接続
- Prettierの導入(フォーマッター)
- Node.jsのコマンドを設定する
Claspの導入
まず↓のリンクよりGASAPIをオンにしてください！ Claspをインストールするには、以下のコマンドを実行します。
npm install -g @google/clasp
以下のコマンドを実行しGoogleアカウントへログインをする
clasp login
以下の画像のような画面になっていればOK！
プロジェクトを作成
Claspをインストールしたら、新しいGASプロジェクトを作成することができます。以下のコマンドを実行してみましょう。
clasp create <プロジェクト名>
こんな感じで各種,サービスと連携するかどうか選択する事ができる!
docs => Googleドキュメントと連携
sheet => Googleスプレッドシートと連携
slide => Googleスライドと連携
forms => Googleフォームと連携
webapp => ウェブアプリケーションとして開発する場合
api => 外部からアクセス可能なAPIとして開発する場合
一番上のstandalone(何とも連携しない)で作成した結果
.clasp.json
appsscript.json
上記のファイルが実行ディレクトリで作成されていればOK！
clasp push
上記コマンドでローカルでの変化をオンラインエディター上に反映させることができる！
他にもコマンドはあるので是非↓のGithubより調べてみて下さい~
既存のプロジェクトに接続
既存のGASプロジェクトに接続するには、以下のコマンドを実行します。
clasp clone <プロジェクトID>
GASのプロジェクトIDについて
https://script.google.com/home/projects/[プロジェクトID]/edit
GASのプロジェクトのURLのprojects/と/editの間にある値がプロジェクトのIDです
Prettierの導入(フォーマッター)
Prettierは、コードのフォーマットを自動で整えるためのツールです。Prettierをプロジェクトに導入するには、以下のコマンドを実行します。
npm install --save-dev prettier
Node.jsのコマンドを設定する
まず以下のコマンドでNode.jsの初期セットアップをします
npm init
Node.jsのコマンドを設定するには、package.jsonファイルにスクリプトを追加します。以下は、Prettierを使用してコードをフォーマットするためのスクリプトの例です。
"scripts": {
"format": "prettier --write '**/*.{js,ts}'",
},
成型前のコード
成型後のコード
以下のコマンドを実行して成型できていれば成功です！
npm run format
さらにgit pushとclasp pushを同時に行えるようにするために'package.json'ファイルにスクリプトを追加します。
"scripts": {
"format": "prettier --write '**/*.{js,ts}'",
"push": "git push && clasp push"
},
以上で設定は終わりです！
参考
Discussion