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
980
TypeScript でつくるフルスタック環境の紹介
Mitsui
April 06, 2022
Tweet
Share
More Decks by Mitsui
See All by Mitsui
チームの立て直し施策をGoogleの 『効果的なチーム』と見比べてみた
maroon8021
0
1.5k
チームのアジャイルな活動
maroon8021
0
110
Valueを使ったふりかえりをやってみた
maroon8021
0
120
Other Decks in Programming
See All in Programming
マルチアカウント環境での、そこまでがんばらない RI/SP 運用設計
wa6sn
0
560
ローコードサービスの進化のためのモノレポ移行
taro28
1
330
小さく段階的リリースすることで深夜メンテを回避する
mkmk884
2
130
エンジニア未経験が最短で戦力になるためのTips
gokana
0
210
Django for Data Science (Boston Python Meetup, March 2025)
wsvincent
0
230
ミリしらMCP勉強会
watany
1
100
Scala 3 で GLSL のための c-like-for を実装してみた
exoego
1
180
RailsでCQRS/ESをやってみたきづき
suzukimar
2
1.5k
JavaOne 2025: Advancing Java Profiling
jbachorik
1
310
NestJSのコードからOpenAPIを自動生成する際の最適解を探す
astatsuya
0
180
php-fpm がリクエスト処理する仕組みを追う / Tracing-How-php-fpm-Handles-Requests
shin1x1
5
820
データベースエンジニアの仕事を楽にする。PgAssistantの紹介
nnaka2992
9
4.2k
Featured
See All Featured
Distributed Sagas: A Protocol for Coordinating Microservices
caitiem20
331
21k
Automating Front-end Workflow
addyosmani
1369
200k
Keith and Marios Guide to Fast Websites
keithpitt
411
22k
Refactoring Trust on Your Teams (GOTO; Chicago 2020)
rmw
34
2.9k
Code Reviewing Like a Champion
maltzj
522
39k
Fontdeck: Realign not Redesign
paulrobertlloyd
83
5.4k
Raft: Consensus for Rubyists
vanstee
137
6.8k
The Art of Programming - Codeland 2020
erikaheidi
53
13k
A Philosophy of Restraint
colly
203
16k
Responsive Adventures: Dirty Tricks From The Dark Corners of Front-End
smashingmag
251
21k
Sharpening the Axe: The Primacy of Toolmaking
bcantrill
40
2k
Cheating the UX When There Is Nothing More to Optimize - PixelPioneers
stephaniewalter
280
13k
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環境を試してみては いかがでしょう
ありがとうございました