20240508_TypeScriptLT資料

以下のイベント時に使用したスライドです
https://kepple.connpass.com/event/315546/

Transcript

1. TypeScriptでフルスタックな 開発体験をとことん追求してみる X Mile株式会社 蝦名潤
2. 蝦名 潤 Jun Ebina Tech Lead 青森出身。公立はこだて未来大学にてコンピュータサイエンスを選考 在学時には仮想通貨やブロックチェーン技術を独学 卒業後、不動産Techベンチャーにエンジニア1期生として入社 コアメンバーとして、フロントエンド・バックエンド・インフラと境目なくWebサー ビス開発に従事 2022年、X Mileに1人目のエンジニアとしてジョインし、開発基盤から組織構 築までリード Rails書いたりPython書いたり技術的には何でも屋状態 最近の関心はTypeScript、エッジコンピューティング、SQLiteなど X: @ebijun1007
3. 令和を代表する メガベンチャーを創る Mission 私たちは、今の日本に必要なのは経済を牽引するベンチャー企業だと考えます。 一番の問題は、戦前戦後や幕末に比べて、 日本人の起業家精神が薄れてしまっている一方で、その危機意識がないこと。 いつの時代も、イノベーションの担い手はハングリー精神のある新興企業から生まれています。 令和元年創業の私たちは、日本経済の活力を取り戻すために、新産業を創出し、 世界で勝負し、日本の次世代を担う人財を輩出する、歴史に残る企業を目指します。 私たちの使命 Copyright © X Mile All Rights Reserved.
4. 運輸事業者向け バーティカルSaaS Product プロダクト紹介 運輸業界では社会問題化する日本最大の ドライバー不足と同時に「多重化下請け構造」や 電話・紙・FAX を中心とした「低い労働生産性」など 多くの解決すべき業界課題が存在しています。 当社はそれらをソフトウェアによって解決し、 事業者様の売上最大化・コスト改善を図ることで、 インフラ産業である運輸業界を支えます。 Copyright © X Mile All Rights Reserved.
5. 日本最大級・ノンデスク業界専門の 求人検索サイト Product 累計 100,000 名以上が登録している、日本最大級の ノンデスク業界専門の求人検索サービスです。 北海道~沖縄まで、全国の様々な業界の求人詳細を 閲覧できるサイトとなっています。 Copyright © 2022 X Mile All Rights Reserved.
6. 技術スタック Digital X Mileではプロダクト開発・環境に 対して、積極的に投資を行っており、 自社サービスについては開発・ Webマーケティング・セールスまでを 全て自社でシームレスに 業務構築しております。 また、事業部・コーポレート部署に ついてはバックオフィスSaaSを多数導入 することで、事業と組織の生産性を高め、 社員がコア業務に集中できる環境を、 創業期より整備してまいりました。 Copyright © X Mile All Rights Reserved. 今日話す部分
7. 今日話すこと • 現状のフルTypeScriptなアーキテクチャのgood/badポイント • 改善するとしたら何をするか • どこまでTypeScriptでやるべきか • 当初話す予定だったが諦めたキーワード達 スライド作っている間にタイトルと乖離してしまった 🙊
9. • フロント（Next.js） • バックエンド（Node.js） • IaC（AWS CDK） 全てTypeScriptで統一 リポジトリはフロントエンドとバックエ ンド2分割
10. 現状のgoodポイント • 関心毎の凝集度が高い ◦ アプリケーションロジックはNext.js、ビジネスロジックや社内固有の事情に 基づく仕様はAWS CDKに閉じ込める ▪ UI/UXはクライアントサイド、ロジックはサーバサイドなど Next.js内でも分離しや すい ◦ 引数や返り値が明確で他モジュールがブラックボックスでもコードを書きや すく、スイッチングコストが低い ▪ サーバーサイドの静的言語では当たり前だが、フロントまでカバーできるのは TypeScriptならでは
11. Next.js内の責務 ・入力値の検証 ・データの描画 ・SEOやアクセシビリティ対 策 CDK内の責務 ・データの永続化 ・検索ロジック ・外部サービスへの連携
12. 現状のbadポイント • 境界を超えて追従出来ない ◦ アプリケーション/インフラでリポジトリが分断されているため、お互いの実装 を認識出来ない ◦ API定義やデータ型が変わった時に同期を取る仕組みが無く、差分が生じ ていても検知出来ない ▪ コードレビューで人力で解決している状態 💪💪💪 • どこにでもTypeScriptを書けてしまう ◦ この処理ってどっちのリポジトリに実装するのが良いんだっけ？が 多発 ◦ アーキテクト力が鍛えられる💪💪💪
13. 改善するとしたら何をするか • モノレポに寄せて境界を減らす ◦ パッケージマネージャのworkspaces機能や、Nx・Turborepoなどの モノレポ管理ツールを使う ◦ 一度書いたコードをどこからでも呼び出せる状態にする • インフラ（IaC）は別の概念として扱い、過度な共通化はしない ◦ アプリケーションに関することはCDK内から排除し、データフローの 定義など非機能要件のロジックだけ実装する
14. 具体例（求人データの作成） CDKリポジトリ Next.jsリポジトリ
15. 具体例（求人データの作成） 入力値を検証してDynamoDBに書 き込むという共通した処理だが 異なるリポジトリで二重管理になっ てしまっている
16. 具体例（求人データの作成） 共通モジュールとして定 義し、Next.jsからもCDK からも呼び出す このLambdaはアプリケーションに 影響しないので、共通化せず CDK に閉じ込める。 TypeScript以外の言語でも良い 全部載せモノレポ
17. どこまでTypeScriptでやるべき? • アプリケーションはフルTypeScriptで快適な環境 ◦ Next.js, remix, honoなどフルスタックに書けるFWが整ってきた • CDKにこだわるメリットはあまり感じられない ◦ なんでもTypeScriptで出来る ≠ なんでもTypeScriptでやる ◦ プロダクトの思想とマッチするクラウドベンダーに乗っかる ▪ 3大クラウドベンダー • 柔軟性は高いが手間もかかる。 CDK for Terraform などAWS以外の選択肢もアリ ▪ Vercel、CloudflareなどFWのコントリビュートをしているベンダー • ホスティングとFaaSでプロダクト要件満たせる場合に限り、開発体験が良くサポートも 手厚い。ストレージや DBサービスも出てきているので、今後の BaaSとしての仕上がり に期待 ▪ その他PaaS
18. 余談
19. 諦めたキーワード達 • zodが素晴らしい。TypeScriptならではの開発体験 • Zodios vs GraphQL vs tRPC • React Native 別の機会に話すかテックブログに書く予定✍ （X Mile zenn で検索おなしゃす！）
20. 付録 • Zodios vs GraphQL vs tRPC LT後の懇親会でこの件について質問があったのでスライド追加し ました。 • Zodiosとは？ • 結局どれが良い？
21. Zodiosとは？ • zod + axios • ZodでAPIスキーマを定義して、型安全にaxiosを使えるライブ ラリ • 公式のexampleがわかりやすい ◦ https://github.com/ecyrbe/zodios • axios自体が良い意味で枯れてるのでとっつきやすい
22. API定義は結局どれが良い？ • zodiosとtRPCはフルTypeScriptが前提 ◦ 個人的にはtRPCの方が好み。他の選択肢に比べてコード 量が少なめ。バリデーションのライブラリも柔軟 ◦ zodiosも悪くはないがRestに強いこだわりが無い限り積極 的に選択しなくても良さそう • バックエンドが異なる言語の場合 ◦ プロダクトの性質に応じてよしなに ◦ スキーマはあった方が楽なのでOpenAPIかGraphQLどち らか入れた方が良いが、大概Rest APIで事足りる