MOSHでのフロントエンドリアーキテクチャの選定技術の紹介

2024年7月11日に実施したMOSH株式会社の社内勉強会でのLT資料です。
MOSHサービスでのフロントエンドリアーキテクチャにおける選定技術の紹介を行います。

Transcript

1. MOSHでのフロントエンドリ アーキテクチャの選定技術 の紹介
 Shodai Suzuki @SoartecL
 MOSH株式会社 社内勉強会 2024.07.11

2. 自己紹介
 • 鈴木翔大 @SoartecL
 • ソフトウェアエンジニア
 • 趣味
 ◦ OSS
 ▪ rails
 ▪ orval
 ◦ ダイビング
 

3. 今日話すこと・話さないこと

4. 今日話すこと 
 • MOSHでは今年の4月頃から中長期的な技術戦略 を練っており抜本的な対応を始めています • 中長期を見据えて改善として フロントエンドはリアーキテクチャ を行っています • 今まで社内での使用経験がない技術を選定しているので 選定した技術の紹介 をします
5. 話さないこと 
 • なぜ、何を、いつ、どのようにするかは今日は スコープ外 です • 既存システムとの兼ね合いによる制約や背景も スコープ外 です • 全体的なアーキテクチャやバックエンドの改善も進めてますが、こちらも スコープ外 です
6. 技術選定において重 視している事

7. 技術選定において重視している事 
 - 「継続的なデリバリーが持続可能な状態」を維持できる事 - 勉強会 vol.1を振り返る: 引用：https://junkyard.song.mu/slides/mosh-study-1/#6
8. 技術選定において重視している事 
 - 皆が簡単に「片付けながら料理ができる」ように技術的な専門性を抽象化させる - 木こりのジレンマだと研磨済みの斧からスタートできる状態を目指す 引用：https://junkyard.song.mu/slides/mosh-study-1/#10
9. 技術スタック紹介

10. - Remix - Bun - Biome - shadcn/ui 技術スタック紹介 

11. Remix
 (SPA mode)

12. WHY: • 既存のアプリケーションは REST APIで通信しているSPA • そこ維持してフロントエンドは SPAアプリとして提供する ◦ 理由については今日は割愛 • ReactでのSPA構成の場合でも以下の開発が可能にしたかった ◦ ファイルベースルーティング ◦ コンポーネントのCo-Location ◦ 各種Configのプリセット • 将来的なNext.jsへの移行も想定したシンプルな Reactアプリケーションを維持したい Remix(SPA mode) 

13. Remix(SPA mode): ファイルベースルーティング 
 • Remixは規約に沿った名称 でディレクトリ・ファイルを作成すると URLと`Route`コンポーネントが紐 付けられる • 新しいページを作成する時に routing用の設定ファイルを編集する様なフローは不要 になる • 例えば、以下の場合は `/pets`では`pets._index`が、`pets/123`では`pets.$id`配下のコンポーネント の`Route`コンポーネントが描画される
14. Remix(SPA mode): ファイルベースルーティング 
 • ファイルベースルーティングの命名規則が少し複雑なので、 URLのパターンから`Route`コンポーネ ントを自動生成するツールを作成しました ◦ https://github.com/soartec-lab/plop-create-remix-route • `users/:id/posts/:id`の様に指定すると、それにマッチするファイル `app/routes/users.$id.posts.$id/route.tsx`を作成します 引用：https://github.com/soartec-lab/plop-create-remix-route
15. Remix(SPA mode): コンポーネントのCo-Location 
 • `Remix`ではディレクトリ配下に `route.tsx`がある場合に`Route`コンポーネントとして扱い、 他のファ イルはルーティングとして扱われる事はなくなる • 特定のページに必要な コンポーネントとテストをまとめる ◦ `Route`コンポーネントと子コンポーネント を同じディレクトリに配置する ◦ コンポーネントとテスト を同じディレクトリに配置する
16. Remix(SPA mode): 各種Configのプリセット 
 • 新しくプロジェクトを開始する際にテンプレートを指定して実行したらすぐに動きます ◦ `bun create remix@latest --template remix-run/remix/templates/spa` • `react-router` + `vite`で構成する場合と比較して初期設定をショートカットできる
17. Bun

18. Why - Crazy fast Bun
 引用：https://bun.sh/
19. Why - Crazy fast Bun
 引用：https://bun.sh/
20. Biome

21. Biome 
 引用：https://twitter.com/rfberaldo/status/1804149657985049060
22. shadcn/ui

23. • `MUI`や`chakra-ui`などのコンポーネントライブラリではなく コンポーネントのコレクション • `shadcn-ui@latest add` を実行するとUIコンポーネントファイルがローカルにコピーされる • ローカルにコピーしたコンポーネントは 自分でカスタマイズできる こんな感じ: shadcn/ui 

24. orval

25. • OpenAPIの定義から以下を自動生成するツール ◦ MSWのモック ▪ テストでhttp通信のモックを行う ◦ zodスキーマ ▪ フォームの入力チェックの validation定義を行う ◦ axiosのhttpクライアント ▪ http通信を行う ▪ 次期バージョンでは fetch対応がリリースされる ◦ swrのカスタムフック ▪ http通信により取得するリソースのステートや通信の状態管理を行う • API定義から自動生成することで既存の資産をフル活用しリアーキテクチャを推進する orval 

26. 他の技術スタック

27. プログラミング言語・FW • Typescript • Remix (SPA mode) Runtime • Bun Build • Vite Data Fetcher • SWR UIコンポーネント / style • shadcn/ui • TailwindCSS 他の技術スタック 
 Testing • Bun test • RTL • MSW Linter / Formatter • Biome APIスキーマ管理 • OpenAPI • orval Hosting • Cloudflare Pages CI • Github Actions その他 • React • zod • react-hook-form
28. Let’s Crazy fast !
 終わり