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
820
TypeScript でつくるフルスタック環境の紹介
Mitsui
April 06, 2022
Tweet
Share
More Decks by Mitsui
See All by Mitsui
チームのアジャイルな活動
maroon8021
0
87
Valueを使ったふりかえりをやってみた
maroon8021
0
110
Other Decks in Programming
See All in Programming
Amazon BedrockでサーバレスなAIお料理ボットを作成する!!
tosuri13
0
230
o1モデルのプロンプトエンジニアリングって?
ktc_wada
0
260
Go Code Generation at newmo / 2024-08-27 #newmo_layerx_go
genkey6
0
560
Modern Angular with the NGRX Signal Store New Rules for Your Architecture @BASTA! 2024 in Mainz
manfredsteyer
PRO
0
140
僕が思い描くTypeScriptの未来を勝手に先取りする
yukukotani
9
2.4k
GraphQL あるいは React における自律的なデータ取得について
quramy
11
3k
実践!難読化ガイド
mitchan
0
200
オートマトン学習しろ / Do automata learning
makenowjust
3
130
rbs-inlineを導入してYARDからRBSに移行する
euglena1215
1
290
RAGの回答精度評価用のQAデータセットを生成AIに作らせた話
kurahara
0
250
メモリ最適化を究める!iOSアプリ開発における5つの重要なポイント
yhirakawa333
0
420
Regular Expressions, REXML, Automata Learning
makenowjust
0
220
Featured
See All Featured
Visualizing Your Data: Incorporating Mongo into Loggly Infrastructure
mongodb
38
9.2k
Producing Creativity
orderedlist
PRO
340
39k
GraphQLとの向き合い方2022年版
quramy
43
13k
10 Git Anti Patterns You Should be Aware of
lemiorhan
653
58k
Into the Great Unknown - MozCon
thekraken
29
1.4k
Documentation Writing (for coders)
carmenintech
65
4.3k
Dealing with People You Can't Stand - Big Design 2015
cassininazir
363
22k
実際に使うSQLの書き方 徹底解説 / pgcon21j-tutorial
soudai
166
48k
The Language of Interfaces
destraynor
153
23k
Art, The Web, and Tiny UX
lynnandtonic
294
20k
StorybookのUI Testing Handbookを読んだ
zakiyama
26
5.1k
Agile that works and the tools we love
rasmusluckow
327
20k
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環境を試してみては いかがでしょう
ありがとうございました