TSKaigi 2024で型とパフォーマンスについて発表しました (アーカイブ動画・VSCode拡張あり) #ベッテク月間

こんにちは、すべての型をバクソクにしたいypresto (プレスト) です。バクラク請求書受取の開発チームのエンジニアをしています。LayerXには1月に入社しまして、初のブログです。ベッテク月間の7月11日32時の投稿となります。

5月11日の話になりますが、TSKaigi 2024で30分の登壇をさせていただきました。先日こちらのアーカイブ動画が公開されましたので、よろしければご覧ください！ youtu.be

TypeScriptの型とパフォーマンス (TSKaigi 2024) - Speaker Deck

登壇の内容について

今回の登壇では、TypeScriptを使ったプロジェクトでエディタがいつの間にか重くなってしまった、そのようなときに TypeScriptの言語機能を提供する tsserver の中で何が起きているのかについて詳解しました。特に、Union型でループをする Distributive Conditional Types と、<T extends U>(...) のUの部分である Generic Constraints の挙動を中心に解説しました。

当日、「デバッグ方法が最後の方まで出てこなかった」という声を複数頂戴しておりました。プロジェクト全体をビルドするときのパフォーマンス情報 (トレース) については tsc --generateTrace というオプションを渡すことで出力できます。しかし下記のような違いから、これはエディタでの編集体験をデバッグすることには適しません。

全体ビルド：プロジェクト内で使用される全ての型を、一度だけ評価する
エディタ上での編集体験：開いているファイルから参照される型を、編集のたびに再評価する

これまでVSCodeでトレースを出力するには、設定画面から有効にしてエディタを再起動する必要があるなど、手軽な方法がありませんでした。そこで、エディタの実行中の任意のタイミングで --generateTrace 相当の情報を収集・出力できるVSCode拡張を用意して発表スライドにも含めていたのですが、技術的な都合 (VSCode拡張内でESMが使えない) により公開が滞っていました。こちらも本日公開しましたので、よろしければご利用ください。

marketplace.visualstudio.com

※ Vueの拡張を使用している場合、Hybrid Modeが無効になりますので、設定画面で有効に変更してください。

登壇しての感想

当日は満員御礼をいただきとても光栄でした。発表中に聞き手のみなさまから反応をいただけること、懇親会で直接ご感想をいただけることは、オフライン登壇の醍醐味だと感じました。今回の発表内容は、TypeScriptの最も中核となる部分のコードをデバッグするような形で作りました。「楽しそうに話されていたのが印象的でした」との声もいただき、何かにDeep Diveしたときに楽しくなる自分を客観的に見つめることもできました。型チェッカーのコードの深堀りは楽しいです！それにエディタが重くなるとすぐ直したくなるんですよね。

今回の発表のために、手元で TypeScriptにパッチすることによって、Distributive Conditional Typesの評価など、より多くのデバッグ情報を得ていました。すなわち、TypeScript本体のトレース出力内容を、デバッグしやすいように改善したいということでもあります。

前日のスピーカーディナーにて、TypeScriptのProduct Managerであり基調講演を務められましたDaniel Rosenwasserさんと、なんとスマホの翻訳機能も使っていただきながら、このことについてご相談させて頂くこともできました。子育ての合間を縫って、近い内にコントリビュートさせていただきたいです。また、TypeScript本体は、わずか10人強のチームで開発しているとのことでした。パフォーマンスを改善するには、実際に利用する方からのフィードバックが重要とのことでしたので、公式Discord にもぜひご参加ください。

このような場を用意していただいた運営・登壇者・スポンサーのみなさま、そして聞き手のみなさま、本当にありがとうございました！