おはようございます！マネジメントオフィスいまむらの今村敦剛です。
Google Apps Script（GAS）、めちゃくちゃ便利ですよね！このGASのコーディングをローカル環境でやって、自動でGASに反映させる方法を備忘録代わりにまとめます。今回は実践です。
前回の記事はこちら
-
-
GASをローカルで開発。claspを使ったVS Code連携と自動同期の設定方法(1)【環境構築編】
おはようございます！マネジメントオフィスいまむらの今村敦剛です。 Google Apps Script（GAS）、めちゃくちゃ便利ですよね！このGASのコーディングをローカル環境でやって、自動でGAS ...
どうやってVS Codeで書くの？
今回はついに、ローカル環境でGASプロジェクトを実際に作成・編集していく【実践編】です。新規プロジェクトの作成はもちろん、すでに作ってある既存プロジェクトをローカルに持ってくる方法も解説します。
実践①：新しいGASプロジェクトをローカルで作ってみよう！
まずは、まっさらな状態から新しいプロジェクトをローカルで作成するフローです。
ステップ1：プロジェクト用のフォルダを準備する
最初に、PCの中にGASプロジェクトのソースコードを置いておくための「作業フォルダ」を用意しましょう。
ここで一つ注意点ですが、OneDriveやDropboxのような、ファイルを自動で同期するフォルダの直下で作業するのは避けるのがおすすめです。意図しないタイミングでファイルが書き換わって、予期せぬエラーの原因になることがあるからです。
C:\Users\あなたのユーザー名\devのような、シンプルな階層のフォルダを作っておくと安心です。
フォルダを作ったら、ターミナルでその場所に移動しておきましょう。
Bash
# 例：Windowsでdevフォルダに移動する場合
cd C:\Users\あなたのユーザー名\dev
# 例：Macでdevフォルダに移動する場合
cd ~/dev
ステップ2：clasp createでプロジェクトを作成！
いよいよプロジェクトを作成します。ターミナルで以下のコマンドを実行してください！
Bash
clasp create --title "My First Local Project" --rootDir ./src
"--title "プロジェクト名""は、Googleドライブ上で表示される名前です。日本語も使えます。
"--rootDir ./src" は、超重要なおまじないです！ ソースコードを「src」という名前のサブフォルダで管理するようにclaspに教える設定です。これを付けておくだけで、設定ファイルなどを間違ってアップしてしまう事故を防ぎ、将来の面倒なエラーを回避できます。
実行すると、今いる場所にいくつかのファイルとフォルダが自動で生成されます。
- .clasp.json: プロジェクトIDなどが記録された、claspの設定ファイル。
- appsscript.json: GASプロジェクトの設定ファイル（マニフェストファイル）。
- src/: あなたのコードは全てこの中に入れます！
ステップ3：VS Codeでコーディング！
準備は整いました！VS Codeでプロジェクトフォルダを開きましょう。ターミナルから code . と打つと、今いるフォルダをVS Codeで開けて便利ですよ。
Bash
code .
VS Codeが開いたら、左側のエクスプローラーからsrcフォルダの中に、main.gsのような新しいファイルを作成して、おなじみのGASコードを書いてみましょう！
JavaScript // src/main.gs function myFunction() {
console.log("Hello from VS Code!");
}
ステップ4：書いたコードをGASにアップロード（push）！
ローカルでコードを書き終えたら、その変更をGoogleのサーバーに反映させます。ターミナルに戻り、プロジェクトのルートフォルダで以下のコマンドを実行します。
Bash
clasp push
これで、srcフォルダの中にある変更だけが、安全にGASプロジェクトにアップロードされます。
もっと楽したい場合=自動アップロード（watch）
毎回clasp pushと打つのも面倒ですよね。そんな時はこのコマンド
Bash
clasp watch
これを実行しておくと、claspがファイルの変更を監視し続けて、あなたがファイルを保存するたびに、自動でclasp pushを実行してくれます。 これぞローカル開発の真骨頂！めちゃくちゃ便利なのでぜひ使ってみてください。（やめたい時は Ctrl + C を押します）
実践②：すでにあるGASプロジェクトをローカルに持ってこよう！
「もうすでに運用してるGASプロジェクトがあるんだけど…」という方もご安心を。既存のプロジェクトをローカル開発環境に移行する手順です。
ステップ1：スクリプトIDをコピーする
まず、ローカルに持ってきたいGASプロジェクトの「身分証明書」であるスクリプトIDをコピーします。
- ブラウザで、編集したいGASプロジェクトを開きます。
- 左側のメニューから**[プロジェクトの設定]**（歯車のアイコン⚙️）をクリックしま
- 「ID」の項目にある**[スクリプトID]**をコピーします。
ステップ2：clasp cloneでPCにダウンロード
次に、PCの作業用フォルダに、そのプロジェクト専用の新しいフォルダを作って、ターミナルでそこに移動します。
そして、clasp cloneコマンドを使って、プロジェクトのファイルをPCにダウンロードしてきましょう！
Bash # "ここにスクリプトIDを貼り付け" の部分を、さっきコピーしたものに置き換えてください
clasp clone "ここにスクリプトIDを貼り付け"
ステップ3：【最重要】プロジェクト構成を最適化する！
cloneした直後の状態で作業を始めると、後々トラブルの元になります。
実は、僕もここでハマって時間を溶かした経験があります…。そうならないために、一手間加えて安全な構成に整えましょう！
1. ファイル名を確認＆修正
環境によるのか、cloneするとCode.gsというファイルがCode.jsのように、拡張子が.jsに変わってしまうことがあります。これに気づかず編集してpushすると「I/O Error」が出てしまい、解決に時間がかかることがあります。もし.jsになっていたら、必ず.gsに名前を修正しておきましょう。
2. srcフォルダを作成する
プロジェクトフォルダ直下にsrcという名前のフォルダを新しく作ります。
3. ソースファイルをsrcに移動する
cloneでダウンロードされたソース関連ファイル（.gsファイル、.htmlファイル、appsscript.json）を、すべてsrcフォルダの中に移動させます。
4. .clasp.jsonを編集する
プロジェクトフォルダ直下にある.clasp.jsonファイルを開き、以下のように"rootDir": "src"の一行を追記します。（カンマを忘れずに！）
【変更前】
JSON {
"scriptId": "xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx"
}
【変更後】
JSON {
"scriptId": "xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx",
"rootDir": "src"
}
これで、claspに「ソースコードはsrcの中だけを見てね！」と教えることができました。この一手間で、将来の安全が買えます。必ずやっておきましょう。
あとは、新規作成の時と同じようにVS Codeでsrcの中のファイルを編集し、clasp pushやclasp watchで変更をアップロードしていくだけです。
まとめ
2回にわたり、claspを使ったGASのローカル開発環境構築について解説してきましたが、いかがでしたでしょうか？
一度環境さえ作ってしまえば、あとはVS Codeの快適な機能を使って、clasp watchでサクサク自動同期しながら開発を進めるだけ。もう、あのブラウザのシンプルなエディタには戻れないはずです。
これでGASの開発環境が、よりよいものになりましたね☺️