Lock in $30 Savings on PRO—Offer Ends Soon! ⏳

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

Shodai Suzuki
July 12, 2024
760

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

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

Shodai Suzuki

July 12, 2024
Tweet

Transcript

  1. WHY: • 既存のアプリケーションは REST APIで通信しているSPA • そこ維持してフロントエンドは SPAアプリとして提供する ◦ 理由については今日は割愛

    • ReactでのSPA構成の場合でも以下の開発が可能にしたかった ◦ ファイルベースルーティング ◦ コンポーネントのCo-Location ◦ 各種Configのプリセット • 将来的なNext.jsへの移行も想定したシンプルな Reactアプリケーションを維持したい Remix(SPA mode) 

  2. Remix(SPA mode): ファイルベースルーティング 
 • Remixは規約に沿った名称 でディレクトリ・ファイルを作成すると URLと`Route`コンポーネントが紐 付けられる •

    新しいページを作成する時に routing用の設定ファイルを編集する様なフローは不要 になる • 例えば、以下の場合は `/pets`では`pets._index`が、`pets/123`では`pets.$id`配下のコンポーネント の`Route`コンポーネントが描画される
  3. 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
  4. Remix(SPA mode): コンポーネントのCo-Location 
 • `Remix`ではディレクトリ配下に `route.tsx`がある場合に`Route`コンポーネントとして扱い、 他のファ イルはルーティングとして扱われる事はなくなる •

    特定のページに必要な コンポーネントとテストをまとめる ◦ `Route`コンポーネントと子コンポーネント を同じディレクトリに配置する ◦ コンポーネントとテスト を同じディレクトリに配置する
  5. Remix(SPA mode): 各種Configのプリセット 
 • 新しくプロジェクトを開始する際にテンプレートを指定して実行したらすぐに動きます ◦ `bun create remix@latest

    --template remix-run/remix/templates/spa` • `react-router` + `vite`で構成する場合と比較して初期設定をショートカットできる
  6. • OpenAPIの定義から以下を自動生成するツール ◦ MSWのモック ▪ テストでhttp通信のモックを行う ◦ zodスキーマ ▪ フォームの入力チェックの

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

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