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でやるべきか ● 当初話す予定だったが諦めたキーワード達 スライド作っている間にタイトルと乖離してしまった 🙊

No content

● フロント（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で事足りる