Slide 1

Slide 1 text

© 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


Slide 2

Slide 2 text

© Babel, inc.
 2


Slide 3

Slide 3 text

© Babel, inc.
 3


Slide 4

Slide 4 text

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


Slide 5

Slide 5 text

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


Slide 6

Slide 6 text

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


Slide 7

Slide 7 text

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


Slide 8

Slide 8 text

© Babel, inc.
 8
 strict option


Slide 9

Slide 9 text

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

Slide 10

Slide 10 text

© Babel, inc.
 10
 バベル社のTypeScriptの取り組み


Slide 11

Slide 11 text

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


Slide 12

Slide 12 text

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


Slide 13

Slide 13 text

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


Slide 14

Slide 14 text

© Babel, inc.
 14
 2873


Slide 15

Slide 15 text

© Babel, inc.
 15


Slide 16

Slide 16 text

© Babel, inc.
 16


Slide 17

Slide 17 text

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


Slide 18

Slide 18 text

© 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}'
 
 厳格化への取り組み 


Slide 19

Slide 19 text

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


Slide 20

Slide 20 text

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


Slide 21

Slide 21 text

© Babel, inc.
 21
 2783 - 1500 = 1283


Slide 22

Slide 22 text

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


Slide 23

Slide 23 text

© Babel, inc.
 23


Slide 24

Slide 24 text

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


Slide 25

Slide 25 text

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


Slide 26

Slide 26 text

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


Slide 27

Slide 27 text

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


Slide 28

Slide 28 text

© Babel, inc.
 28


Slide 29

Slide 29 text

© Babel, inc.
 29


Slide 30

Slide 30 text

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


Slide 31

Slide 31 text

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


Slide 32

Slide 32 text

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


Slide 33

Slide 33 text

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


Slide 34

Slide 34 text

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


Slide 35

Slide 35 text

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


Slide 36

Slide 36 text

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


Slide 37

Slide 37 text

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


Slide 38

Slide 38 text

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


Slide 39

Slide 39 text

© Babel, inc.
 39
 まとめ


Slide 40

Slide 40 text

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


Slide 41

Slide 41 text

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