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


自己紹介
 ● 鈴木翔大 @SoartecL
 ● ソフトウェアエンジニア
 ● 趣味
 ○ OSS
 ■ rails
 ■ orval
 ○ ダイビング
 


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


今日話すこと 
 ● MOSHでは今年の4月頃から中長期的な技術戦略 を練っており抜本的な対応を始めています ● 中長期を見据えて改善として フロントエンドはリアーキテクチャ を行っています ● 今まで社内での使用経験がない技術を選定しているので 選定した技術の紹介 をします

話さないこと 
 ● なぜ、何を、いつ、どのようにするかは今日は スコープ外 です ● 既存システムとの兼ね合いによる制約や背景も スコープ外 です ● 全体的なアーキテクチャやバックエンドの改善も進めてますが、こちらも スコープ外 です

技術選定において重 視している事


技術選定において重視している事 
 - 「継続的なデリバリーが持続可能な状態」を維持できる事 - 勉強会 vol.1を振り返る: 引用：https://junkyard.song.mu/slides/mosh-study-1/#6

技術選定において重視している事 
 - 皆が簡単に「片付けながら料理ができる」ように技術的な専門性を抽象化させる - 木こりのジレンマだと研磨済みの斧からスタートできる状態を目指す 引用：https://junkyard.song.mu/slides/mosh-study-1/#10

技術スタック紹介


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


Remix
 (SPA mode)


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


Remix(SPA mode): ファイルベースルーティング 
 ● Remixは規約に沿った名称 でディレクトリ・ファイルを作成すると URLと`Route`コンポーネントが紐 付けられる ● 新しいページを作成する時に routing用の設定ファイルを編集する様なフローは不要 になる ● 例えば、以下の場合は `/pets`では`pets._index`が、`pets/123`では`pets.$id`配下のコンポーネント の`Route`コンポーネントが描画される

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

Remix(SPA mode): コンポーネントのCo-Location 
 ● `Remix`ではディレクトリ配下に `route.tsx`がある場合に`Route`コンポーネントとして扱い、 他のファ イルはルーティングとして扱われる事はなくなる ● 特定のページに必要な コンポーネントとテストをまとめる ○ `Route`コンポーネントと子コンポーネント を同じディレクトリに配置する ○ コンポーネントとテスト を同じディレクトリに配置する

Remix(SPA mode): 各種Configのプリセット 
 ● 新しくプロジェクトを開始する際にテンプレートを指定して実行したらすぐに動きます ○ `bun create remix@latest --template remix-run/remix/templates/spa` ● `react-router` + `vite`で構成する場合と比較して初期設定をショートカットできる

Bun


Why - Crazy fast Bun
 引用：https://bun.sh/

Why - Crazy fast Bun
 引用：https://bun.sh/

Biome


Biome 
 引用：https://twitter.com/rfberaldo/status/1804149657985049060

shadcn/ui


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


orval


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


他の技術スタック


プログラミング言語・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

Let’s Crazy fast !
 終わり