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

   

   View Slide

2. © Babel, inc.
 2

   

   View Slide

3. © Babel, inc.
 3

   

   View Slide

4. © Babel, inc.

   採用している技術

   4

   ● TypeScript

   ● React

   ● Next.js

   ● GraphQL

   ● GCP / Firebase

   ● Cloud SQL PostgreSQL

   ● Prisma

   

   View Slide

5. © Babel, inc.
 5

   TSConfig (tsconfig.json) とは

   

   View Slide

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) とは
   

   

   View Slide

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) とは
   

   

   View Slide

8. © Babel, inc.
 8

   strict option

   

   View Slide

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にしてくれる
   

   View Slide

10. © Babel, inc.
 10

    バベル社のTypeScriptの取り組み

    

    View Slide

11. © Babel, inc.

    バベル社のTypeScript採用理由 

    11

    1. 2021年６月から３年後を見据えて、

    今後TypeScript人口が伸びることはほぼ見えている

    a. インターネットの情報量とエコシステムによる開発速度に期待

    2. 型によるチーム開発者が気にすべきことを減らせる

    a. ドキュメントとにらめっこする時間の削減

    3. フロントとバックエンドを同じ言語にすることで

    開発者の脳コンテキストスイッチコストの最小化

    バベル社のTypeScriptの取り組み
    

    

    View Slide

12. © Babel, inc.

    プロダクト

    12

    2021年 6月 開発 開始

    技術アドバイスでGCPを起点に今のメンバーからWebでやることは確定していたので
    技術選定のところでインフラ含めて諸々アドバイス

    ここでTypeScriptも一緒に選定された

    2021年 7月 プロダクトβ リリース

    2021年 9月 k2wanko 入社

    strict option false であることに気づく

    「弊社のTypeScriptがヤバい...!!!」

    バベル社のTypeScriptの取り組み
    

    

    View Slide

13. © Babel, inc.

    プロダクト

    13

    2021年 11月 uhyo さん 技術顧問

    LINE社で活躍中のuhyoさんにヘルプを求めたところ

    フロントエンドの技術顧問としてお手伝いしてもらえることになった

    2021年 11月後半 Learning Professional Day

    1Qに１度くらいの頻度で改善をやる日

    １１月は休日の関係で３日間あった

    全力の strict: true 対応

    バベル社のTypeScriptの取り組み
    

    

    View Slide

14. © Babel, inc.
 14

    2873

    

    View Slide

15. © Babel, inc.
 15

    

    View Slide

16. © Babel, inc.
 16

    

    View Slide

17. © Babel, inc.
 17

    厳格化の取り組み

    

    View Slide

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}'

    

    厳格化への取り組み
    

    

    View Slide

19. © Babel, inc.

    tokeiでは６万弱

    19

    https://github.com/XAMPPRocky/tokei 

    

    

    View Slide

20. © Babel, inc.
 20

    3 day * 500 = 1500

    

    View Slide

21. © Babel, inc.
 21

    2783 - 1500 = 1283

    

    View Slide

22. © Babel, inc.
 22

    3日で終わらない！

    

    View Slide

23. © Babel, inc.
 23

    

    View Slide

24. © Babel, inc.
 24

    どう直していったか

    

    View Slide

25. © Babel, inc.
 25

    GraphQLの型生成をちゃんと使うように直した

    

    View Slide

26. © Babel, inc.
 26

    クライアントとバックエンドのやりとりはGraphQLを使っていたけど、型がつかわれていなかった 

    のでセットアップした 

    

    View Slide

27. © Babel, inc.
 27

    あとはシンプルにnull | undefinedの

    可能性を考慮していないコードの直し

    

    View Slide

28. © Babel, inc.
 28

    

    View Slide

29. © Babel, inc.
 29

    

    View Slide

30. © Babel, inc.
 30

    どうしても直せなかったところは...

    

    View Slide

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のコンパイルエラーを無視する危険なコメント 

    

    

    View Slide

32. © Babel, inc.
 32

    なぜ厳格化を行ったか

    

    View Slide

33. © Babel, inc.
 33

    厳格化をしてみてどうだったか？

    

    View Slide

34. © Babel, inc.

    厳格化をしてみてどうだったか？ 

    34

    1. GraphQLのスキーマの型の恩恵をちゃんと受けられるようになった

    2. Prismaの型の恩恵を受けてないところが明確になった

    3. 新機能の開発の点で、型の恩恵を受けられるようになった

    

    View Slide

35. © Babel, inc.

    チームメンバーの感想 

    35

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

    

    厳格化をしてみてどうだったか？
    

    

    View Slide

36. © Babel, inc.

    チームメンバーの感想 

    36

    データ構造をあまり意識せずに書けてしまうのがJavaScriptの大きな欠点ではあるの
    で、その解消のためにTypeScriptを使うのであればこれくらい厳格なルールでやらな
    いと効果が半減どころでは済まないのだな、と感じました。

    厳格化をしてみてどうだったか？
    

    

    View Slide

37. © Babel, inc.

    チームメンバーの感想 

    37

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

    厳格化をしてみてどうだったか？
    

    

    View Slide

38. © Babel, inc.

    個人の所感

    38

    どこを直すべき箇所や今後の成長の阻害になりそうな問題の可視化はできた

    でも次やるなら いきなり全部strictをtrueにせずに

    ちょっとずつtrueにしていこうと反省している。

    GraphQLとフロントエンド側の独自定義の型の整合性がとれないときに

    表面的な修正を入れてしまったのはよくなかった。

    あと @ts-expect-error に逃げるのは負債なので、返済計画 を持ってやる

    厳格化をしてみてどうだったか？
    

    

    View Slide

39. © Babel, inc.
 39

    まとめ

    

    View Slide

40. © Babel, inc.

    まとめ

    40

    ● TypeScriptを導入するなら最初っからstrictはtrueに

    ● あとからstrictをtrueにするなら ちょっとずつやる

    ● どんなにモダンな技術を選んでも内容を理解せずに使っていては宝の持ち腐れ

    

    View Slide

41. © Babel, inc.

    TypeScriptで最高のプロダクトを作りたい人を積極採用中！ 

    41

    1. TypeScriptをstrictに取り組みたい人

    2. 型に嘘を付きたくない人

    3. AIサービスをTS + GCPに全力で取り組みたい人

    積極的に採用しています！

    サービスも引き合いはすごい来ているけど、

    エンジニアが圧倒的に足りてない状況です。

    k2wankoがカジュアル面談に全部出ます!(2021年12月から~2022年3月)

    https://jobs.babel.jp

    

    [PR] Recruit

    

    View Slide