TypeScript でつくるフルスタック環境の紹介

Transcript

1. TypeScriptでつくる フルスタック環境の紹介 OCHaCafe5 #4 挑戦！TypeScript Tatsuhiko Mitsui
2. TypeScriptでフルスタック？ ❏ フロントエンドもバックエンドも、そしてインフラもTypeScriptで作る場合、どのような フレームワークやライブラリがあるか ❏ プロジェクトなどで導入するとどんな良いこと、難しいことがあるか → 新規プロジェクトでの技術選定やプライベートでの実装の選択肢の一つになると幸い です ※各技術の詳細は言及しません ※すでに実践している方には目新しいことはありません …
3. 自己紹介 ❏ 名前 : Mitsui Tatsuhiko ❏ 好きな言語 : TypeScript ❏ 好きなもの : マンガ (ただしあまり王道なものは読まない)
4. 目次 ❏ TypeScriptフルスタック環境の概要説明 ❏ 構成について ❏ フレームワークやライブラリの紹介 ❏ TypeScriptフルスタック環境におけるポジティブ/ネガティブな面 ❏ ポジティブな面 ❏ ネガティブな面
5. TypeScriptフルスタック環境の概要説明
6. 構成について
7. 構成 ❏ monorepo構成を前提にお話しします
8. フレームワークやライブラリの紹介
9. frontend ❏ View部分を扱うフレームワーク / ライブラリでTypeScript対応していないものはな いのでは？と言っても過言ではないくらいになってきた ❏ API部分も型を用いて安全に実装できる
10. backend ❏ JS(Node.js)のbackend構成の王道パターンがあまり確立していなかった印象が あった ❏ しかし昨今TypeScriptが流行していることやNestJSの台頭で各社似たような構成 で構築するようになってきた ❏ backend向けのライブラリやフレームワークも続々と出ている
11. infrastructure ❏ Infrastructure as CodeをTypeScriptで一部実現することができる ❏ 型によるサジェストや意図しない値に早期に気づくことができ、開発体験としてよい ❏ テストも書くことができて後方互換担保や変化に気づきやすい
12. → 全部TypeScriptで開発することができます！
13. TypeScriptフルスタック環境における ポジティブ/ネガティブな面
14. ポジティブな面 ❏ すべてを一つの言語で実装することができる ❏ 共通化がしやすい ❏ バックエンドもTypeScriptで構築する事例が複数出てきており、今後も伸びていき そう
15. すべてを一つの言語で実装することができる ❏ 言語によるコンテキストスイッチが少なくスムーズに実装することができる ❏ ex: 型の定義方法が異なることによる typoなどがない ❏ チーム体制次第では実装効率の向上が見込める ❏ 実装物に対して一貫して対応しやすい ❏ 分業制であったとしてもヘルプしやすい ❏ チーム内で共通の技術を追いかけやすい
16. 共通化がしやすい ❏ 共通のライブラリなどを大元で管理できる ❏ 右記の例ではTypeScriptやJestなどをrootでインス トールして運用する ❏ 同じTypeScriptで書かれているため、共通処 理を別パッケージ化して利用することができる ❏ 型定義も共通化可能
17. バックエンドもTypeScriptで構築する事例が出てきている 技術選定をする上で市場においてその技術の活発さが一つ観点になるかと思います が、いろいろな事例を最近は見かけることが多くなったと思います 事例 • なぜバックエンドTypeScriptか？技術選定背景と実践例を紹介します ◦ (株式会社カケハシ) • メルカリ Shops での NestJS を使った GraphQL Server の実装 ◦ ※BFFの事例です • 全てがTypeScriptで動く「クラウド郵便 atena」を支える技術スタック
18. ネガティブな面 ❏ 共通化部分が足を引っ張ることがある ❏ 市場においてTypeScript人材が少ない ❏ フレームワーク / ライブラリが成熟しきっていない
19. 共通化部分が足を引っ張ることがある ❏ 大元で管理しているライブラリのバージョン が、どこかの都合であげれない ❏ frontend都合でutil部分に修正を入れたら backend側でエラーがでた → 共通化の強みであり弱み
20. 市場においてTypeScript人材が少ない ❏ backend × TypeScriptの人材はまだまだ少ない印象 ❏ 求人自体は増えていそうなので、需要と供給のバランスが合っていなさそう ❏ backendの経験があればTypeScriptの経験は問わず、入社後にキャッチアップしてもらう方針が現 実的 ※正確な数字を元に記載しているわけではなく、観測範囲での体感になります
21. フレームワーク / ライブラリが成熟しきっていない ❏ TypeScript自体も継続的にアップデートが入る ❏ フロントエンドのものでもバックエンドのものでも群雄割拠しており、気づいたら同系 統のライブラリが出ていたりする ❏ フレームワークやライブラリの変更に追従するコスト ❏ 新機能により既存の実装が負債化する ❏ Breaking Changeもある ❏ ※もちろんTypeScriptに限った話ではない
22. まとめ ❏ 多少選択肢が狭まるが、TypeScriptで全部開発することができます！ ❏ 良くも悪くも新しいものや変化が続々出てくる ❏ 個人開発や規模の小さいところからフルスタックなTypeScript環境を試してみては いかがでしょう
23. ありがとうございました