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
390
「業務システムSPAのフロントエンド技術選定」 の振り返り/furikaeri about our SPA stack 2023
kakehashi
February 04, 2024
Tweet
Share
More Decks by kakehashi
See All by kakehashi
KAKEHASHI会社説明資料/Company information materials
kakehashi
0
2.6k
linkマクロが使いたい/smart knowledge management with link macro
kakehashi
2
930
Value Driven DevOps Team
kakehashi
13
3.9k
GitHubを使わずDatabricksだけで お手軽にライブラリ共有やCIが できる環境を作ってみた/Creating an Environment for Easy Library Sharing and CI Using Only Databricks Without GitHub
kakehashi
1
320
循環する学び~現場とコミュニティの境目で考える~/Learning Cycle between a team and a community
kakehashi
14
6.7k
新規プロダクトの仮説検証ループをすばやく回し続けるためのプロダクトエンジニアリング/PdENight3
kakehashi
15
4.8k
ドメイン知識を活用した、薬局における患者の来局予測/Predicting Patient Visits to Pharmacies Using Domain Knowledge
kakehashi
3
260
Databricksで築く未来のデータメッシュ組織/The Datamesh Organization Built with Databricks
kakehashi
3
1.4k
薬局組織の内部を探る BIツールを通じたドメイン理解/Explore inside the pharmacy Domain understanding through BI tools
kakehashi
2
1.1k
Other Decks in Business
See All in Business
Findy PEOPLE BOOK
findyinc
1
53k
CHILLNN Culture Deck 2024
ryo_nagata_
0
130
grabss会社案内 / grabss careerdeck
grabss
0
620
スタートアップ新卒合同入社式ワークショップ
wakayamaguchi
1
3k
採用ピッチブック
macloud
2
48k
【キャリア採用】BuySell Technologies会社説明資料
buyselltechnologies
2
61k
Findy - 人生で熱くなれるなにかを探している誰かへ / Letter from Findy
findyinc
6
110k
Pacific Meta Company Deck
pacificmeta
0
2.8k
生成AIと歩むこれからのキャリア
yuka_kakiuchi
1
180
おひさぽ ご説明資料
trinitytechnology
0
53k
偶然のチャンスを掴めるのは誰だ?
kotomin_m
9
550
プライシングについて②
umzws
0
270
Featured
See All Featured
Build your cross-platform service in a week with App Engine
jlugia
226
17k
実際に使うSQLの書き方 徹底解説 / pgcon21j-tutorial
soudai
123
39k
The Cost Of JavaScript in 2023
addyosmani
21
3.9k
Being A Developer After 40
akosma
67
580k
How GitHub (no longer) Works
holman
305
140k
Clear Off the Table
cherdarchuk
85
310k
A Tale of Four Properties
chriscoyier
153
22k
Designing for Performance
lara
601
67k
Docker and Python
trallard
35
2.7k
Product Roadmaps are Hard
iamctodd
45
9.8k
Cheating the UX When There Is Nothing More to Optimize - PixelPioneers
stephaniewalter
275
13k
The Mythical Team-Month
searls
217
42k
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