Tweet
Tweet

Slide 1

Slide 1 text

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

Slide 2

Slide 2 text

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

Slide 3

Slide 3 text

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

Slide 4

Slide 4 text

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

Slide 5

Slide 5 text

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

Slide 6

Slide 6 text

構成について

Slide 7

Slide 7 text

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

Slide 8

Slide 8 text

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

Slide 9

Slide 9 text

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

Slide 10

Slide 10 text

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

Slide 11

Slide 11 text

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

Slide 12

Slide 12 text

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

Slide 13

Slide 13 text

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

Slide 14

Slide 14 text

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

Slide 15

Slide 15 text

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

Slide 16

Slide 16 text

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

Slide 17

Slide 17 text

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

Slide 18

Slide 18 text

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

Slide 19

Slide 19 text

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

Slide 20

Slide 20 text

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

Slide 21

Slide 21 text

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

Slide 22

Slide 22 text

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

Slide 23

Slide 23 text

ありがとうございました