Full-Stack TypeScriptでフロントエンド・バックエンド横断開発

Transcript

1. 護りたい。その想いを護る。 🄫ZEST Inc. ｜ Mita.ts #1 フルTypeScriptでFE/BE横断開発 Full-Stack TypeScriptで FE/BE横断開発 2024.08.28 Mita.ts #1 ⼭下 翔
2. 🄫ZEST Inc. ｜ Mita.ts #1 フルTypeScriptでFE/BE横断開発 2 ⾃⼰紹介 ‧名前：⼭下 翔 ‧会社：株式会社ゼスト ‧職位：Webアプリケーションエンジニア ‧好きな⾔語：TypeScript
3. 🄫ZEST Inc. ｜ Mita.ts #1 フルTypeScriptでFE/BE横断開発 3 アジェンダ ‧弊社の技術スタック ‧Full-Stack TypeScriptの旨み ‧社内での動き ‧まとめ
4. 🄫ZEST Inc. ｜ Mita.ts #1 フルTypeScriptでFE/BE横断開発 5 弊社の技術スタック ‧フロントエンド：Next.js ‧バックエンド：fastify ‧周辺ライブラリ：tRPC、Zod、Prisma ‧その他：GCP, Looker, Vercel, etc… Zod → Full-Stack TypeScriptで構成
5. 🄫ZEST Inc. ｜ Mita.ts #1 フルTypeScriptでFE/BE横断開発 6 Full-Stack TypeScriptとは？ 引⽤：https://zenn.dev/ascend/articles/full-stack-typescript フロントエンドとバックエンドを TypeScript で統⼀している
6. 🄫ZEST Inc. ｜ Mita.ts #1 フルTypeScriptでFE/BE横断開発 7 Full-Stack TypeScriptの旨み Full-Stack TypeScriptだと 何がいいの？
7. 🄫ZEST Inc. ｜ Mita.ts #1 フルTypeScriptでFE/BE横断開発 8 Full-Stack TypeScriptの旨み フロントエンド‧バックエンドを 横断して開発できる
8. 🄫ZEST Inc. ｜ Mita.ts #1 フルTypeScriptでFE/BE横断開発 9 Full-Stack TypeScriptの旨み ‧経験の浅いエンジニアでも、領域を横断するハードルを下げてくれる ‧zodとtRPCにより、型安全でデグレやバグに気づきやすい ‧少⼈数のチームでも継続的なデリバリーが⾏える フロントエンド‧バックエンドを横断して開発できる
9. 🄫ZEST Inc. ｜ Mita.ts #1 フルTypeScriptでFE/BE横断開発 10 Full-Stack TypeScriptの旨み - 領域を横断するハードルを下げてくれる 新しい⾔語の 習得 ⾔語の特性 既存コードの 理解 プロダクト アーキテクチャ の理解 周辺ライブラ リの知⾒ フレームワーク の知識
10. 🄫ZEST Inc. ｜ Mita.ts #1 フルTypeScriptでFE/BE横断開発 11 Full-Stack TypeScriptの旨み - 領域を横断するハードルを下げてくれる 新しい⾔語の 習得 ⾔語の特性 既存コードの 理解 プロダクト アーキテクチャ の理解 周辺ライブラ リの知⾒ フレームワーク の知識 ✅ ✅ ( ✅ )
11. 🄫ZEST Inc. ｜ Mita.ts #1 フルTypeScriptでFE/BE横断開発 13 Full-Stack TypeScriptの旨み - 型安全でデグレやバグに気づきやすい バックエンド フロントエンド Branded TypeやUnion Typeなどの型情報も維持され、 Dayjsなどのinstance objectなど(※) も送受信できる ※superjsonなどのtransformerの指定が必要 👉 ‧⽣産性の向上 ‧バグやデグレの軽減 ‧破壊的変更に  気づきやすい
12. 🄫ZEST Inc. ｜ Mita.ts #1 フルTypeScriptでFE/BE横断開発 14 Full-Stack TypeScriptの旨み - 継続的なデリバリーが⾏える データ⾜りないので、 API追加して欲しいですが… 別タスクで忙しいから、 着⼿来週になります。 ⾃分で対応できたらいいけ ど、この⾔語わからない。 リリース1週間伸びちゃう フロントエンド バックエンド
13. 🄫ZEST Inc. ｜ Mita.ts #1 フルTypeScriptでFE/BE横断開発 15 Full-Stack TypeScriptの旨み - 継続的なデリバリーが⾏える ここのAPIデータ⾜りないな。追加しよう！ レビューくらいなら任せて！ 不⾜しているリソース を補い合って継続的に デリバリーできる フロントエンド バックエンド
14. 🄫ZEST Inc. ｜ Mita.ts #1 フルTypeScriptでFE/BE横断開発 16 社内での動き BEメインの機能だが、FEにも設定項⽬を追加す る必要がある 👉 BEエンジニアが設定画⾯も同時に作成 Sentryでアラートが上がった際に、APIレスポン スが関係してそう 👉 FEエンジニアがBEのコードを確認して調査 画⾯に新しい項⽬が増えたがAPIが不⾜している 👉 FEエンジニアがAPIのスキーマ修正を⾏う BEのリファクタリングでAPIの分割を⾏いたい 👉 BEエンジニアがフロント部分も⼀緒に修正 etc… 開発アイテムの設計相談をする 👉 FE/BEお互いにコードを把握できるので、開 発の議論が⾏いやすい
15. 🄫ZEST Inc. ｜ Mita.ts #1 フルTypeScriptでFE/BE横断開発 17 まとめ ‧Full-Stack TypeScriptによる横断開発には様々なメリットがある ‧領域を横断するハードルを下げてくれる ‧型安全でデグレやバグに気づきやすい ‧継続的なデリバリーが⾏える ‧各々の領域専⾨性を⽣かしつつ、フルスタックに動くことができる ‧もちろんFE/BE固有の設計や知識を別途学ぶ必要はあるが、領域を横断する後押し をしてくれる技術スタック
16. 護りたい。その想いを護る。