この投稿では、「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)