🥳

tsgoを使えばeslintによる型チェックは高速化されるのか

に公開

はじめに

こんにちは。普段Next.jsを使って学習支援に繋がるwebアプリ開発をしているけいじと申します。
最近、tsgoがリリースされて、typescriptのコンパイルが高速化されると話題です。私も普段typescriptを使っていて、柔軟性と堅牢性を兼ね備えた良い言語だなあと日々感じているのですが、少し不満があったりもします。それが、 eslintによる型チェックの動作が遅い ということです。
ほとんどの場合は、 node_modules など余計なディレクトリを監視対象に入れないなどに注意をしておけば気にならない速度で動作しますが、ファイル数が多くなってきたり、devcontainer環境で開発をしたりする時などはすごく気になります。
そんな矢先、tsgoとコンパイル高速化という2単語が耳に入り、これはもしやと思ったのでeslintの高速化に繋がるかどうか調べてみました。
結論から申し上げますと、 「tsgoはeslintの仕組みに関係していないため、eslintの高速化には寄与しない」 といったことが分かりました。
本記事では、eslintがどのような流れで動作しているのかについて簡単な説明を行い、tsgoがどこに効きそうかを考えながらeslintの高速化にtsgoが貢献するかどうかについて考えていきます。

tsgoって何?なにが嬉しいの?

tsgoは、typescript開発元が現在開発しているtypescriptのコンパイラで、従来のコンパイラであるtscの弱点を克服するために開発されています。いずれはtscを置き換える方針のようです。
tscには、シングルスレッドで動作しているなどの原因で型チェックや構文チェックの動作が遅いという課題がありました。tsgoは、Go言語で開発を行うことでマルチスレッド対応を行っており、この課題を解決しています。
実際に、10倍もコンパイルが高速化されているみたいです。

出典:TypeScriptのコンパイラをGoに移植|10倍高速になった tsgo とは

ここで、1つ疑問が浮かびますね。それは

お・・・?型チェックも高速化されてるな・・・?

ということです。ただ、ここで述べられている型チェックとは、typescriptをコンパイルする際のチェックであり、VScodeのエディタ上に波線が表示されるようなリアルタイムのチェック・フィードバック機能とはまた別のことを指しています。ここが混ざるとよくわからないことになるので頭の片隅にとどめておいてください。

eslintの動作フロー

eslintがどうやってチェックを行っているのか

  1. ソースコードの読み込み
  2. AST(Abstract Syntax Tree, 抽象構文木)の生成
  3. 事前に決められたルールとASTを照らし合わせてerrorやwarningを検出
  4. プログラマーにフィードバック

ASTとは、画像のようにソースコードを木構造で表現しなおしたものです。細かい説明は省きますが、「ソースコードそのものよりもASTのほうが構文チェックなどが行いやすいから、ASTを生成するんだ」くらいに思っておけばOKです。
Abstract syntax tree (wikipedia) より引用
出典:Abstract syntax tree (wikipedia)

typescriptの型チェックはどうやっているのか

実は、eslintはtypescriptの型チェックを標準ではサポートしていません。なので、typescriptの型チェックを行いたければプラグインを入れることになります。
プラグインを入れることで、先ほど述べた動作フローのステップ2で行われるASTの生成時、typescriptの型情報などがASTに反映されるよう生成ロジックが書き換わるイメージです。

tsgoでeslintは高速化し得るか?

先ほど説明したeslintの動作フローの話から分かることが「eslintはtypescriptの型チェックにコンパイルを使っているわけではなく、ソースコードから静的にASTを生成している」ということです。
そのため、コンパイラであるtscやtsgoは使われていません。
これらのことから 「tsgoはeslintの仕組みに関係していないため、eslintの高速化には寄与しない」 ということが分かります。

ちなみに

eslintのようなリアルタイムに型チェックを行いフィードバックを行う機能の高速化については、実は別途取り組まれています。なので、こちらの型チェック高速化も時間の問題でしょう。
まだ試験的な運用中なので安定板ではありませんが、取り急ぎ改善したいという人は下記の記事を参考にVSCodeの拡張機能を導入すると良いでしょう。
【TypeScript7】TypeScriptが10倍高速になるぞー

おまけ

Next.jsで自分のキャパシティを把握しながらTodo管理ができるアプリを開発・リリースしています!
「3日坊主になってしまう」、「Todoは作るけど結局予定がくるってタスクをこなせない...」といった悩みを抱える方にうってつけのアプリになっていますので是非1度使ってみてください。

紹介記事「もう、計画倒れとは言わせない。あなたの「できる」を最大化するスケジュール管理アプリ「Fillive」

Discussion