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
1
660
TypeScript でつくるフルスタック環境の紹介
Mitsui
April 06, 2022
Tweet
Share
More Decks by Mitsui
See All by Mitsui
チームのアジャイルな活動
maroon8021
0
76
Valueを使ったふりかえりをやってみた
maroon8021
0
94
Other Decks in Programming
See All in Programming
サイコロで理解する統計的仮説検定の考え方
tatamiya
4
950
冗長なエラーログを削減し、スタックトレースを手に入れる / Reducing Verbose Error Logs and Obtaining Stack Traces
upamune
0
760
PHPの次期バージョンはこの時期どうなっているのか - Internalsの開発体制について - PHPカンファレンス小田原
youkidearitai
PRO
1
190
新宿ダンジョンを可視化してみた
satoshi7190
2
260
OpenAPIを中心に考えるAPI開発入門 / Introduction to API Development with a Focus on OpenAPI
seike460
PRO
2
170
コーンフレークから始める モデリング会話入門
ogurotakayuki
0
370
Scalable Customer Journey Orchestration (CJO)
lewuathe
0
330
単体テストを書かない技術 #phpcon_odawara
o0h
PRO
27
8.3k
スキーマ駆動開発による品質とスピードの両立 - 私達は何故、スキーマを書くのか
kentaroutakeda
0
170
Apache Hive 4 on Treasure Data
ryukobayashi
0
330
AWS CDKコントリビュートTIPS / aws-cdk-contribution-tips
gotok365
2
200
#phpcon_odawara オープン・クローズドなテストフィクスチャを求めて / open closed test fixtures
77web
3
230
Featured
See All Featured
A designer walks into a library…
pauljervisheath
200
23k
From Idea to $5000 a Month in 5 Months
shpigford
377
45k
The Pragmatic Product Professional
lauravandoore
25
5.8k
Thoughts on Productivity
jonyablonski
58
3.8k
ピンチをチャンスに:未来をつくるプロダクトロードマップ #pmconf2020
aki_iinuma
78
43k
Rails Girls Zürich Keynote
gr2m
91
13k
Mobile First: as difficult as doing things right
swwweet
216
8.6k
Visualization
eitanlees
136
14k
Documentation Writing (for coders)
carmenintech
60
3.9k
Dealing with People You Can't Stand - Big Design 2015
cassininazir
357
22k
Keith and Marios Guide to Fast Websites
keithpitt
408
22k
Helping Users Find Their Own Way: Creating Modern Search Experiences
danielanewman
20
1.9k
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環境を試してみては いかがでしょう
ありがとうございました