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
430
「業務システムSPAのフロントエンド技術選定」 の振り返り/furikaeri about our SPA stack 2023
kakehashi
February 04, 2024
Tweet
Share
More Decks by kakehashi
See All by kakehashi
OKRと「測りすぎ」 〜なりたい姿を、「測りすぎ」ないようにしながらどう追いかけるか〜/OKR and the tyranny of metrics
kakehashi
30
12k
複雑なビジネスルールに挑む:正確性と効率性を両立するfp-tsのチーム活用術 / Strike a balance between correctness and efficiency with fp-ts
kakehashi
5
3.4k
開発組織のOKRの作り方 / OKR in a development division
kakehashi
13
4.2k
実はたくさんほしい インシデント報告/more incident reports
kakehashi
0
250
KAKEHASHI会社説明資料/Company information materials
kakehashi
0
2.8k
linkマクロが使いたい/smart knowledge management with link macro
kakehashi
2
970
Value Driven DevOps Team
kakehashi
13
4.2k
GitHubを使わずDatabricksだけで お手軽にライブラリ共有やCIが できる環境を作ってみた/Creating an Environment for Easy Library Sharing and CI Using Only Databricks Without GitHub
kakehashi
1
330
循環する学び~現場とコミュニティの境目で考える~/Learning Cycle between a team and a community
kakehashi
14
6.8k
Other Decks in Business
See All in Business
TECH HIRE |「大胆なポジションの開発」によって ハイクラス人材を直接応募で4名採用できた話
trackrecords
PRO
0
440
akippa株式会社 - 会社紹介資料
akippa
3
46k
Mercari-Fact-book_en
mercari_inc
1
18k
LayerXの急成長を支える営業システムと組織文化【全体最適を諦めない】
suuu
1
1.8k
エンジニア向け会社説明資料
staffrecruiter
2
420
依頼の理解と活躍設計を通してエキスパートのパフォーマンスを発揮させるぞ/Expert Collaboration and Impact sfn2024
moriyuya
4
240
SPX2027中期経営計画
hiraga
1
260
Polaris.AI Company Deck / We are hiring
polarisai
1
790
goooods 株式会社 事業概要説明資料 / company deck
syo
3
7.6k
2023年度ICT職専門研修(海外派遣研修)報告書_No.4_組織においてデジタルによる変革を計画・実行する手法を学ぶ
tokyo_metropolitan_gov_digital_hr
0
160
2023年度ICT職専門研修(海外派遣研修)報告書_No.3_行政におけるパブリッククラウド活用の世界動向把握による庁内のDX及び区市町村のDX協働の推進力向上
tokyo_metropolitan_gov_digital_hr
1
170
Z_Venture_Capital採用_240417.pdf
zvc2022
0
390
Featured
See All Featured
Done Done
chrislema
178
15k
Ruby is Unlike a Banana
tanoku
96
10k
Save Time (by Creating Custom Rails Generators)
garrettdimon
PRO
0
110
StorybookのUI Testing Handbookを読んだ
zakiyama
13
4.7k
Faster Mobile Websites
deanohume
300
30k
Embracing the Ebb and Flow
colly
80
4.2k
Let's Do A Bunch of Simple Stuff to Make Websites Faster
chriscoyier
501
140k
What's new in Ruby 2.0
geeforr
338
31k
Designing with Data
zakiwarfel
96
4.8k
XXLCSS - How to scale CSS and keep your sanity
sugarenia
242
1.2M
Mobile First: as difficult as doing things right
swwweet
217
8.6k
The Pragmatic Product Professional
lauravandoore
26
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