Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Features
Speaker Deck
PRO
Sign in
Sign up for free
Search
Search
TypeScript でつくるフルスタック環境の紹介
Search
Mitsui
April 06, 2022
Programming
2
1k
TypeScript でつくるフルスタック環境の紹介
Mitsui
April 06, 2022
Tweet
Share
More Decks by Mitsui
See All by Mitsui
チームの立て直し施策をGoogleの 『効果的なチーム』と見比べてみた
maroon8021
0
1.9k
チームのアジャイルな活動
maroon8021
0
120
Valueを使ったふりかえりをやってみた
maroon8021
0
130
Other Decks in Programming
See All in Programming
tsconfigのオプションで変わる型世界
keisukeikeda
1
130
コードに語らせよう――自己ドキュメント化が内包する楽しさについて / Let the Code Speak
nrslib
5
990
TypeScript エンジニアが Android 開発の世界に飛び込んだ話
yuisakamoto
6
950
TypeScript製IaCツールのAWS CDKが様々な言語で実装できる理由 ~他言語変換の仕組み~ / cdk-language-transformation
gotok365
7
380
型安全なDrag and Dropの設計を考える
yudppp
5
660
鯛変だったRubyKaigi 2025 ── それでも楽しかった!
pndcat
0
130
CRUD から CQRS へ ~ 分離が可能にする柔軟性
tkawae
0
220
Efficiency and Rock 'n’ Roll (Really!)
hollycummins
0
590
TSConfig Solution Style & subpath imports to switch types on a per-file basis
maminami373
1
180
「MCPを使ってる人」が より詳しくなるための解説
yamaguchidesu
0
600
TypeScript Language Service Plugin で CSS Modules の開発体験を改善する
mizdra
PRO
3
2.4k
AI時代のリアーキテクチャ戦略 / Re-architecture Strategy in the AI Era
dachi023
0
190
Featured
See All Featured
JavaScript: Past, Present, and Future - NDC Porto 2020
reverentgeek
48
5.4k
Gamification - CAS2011
davidbonilla
81
5.3k
The Illustrated Children's Guide to Kubernetes
chrisshort
48
50k
Art, The Web, and Tiny UX
lynnandtonic
298
21k
Measuring & Analyzing Core Web Vitals
bluesmoon
7
460
The Cult of Friendly URLs
andyhume
78
6.4k
Done Done
chrislema
184
16k
Learning to Love Humans: Emotional Interface Design
aarron
273
40k
Git: the NoSQL Database
bkeepers
PRO
430
65k
Cheating the UX When There Is Nothing More to Optimize - PixelPioneers
stephaniewalter
280
13k
Fantastic passwords and where to find them - at NoRuKo
philnash
51
3.2k
"I'm Feeling Lucky" - Building Great Search Experiences for Today's Users (#IAC19)
danielanewman
228
22k
Transcript
TypeScriptでつくる フルスタック環境の紹介 OCHaCafe5 #4 挑戦!TypeScript Tatsuhiko Mitsui
TypeScriptでフルスタック? ❏ フロントエンドもバックエンドも、そしてインフラもTypeScriptで作る場合、どのような フレームワークやライブラリがあるか ❏ プロジェクトなどで導入するとどんな良いこと、難しいことがあるか → 新規プロジェクトでの技術選定やプライベートでの実装の選択肢の一つになると幸い です ※各技術の詳細は言及しません
※すでに実践している方には目新しいことはありません …
自己紹介 ❏ 名前 : Mitsui Tatsuhiko ❏ 好きな言語 : TypeScript
❏ 好きなもの : マンガ (ただしあまり王道なものは読まない)
目次 ❏ TypeScriptフルスタック環境の概要説明 ❏ 構成について ❏ フレームワークやライブラリの紹介 ❏ TypeScriptフルスタック環境におけるポジティブ/ネガティブな面 ❏
ポジティブな面 ❏ ネガティブな面
TypeScriptフルスタック環境の概要説明
構成について
構成 ❏ monorepo構成を前提にお話しします
フレームワークやライブラリの紹介
frontend ❏ View部分を扱うフレームワーク / ライブラリでTypeScript対応していないものはな いのでは?と言っても過言ではないくらいになってきた ❏ API部分も型を用いて安全に実装できる
backend ❏ JS(Node.js)のbackend構成の王道パターンがあまり確立していなかった印象が あった ❏ しかし昨今TypeScriptが流行していることやNestJSの台頭で各社似たような構成 で構築するようになってきた ❏ backend向けのライブラリやフレームワークも続々と出ている
infrastructure ❏ Infrastructure as CodeをTypeScriptで一部実現することができる ❏ 型によるサジェストや意図しない値に早期に気づくことができ、開発体験としてよい ❏ テストも書くことができて後方互換担保や変化に気づきやすい
→ 全部TypeScriptで開発することができます!
TypeScriptフルスタック環境における ポジティブ/ネガティブな面
ポジティブな面 ❏ すべてを一つの言語で実装することができる ❏ 共通化がしやすい ❏ バックエンドもTypeScriptで構築する事例が複数出てきており、今後も伸びていき そう
すべてを一つの言語で実装することができる ❏ 言語によるコンテキストスイッチが少なくスムーズに実装することができる ❏ ex: 型の定義方法が異なることによる typoなどがない ❏ チーム体制次第では実装効率の向上が見込める ❏
実装物に対して一貫して対応しやすい ❏ 分業制であったとしてもヘルプしやすい ❏ チーム内で共通の技術を追いかけやすい
共通化がしやすい ❏ 共通のライブラリなどを大元で管理できる ❏ 右記の例ではTypeScriptやJestなどをrootでインス トールして運用する ❏ 同じTypeScriptで書かれているため、共通処 理を別パッケージ化して利用することができる ❏
型定義も共通化可能
バックエンドもTypeScriptで構築する事例が出てきている 技術選定をする上で市場においてその技術の活発さが一つ観点になるかと思います が、いろいろな事例を最近は見かけることが多くなったと思います 事例 • なぜバックエンドTypeScriptか?技術選定背景と実践例を紹介します ◦ (株式会社カケハシ) • メルカリ
Shops での NestJS を使った GraphQL Server の実装 ◦ ※BFFの事例です • 全てがTypeScriptで動く「クラウド郵便 atena」を支える技術スタック
ネガティブな面 ❏ 共通化部分が足を引っ張ることがある ❏ 市場においてTypeScript人材が少ない ❏ フレームワーク / ライブラリが成熟しきっていない
共通化部分が足を引っ張ることがある ❏ 大元で管理しているライブラリのバージョン が、どこかの都合であげれない ❏ frontend都合でutil部分に修正を入れたら backend側でエラーがでた → 共通化の強みであり弱み
市場においてTypeScript人材が少ない ❏ backend × TypeScriptの人材はまだまだ少ない印象 ❏ 求人自体は増えていそうなので、需要と供給のバランスが合っていなさそう ❏ backendの経験があればTypeScriptの経験は問わず、入社後にキャッチアップしてもらう方針が現 実的
※正確な数字を元に記載しているわけではなく、観測範囲での体感になります
フレームワーク / ライブラリが成熟しきっていない ❏ TypeScript自体も継続的にアップデートが入る ❏ フロントエンドのものでもバックエンドのものでも群雄割拠しており、気づいたら同系 統のライブラリが出ていたりする ❏ フレームワークやライブラリの変更に追従するコスト
❏ 新機能により既存の実装が負債化する ❏ Breaking Changeもある ❏ ※もちろんTypeScriptに限った話ではない
まとめ ❏ 多少選択肢が狭まるが、TypeScriptで全部開発することができます! ❏ 良くも悪くも新しいものや変化が続々出てくる ❏ 個人開発や規模の小さいところからフルスタックなTypeScript環境を試してみては いかがでしょう
ありがとうございました