Slide 1
Slide 1 text
© Babel, inc.
セールスAIクラウド「ailead」の
TSConfig厳格化対応した話
2021.12.17 株式会社バベル CTO コキチーズ @k2wanko
2017年４月 LINE株式会社 セキュリティエンジニアエンジニア 入社
2021年９月 株式会社バベル 入社 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年６月から３年後を見据えて、
今後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に１度くらいの頻度で改善をやる日
１１月は休日の関係で３日間あった
全力の 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 で４人ほどのメンバーでそれぞれ１日どれだけエラーを潰せるか試してみた
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}'
厳格化への取り組み
Slide 19
Slide 19 text
© Babel, inc.
tokeiでは６万弱
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