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 o...
Search
KAKEHASHI
PRO
February 04, 2024
Business
1
970
「業務システムSPAのフロントエンド技術選定」 の振り返り/furikaeri about our SPA stack 2023
KAKEHASHI
PRO
February 04, 2024
Tweet
Share
More Decks by KAKEHASHI
See All by KAKEHASHI
人はなぜISUCONに夢中になるのか
kakehashi
PRO
6
1.8k
データ資産をシームレスに伝達するためのイベント駆動型アーキテクチャ
kakehashi
PRO
2
690
アジャイルチームが変化し続けるための組織文化とマネジメント・アプローチ / Agile management that enables ever-changing teams
kakehashi
PRO
3
4.3k
チームが毎日小さな変化と適応を続けたら1年間でスケール可能なアジャイルチームができた話 / Building a Scalable Agile Team
kakehashi
PRO
3
400
知らない景色を見に行こう チャンスを掴んだら道が開けたマネジメントの旅 / Into the unknown~My management journey~
kakehashi
PRO
11
1.9k
KAKEHASHI Company Deck / Company Deck
kakehashi
PRO
4
2.4k
アジャイルチームがらしさを発揮するための目標づくり / Making the goal and enabling the team
kakehashi
PRO
4
1k
適材適所の技術選定 〜GraphQL・REST API・tRPC〜 / Optimal Technology Selection
kakehashi
PRO
1
990
誰も全体を知らない ~ ロールの垣根を超えて引き上げる開発生産性 / Boosting Development Productivity Across Roles
kakehashi
PRO
2
350
Other Decks in Business
See All in Business
メドピアグループ紹介資料
medpeer_recruit
10
120k
2025.02_中途採用資料.pdf
superstudio
PRO
0
63k
2024年12月期_通期決算説明資料
mobcast20040326
PRO
0
620
ビジネスで活かす生成AIエージェント 〜業務利用を目指して今を俯瞰的に理解しよう〜
masatoto
4
300
株式会社Domuz会社紹介資料(採用)
kimpachi_d
0
22k
Eco-Pork Impact Report 2025.02.09 JP
ecopork
0
480
How should you respond to feedback from reviews and tests
kitanosirokuma
3
190
株式会社AbemaTV 会社説明資料
abematv
2
1.7k
新卒エンジニア向け会社紹介資料/newgraduates-engineer
nextbeat
2
1.8k
HRBP+のご紹介
masakisukeda
0
820
freee Movement Deck
freee
0
2.7k
2ndPASS_リクルートガイド2024
akinodaichi
0
530
Featured
See All Featured
Site-Speed That Sticks
csswizardry
4
400
[Rails World 2023 - Day 1 Closing Keynote] - The Magic of Rails
eileencodes
33
2.1k
Measuring & Analyzing Core Web Vitals
bluesmoon
6
250
Designing for Performance
lara
604
68k
Fontdeck: Realign not Redesign
paulrobertlloyd
83
5.4k
Facilitating Awesome Meetings
lara
52
6.2k
Building a Modern Day E-commerce SEO Strategy
aleyda
38
7.1k
Imperfection Machines: The Place of Print at Facebook
scottboms
267
13k
Unsuck your backbone
ammeep
669
57k
How STYLIGHT went responsive
nonsquared
98
5.4k
I Don’t Have Time: Getting Over the Fear to Launch Your Podcast
jcasabona
32
2.1k
Being A Developer After 40
akosma
89
590k
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