Google Apps Scriptは、Webブラウザさえあれば使えるのが大きなメリットですが、Claspというツールを使うとローカルで編集することもできます。
ただ、多少準備が必要なせいもあるのか、入門者向けの情報が少ないです。
もっともっと普及してほしいので、1年ちょっと使ってみて感じたことを整理してみました。
なお、以下はローカルエディタとして「Visual Studio Code（通称VSCode）を使う場合」を例に書いています。
細かい点は違うかもしれませんが、大抵のメリットは他のエディタでもカスタマイズ等で同じように享受できるかと思います。
適宜、読み替えてご覧ください。
メリット
画面のカスタマイズ
好きな配色、フォントが使える
ブラウザ上のエディタでは拡張機能でDarculaというカラーテーマを使っています。
（フォントは恐らくRoboto MonoとArialだと思います。）
ローカルでも、GASを編集する場合はDarculaです。
（フォントはRoboto Monoに日本語用としてMotoyaLMaru W3 monoを組み合わせています。）
同じ名前のテーマでも色付けのパターンは多少違うようですが、こちらの方がキーワード等は厳密に区別してくれている気がします。
他にもプログラミング界隈でよく使われるものを筆頭に、拡張機能として豊富に（というか大量に）提供されています。
こだわる人は、自分の好みに合わせて微調整したり、イチから作成することもできます。
デバッグ中は切り替える
しかし、私が助かっているのはここだけではなくて、「うっかり人間」向けのメリットがあります。
デバッグの時に「出力内容が変だけど、どうしてもエラーの原因を見つけられない！」という時、変な値を代入していないか目視でもチェックしたりします。
そういう時は、テーマやフォントを変えてみると見つけやすくなることがあります。*1
例えば、rainglowという拡張機能でRainbow Contrastを選択すると、コメントは薄くなりますが、文字列や数値の彩度が上がるので少し浮き上がったように見えます。
こうすると、そのまま目で検索するより少し楽になります。
変更前：
Darcula
変更後：
Rainbow Contrast
どのシチュエーションでどのテーマが向いているかは個人差もあるようですが、その探す時間も愛おしいくらいです。
そもそも、それを差し置いても自分好みの配色・フォントを使えるっていうだけで結構テンションが上がります。笑
拡張機能があれば、カッコも色分け
プログラムを書いていると、複雑な処理にはどうしてもネストを多用しがちになり、カッコだらけで読みづらくなっていきます。
しかもブラウザのエディタでは、カッコは基本的に単色です。
こんな時、VSCodeへ拡張機能（過去記事）を入れると、カッコの階層ごとに色分けとルーラーが加わります。
「今書いているコードはどの階層なのか」が視覚的に判別しやすいので、コーディングが楽です。
もちろん、深すぎるネストは即解消推奨ですが、その手助けにもなります。
エディタの補助機能
自動整形で困らない
これは恐らく今だけのバグかと思いますが、ブラウザではV8版になってからCtrl+Tabの自動インデント機能が上手く機能しなくなってしまいました。*2
例えば、「テンプレート文字列」を使うとインデントがズレます…
ブラウザ上でもコードを編集することがあり、かなり多用していたので個人的にはこれが1番困っています。
それに対し、VSCodeは元々「モダンJavaScript」向け*3に作られているので、新しい文法でも問題なく整形してくれます。
※コロン:の位置は自分で調整しています。
また、Prettierなどの整形ツールを使えば、さらに自分やチームの独自ルールに準拠するように細かく設定することも可能です。
使ってない変数はグレーアウト
リファクタリングを繰り返していると、いつの間にか定義しただけの「ぼっち変数/定数」が残ってしまうことがあります。
動作には直接問題ないとしても「ちょっと残念なコード」になっちゃうし、コンピューターがコードを解析する時間も宣言の数だけほんの少し増えてしまいます。
どうせなら少しでもパフォーマンスは上げたいものです。
それに、今は大丈夫でも、将来的に「名前がバッティングしてエラーの元に」なんてことにもなりかねません…
VSCodeはその辺も織り込み済みで、宣言だけで実際に使っていない変数/定数は、グレーアウトと修正の提案で知らせてくれます。
※この画像では分かりづらいですが、定数mが修正の提案とともにグレーになっています。
ファイルを分割しても認識してくれる
コードが長くなってくると、ファイルを分割することがあります。
この場合、別のファイルで定義しているものは、Alt+/（単語補完）やCtrl+Space（コンテンツ アシスト）では入力補完が呼び出せないことがあります。
都度ファイルを行ったり来たりする必要があって、地味に不便です…
VSCodeなら、プロジェクト内であれば認識して選択肢に入れてくれます。
特にクラスであれば、メソッドやプロパティには画像のように個別の記号がつくので、「これはメソッドだっけ…？カッコ()要るんだっけな…？」みたいなことも減ります。
ドキュメンテーション・コメントを頑張ると…
少し面倒ですが、ドキュメンテーション・コメントも1つずつ書いておくと、入力補完に加えて自分で書いた説明も小窓で見られるようになります。
（引数の説明が微妙なのは見逃してください…）
これはつい最近気づいた機能ですが、かなり便利です。
引数の数や順番も分かるので、書き間違いによるエラーも減りました。
型名なども省略せず所定の書式に沿って書いておけば、型も判定してくれるみたいで入力補完の選択肢も更に厳密に絞ってくれます。
クラスを親子関係で使うような時は、特に有効です。
Git管理
ちゃんとコマンドが使える
Chromeの拡張機能だけでも、GitHubと連携すればGit管理は出来ます。これも便利です。
でも、これだと「ブランチ切ってプッシュ、プル」しかできないのです…
もうちょっと厳密に管理したい時は、Claspで一旦ローカルに落として管理するのが便利です。
ローカルで使えるということは、SourceTree等のGUIツールを使っている方であれば、そちらでも操作できるようになります。
正直Gitの使い方自体は全く自信がありませんが、個人的には「コミットの取り消し」や「コミット・コメントの編集」ができるだけでも、ローカルで使う価値は大いにあると思っています。
その上で上記の拡張機能と連携すれば、盤石です。
ただし、これもちょっとコツが要るみたいで…この点は後日、別途記事にする予定です。
READMEでスクリプトの説明もできる
私は個人用途が多いのでこれはあまり活用できていませんが、READMEを使えば、リファレンス等の作成や運用ルールの掲示等に活用できるかと思います。
デメリット
慣れるまでは、設定とか同期・実行とか少しめんどくさいかも
GAS特有の文法には弱い？
Claspを入れただけでは、SpreadsheetサービスやDriveAppサービスのような「GAS特有の文法」はエディタが認識できません。
そこで、ひと手間。
プロジェクトの中に公式が配布しているGAS専用の型定義ファイルというものを入れると、ブラウザと同じように認識/入力補完」してくれるようになります。
不安定…？
というわけで文法自体はデメリットと言うほどではないのですが、これが少し不安定なようで(?)、ときどきGAS用語がエディタに認識されないことがあります。
（もしかしたら、私が普段Typescriptを使っていないせいで無意識にどこか大事なところを弄っているとかで濡れ衣かもしれませんが…）
型定義ファイルを入れ直しても動かない時は、ちょっとめんどくさいですが「GASの文法はブラウザで、それ以外の文法やコードの整形はローカルで」がとりあえずの対処法になるかなと思います。
情報が少なくて…
便利なツールですが、基本的にCLIという黒い画面でいじることもあり、まだまだ「入門者向け」の解説が少ないです。
そのため、分からないところはどうしても時間をかけて調べながら・ときどき自分で翻訳しながら、の作業になります。
特にプログラミング経験が浅い身としては、ひとつひとつ理解できるまで時間がかかることもあります。
少しでも使い方を理解できたら、全部覚えるのは大変なのでPhrase Expressのようなスニペットツールを活用していくことをおすすめします。
でも、すごく便利なので、もっと普及してClaspの情報が増えてほしいです…
このシリーズについて
Google Apps Scriptをローカルで編集する方法について、まとめています。
誤り、分かりづらい等ありましたら、ぜひコメント欄やTwitter、お問い合わせフォーム等でご教示ください。
次回
【Clasp】ローカルでGASを書く準備 ～Claspをインストールする～ - ゆるおたノート
連載目次
- 当記事【Clasp】ローカルでGASを編集するメリットとデメリット - ゆるおたノート
- 【Clasp】ローカルでGASを書く準備 ～Claspをインストールする～ - ゆるおたノート
- 【Clasp】ローカルでGASを書く準備 ～プロジェクトを作成する～ - ゆるおたノート
- 【Clasp】ローカルでGASを書く準備 ～コーディングを楽にする～ - ゆるおたノート
- 【Clasp】ローカルでGASを書いてみる ～スクリプトを書いてアップロードする～ - ゆるおたノート
- 【Clasp】ローカルでGASを書いてみる ～スクリプトをGitで管理する～ - ゆるおたノート
