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
20240508_TypeScriptLT資料
Search
ebijun1007
May 12, 2024
1
38
20240508_TypeScriptLT資料
以下のイベント時に使用したスライドです
https://kepple.connpass.com/event/315546/
ebijun1007
May 12, 2024
Tweet
Share
More Decks by ebijun1007
See All by ebijun1007
スタートアップのフロントエンド事情 GENBA #2 〜Front-End Opsの現場〜
ebijun1007
1
850
Featured
See All Featured
Exploring the Power of Turbo Streams & Action Cable | RailsConf2023
kevinliebholz
22
3.9k
Being A Developer After 40
akosma
82
580k
Build The Right Thing And Hit Your Dates
maggiecrowley
29
2.2k
4 Signs Your Business is Dying
shpigford
179
21k
WebSockets: Embracing the real-time Web
robhawkes
59
7.3k
A Modern Web Designer's Workflow
chriscoyier
690
190k
Art, The Web, and Tiny UX
lynnandtonic
294
20k
How to Ace a Technical Interview
jacobian
275
23k
GraphQLとの向き合い方2022年版
quramy
43
13k
The Invisible Side of Design
smashingmag
295
50k
XXLCSS - How to scale CSS and keep your sanity
sugarenia
246
1.3M
Done Done
chrislema
180
16k
Transcript
TypeScriptでフルスタックな 開発体験をとことん追求してみる X Mile株式会社 蝦名潤
蝦名 潤 Jun Ebina Tech Lead 青森出身。公立はこだて未来大学にてコンピュータサイエンスを選考 在学時には仮想通貨やブロックチェーン技術を独学 卒業後、不動産Techベンチャーにエンジニア1期生として入社 コアメンバーとして、フロントエンド・バックエンド・インフラと境目なくWebサー
ビス開発に従事 2022年、X Mileに1人目のエンジニアとしてジョインし、開発基盤から組織構 築までリード Rails書いたりPython書いたり技術的には何でも屋状態 最近の関心はTypeScript、エッジコンピューティング、SQLiteなど X: @ebijun1007
令和を代表する メガベンチャーを創る Mission 私たちは、今の日本に必要なのは経済を牽引するベンチャー企業だと考えます。 一番の問題は、戦前戦後や幕末に比べて、 日本人の起業家精神が薄れてしまっている一方で、その危機意識がないこと。 いつの時代も、イノベーションの担い手はハングリー精神のある新興企業から生まれています。 令和元年創業の私たちは、日本経済の活力を取り戻すために、新産業を創出し、 世界で勝負し、日本の次世代を担う人財を輩出する、歴史に残る企業を目指します。 私たちの使命
Copyright © X Mile All Rights Reserved.
運輸事業者向け バーティカルSaaS Product プロダクト紹介 運輸業界では社会問題化する日本最大の ドライバー不足と同時に「多重化下請け構造」や 電話・紙・FAX を中心とした「低い労働生産性」など 多くの解決すべき業界課題が存在しています。 当社はそれらをソフトウェアによって解決し、
事業者様の売上最大化・コスト改善を図ることで、 インフラ産業である運輸業界を支えます。 Copyright © X Mile All Rights Reserved.
日本最大級・ノンデスク業界専門の 求人検索サイト Product 累計 100,000 名以上が登録している、日本最大級の ノンデスク業界専門の求人検索サービスです。 北海道~沖縄まで、全国の様々な業界の求人詳細を 閲覧できるサイトとなっています。 Copyright
© 2022 X Mile All Rights Reserved.
技術スタック Digital X Mileではプロダクト開発・環境に 対して、積極的に投資を行っており、 自社サービスについては開発・ Webマーケティング・セールスまでを 全て自社でシームレスに 業務構築しております。 また、事業部・コーポレート部署に
ついてはバックオフィスSaaSを多数導入 することで、事業と組織の生産性を高め、 社員がコア業務に集中できる環境を、 創業期より整備してまいりました。 Copyright © X Mile All Rights Reserved. 今日話す部分
今日話すこと • 現状のフルTypeScriptなアーキテクチャのgood/badポイント • 改善するとしたら何をするか • どこまでTypeScriptでやるべきか • 当初話す予定だったが諦めたキーワード達 スライド作っている間にタイトルと乖離してしまった
🙊
None
• フロント(Next.js) • バックエンド(Node.js) • IaC(AWS CDK) 全てTypeScriptで統一 リポジトリはフロントエンドとバックエ ンド2分割
現状のgoodポイント • 関心毎の凝集度が高い ◦ アプリケーションロジックはNext.js、ビジネスロジックや社内固有の事情に 基づく仕様はAWS CDKに閉じ込める ▪ UI/UXはクライアントサイド、ロジックはサーバサイドなど Next.js内でも分離しや
すい ◦ 引数や返り値が明確で他モジュールがブラックボックスでもコードを書きや すく、スイッチングコストが低い ▪ サーバーサイドの静的言語では当たり前だが、フロントまでカバーできるのは TypeScriptならでは
Next.js内の責務 ・入力値の検証 ・データの描画 ・SEOやアクセシビリティ対 策 CDK内の責務 ・データの永続化 ・検索ロジック ・外部サービスへの連携
現状のbadポイント • 境界を超えて追従出来ない ◦ アプリケーション/インフラでリポジトリが分断されているため、お互いの実装 を認識出来ない ◦ API定義やデータ型が変わった時に同期を取る仕組みが無く、差分が生じ ていても検知出来ない ▪
コードレビューで人力で解決している状態 💪💪💪 • どこにでもTypeScriptを書けてしまう ◦ この処理ってどっちのリポジトリに実装するのが良いんだっけ?が 多発 ◦ アーキテクト力が鍛えられる💪💪💪
改善するとしたら何をするか • モノレポに寄せて境界を減らす ◦ パッケージマネージャのworkspaces機能や、Nx・Turborepoなどの モノレポ管理ツールを使う ◦ 一度書いたコードをどこからでも呼び出せる状態にする • インフラ(IaC)は別の概念として扱い、過度な共通化はしない
◦ アプリケーションに関することはCDK内から排除し、データフローの 定義など非機能要件のロジックだけ実装する
具体例(求人データの作成) CDKリポジトリ Next.jsリポジトリ
具体例(求人データの作成) 入力値を検証してDynamoDBに書 き込むという共通した処理だが 異なるリポジトリで二重管理になっ てしまっている
具体例(求人データの作成) 共通モジュールとして定 義し、Next.jsからもCDK からも呼び出す このLambdaはアプリケーションに 影響しないので、共通化せず CDK に閉じ込める。 TypeScript以外の言語でも良い 全部載せモノレポ
どこまでTypeScriptでやるべき? • アプリケーションはフルTypeScriptで快適な環境 ◦ Next.js, remix, honoなどフルスタックに書けるFWが整ってきた • CDKにこだわるメリットはあまり感じられない ◦
なんでもTypeScriptで出来る ≠ なんでもTypeScriptでやる ◦ プロダクトの思想とマッチするクラウドベンダーに乗っかる ▪ 3大クラウドベンダー • 柔軟性は高いが手間もかかる。 CDK for Terraform などAWS以外の選択肢もアリ ▪ Vercel、CloudflareなどFWのコントリビュートをしているベンダー • ホスティングとFaaSでプロダクト要件満たせる場合に限り、開発体験が良くサポートも 手厚い。ストレージや DBサービスも出てきているので、今後の BaaSとしての仕上がり に期待 ▪ その他PaaS
余談
諦めたキーワード達 • zodが素晴らしい。TypeScriptならではの開発体験 • Zodios vs GraphQL vs tRPC •
React Native 別の機会に話すかテックブログに書く予定✍ (X Mile zenn で検索おなしゃす!)
付録 • Zodios vs GraphQL vs tRPC LT後の懇親会でこの件について質問があったのでスライド追加し ました。 •
Zodiosとは? • 結局どれが良い?
Zodiosとは? • zod + axios • ZodでAPIスキーマを定義して、型安全にaxiosを使えるライブ ラリ • 公式のexampleがわかりやすい
◦ https://github.com/ecyrbe/zodios • axios自体が良い意味で枯れてるのでとっつきやすい
API定義は結局どれが良い? • zodiosとtRPCはフルTypeScriptが前提 ◦ 個人的にはtRPCの方が好み。他の選択肢に比べてコード 量が少なめ。バリデーションのライブラリも柔軟 ◦ zodiosも悪くはないがRestに強いこだわりが無い限り積極 的に選択しなくても良さそう •
バックエンドが異なる言語の場合 ◦ プロダクトの性質に応じてよしなに ◦ スキーマはあった方が楽なのでOpenAPIかGraphQLどち らか入れた方が良いが、大概Rest APIで事足りる