morishitaです。
Google App Script (以下、GAS)便利ですよね。
無料で使える JavaScript の実行環境で HTTP での外部への通信も可能なので、API を叩いたり、Web サイトにアクセスして情報を収集するなどできます。
しかも定期実行も可能なので、定期的な作業の自動化も可能です。
さらに、Google Sheet にも手軽にアクセスできるので、収集したデータを確認しやすい形で簡単に保存できます。
GAS には Web ブラウザ上でコーディングできるエディタが提供されています。
すこし前から、それが新しくなったという話をネットで見かけていたのですが、私のアカウントにはなかなか反映されませんでした。
それがやっと来たので触ってみました。
ちなみに、スクリーンショット中に表示しているコードは gas-slack-incoming-webhook のものです1。
概観
これが従来の Web エディタです。
そして、これが新しい Web エディタです。
全体的にフラットなデザインとなり、左上にはあのアイコンがあしらわれています。App Script の管理ページと見た目が揃えられサービスとして統一感が出ました。
レイアウトは従来と変わらず左にファイルリスト、右にコードエディタとなっており、従来からの利用者が迷ってしまうような大胆な変更はありません。
主な変更点はメニューバーが廃止され、それが担っていた機能が別のものに置き換わったことです。
代わりにページの左端にマウスオーバーで表示されるメニューが追加されました。
このメニューは機能的に旧メニューバーと同じ機能というわけではありません。
次の項目で構成されており、選択すると遷移するページはApp Script の管理ページで提供されていたものだと思われます。
- 概要
- エディタ
- トリガー
- 実行数
- プロジェクトの設定
見た目が同じようになっただけでなくシームレスにApp Script の管理ページと行き来できるようになった感じです。
プロジェクトの設定ページは、旧 Web エディタでも設定可能な項目だけど、メニューのあちこちに散らばっていたものが１ページにまとめられわかりやすくなったと思います。
旧メニューバーのリソースメニュー配下にあった、ライブラリや Google サービスの利用設定はファイルリストの下に表示されるようになりました。プロジェクトに関連するリソースが全部ここで把握できるのでこれも使いやすくなったと思います。
エディタの機能
さて、エディタの本領、コードを書くエディタ機能はどうでしょうか。
コードの折りたたみ
コードの折りたたみができるようになりました。
関数や、オブジェクトを畳んで長いコードも見やすく表示できるようになりました。
なにげにインデントが縦線で表示されているのもコードを見やすくするのに役立ってます。
コンテンツアシスト
旧エディタではこんな感じでした。別ファイルに実装した関数は表示されず、組み込みオブジェクトのみ表示される感じです。
新エディタでは、別ファイルに実装した関数まで表示されます。
項目の種類ごとにアイコンで区別され、今風でわかりやすくなっています。
旧エディタではショートカット ctrl + space を使って表示していましたが、新エディタではコードを書き始めると自動的に表示されます。で、文字を入力していくと候補が絞り込まれていきます。便利になりました。
右クリックメニュー
旧エディタではエディタ独自の右クリックメニューは実装されていませんでしたが、新エディタでは実装されました。
メニューにあるように「定義へ移動」や「参照へ移動」「シンボルに移動」では変数や関数の定義場所や参照場所に移動できます。残念ながら移動範囲は同じファイル内のみのようです。
参照へ移動では参照箇所が複数ある場合にはリストが表示されます。
「シンボルの名前変更」は変数や関数の名前を変更できます。変更したものを参照しているかションも全部変更してくれます。
「ドキュメントのフォーマット」は字のごとくコードのインデントや余分なスペースを整えてフォーマットしてくれます。
コマンドパレットは次のようなコマンドの一覧を表示してくれます。
選択することでエディタの様々な機能を呼び出せます。
機能的には少ないですが、モダンなエディタにある機能が GAS にもやってきた感じですね。
関数の実行
関数の実行というか、ログの参照について大きく改善されています。
次のスクリーンキャプチャのように、関数を実行すると、エディタ下部に実行ログが自動的に表示されます。
エラーが発生した場合にはもちろんエラーメッセージも表示されます。
旧エディタだとメニューからログを開く必要がありましたし、それほど大きくないダイアログ内に表示され、表示が見にくかったのでとても便利なったと思います。
デバッガ
旧エディタでは次のように下部に変数などが表示されました。
新エディでは右に表示されるようになりました。
変数などのオブジェクトの中が色分けされて見やすくなったと思います。
まとめ
一新された GAS の Web エディタはモダンな機能を取り入れ色々と使いやすくなっています。
私は VSCode + clasp で GAS のコードを書くので、コードを書くことにはあんまり使うことはないと思います。
しかし動かしながらデバッグは Web エディタを使うことになるので使いやすくなると思います。特にログの表示は嬉しい。
最後に
アクトインディではエンジニアを募集しています。 actindi.net
-
ソースは TypeScript なので、clasp によりトランスパイルされた JavaScript です。↩
