Lock in $30 Savings on PRO—Offer Ends Soon! ⏳
Speaker Deck
Features
Speaker Deck
PRO
Sign in
Sign up for free
Search
Search
20240711_MOSHでのフロントエンドリアーキテクチャの選定技術の紹介
Search
Shodai Suzuki
July 12, 2024
0
760
20240711_MOSHでのフロントエンドリアーキテクチャの選定技術の紹介
2024年7月11日に実施したMOSH株式会社の社内勉強会でのLT資料です。
MOSHサービスでのフロントエンドリアーキテクチャにおける選定技術の紹介を行います。
Shodai Suzuki
July 12, 2024
Tweet
Share
More Decks by Shodai Suzuki
See All by Shodai Suzuki
急成長期の品質とスピードを両立するフロントエンド技術基盤
soarteclab
0
780
Webアプリ開発におけるRDBMS基礎
soarteclab
0
140
ClassiのRuby/Railsバージョンアップ始動物語
soarteclab
1
940
Featured
See All Featured
Keith and Marios Guide to Fast Websites
keithpitt
410
22k
Scaling GitHub
holman
458
140k
Save Time (by Creating Custom Rails Generators)
garrettdimon
PRO
27
890
Why You Should Never Use an ORM
jnunemaker
PRO
54
9.1k
A better future with KSS
kneath
238
17k
Building a Modern Day E-commerce SEO Strategy
aleyda
38
7k
Gamification - CAS2011
davidbonilla
80
5.1k
Why Our Code Smells
bkeepers
PRO
334
57k
Product Roadmaps are Hard
iamctodd
PRO
49
11k
Writing Fast Ruby
sferik
627
61k
Music & Morning Musume
bryan
46
6.2k
Making Projects Easy
brettharned
116
5.9k
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 ! 終わり