型のインスタンス化は非常に深く、無限である可能性があります。

Slide 1

Slide 1 text

1  本資料は、トグルホールディングス株式会社に許可なく複製・転載をしないようお願いします。型のインスタンス化は非常に深く、無限である可能性があります。 Type instantiation is excessively deep and possiblyinfinite.

Slide 2

Slide 2 text

2  © toggle holdings inc. 君⽥祥⼀所属 2023/11〜現在トグルホールディングス株式会社 X @kimi_koma1111 よろしくお願いします！  

Slide 3

Slide 3 text

3  © toggle holdings inc. 型のインスタンス化は非常に深く無限である可能性があります。 Type instantiation is excessively deep and possibly infinite.

Slide 4

Slide 4 text

4  © toggle holdings inc. アジェンダ © toggle holdings inc. ● 弊社の開発環境 ● 発生した問題と解決方法 ● 今後どのように考えているか ● まとめ

Slide 5

Slide 5 text

5  © toggle holdings inc. 弊社の開発環境

Slide 6

Slide 6 text

6  © toggle holdings inc. 開発環境 © toggle holdings inc. フロントエンド   バックエンド  

Slide 7

Slide 7 text

7  © toggle holdings inc. 開発環境 © toggle holdings inc. Monorepo ● バックエンドとフロントエンドのそれぞれコードが 1つのリポジトリにまとまっているので変更を追いやすい ● 型の共通化をしやすい ● フルスタックに開発しやすい

Slide 8

Slide 8 text

8  © toggle holdings inc. 開発環境 © toggle holdings inc. こちら

Slide 9

Slide 9 text

9  © toggle holdings inc. 開発環境 © toggle holdings inc. こちら

Slide 10

Slide 10 text

10  © toggle holdings inc. 型の共通化

Slide 11

Slide 11 text

11  © toggle holdings inc. 開発環境 © toggle holdings inc. フロントエンド   バックエンド   zod zodios

Slide 12

Slide 12 text

12  © toggle holdings inc. Zodとは？ © toggle holdings inc. ● TS・JSで利用できるスキーマ定義とバリデーションライブラリ ● スキーマを宣言的にコードで定義 ● スキーマに基づいて、データのバリデーションを行う ● スキーマからの型を自動生成できる詳しくはこちら

Slide 13

Slide 13 text

13  © toggle holdings inc. © toggle holdings inc.

Slide 14

Slide 14 text

14  © toggle holdings inc. © toggle holdings inc.

Slide 15

Slide 15 text

15  © toggle holdings inc. Zodiosとは？ © toggle holdings inc. ● 型安全なAPIクライアントを作成するためのライブラリ ● Axiosをベースで Zodスキーマを活用 ○ イメージは型つきの Axios ● リクエストとレスポンスの型を自動的に生成 ● API通信時に型チェックが実行される ● エンドポイントを宣言的に定義するだけ詳しくはこちら

Slide 16

Slide 16 text

16  © toggle holdings inc. © toggle holdings inc.

Slide 17

Slide 17 text

17  © toggle holdings inc. 発生した問題と解決方法

Slide 18

Slide 18 text

18  © toggle holdings inc.

Slide 19

Slide 19 text

19  © toggle holdings inc. エディタで型推論できなくなった

Slide 20

Slide 20 text

20  © toggle holdings inc. TypeCheckが通らなくなった

Slide 21

Slide 21 text

21  © toggle holdings inc. 型のインスタンス化は非常に深く無限である可能性があります。 Type instantiation is excessively deep and possibly infinite.

Slide 22

Slide 22 text

22  © toggle holdings inc. なぜ起こったのか？

Slide 23

Slide 23 text

23  © toggle holdings inc. なぜ起こったのか？ © toggle holdings inc. Zodiosで定義したエンドポイントが多く Zodスキーマを多重に参照しているため型のネストが深くなりすぎている

Slide 24

Slide 24 text

24  © toggle holdings inc. なぜ起こったのか？ © toggle holdings inc. ● TypeScript のコンパイラが「無限に再帰している」と誤検知 ○ コンパイラが型を完全に解釈しようとする過程で再帰が終了する条件を検出できない

Slide 25

Slide 25 text

25  © toggle holdings inc. なぜ起こったのか？ © toggle holdings inc. 無限ループしているように見える状態深すぎるネストのせいで計算が過剰に複雑化している実際は

Slide 26

Slide 26 text

26  © toggle holdings inc. 例えば例えば

Slide 27

Slide 27 text

27  © toggle holdings inc. 一見問題がないように見える例以下の条件が加わるとエラーが発生する可能性 ● エンドポイント数が多い ● スキーマが他のスキーマを参照して連鎖的に深くなる ● Zodios の型推論がすべてのエンドポイントを展開しようとする

Slide 28

Slide 28 text

28  © toggle holdings inc. ✅ エンドポイント数が多い ➡ 80を超えるエンドポイントをひとまとめに ✅ スキーマが他のスキーマを参照して連鎖的に深くなる ➡ スキーマ同士の依存関係がめちゃあった ✅ Zodios の型推論がすべてのエンドポイントを展開しようとする ➡ 多分展開しようとしていた

Slide 29

Slide 29 text

Slide 30

Slide 30 text

Slide 31

Slide 31 text

Slide 32

Slide 32 text

Slide 33

Slide 33 text

33  © toggle holdings inc. 今後どのように考えているか © toggle holdings inc. ● 分割することでエラーは回避できたが、暫定対応にすぎない ○ 数が多くなったらまた発生するのでは？ ● Zodios が1年くらいメンテナンスされていない ○ 移行先を見つける？

Slide 34

Slide 34 text

Slide 35

Slide 35 text

35  © toggle holdings inc. 移⾏先候補 © toggle holdings inc. ● Effect ○ https://effect.website/ ● TS-REST ○ https://ts-rest.com/ ● Hono純正のRPC機能 ○ https://hono.dev/docs/guides/rpc

Slide 36

Slide 36 text

36  © toggle holdings inc. Eﬀect © toggle holdings inc. ● 主にエラーハンドリング、リソース管理、並行処理を強力にサポートするライブラリ ● Effectそのものが ZodiosのようなAPIクライアントを作成するライブラリではない ○ ただし、そのような構築は可能

Slide 37

Slide 37 text

37  © toggle holdings inc. TS-REST © toggle holdings inc. ● TypeScriptを用いて新規および既存の APIに対して段階的に型安全性を導入するためのライブラリ ● Zodiosとほぼ同じような記述方法で APIクライアントとして活用できる

Slide 38

Slide 38 text

38  © toggle holdings inc. Hono純正のRPC機能 © toggle holdings inc. ● Zodをそのままに新たにライブラリを追加しなくても利用できる唯一の移行先候補 ● バックエンドで Honoを利用、現段階では最有力候補

Slide 39

Slide 39 text

39  © toggle holdings inc. TypeScript 5.6では、大きなファイルでもIDEが高速に感じられるようになります。 TSは、目に見えるコードだけを優先的に表示するようになります。 52k行のファイルでは、レスポンスタイムが3秒から140msになった。これは、生成されるTSコードが多いプロジェクトでは大きな違いになるだろう。 🤔🤔🤔🤔 🤔🤔 Our current version is 5.4 ….. :(

Slide 40

Slide 40 text

Slide 41

Slide 41 text

41  本資料は、トグルホールディングス株式会社に許可なく複製・転載をしないようお願いします。ご清聴ありがとうございました