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
February 04, 2024
Business
1
850
「業務システムSPAのフロントエンド技術選定」 の振り返り/furikaeri about our SPA stack 2023
kakehashi
February 04, 2024
Tweet
Share
More Decks by kakehashi
See All by kakehashi
スプリントゴールにチームの状態も設定する背景とその効果 / Team state in sprint goals why and impact
kakehashi
2
130
プロダクト成長に対応するプラットフォーム戦略:Authleteによる共通認証基盤の移行事例 / Building an authentication platform using Authlete and AWS
kakehashi
1
190
見えづらい活動の成果の伝え方は日頃からめちゃくちゃ悩んでるけど、実際こんな取り組みをしな がら温度感を合わせにいってるよ / Conveying Hard-to-See Results
kakehashi
4
2.3k
Evolving DevOps Teams and Flexible Organizational Culture
kakehashi
1
1.3k
難しいから面白い!医薬品×在庫管理ドメインの複雑性と向き合い、プロダクトの成長を支えるための取り組み / Initiatives to Support Product Growth
kakehashi
3
290
日本の医療システムの再構築を目指すスタートアップ「カケハシ」のフロントエンド領域でのチャレンジ / Challenges in the frontend domain at “Kakehashi”
kakehashi
3
2.2k
そのデータ連携、ホントにそれでいいの? 〜データモデル分析の重要性を説く〜 / How to analyse data integration
kakehashi
2
750
プロポーザル出しまくり芸人が教える、プロポーザルを採択してもらう技術 / Techniques for Getting Proposal Accepted
kakehashi
7
11k
目標設定は好きですか? アジャイルとともに目標と向き合い続ける方法 / Do you like target Management?
kakehashi
13
6.4k
Other Decks in Business
See All in Business
Manage-Up! A Guide for Product Builders to Understand and Influence Leadership
petra_wille
1
230
株式会社STANDARD_会社紹介資料
std2017
0
400
急成⻑スタートアップで働くことで得られるもの / 株式会社IVRy(社内LT会)
miyashino
0
1.1k
【Otegami】「月経期間のパートナーとのすれ違いを軽減する」
hinalin
0
480
会社案内資料
mkengineering
1
140
Company Introduction Slides
recruiting
0
1k
スタートアップのマネージャーに役立つ視座/A useful perspective for startup managers
dskst
3
340
ブレインパッドXaaSユニット紹介資料(キャリア採用向けweb公開版 )
brainpadpr
0
14k
[ English ] Company Overview for Engineers
caddi_eng
0
330
もしドラッカーがアジャイルコーチになったら / If Drucker Were an Agile Coach
fkino
2
310
バイセルのものさし(Ver. 1.1)
buyselltechnologies
0
140
ビジネスの変化に迅速に反応 質・量どちらも追及する 星野リゾートのノーコード戦略
junkokotake
0
170
Featured
See All Featured
The MySQL Ecosystem @ GitHub 2015
samlambert
250
12k
Keith and Marios Guide to Fast Websites
keithpitt
409
22k
Learning to Love Humans: Emotional Interface Design
aarron
273
40k
[RailsConf 2023 Opening Keynote] The Magic of Rails
eileencodes
28
9.1k
Typedesign – Prime Four
hannesfritz
40
2.4k
Speed Design
sergeychernyshev
24
600
5 minutes of I Can Smell Your CMS
philhawksworth
202
19k
No one is an island. Learnings from fostering a developers community.
thoeni
19
3k
Build your cross-platform service in a week with App Engine
jlugia
229
18k
Facilitating Awesome Meetings
lara
49
6.1k
For a Future-Friendly Web
brad_frost
175
9.4k
Code Reviewing Like a Champion
maltzj
520
39k
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