要約

• GASのJavaScriptで、プロパティ名をスペルミスしても怒られず、実行時にundefinedが帰ってくるのに困っていた
• こういう質問をすると、たいていの人がTypeScriptを使えと言ってくる
• 現実には、GASでTypeScriptを使ってエラーのあるコードを書いても、トランスパイルされたJavaScript（.gs）ではエラーにならないので、解決にならない
• ぼくはGASの開発はclaspを使ってローカルで行っている
• この場合、ローカルにtsc（TypeScript Compiler）を入れて、エラーチェックをしてからpushすればエラーフリーになる
• VSCodeでは、tscを使ってオンザフライにエラーチェックする機能があるらしい
• Emacsでも、tideというモジュールを使えば、オンザフライでエラーが表示されるので、それを直せばいい
• まとめると
  • Emacsでtideを使ってエラーフリーのtsを書く
  • それをGASにpushしてgsファイルにトランスパイルしてもらう
• 以上の手順でプロパティのスペルミスからは逃れられることが分かった
• (2020-07-13追記) tide.elを使うとタグジャンプができる。M-.で関数の定義に飛び、M-,で呼び出し元に戻る

困っていたこと

GASで開発していたが、JavaScript（GASの拡張子は.gs）で、オブジェクトのプロパティのスペルミスで困っていた。

上のプログラムでは、personという連想配列にsexというキーのプロパティを定義していたが、下でsexyと綴り間違いをしてしまっている。
これを実行すると

なんのエラーもなく実行され、person.sexyの値としてundefinedがしれっと出力される。
sex、sexy、ともに単なる文字列なので、間違って書いたかどうか、処理系には知る由もないのだ。
困る。

TypeScriptにしてみたが

上記の問題を人に相談すると、たいていTypeScriptで解決する、と言われる。
やってみた。
後述するサイトを参考にTypeScript環境を設定し、以下のようにプログラムを書き直した。
letを変数宣言に追加しただけ。

上記のプログラムを、tsという拡張子で保存し、GASにpushする。
トランスパイルが行われ、gsは以下のようになる。

読んでもよく分からないプログラムになってしまったが、実行する。

特に変化もなく、何も怒られない。
ダメじゃん！
ここで諦めていた。

Quoraで聞いてみた

上記の問題について、質問回答サイトのQuoraで聞いてみると、以下のことを教わった。
- GASのts＝＞gsトランスパイルは「変換モード」で行われているだけで、型チェックなどは抜かれている。
- 解決策としては、claspでpushする前に、ローカルでtscでトランスパイルする
- --noEmitというオプションを作るとエラーチェックだけ行われ、目的ファイルは作られない
- tscでエラーフリーのtsをpushすれば問題は解決する
- Visual Studio Codeであれば、tscを内部から呼び出して、オンザフライでエラーチェックする機能がある

なるほどー。

GAS + claspのエディターとして、VSCodeを使うことの利点は、他にもGASのクラス／メソッドを補完してくれるなど、いろいろあって素晴らしいらしい。
だがぼくは、変なこだわりで（他の作業とシームレスで行いたいので）claspのエディターにはEmacsを使いたい。

tideを使う

調べると、tide.elというものをインストールすれば、Emacsでもオンザフライでtsのエラーチェックが出来るらしい。
導入してみた。

上記のソースを開くと、ちゃんと怒られた。

sexyというプロパティに赤いアンダーラインが付き、カーソルを当てるとミニバッファに、sexyというプロパティは存在しませんよ。sexと書きたかったんですかと怒られる。
この用途ではこれでバッチリだ。

tsc --noEmit を使う

tscをコマンド実行すると、エラーメッセージが一括で得られる。
上記の通り、--noEmitをつけるとエラーチェックだけが行われる。

ところが、これだと、console.logという最もありふれた関数がエラーになってしまう。
なぜだろ。
わからないが、ぼくの目的にはEmacsでtideが怒ってくれるので良しとする。

タグジャンプ (2020-07-13追記)

なお、tide.elを入れると、タグジャンプ機能が勝手に入る。
具体的に言うと、foo() という関数にカーソルを当てて M-. と押すと、その関数定義にジャンプする。
ある関数定義の中で、 M-, と押すと、その関数の呼び出し元にジャンプする。

むすび

ということで、GASの開発におけるプロパティのスペルミスという問題の解決には、clasp + TypeScript + Emacs + tsc + tide.elというのが有用であると分かった。
Web上にトランスパイルされるgsの見た目がメッチャ変わってしまうので、Web上で作業したい人と協働する場合は難しいが、時代はTypeScriptで間違いないようなので、個人でコントロールできる範囲で移行して行きたいと思っている。

リンク集

上記の記事を書くために参考にしたページを挙げる。

もともとのQiitaでのやりとり。

この記事の内容とカブるが。。大変お世話になりました。

claspでTypeScriptをセットアップする方法。

他の記事も参考にしたがこの記事が一番役に立った

自分の記事。claspのセットアップについて。

inquirerがないと怒られたときはnpm install inquirerというところは参考になる（忘れていたので）。

Emacsのtypescript-mode、tideのセットアップについて。

要約。

• 以下のプログラムをLinuxにインストールする必要がある。

  • tsc
  • node（claspが入っている時点で入っている）

• 以下のパッケージをEmacsにインストールする必要がある。

  • typescript-mode
  • flycheck
  • company-mode
  • tide

• package-installの部分は、ぼくはM-x package-list-packagesでパッケージリストを表示させて行った。

tscのインストールについて

ぼくはsudo npm install -g typescriptとする必要があった。
tsc --versionでバージョンを確認。

（この項おわり）