Sales AI Cloud "ailead" TSConfig Strictly Adopted / セールスAIクラウド「ailead」の TSConfig厳格化対応した話 /

https://babel-jp.connpass.com/event/232588/

Transcript

1. © Babel, inc.
 セールスAIクラウド「ailead」の 
 TSConfig厳格化対応した話 
 2021.12.17 株式会社バベル CTO コキチーズ @k2wanko 
 
 
 
 2017年４月 LINE株式会社 セキュリティエンジニアエンジニア 入社 
 2021年９月 株式会社バベル 入社 CTO 就任 
 
 Firebase/GCP/Go/Node.js/TypeScript が好き 
 Harajuku.ts Meetup #1

2. © Babel, inc.
 2

3. © Babel, inc.
 3

4. © Babel, inc.
 採用している技術
 4
 • TypeScript
 • React
 • Next.js
 • GraphQL
 • GCP / Firebase
 • Cloud SQL PostgreSQL
 • Prisma

5. © Babel, inc.
 5
 TSConfig (tsconfig.json) とは

6. © Babel, inc.
 公式ドキュメントにはこう書かれている 
 6
 A TSConfig file in a directory indicates that the directory is the root of a TypeScript or JavaScript project. The TSConfig file can be either a tsconfig.json or jsconfig.json, both have the same set of config variables.
 https://www.typescriptlang.org/tsconfig
 TSConfig (tsconfig.json) とは 

7. © Babel, inc.
 公式ドキュメントにはこう書かれている 
 7
 A TSConfig file in a directory indicates that the directory is the root of a TypeScript or JavaScript project. The TSConfig file can be either a tsconfig.json or jsconfig.json, both have the same set of config variables.
 プロジェクトのルートを示すための目印
 - tscコマンドのコンパイルオプションを定義できる
 https://www.typescriptlang.org/tsconfig
 TSConfig (tsconfig.json) とは 

8. © Babel, inc.
 8
 strict option

9. © Babel, inc.
 strict optionとは
 9
 “strict”: true 下記のオプションをtrueにする (2021年12月) 
 strict option
 alwaysStrict コンパイルしたJSに ‘use strict’ をつける strictNullChecks falseだとnullとundefinedが無視される危険なオプション strictBindCallApply bind,apply の元の関数の型と一致するかチェックする strictFunctionTypes 有効にすると関数パラメーターを正確にチックする strictPropertyInitialization classのコンストラクタでプロパティが定義されていないとエラーになる noImplicitAny 型定義がないと自動でanyになる箇所でエラーになる (anyゆるさん絶対) useUnknownInCatchVariables TS 4.4 で追加されたやつ catchがanyからunkownにしてくれる
10. © Babel, inc.
 10
 バベル社のTypeScriptの取り組み

11. © Babel, inc.
 バベル社のTypeScript採用理由 
 11
 1. 2021年６月から３年後を見据えて、
 今後TypeScript人口が伸びることはほぼ見えている
 a. インターネットの情報量とエコシステムによる開発速度に期待
 2. 型によるチーム開発者が気にすべきことを減らせる
 a. ドキュメントとにらめっこする時間の削減
 3. フロントとバックエンドを同じ言語にすることで
 開発者の脳コンテキストスイッチコストの最小化
 バベル社のTypeScriptの取り組み 

12. © Babel, inc.
 プロダクト
 12
 2021年 6月 開発 開始
 技術アドバイスでGCPを起点に今のメンバーからWebでやることは確定していたので 技術選定のところでインフラ含めて諸々アドバイス
 ここでTypeScriptも一緒に選定された
 2021年 7月 プロダクトβ リリース
 2021年 9月 k2wanko 入社
 strict option false であることに気づく
 「弊社のTypeScriptがヤバい...!!!」
 バベル社のTypeScriptの取り組み 

13. © Babel, inc.
 プロダクト
 13
 2021年 11月 uhyo さん 技術顧問
 LINE社で活躍中のuhyoさんにヘルプを求めたところ
 フロントエンドの技術顧問としてお手伝いしてもらえることになった
 2021年 11月後半 Learning Professional Day
 1Qに１度くらいの頻度で改善をやる日
 １１月は休日の関係で３日間あった
 全力の strict: true 対応
 バベル社のTypeScriptの取り組み 

14. © Babel, inc.
 14
 2873

15. © Babel, inc.
 15

16. © Babel, inc.
 16

17. © Babel, inc.
 17
 厳格化の取り組み

