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.2k
MOSHでのフロントエンドリアーキテクチャの選定技術の紹介
2024年7月11日に実施したMOSH株式会社の社内勉強会でのLT資料です。
MOSHサービスでのフロントエンドリアーキテクチャにおける選定技術の紹介を行います。
Shodai Suzuki
July 12, 2024
Tweet
Share
More Decks by Shodai Suzuki
See All by Shodai Suzuki
リアーキテクチャとAI活用で実現する急成長プロダクトの開発生産性向上
soarteclab
3
12k
チーム再始動から6ヶ月でデプロイ数を9倍にするまでの取り組み
soarteclab
4
370
400超Lambda構成アプリケーションの漸進的リアーキテクチャ
soarteclab
3
900
急成長期の品質とスピードを両立するフロントエンド技術基盤
soarteclab
0
1.5k
Webアプリ開発におけるRDBMS基礎
soarteclab
0
210
ClassiのRuby/Railsバージョンアップ始動物語
soarteclab
1
1.1k
Featured
See All Featured
Stop Working from a Prison Cell
hatefulcrawdad
271
21k
YesSQL, Process and Tooling at Scale
rocio
173
14k
ピンチをチャンスに:未来をつくるプロダクトロードマップ #pmconf2020
aki_iinuma
126
53k
Sharpening the Axe: The Primacy of Toolmaking
bcantrill
44
2.4k
Cheating the UX When There Is Nothing More to Optimize - PixelPioneers
stephaniewalter
283
13k
Evolution of real-time – Irina Nazarova, EuRuKo, 2024
irinanazarova
8
870
What's in a price? How to price your products and services
michaelherold
246
12k
KATA
mclloyd
31
14k
The Cost Of JavaScript in 2023
addyosmani
51
8.7k
Visualizing Your Data: Incorporating Mongo into Loggly Infrastructure
mongodb
47
9.6k
The Invisible Side of Design
smashingmag
301
51k
How to train your dragon (web standard)
notwaldorf
96
6.1k
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 ! 終わり