Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Features
Speaker Deck
PRO
Sign in
Sign up for free
Search
Search
MOSHでのフロントエンドリアーキテクチャの選定技術の紹介
Search
Shodai Suzuki
July 12, 2024
0
1.1k
MOSHでのフロントエンドリアーキテクチャの選定技術の紹介
2024年7月11日に実施したMOSH株式会社の社内勉強会でのLT資料です。
MOSHサービスでのフロントエンドリアーキテクチャにおける選定技術の紹介を行います。
Shodai Suzuki
July 12, 2024
Tweet
Share
More Decks by Shodai Suzuki
See All by Shodai Suzuki
400超Lambda構成アプリケーションの漸進的リアーキテクチャ
soarteclab
1
250
急成長期の品質とスピードを両立するフロントエンド技術基盤
soarteclab
0
1.3k
Webアプリ開発におけるRDBMS基礎
soarteclab
0
170
ClassiのRuby/Railsバージョンアップ始動物語
soarteclab
1
990
Featured
See All Featured
Agile that works and the tools we love
rasmusluckow
328
21k
YesSQL, Process and Tooling at Scale
rocio
172
14k
Into the Great Unknown - MozCon
thekraken
35
1.7k
Build your cross-platform service in a week with App Engine
jlugia
229
18k
GraphQLとの向き合い方2022年版
quramy
44
14k
Faster Mobile Websites
deanohume
306
31k
Chrome DevTools: State of the Union 2024 - Debugging React & Beyond
addyosmani
4
390
Design and Strategy: How to Deal with People Who Don’t "Get" Design
morganepeng
129
19k
A better future with KSS
kneath
238
17k
Exploring the Power of Turbo Streams & Action Cable | RailsConf2023
kevinliebholz
30
4.6k
Side Projects
sachag
452
42k
Dealing with People You Can't Stand - Big Design 2015
cassininazir
366
25k
Transcript
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 ! 終わり