この投稿では、「TypeScriptの文法や用語がよく分からない」という問題を解消してくれそうなツールを紹介します。

勉強しながらの見切り発車

最近はTypeScript未経験でも、TypeScript案件にアサインされることが増えてきているように思います。

運がいいと着手前にTypeScriptをじっくり学習する時間を与えられることがあります。しかし、多くのケースでは、見切り発車で開発に参加するのではないでしょうか。

コードリーディングから始まる

TypeScript案件は、理解すべき既存のTypeScript/JavaScriptコードがあるケースが多いです。

そのため、

読んで理解すべき既存のTypeScriptコードがある
しかし、TypeScriptの知識が乏しい状態でスタート

といった事態がよく起きます。

新規プロジェクトでは既存コードがありませんが、ググって出てきたサンプルコードがあったり、開発が進むにつれチームメイトが書いたコードがすぐにできてきて、解読すべきコードが全く無いということはありません。

TypeScript開始初期は、開発もするが、圧倒的にコードリーディングに時間を費やすことがよくあります。

読んでも分からんもんは調べようがない

ところが、TypeScriptの知識が十分でないと、コードを読んでも分からないことが出てきます。

そもそも文法が分からない。
- 「??って何？」
- 「#nameの#ってコメント？」
- 「<></>って何？」
雰囲気で読めても、用語が分からなくて詳細を調べられない。
- 「string | undefinedの|ってなんて名前？」
- 「value as anyってなんて機能？」
- 「[K: string]: stringって何？」

また、リモートワークもあいまって、メンバーに適切に疑問を伝えられないこともあります。

雰囲気でTypeScriptをやっている

その結果、何が起きるかというと、TypeScriptがよくわからないまま書き進めるといったことが起こります。この状況は早めに脱する必要があります。そのためには、文法と用語を理解することが不可欠です。

これを手早く行うのに便利なのが、「TypeScript解読アシスタント」です。

TypeScript解読アシスタント

TypeScript解読アシスタントは、TypeScriptのコードリーディングを支援するツールです。わからないコード部分を選択するだけで、その部分の文法や言語機能名が調べられます。

TypeScript解読アシスタントの使い方

解読アシスタントは、左がエディタ、右が解説エリアというレイアウトになっています。

まず、解読したいコードをエディタにはりつけます。

つぎに、調べたいコード部分をクリックします。すると、解説エリアに言語機能名が表示されます。

たとえば、この例なら「非nullアサーション」という言葉が手に入ります。これを手がかりにググったり、チームメイトに質問を伝えたりすることに活用できます。

選択部分とは別に、より広い範囲のコードについての解説も合わせて表示されます。

言語機能に関連した記事も提案されるので、それを見ることもできます。

いろいろ判定させてみた

個人的に初見殺しだった構文No.1はJSXのフラグメントです。「フラグメント」という用語が分からず、しばらくスルーしてました。

ちゃんと判定されるだけでなく、Reactのドキュメントへのリンクもあって親切です。

null合体演算子はどうでしょうか。??はググりにくさが有名すぎて、逆に知名度は高そうですが、判定させてみます。

よく使われるわりに、検索の手がかりが少ない分割代入構文もやってみます。

varを調べたら「古い変数宣言のやりかた」「varはもう使わない」と出ました。作者の意思が感じられます。

TypeScript解読アシスタントの注意点

気になるのは情報漏えいリスクです。業務コードを貼り付けても大丈夫なのかが心配です。説明によると、処理はブラウザ内で完結するので、コードがこのツールのサーバーに送られることはなさそうです。

コードはすべてオフラインで処理され、サーバーには送信されません。ご安心ください。

試しに、ページ表示後にWiFiを切ってからコードを貼り付けてみましたが動きました。説明のとおり、処理はオフラインで行われているようです。

ただし、入力したコードはURLの一部になるので、URLをSNSなどで共有する場合は注意が必要です。

コードはBase64化されURLハッシュになります。URLを共有する場合は、機密情報にご注意ください。

判定精度はほぼ実用レベルなのですが、細かいところで誤判定や、十分な解説が表示されないところもあったので、気になるところを見つけたらフィードバックを送ると良さそうです。

新人向け情報に書いておくといいかも

言語の入門は、ある程度基礎を把握した上で、実務コードを書き始めるのが望ましいです。

しかし、実際は急にTypeScriptプロジェクトにアサインされることもあります。そういう状況が少なくないので、実務コードから逆引きで言語が学べるこのツールは、なかなか面白いのではないでしょうか。

案件の開発者向けドキュメントなどに、新人向け情報としてこのツールを載せておくと、助かる人もいそうです。

社内ドキュメントでの記載例

## TypeScript入門情報

* [TypeScript解読アシスタント](https://typescriptbook.jp/code-reading-assistant)
    * TypeScriptの構文で分からない部分があったらこれで調べると良い。
    * 解説ページ: [急なTypeScript案件🔥最初の30日間に使い倒したい「コードリーディング支援ツール」](https://qiita.com/suin/items/68e9ba8b8906c6d36e29)