Full-Stack TypeScript開発で共通化すべき型とは (2024年 / TSKaigi Kansai 登壇資料)

2024年11月16日(土) TSKaigi Kansai LT登壇資料です。
これからもイベントには参加していきたいと思いますので、ぜひお声がけください！！
もしよろしければ..., 「⭐️ Star 」 もいただければ励みになります! > 🐉🐉🐉

近年、フロントエンドもバックエンドもTypeScriptで統一する「Full-Stack TypeScript」開発が急速に普及しています。しかし、モジュール間の型共有や連携に関する知見はまだ十分に共有されていません。フロントエンドとサーバーサイド間で言語の切り替えコストを抑える鍵となるのが「型の共有」です。本セッションでは、実務上で共有することで特に効果を発揮した「定義して良かった型」と実例について紹介します。開発効率を向上させる実践的な型定義とその共有方法をお伝えし、プロジェクトで活用できるノウハウを提供します。

Transcript

1. 1
 本資料は、トグルホールディングス株式会社に許可なく複製・転載をしないようお願いします。 Full-Stack TypeScript 開発で 共通化すべき型 とは
2. 2
 © toggle holdings inc. ⿓野 卓⼰ 所属 トグルホールディングス株式会社 ＠Takumi_T_JP
3. 3
 © toggle holdings inc. Full-Stack TypeScript Frontend Backend
4. 4
 © toggle holdings inc. TSKaigiチャンネルで⼀番⼈気 なんとかして コイツ(先輩)の 再⽣数､超えられないかな...
5. 5
 © toggle holdings inc. 定義して良かった型
6. 6
 © toggle holdings inc. API通信のリクエスト / レスポンス 定義して良かった型 クライアント処理 APIハンドラ バックエンド処理 共通化した型
7. 7
 © toggle holdings inc. API通信のリクエスト / レスポンス 定義して良かった型 クライアント処理
8. 8
 © toggle holdings inc. API通信のリクエスト / レスポンス 定義して良かった型 APIハンドラ
9. 9
 © toggle holdings inc. API通信のリクエスト / レスポンス 定義して良かった型 バックエンド処理
10. 10
 © toggle holdings inc. API通信のリクエスト / レスポンス 定義して良かった型 クライアント処理 APIハンドラ バックエンド処理 共通化した型
11. 11
 © toggle holdings inc. hoge.com/:id API通信のリクエスト / レスポンス 描画したフォーム項⽬ = バックエンド側処理の直感的な形 定義して良かった型 = ⼀⽅が、もう⼀⽅の処理を予測しやすく透過的
12. 12
 © toggle holdings inc. 型の検索 エラー箇所 API通信のリクエスト / レスポンス 定義して良かった型
13. 13
 © toggle holdings inc. 逆に他の型定義の 共有はどうなのか
14. 14
 © toggle holdings inc. 認証‧権限‧ロール 業務ドメイン固有のリテラル型 カスタムステータス 種別コード 外部API関連  リクエスト‧レスポンス 逆に他の型定義の共有はどうなのか 部分的に共有する
15. 15
 © toggle holdings inc. それ以外すべて 型定義したくないもの 逆に他の型定義の共有はどうなのか
16. 16
 © toggle holdings inc. 過剰な型定義はしたくない 逆に他の型定義の共有はどうなのか ⼀⽅が、もう⼀⽅の処理を予測しやすく透過的 ロジックの責務が整理しきれていない
17. 17
 © toggle holdings inc. 型定義と共有⽅法
18. 18
 © toggle holdings inc. npm , bit type User 外部 import { type User } … Frontend import { type User } … Backend 型定義と共有⽅法 1.外部からimportして共有 プライベートパッケージとして公開 npm publish--access=restrictedで 制限付き公開 プライベート空間に共有 公開する
19. 19
 © toggle holdings inc. Monorepo type User zodスキーマから推測 Packages 型定義と共有⽅法 1.外部からimportして共有 プライベートパッケージとして公開 npm publish--access=restrictedで 制限付き公開 プライベート空間に共有 2.バリデーションライブラリからの 型定義の⽣成→伝播 型を⽣成して利⽤する Zod, Yup など import { type User } … Frontend import { type User } … Backend
20. 20
 © toggle holdings inc. • API通信のリクエスト / レスポンスは ぜひ型の共通化をしましょう！ • 他の部分は基本的に共有化するメリットは薄い • 型の共通化‧共有 1.バリデーションライブラリからの型定義の⽣成  伝播 2.外部からimportして共有 まとめ
21. 21
 © toggle holdings inc. Thank you !!!