$30 off During Our Annual Pro Sale. View Details »

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

k2wanko
December 17, 2021

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

k2wanko

December 17, 2021
Tweet

More Decks by k2wanko

Other Decks in Technology

Transcript

  1. © Babel, inc.

    セールスAIクラウド「ailead」の 

    TSConfig厳格化対応した話 

    2021.12.17 株式会社バベル CTO コキチーズ @k2wanko




    2017年4月 LINE株式会社 セキュリティエンジニアエンジニア 入社

    2021年9月 株式会社バベル 入社 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年6月から3年後を見据えて、

    今後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に1度くらいの頻度で改善をやる日

    11月は休日の関係で3日間あった

    全力の 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 で4人ほどのメンバーでそれぞれ1日どれだけエラーを潰せるか試してみた


    k2wankoで5時間で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では6万弱

    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