急なTypeScript案件🔥最初の30日間に使い倒したい「コードリーディング支援ツール」

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

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

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

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

[<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/889/3524dcc1-1ac7-8797-76f2-2ad0b7655956.png" width=500>](https://twitter.com/suin/status/1475798834538479616)

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

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

[<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/889/b17bf85c-3e18-8150-97de-fd4b0e843772.png" width=500>](https://twitter.com/suin/status/1479648222671155200)

そのため、

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

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

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

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

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

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

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

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

## 雰囲気でTypeScriptをやっている

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

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

## TypeScript解読アシスタント

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

![TypeScript解読アシスタント](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/889/4e131688-a301-bcc6-eb76-ac527c0cd8d6.png)

https://typescriptbook.jp/code-reading-assistant#eJzFV1lvG0cSfuevKDGJQEqkKOuRpKjIggNsHNuLlbxYgGHgJqcpTTzsZuagRFA0Vpxgba-ziHM5LzmAXM7pBDAWuwa8yI-ZlZL8i1T1McOR7OQxADlTXV1dVV39VXVNrQbt5Oid5OhBEr-exI-T-Buk__-_H5Oj10_uPUpmb__8xZ1kdqdTKNRqIKQrgiHvha4UsOl5hYLHQ5B1YGJcAZkRc5QmG2p9En-dxP9I4q_QTEHCOrRF5HkVCP2IV6DPvABfq_jr0uNglZ6iAsUi_l8W-Lx2Df8rKyur-JY0qK0s1SowmXa0gZ9uPzq-9Xly9PXxZ7dP3vtB24iEw_uu4E4FLrPLFfiTwJEbjs2ak8fv_vTg_ePv7mrpAkAbvV5ersDyMvmvdlGtVqBapWGnoiRgGWgGqqAkYMm8a3a8pOefg7k1Tc1rrut3y8i2zHg9fRtigQi9-IZ25YZ5S3jFLG42KWKopGWUWmIRjOSh1bGg1y4sWB2Li1r0MBUJx0Mu-8QdSdeB1PONDUsLvg-X2LBUxqGJ4PHjN7PYlTA06LUsVwDJakYuZWSNSMsmviafI0pbwdErmXyzmcq0WnNkRi9mwoc5LYuLqczhYUpubGRCq7ABq1CHVT3sR0LjuzRkPhso9JbVk2Cm1Z6ZWW-lkz2PBYEeUXjkytCXQwzOaqMg20UaFDt6qDJihhnxfjL7TxLfT-J_UvrFR8nsvkrFhyq9KEVY1-N_ZV7ETTLleBvKBPfDsxPt1c4ZXqlscH_vZsHtYzTKMClMgWPywekxEoVCsO-GvT0zAdBjOCHrSAF0fc6uN5DEDGORF9ZJfn_P9TiKS1qAY0fiC-a4aB8d4l4d-tKHkqohKiQEZ_VaXja2pAhdEXFQ8g3Sni2RQEgtayfn2a5I2aE_VorCPV_uA2H3gu9Ln2IwxZ2ofXG9YSwKzPPGep3Du9HuLvcbRKJaToBdwT8yUoQQURqeQ9fPVUBhYiMHF7Tr8zDyhZ7U7pvFS7DLBfdZSM5k8mOXe5h2SpSLaAAX6EEzm4Su82hrjYgtJIpbxQrJWRjdS2b_JejMvk_iWydv3Dy--1aBdYPQZ70QNCyvKFXDqOu5PZALBk0Zx1RrUPmpJnwZYr3nDgQhC5VIuugZOTfAk0JLUY_2M_TdEdMh0wIKBwCpMwMe7knnTBqRnqUsLHPTym0TnSVQnk2Vd9qQ8e0parVxI7OLEMF_yHNhTw8qVR2gXKDlTu2iXRRswIuduspMFQhjuJyzhDQejitQRZ_1OF47ltLAYI4UCDfKXYQNRsYVu6SNQPrE0PxG1J7IbF-0ajuGh_6orFJY2KLnptl-fgfTvNB54AchF066xh0MPT7gIjylRY6477sOP6MODVPQgiFt_3JK0Sp-MJR-CHTxwCYCzzg6kE6E9eKSfk0szD_BqpjE7ySzLxVx6_jBpz9_-XfMUXTXxzKBpzaaq5OWr9AJkXBfi_j2eNCVWHv0CAI1NBfZR3dI8-wzalTQ1uxRQfn1Z98duKE74ugfHTpeqWlTgXRXSo8zgZQONxKYtV3uE0epJyF3F7HQ0Aq3sYlymbdDtNoyCqgLlxRfF3KflAk-Uipk91VMQbPyqqDKgxUHJ9YMTyErMG0ZTS2mUy-YcmMs5XIKLy0VJCW4leWvkT2Nw7w8CV3po5jtGAz_Ih8r9nU-Ru6Vede35YBrBs7_cTlgvNn0fTbODqDdwYCmDimG3WmEYA-ovUFuTsoy2oTtujlzxcAWVamwOrBhGnLHWJtANVNxkW6rIisCC6yjVX2LwDQ7GselQ8wBxqYk0RvqWZ87HpM36fFgxmKWlYpouBcWy3ZrHBMZC-hLLgIo1X7t2Yn2ZHqtkabd7N_Ukpg-5WFhYks-HCjEsSB3EcDYctWwkV5Tj6jbib9N4jiJb5_cv0NNSKZrAqwC3Tp016gdqACGUYZ7iG2YqrixOt20KLCm55B92nCbowTX8z4PQuq12sgyKzokmb_AjWBdH3rZ1G31tfIJ3ajx5_q7qKBjCH-hEELflwMw4WzYqQlEAd8O6Uqa_q4Eem7ptaeJL5GUMrj2ZIGeHAykeJHg6fPXItfnc2dsZDZlPyu561n5XdnE4zXl1_Rv-to3vAmNCIW5MTok83wdeMoB54Lm4Nk3KILPh0HV3RXS51YWT3H6lCm1Vyp543CPiqje70HRfjreTGYPFXQQhj-mlT09S2TIkk18gtTzmpNeZVR-tnRzri4rM6-KT1ov0gqTzs43IellZlsuxMVd9fxOPW8rw3l4MVsYypY4C0Fmi1R5vgiekcl1NNPsxvr2Scbd4AUpSyO7aoSMs-0OfXjbjiddiSHCj4n8csObU2M9-OXDj47vvnHywcfKPAvGojfnuaQYapNsn7mh5jRycVRNa_wvded-n965m82dFsJlx5Sq882dXMlTRdAI5AJ1DtdRsHayUGmA0iTVleZOBa5qEVVLrs5_w2mwvbj9t0zpq8GB2YMJWkltp9lSLyQcd6QhRpm1PsHkmMIEq8pkOrUyKOWKYaTbnPVib4_3rnflQREcN6BPMwdqLQhxf1ZnDZXqxc0avel7pfArsgzYNg

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

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

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

![解読したいコードをエディタにはりつけた様子](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/889/6ede7060-fb09-18ee-9daf-ec19834d6795.png)

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

![TypeScript解読アシスタントに言語機能名が表示された様子](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/889/0a4b7ee0-1226-342a-204e-1ea3814f35e5.png)

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

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

<p></p>

<iframe width="560" height="315" src="https://www.youtube.com/embed/PVLo02pT47g?" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>

<p></p>

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

![TypeScript解読アシスタントに関連記事が表示されている様子](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/889/9e7213d1-c216-341b-4d63-23852a431607.png)


## いろいろ判定させてみた

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

![TypeScript解読アシスタントでフラグメントを判定させた結果](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/889/8fe3b366-e1f6-e81c-5e98-a9dffd355f00.png)

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

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

![TypeScript解読アシスタントでNull合体演算子を判定させた結果](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/889/b77d020c-72cf-dab8-6fbc-dea66e334567.png)

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

![TypeScript解読アシスタントで分割代入を判定させた結果](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/889/a6e68c35-d688-24ca-c388-d5749d740d5a.png)

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

![TypeScript解読アシスタントでvarを判定させた結果](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/889/1af1a6a6-b754-94b7-716c-c5a106d9a0cb.png)

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

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

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

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

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

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

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

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

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

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

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

```markdown:社内ドキュメントでの記載例
## TypeScript入門情報

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

## コードリーディング支援ツールはこちら

https://typescriptbook.jp/code-reading-assistant#eJzFV1lvG0cSfuevKDGJQEqkKOuRpKjIggNsHNuLlbxYgGHgJqcpTTzsZuagRFA0Vpxgba-ziHM5LzmAXM7pBDAWuwa8yI-ZlZL8i1T1McOR7OQxADlTXV1dVV39VXVNrQbt5Oid5OhBEr-exI-T-Buk__-_H5Oj10_uPUpmb__8xZ1kdqdTKNRqIKQrgiHvha4UsOl5hYLHQ5B1YGJcAZkRc5QmG2p9En-dxP9I4q_QTEHCOrRF5HkVCP2IV6DPvABfq_jr0uNglZ6iAsUi_l8W-Lx2Df8rKyur-JY0qK0s1SowmXa0gZ9uPzq-9Xly9PXxZ7dP3vtB24iEw_uu4E4FLrPLFfiTwJEbjs2ak8fv_vTg_ePv7mrpAkAbvV5ersDyMvmvdlGtVqBapWGnoiRgGWgGqqAkYMm8a3a8pOefg7k1Tc1rrut3y8i2zHg9fRtigQi9-IZ25YZ5S3jFLG42KWKopGWUWmIRjOSh1bGg1y4sWB2Li1r0MBUJx0Mu-8QdSdeB1PONDUsLvg-X2LBUxqGJ4PHjN7PYlTA06LUsVwDJakYuZWSNSMsmviafI0pbwdErmXyzmcq0WnNkRi9mwoc5LYuLqczhYUpubGRCq7ABq1CHVT3sR0LjuzRkPhso9JbVk2Cm1Z6ZWW-lkz2PBYEeUXjkytCXQwzOaqMg20UaFDt6qDJihhnxfjL7TxLfT-J_UvrFR8nsvkrFhyq9KEVY1-N_ZV7ETTLleBvKBPfDsxPt1c4ZXqlscH_vZsHtYzTKMClMgWPywekxEoVCsO-GvT0zAdBjOCHrSAF0fc6uN5DEDGORF9ZJfn_P9TiKS1qAY0fiC-a4aB8d4l4d-tKHkqohKiQEZ_VaXja2pAhdEXFQ8g3Sni2RQEgtayfn2a5I2aE_VorCPV_uA2H3gu9Ln2IwxZ2ofXG9YSwKzPPGep3Du9HuLvcbRKJaToBdwT8yUoQQURqeQ9fPVUBhYiMHF7Tr8zDyhZ7U7pvFS7DLBfdZSM5k8mOXe5h2SpSLaAAX6EEzm4Su82hrjYgtJIpbxQrJWRjdS2b_JejMvk_iWydv3Dy--1aBdYPQZ70QNCyvKFXDqOu5PZALBk0Zx1RrUPmpJnwZYr3nDgQhC5VIuugZOTfAk0JLUY_2M_TdEdMh0wIKBwCpMwMe7knnTBqRnqUsLHPTym0TnSVQnk2Vd9qQ8e0parVxI7OLEMF_yHNhTw8qVR2gXKDlTu2iXRRswIuduspMFQhjuJyzhDQejitQRZ_1OF47ltLAYI4UCDfKXYQNRsYVu6SNQPrE0PxG1J7IbF-0ajuGh_6orFJY2KLnptl-fgfTvNB54AchF066xh0MPT7gIjylRY6477sOP6MODVPQgiFt_3JK0Sp-MJR-CHTxwCYCzzg6kE6E9eKSfk0szD_BqpjE7ySzLxVx6_jBpz9_-XfMUXTXxzKBpzaaq5OWr9AJkXBfi_j2eNCVWHv0CAI1NBfZR3dI8-wzalTQ1uxRQfn1Z98duKE74ugfHTpeqWlTgXRXSo8zgZQONxKYtV3uE0epJyF3F7HQ0Aq3sYlymbdDtNoyCqgLlxRfF3KflAk-Uipk91VMQbPyqqDKgxUHJ9YMTyErMG0ZTS2mUy-YcmMs5XIKLy0VJCW4leWvkT2Nw7w8CV3po5jtGAz_Ih8r9nU-Ru6Vede35YBrBs7_cTlgvNn0fTbODqDdwYCmDimG3WmEYA-ovUFuTsoy2oTtujlzxcAWVamwOrBhGnLHWJtANVNxkW6rIisCC6yjVX2LwDQ7GselQ8wBxqYk0RvqWZ87HpM36fFgxmKWlYpouBcWy3ZrHBMZC-hLLgIo1X7t2Yn2ZHqtkabd7N_Ukpg-5WFhYks-HCjEsSB3EcDYctWwkV5Tj6jbib9N4jiJb5_cv0NNSKZrAqwC3Tp016gdqACGUYZ7iG2YqrixOt20KLCm55B92nCbowTX8z4PQuq12sgyKzokmb_AjWBdH3rZ1G31tfIJ3ajx5_q7qKBjCH-hEELflwMw4WzYqQlEAd8O6Uqa_q4Eem7ptaeJL5GUMrj2ZIGeHAykeJHg6fPXItfnc2dsZDZlPyu561n5XdnE4zXl1_Rv-to3vAmNCIW5MTok83wdeMoB54Lm4Nk3KILPh0HV3RXS51YWT3H6lCm1Vyp543CPiqje70HRfjreTGYPFXQQhj-mlT09S2TIkk18gtTzmpNeZVR-tnRzri4rM6-KT1ov0gqTzs43IellZlsuxMVd9fxOPW8rw3l4MVsYypY4C0Fmi1R5vgiekcl1NNPsxvr2Scbd4AUpSyO7aoSMs-0OfXjbjiddiSHCj4n8csObU2M9-OXDj47vvnHywcfKPAvGojfnuaQYapNsn7mh5jRycVRNa_wvded-n965m82dFsJlx5Sq882dXMlTRdAI5AJ1DtdRsHayUGmA0iTVleZOBa5qEVVLrs5_w2mwvbj9t0zpq8GB2YMJWkltp9lSLyQcd6QhRpm1PsHkmMIEq8pkOrUyKOWKYaTbnPVib4_3rnflQREcN6BPMwdqLQhxf1ZnDZXqxc0avel7pfArsgzYNg