18. © Babel, inc.
 まずは計測
 18
 Day 1 で４人ほどのメンバーでそれぞれ１日どれだけエラーを潰せるか試してみた
 
 k2wankoで５時間で300ほど メンバー全員で 一日500くらい
 
 プロダクトのTSは10万8642行
 
 find . -name "*.ts*" | grep -v ./generated/graphql | grep -v ./prisma | grep -v './node_modules' | xargs wc -l | awk '{print $1}' | awk '{s += $1} END {print s}'
 
 厳格化への取り組み 

19. © Babel, inc.
 tokeiでは６万弱
 19
 https://github.com/XAMPPRocky/tokei 
 

20. © Babel, inc.
 20
 3 day * 500 = 1500

21. © Babel, inc.
 21
 2783 - 1500 = 1283

22. © Babel, inc.
 22
 3日で終わらない！

23. © Babel, inc.
 23

24. © Babel, inc.
 24
 どう直していったか

25. © Babel, inc.
 25
 GraphQLの型生成をちゃんと使うように直した

26. © Babel, inc.
 26
 クライアントとバックエンドのやりとりはGraphQLを使っていたけど、型がつかわれていなかった 
 のでセットアップした 

27. © Babel, inc.
 27
 あとはシンプルにnull | undefinedの
 可能性を考慮していないコードの直し

28. © Babel, inc.
 28

29. © Babel, inc.
 29

30. © Babel, inc.
 30
 どうしても直せなかったところは...

31. © Babel, inc.
 泣きの@ts-expect-error 
 31
 PrismaとGraphQLでどうしても型の整合性がとれなかったところは泣く泣く 
 // eslint-disable-next-line @typescript-eslint/ban-ts-comment 
 // @ts-expect-error 
 を挟んだ
 17箇所の @ts-expect-error がいる 
 @ts-expect-errorはTypeScriptのコンパイルエラーを無視する危険なコメント 
 

32. © Babel, inc.
 32
 なぜ厳格化を行ったか

33. © Babel, inc.
 33
 厳格化をしてみてどうだったか？

34. © Babel, inc.
 厳格化をしてみてどうだったか？ 
 34
 1. GraphQLのスキーマの型の恩恵をちゃんと受けられるようになった
 2. Prismaの型の恩恵を受けてないところが明確になった
 3. 新機能の開発の点で、型の恩恵を受けられるようになった

35. © Babel, inc.
 チームメンバーの感想 
 35
 元々はTypeScriptへの理解が深くはなく、形式的な記述をすることが多かったのです が、TS Configの厳格化を通して型が明示されデータの流れが見やすくなること、エ ラーの起こりうるコードを防止できることが大きなメリットだと感じることができました。
 
 厳格化をしてみてどうだったか？ 

36. © Babel, inc.
 チームメンバーの感想 
 36
 データ構造をあまり意識せずに書けてしまうのがJavaScriptの大きな欠点ではあるの で、その解消のためにTypeScriptを使うのであればこれくらい厳格なルールでやらな いと効果が半減どころでは済まないのだな、と感じました。
 厳格化をしてみてどうだったか？ 

37. © Babel, inc.
 チームメンバーの感想 
 37
 厳格化のための表面的な修正が既存機能に影響与えていたりして、余計に工数とら れていたわりに、恩恵を正直まだ感じられてないです... 長期的にみたらもっと違うかも しれませんが！
 厳格化をしてみてどうだったか？ 

38. © Babel, inc.
 個人の所感
 38
 どこを直すべき箇所や今後の成長の阻害になりそうな問題の可視化はできた
 でも次やるなら いきなり全部strictをtrueにせずに
 ちょっとずつtrueにしていこうと反省している。
 GraphQLとフロントエンド側の独自定義の型の整合性がとれないときに
 表面的な修正を入れてしまったのはよくなかった。
 あと @ts-expect-error に逃げるのは負債なので、返済計画 を持ってやる
 厳格化をしてみてどうだったか？ 

39. © Babel, inc.
 39
 まとめ

40. © Babel, inc.
 まとめ
 40
 • TypeScriptを導入するなら最初っからstrictはtrueに
 • あとからstrictをtrueにするなら ちょっとずつやる
 • どんなにモダンな技術を選んでも内容を理解せずに使っていては宝の持ち腐れ

41. © Babel, inc.
 TypeScriptで最高のプロダクトを作りたい人を積極採用中！ 
 41
 1. TypeScriptをstrictに取り組みたい人
 2. 型に嘘を付きたくない人
 3. AIサービスをTS + GCPに全力で取り組みたい人
 積極的に採用しています！
 サービスも引き合いはすごい来ているけど、
 エンジニアが圧倒的に足りてない状況です。
 k2wankoがカジュアル面談に全部出ます!(2021年12月から~2022年3月)
 https://jobs.babel.jp
 
 [PR] Recruit