BaHo Advent Calendar 2020 5 日目担当の BaHo 猫 です。
今日は 2020/11/25~2020/11/27 に開催されたLINE DEVELOPER DAY 2020の Frontend Session を見てきたので気になったところをまとめます。
LINE 証券フロントエンドにおける型安全性へ取り組み
型安全性について
TypeScript + React という組み合わせが現在のフロンエンドの王道だと感じているらしい。
型安全性は 3 つの重要なことをカバーしてくれる。
-
サービス維持
- 型の安全性によるバグの削減
-
開発速度
- エディタによる入力補完等を用いた開発速度の向上が見込める
- 型にはドキュメント的な側面もあるため、コードの読解速度が向上する
-
持続可能なコード設計
- 型レベルで実装を始めることで設計の精度が上がり、最終的なコードの品質が向上する
型安全性を最大限獲得するための取り組み
XLT: Cross-Language Translation Tool
i18n のためのツール。
TypeScript を用いて存在しない Key を渡すとコンパイルエラーとなるような設計をしている。 コード生成をするタイミングで型注釈を生成しているらしい。
コードの生成タイミングについては触れられていなかったが、おそらく tsc を実行する前に XLT の key から実際の文章をコードに紐づけたものを生成するフェーズがあると思われる。
A Custom typescript-eslint Rule
{ number && <Component /> } という構文でエラーが発生するので何とかしたかった。
単純に && を禁止するだとはスマートではないので、型を使って rule を記述できる typescript-eslint のカスタムルールを作ることにした。
Gradual adoption of noImplicitAny
any 型は悪夢なので使いたくない。
一方、現状ほとんどのコードが JavaScript からのコピーになっており、いきなり noImplicitAny を導入するのは難しい。 そこで、CI で diff があったファイルにのみ noImplicitAny を当てながら段階的にコードを TypeScript へ置き換えることによって noImplicitAny エラーを潰し切った。 any 型の明示など、邪悪な noImplicitAny の潰し方をしている場合はレビュー段階で注意するようにした。
終わりに
このセッションは 40 分とほかのセッションより長く、聴きごたえがありました。 プロダクトに対して TypeScript 導入を検討している人は一度目を通しておくと参考になると思います。
Gradual adoption of noImplicitAny 辺りは特にどのプロダクトでも参考にできるエッセンスです。
ついでに
ブログ内で YouTube や Twitter 等の埋め込みが使えるようになりました 👏 明日も LINE DEVELOPER DAY のまとめをやっていくのでよろしくお願いします。