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

Transcript

1. TypeScriptでつくる
   フルスタック環境の紹介
   OCHaCafe5 #4 挑戦！TypeScript
   Tatsuhiko Mitsui
   

   View Slide

2. TypeScriptでフルスタック？
   ❏ フロントエンドもバックエンドも、そしてインフラもTypeScriptで作る場合、どのような
   フレームワークやライブラリがあるか
   ❏ プロジェクトなどで導入するとどんな良いこと、難しいことがあるか
   → 新規プロジェクトでの技術選定やプライベートでの実装の選択肢の一つになると幸い
   です
   ※各技術の詳細は言及しません
   ※すでに実践している方には目新しいことはありません …
   

   View Slide

3. 自己紹介
   ❏ 名前 : Mitsui Tatsuhiko
   ❏ 好きな言語 : TypeScript
   ❏ 好きなもの : マンガ
   (ただしあまり王道なものは読まない)
   

   View Slide

4. 目次
   ❏ TypeScriptフルスタック環境の概要説明
   ❏ 構成について
   ❏ フレームワークやライブラリの紹介
   ❏ TypeScriptフルスタック環境におけるポジティブ/ネガティブな面
   ❏ ポジティブな面
   ❏ ネガティブな面
   

   View Slide

5. TypeScriptフルスタック環境の概要説明
   

   View Slide

6. 構成について
   

   View Slide

7. 構成
   ❏ monorepo構成を前提にお話しします
   

   View Slide

8. フレームワークやライブラリの紹介
   

   View Slide

9. frontend
   ❏ View部分を扱うフレームワーク / ライブラリでTypeScript対応していないものはな
   いのでは？と言っても過言ではないくらいになってきた
   ❏ API部分も型を用いて安全に実装できる
   

   View Slide

10. backend
    ❏ JS(Node.js)のbackend構成の王道パターンがあまり確立していなかった印象が
    あった
    ❏ しかし昨今TypeScriptが流行していることやNestJSの台頭で各社似たような構成
    で構築するようになってきた
    ❏ backend向けのライブラリやフレームワークも続々と出ている
    

    View Slide

11. infrastructure
    ❏ Infrastructure as CodeをTypeScriptで一部実現することができる
    ❏ 型によるサジェストや意図しない値に早期に気づくことができ、開発体験としてよい
    ❏ テストも書くことができて後方互換担保や変化に気づきやすい
    

    View Slide

12. → 全部TypeScriptで開発することができます！
    

    View Slide

13. TypeScriptフルスタック環境における
    ポジティブ/ネガティブな面
    

    View Slide

14. ポジティブな面
    ❏ すべてを一つの言語で実装することができる
    ❏ 共通化がしやすい
    ❏ バックエンドもTypeScriptで構築する事例が複数出てきており、今後も伸びていき
    そう
    

    View Slide

15. すべてを一つの言語で実装することができる
    ❏ 言語によるコンテキストスイッチが少なくスムーズに実装することができる
    ❏ ex: 型の定義方法が異なることによる typoなどがない
    ❏ チーム体制次第では実装効率の向上が見込める
    ❏ 実装物に対して一貫して対応しやすい
    ❏ 分業制であったとしてもヘルプしやすい
    ❏ チーム内で共通の技術を追いかけやすい
    

    View Slide

16. 共通化がしやすい
    ❏ 共通のライブラリなどを大元で管理できる
    ❏ 右記の例ではTypeScriptやJestなどをrootでインス
    トールして運用する
    ❏ 同じTypeScriptで書かれているため、共通処
    理を別パッケージ化して利用することができる
    ❏ 型定義も共通化可能
    

    View Slide

17. バックエンドもTypeScriptで構築する事例が出てきている
    技術選定をする上で市場においてその技術の活発さが一つ観点になるかと思います
    が、いろいろな事例を最近は見かけることが多くなったと思います
    事例
    ● なぜバックエンドTypeScriptか？技術選定背景と実践例を紹介します
    ○ (株式会社カケハシ)
    ● メルカリ Shops での NestJS を使った GraphQL Server の実装
    ○ ※BFFの事例です
    ● 全てがTypeScriptで動く「クラウド郵便 atena」を支える技術スタック
    

    View Slide

18. ネガティブな面
    ❏ 共通化部分が足を引っ張ることがある
    ❏ 市場においてTypeScript人材が少ない
    ❏ フレームワーク / ライブラリが成熟しきっていない
    

    View Slide

19. 共通化部分が足を引っ張ることがある
    ❏ 大元で管理しているライブラリのバージョン
    が、どこかの都合であげれない
    ❏ frontend都合でutil部分に修正を入れたら
    backend側でエラーがでた
    → 共通化の強みであり弱み
    

    View Slide

20. 市場においてTypeScript人材が少ない
    ❏ backend × TypeScriptの人材はまだまだ少ない印象
    ❏ 求人自体は増えていそうなので、需要と供給のバランスが合っていなさそう
    ❏ backendの経験があればTypeScriptの経験は問わず、入社後にキャッチアップしてもらう方針が現
    実的
    ※正確な数字を元に記載しているわけではなく、観測範囲での体感になります
    

    View Slide

21. フレームワーク / ライブラリが成熟しきっていない
    ❏ TypeScript自体も継続的にアップデートが入る
    ❏ フロントエンドのものでもバックエンドのものでも群雄割拠しており、気づいたら同系
    統のライブラリが出ていたりする
    ❏ フレームワークやライブラリの変更に追従するコスト
    ❏ 新機能により既存の実装が負債化する
    ❏ Breaking Changeもある
    ❏ ※もちろんTypeScriptに限った話ではない
    

    View Slide

22. まとめ
    ❏ 多少選択肢が狭まるが、TypeScriptで全部開発することができます！
    ❏ 良くも悪くも新しいものや変化が続々出てくる
    ❏ 個人開発や規模の小さいところからフルスタックなTypeScript環境を試してみては
    いかがでしょう
    

    View Slide

23. ありがとうございました
    

    View Slide