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
「業務システムSPAのフロントエンド技術選定」 の振り返り/furikaeri about our SPA stack 2023
Search
kakehashi
February 04, 2024
Business
1
610
「業務システムSPAのフロントエンド技術選定」 の振り返り/furikaeri about our SPA stack 2023
kakehashi
February 04, 2024
Tweet
Share
More Decks by kakehashi
See All by kakehashi
目標設定は好きですか? アジャイルとともに目標と向き合い続ける方法 / Do you like target Management?
kakehashi
10
3k
Our Scrum without Estimates, and into the Trunk-based Development
kakehashi
2
280
なぜ僕たちは 開発生産性指標を見ていないのか / Our Strategy for Development Productivity Metrics
kakehashi
18
5.5k
プロダクト拡大フェーズでプロダクト検証サイクル効率化を目指す過程で見えたもの / Streamlining Product Validation in Growth Phase
kakehashi
6
8.4k
OODAふりかえり 何って…ただ毎スプリント、違うふりかえり手法を採用してるだけだが? / Retrospectives with OODA
kakehashi
14
3.7k
よりアジャイルに向かう道のりとして、中止していたスクラムイベントを復活したら100Lの汗を流した話 / Reviving Scrum Events
kakehashi
2
230
Mutation Testingを活用して テスト品質を考える /introduction to mutation testing
kakehashi
4
640
Keeper of the Seven Keys 〜Four Keysとあと3つ〜
kakehashi
8
3.3k
OKRと「測りすぎ」 〜なりたい姿を、「測りすぎ」ないようにしながらどう追いかけるか〜/OKR and the tyranny of metrics
kakehashi
35
15k
Other Decks in Business
See All in Business
サスメド株式会社 Culture Deck
susmed
0
33k
Permanent Agility
koic
29
5.1k
インキュデータ会社紹介資料
okitsu
1
25k
やめるという決断がもたらした変化
izumii19
2
610
mfs_product_development_recruit_july_2024
mortgagefss
0
290
20240713_CLSMishima1
hideki_ojima
3
240
【エンジニア採用】BuySell Technologies会社説明資料
buyselltechnologies
1
45k
Artopeer会社紹介資料
dazyk
0
300
PMにとってスキルより大事なもの
pakugoku
0
210
kubell会社説明資料
kubell_hr
0
15k
unnameカルチャーブック 2024.07.04 update
unnameinc
1
5.3k
「アジャイルチームによる目標づくりガイドブック OKRを機能させ成果に繋げるためのアプローチ」のOKR/The OKR of OKR Guidebook
ikuodanaka
3
280
Featured
See All Featured
BBQ
matthewcrist
82
9k
The World Runs on Bad Software
bkeepers
PRO
63
11k
Unsuck your backbone
ammeep
666
57k
The MySQL Ecosystem @ GitHub 2015
samlambert
248
12k
VelocityConf: Rendering Performance Case Studies
addyosmani
321
23k
Creating an realtime collaboration tool: Agile Flush - .NET Oxford
marcduiker
16
1.6k
The Mythical Team-Month
searls
217
43k
Stop Working from a Prison Cell
hatefulcrawdad
266
20k
The Power of CSS Pseudo Elements
geoffreycrofte
64
5.2k
Done Done
chrislema
179
15k
Building Applications with DynamoDB
mza
89
5.8k
The Cult of Friendly URLs
andyhume
75
5.9k
Transcript
「業務システムSPAのフロントエンド技術選定」 の振り返り 2024/02/02 Netadashi Meetup #12 Taku Hiramatsu
自己紹介 • Taku Hiramatsu(ひらたく) • X: @hirataq__ ◦ (最近アカウント作り直しました) •
関西在住、娘👭 • 趣味はサッカー、山登り、コードを書くこと • ソフトウェアエンジニア • 経歴 ◦ 新卒で株式会社フリークアウト ◦ いくつかの新規事業に従事 ◦ 2020/6〜 株式会社カケハシ
今日話すこと 2023年に業務システムの立ち上げに携わり、フロントエンドをSPAで 構築しました。その技術選定についてお話しできればと思います。 Next.jsやRemixの選択肢も検討しましたが、僕たちはフレームワーク を利用せずビルドツールであるViteを採用することに決めました。 この技術選定がどうだったのか、その他どのような技術選定を行った かお話しできればと思います。
今日話すこと 「業務システム SPA のフロントエンド技術選定(2023年版)」 というタイトルで2023年のアドベントカレンダーに書いた記事の詳細 版です。 https://kakehashi-dev.hatenablog.com/entry/2023/12/13/091000
アジェンダ • プロジェクトの背景 • どんな技術選定をしたか • やってみての振り返り • さいごに
プロジェクトの背景
プロジェクトの背景 まず、カケハシの紹介を少しさせてください。
None
None
プロジェクトの背景 • 薬局向けの新規プロダクト開発 ◦ まだクローズドベータなので詳細は話せません • 2023年3月にチームが発足、メンバーが揃ったのが4月 • メンバー ◦
PdM ◦ EM/SM ◦ フルスタックエンジニア(バックエンド中心) ◦ フルスタックエンジニア(フロントエンド中心) ◦ デザイナ(週2)
開発チームについて https://speakerdeck.com/kakehashi/develop-a-new-product-with-bad-practices?slide=7 から抜粋
プロジェクトをどう進めたかを もっと知りたい方は、、
宣伝 同僚がRSGTで発表しているので、興味ある方はぜひみてみてください😄 https://speakerdeck.com/kakehashi/develop-a-new-product-with-bad-practices
プロダクト特性 • PCでの操作がメイン • 薬局内での利用を想定しており、比較的安定した環境からの利用 • ユーザがログインして利用する業務システムSaaS • ユーザインタラクションが多い •
認証なしで閲覧できるページはなく、SEOは考慮しなくて良い
どんな技術選定をしたか
React or Vue or Angular • 会社としてはAngularやReactの採用実績があり、新しいプロダク トは基本的にReactに統一していた • 初期メンバー二人ともReact経験者
どんな技術選定をしたか
React or Vue or Angular • 会社としてはAngularやReactの採用実績があり、新しいプロダク トは基本的にReactに統一していた • 初期メンバー二人ともReact経験者
=> すんなりReactに決まった どんな技術選定をしたか
フレームワークを使う? • Reactの公式ドキュメントには2023年はじめくらいにフレーム ワークの利用を推奨する記載が追加された どんな技術選定をしたか https://ja.react.dev/learn/start-a-new-react-project
フレームワークを使う? 当時(2023年5月)選択肢として以下が候補に挙がった • フレームワークを使う ◦ Next.js ◦ Remix • フレームワークを使わない
◦ Viteなどのビルドツールと組み合わせて使う どんな技術選定をしたか
フレームワークを使う? そのときの心境(2023年5月) • Next.js勢いあっておもしろそう。乗っからないと置いていかれそう • ちょうどApp Routerが安定版になった。仕事でもさわれたらいいな • React Server
Component(RSC)を見据えたらNext.jsにBetした方が良 いのかな • Remixもおもしろそう。社内で実績ないし、チャレンジするのもありかも • 今回のプロダクトはCSRのみで十分だよな • SSRは必須ではないし、もしやるならインフラどうしよ • CSRのみなら、Next.jsのStatic Exportもありかも どんな技術選定をしたか
フレームワークを使う? 最終的にフレームワークを使わないで、ビルドツールのViteでSPAを構築する ことした。理由は以下 • 技術的なチャレンジはしたいが、今のPMFしてないプロダクトフェーズで はリスクは抑えたかった(そのときまだ何もない) • 今回のプロダクトにはSSRは不要。サーバのメンテコストを抑えたい • Next.js、Remixともにどんどんバージョンが上がっていて、リリースまで
に何回か大きな修正が必要になるのでは?という不安 • 依存少なく小さく始めれば、デファクトが決まったときに移行できるので は どんな技術選定をしたか
フレームワークを使う? どんな技術選定をしたか => 使わず。Vite + React の SPA 構成に
どんな技術選定をしたか 今だったら、Remix SPA Mode もありますね (まだUnstableですが) 余談
「Vite + React の SPA構成」というベースが決まったところまで紹介できた ので、そのほかの技術や方針を紹介します。 (バックエンドも紹介したいですが、今日は「フロントエンド関連技術」とい うテーマのなので、フロントエンド中心に)
Vite + React の SPA構成 どんな技術選定をしたか • ルーティング ◦ React
Router • APIクライアント ◦ urql • フォーム ◦ React Hook Form ◦ + zod • UIコンポーネント ◦ Mantine • モノレポ ◦ turborepo ◦ pnpm workspace • モニタリング ◦ Datadog • エラートラッキング ◦ Sentry • ホスティング ◦ Amplify Hosting
Vite + React の SPA構成 どんな技術選定をしたか • コンポーネントカタログ ◦ Storybook
• VRT(Visual Regression Test) ◦ reg-suit ◦ storycap ◦ Storybook play function • テストランナー ◦ Vitest • コンポーネントテスト ◦ React Testing Library • ブラウザテスト ◦ Playwright
やってみての振り返り
7選
やってみての振り返り(1) • 👍 手持ちの知識や社内の知見、既存エコシステムの恩恵を存分に 受けることができた ◦ それにより生まれた余裕を、プロダクトの品質向上や新たな チャレンジに使うことができた ▪ 例えば、日本語コンポーネント、モノレポによるモジュー
ル分割など ◦ また、テストの基盤もしっかり整えることができた ◦ Viteの起動やホットリロードの開発者体験には満足してる
やってみての振り返り(2) • 👍 リリース後、スピードを落とさず機能追加できているので、今 のところ良かったと思っている ◦ まだPMFしていないが、ひとつひとつ仮説検証のための機能追 加できている ◦ 今後、機能が増えたときにどうなるか楽しみ
やってみての振り返り(3) • 👍 新しいメンバー(フロントエンドが専門でないメンバー)も参 画後すぐにフロントエンド開発を進められている ◦ Reactだけキャッチアップすればコードを書き始められた ◦ 褒めてもらえた😍(嬉しかった)
やってみての振り返り(4) • 👍 GraphQLエコシステムはやっぱり強力で開発体験が良い ◦ 🤔 RSCが普及した世界線で、GraphQLがどうなっていくんだ ろうという疑問はまだ解消されていないが) • スキーマ駆動進めたが、仕様の議論ができるので良い
GraphQLスキーマからの自動生成 - フロントエンド開発体験の向上 - Speaker Deck (参考)tsukiji.graphql #2 で話した資料↓
やってみての振り返り(5) • 👍 JSはブラウザでの動作のみを考慮すれば良いため、認知負荷は 下げられた ◦ パフォーマンスとのトレードオフだと思うが、いまの僕たちは これで良かったと思っている
やってみての振り返り(6) • SPAだとボトルネックになりがちな初期にロードするJSは400kb台 (gzip)に抑えられている ◦ 今後機能追加をしていくと増えていくので、対策は必要 ▪ => この辺りはフレームワークだと乗っかれるのが良いで すね
◦ いまはバンドルサイズを継続的に可視化できていないので、仕 組みを導入予定
やってみての振り返り(7) • 💪 フロントエンド技術の進化のキャッチアップが大変 ◦ フロントエンドを牽引しているNext.js, Remixのアップデート を追えていないという焦り [個人的な今年の目標] •
個人開発、または、副業でNext.js, Remixを触り倒す
さいごに
さいごに プロダクト特性にあった技術選定をすることは大切。 とはいえ、Next.jsやRemixなどフロントエンドの進化をキャッチアッ プして、備えておけるといいのかな。 みんなでフロントエンド技術の発展を楽しんでいきましょう👍
Q&A