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
1.1k
TypeScript でつくるフルスタック環境の紹介
Mitsui
April 06, 2022
Tweet
Share
More Decks by Mitsui
See All by Mitsui
チームの立て直し施策をGoogleの 『効果的なチーム』と見比べてみた
maroon8021
0
2k
チームのアジャイルな活動
maroon8021
0
120
Valueを使ったふりかえりをやってみた
maroon8021
0
130
Other Decks in Programming
See All in Programming
AI Agent 時代的開發者生存指南
eddie
4
2k
Cursorハンズオン実践!
eltociear
2
1.2k
When Dependencies Fail: Building Antifragile Applications in a Fragile World
selcukusta
0
110
釣り地図SNSにおける有料機能の実装
nokonoko1203
0
190
CSC305 Lecture 06
javiergs
PRO
0
260
テーブル定義書の構造化抽出して、生成AIでDWH分析を試してみた / devio2025tokyo
kasacchiful
0
220
AI Coding Meetup #3 - 導入セッション / ai-coding-meetup-3
izumin5210
0
3.4k
CSC509 Lecture 04
javiergs
PRO
0
300
CSC509 Lecture 05
javiergs
PRO
0
310
なぜあの開発者はDevRelに伴走し続けるのか / Why Does That Developer Keep Running Alongside DevRel?
nrslib
3
410
CSC509 Lecture 07
javiergs
PRO
0
240
CSC305 Lecture 08
javiergs
PRO
0
250
Featured
See All Featured
No one is an island. Learnings from fostering a developers community.
thoeni
21
3.5k
Code Review Best Practice
trishagee
72
19k
Rails Girls Zürich Keynote
gr2m
95
14k
Rebuilding a faster, lazier Slack
samanthasiow
84
9.2k
Facilitating Awesome Meetings
lara
56
6.6k
The World Runs on Bad Software
bkeepers
PRO
72
11k
The Language of Interfaces
destraynor
162
25k
"I'm Feeling Lucky" - Building Great Search Experiences for Today's Users (#IAC19)
danielanewman
230
22k
Testing 201, or: Great Expectations
jmmastey
45
7.7k
Designing Dashboards & Data Visualisations in Web Apps
destraynor
231
53k
The Pragmatic Product Professional
lauravandoore
36
7k
Being A Developer After 40
akosma
91
590k
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環境を試してみては いかがでしょう
ありがとうございました