「業務システムSPAのフロントエンド技術選定」 の振り返り/furikaeri about our SPA stack 2023

Transcript

1. 「業務システムSPAのフロントエンド技術選定」 の振り返り 2024/02/02 Netadashi Meetup #12 Taku Hiramatsu
2. 自己紹介 • Taku Hiramatsu（ひらたく） • X: @hirataq__ ◦ （最近アカウント作り直しました） • 関西在住、娘👭 • 趣味はサッカー、山登り、コードを書くこと • ソフトウェアエンジニア • 経歴 ◦ 新卒で株式会社フリークアウト ◦ いくつかの新規事業に従事 ◦ 2020/6〜 株式会社カケハシ
3. 今日話すこと 2023年に業務システムの立ち上げに携わり、フロントエンドをSPAで 構築しました。その技術選定についてお話しできればと思います。 Next.jsやRemixの選択肢も検討しましたが、僕たちはフレームワーク を利用せずビルドツールであるViteを採用することに決めました。 この技術選定がどうだったのか、その他どのような技術選定を行った かお話しできればと思います。
4. 今日話すこと 「業務システム SPA のフロントエンド技術選定（2023年版）」 というタイトルで2023年のアドベントカレンダーに書いた記事の詳細 版です。 https://kakehashi-dev.hatenablog.com/entry/2023/12/13/091000
5. アジェンダ • プロジェクトの背景 • どんな技術選定をしたか • やってみての振り返り • さいごに
6. プロジェクトの背景
7. プロジェクトの背景 まず、カケハシの紹介を少しさせてください。
10. プロジェクトの背景 • 薬局向けの新規プロダクト開発 ◦ まだクローズドベータなので詳細は話せません󰢛 • 2023年3月にチームが発足、メンバーが揃ったのが4月 • メンバー ◦ PdM ◦ EM/SM ◦ フルスタックエンジニア（バックエンド中心） ◦ フルスタックエンジニア（フロントエンド中心） ◦ デザイナ（週2）
11. 開発チームについて https://speakerdeck.com/kakehashi/develop-a-new-product-with-bad-practices?slide=7 から抜粋
12. プロジェクトをどう進めたかを もっと知りたい方は、、
13. 宣伝 同僚がRSGTで発表しているので、興味ある方はぜひみてみてください😄 https://speakerdeck.com/kakehashi/develop-a-new-product-with-bad-practices
14. プロダクト特性 • PCでの操作がメイン • 薬局内での利用を想定しており、比較的安定した環境からの利用 • ユーザがログインして利用する業務システムSaaS • ユーザインタラクションが多い • 認証なしで閲覧できるページはなく、SEOは考慮しなくて良い
15. どんな技術選定をしたか
16. React or Vue or Angular • 会社としてはAngularやReactの採用実績があり、新しいプロダク トは基本的にReactに統一していた • 初期メンバー二人ともReact経験者 どんな技術選定をしたか
17. React or Vue or Angular • 会社としてはAngularやReactの採用実績があり、新しいプロダク トは基本的にReactに統一していた • 初期メンバー二人ともReact経験者 => すんなりReactに決まった どんな技術選定をしたか
18. フレームワークを使う？ • Reactの公式ドキュメントには2023年はじめくらいにフレーム ワークの利用を推奨する記載が追加された どんな技術選定をしたか https://ja.react.dev/learn/start-a-new-react-project
19. フレームワークを使う？ 当時（2023年5月）選択肢として以下が候補に挙がった • フレームワークを使う ◦ Next.js ◦ Remix • フレームワークを使わない ◦ Viteなどのビルドツールと組み合わせて使う どんな技術選定をしたか
20. フレームワークを使う？ そのときの心境（2023年5月） • Next.js勢いあっておもしろそう。乗っからないと置いていかれそう • ちょうどApp Routerが安定版になった。仕事でもさわれたらいいな • React Server Component（RSC）を見据えたらNext.jsにBetした方が良 いのかな • Remixもおもしろそう。社内で実績ないし、チャレンジするのもありかも • 今回のプロダクトはCSRのみで十分だよな • SSRは必須ではないし、もしやるならインフラどうしよ • CSRのみなら、Next.jsのStatic Exportもありかも どんな技術選定をしたか
21. フレームワークを使う？ 最終的にフレームワークを使わないで、ビルドツールのViteでSPAを構築する ことした。理由は以下 • 技術的なチャレンジはしたいが、今のPMFしてないプロダクトフェーズで はリスクは抑えたかった（そのときまだ何もない） • 今回のプロダクトにはSSRは不要。サーバのメンテコストを抑えたい • Next.js、Remixともにどんどんバージョンが上がっていて、リリースまで に何回か大きな修正が必要になるのでは？という不安 • 依存少なく小さく始めれば、デファクトが決まったときに移行できるので は どんな技術選定をしたか
22. フレームワークを使う？ どんな技術選定をしたか => 使わず。Vite + React の SPA 構成に
23. どんな技術選定をしたか 今だったら、Remix SPA Mode もありますね （まだUnstableですが） 余談
24. 「Vite + React の SPA構成」というベースが決まったところまで紹介できた ので、そのほかの技術や方針を紹介します。 （バックエンドも紹介したいですが、今日は「フロントエンド関連技術」とい うテーマのなので、フロントエンド中心に）
25. Vite + React の SPA構成 どんな技術選定をしたか • ルーティング ◦ React Router • APIクライアント ◦ urql • フォーム ◦ React Hook Form ◦ + zod • UIコンポーネント ◦ Mantine • モノレポ ◦ turborepo ◦ pnpm workspace • モニタリング ◦ Datadog • エラートラッキング ◦ Sentry • ホスティング ◦ Amplify Hosting
26. Vite + React の SPA構成 どんな技術選定をしたか • コンポーネントカタログ ◦ Storybook • VRT（Visual Regression Test） ◦ reg-suit ◦ storycap ◦ Storybook play function • テストランナー ◦ Vitest • コンポーネントテスト ◦ React Testing Library • ブラウザテスト ◦ Playwright
27. やってみての振り返り
28. 7選
29. やってみての振り返り（1） • 👍 手持ちの知識や社内の知見、既存エコシステムの恩恵を存分に 受けることができた ◦ それにより生まれた余裕を、プロダクトの品質向上や新たな チャレンジに使うことができた ▪ 例えば、日本語コンポーネント、モノレポによるモジュー ル分割など ◦ また、テストの基盤もしっかり整えることができた ◦ Viteの起動やホットリロードの開発者体験には満足してる
30. やってみての振り返り（2） • 👍 リリース後、スピードを落とさず機能追加できているので、今 のところ良かったと思っている ◦ まだPMFしていないが、ひとつひとつ仮説検証のための機能追 加できている ◦ 今後、機能が増えたときにどうなるか楽しみ
31. やってみての振り返り（3） • 👍 新しいメンバー（フロントエンドが専門でないメンバー）も参 画後すぐにフロントエンド開発を進められている ◦ Reactだけキャッチアップすればコードを書き始められた ◦ 褒めてもらえた😍（嬉しかった）
32. やってみての振り返り（4） • 👍 GraphQLエコシステムはやっぱり強力で開発体験が良い ◦ 🤔 RSCが普及した世界線で、GraphQLがどうなっていくんだ ろうという疑問はまだ解消されていないが） • スキーマ駆動進めたが、仕様の議論ができるので良い GraphQLスキーマからの自動生成 - フロントエンド開発体験の向上 - Speaker Deck （参考）tsukiji.graphql #2 で話した資料↓
33. やってみての振り返り（5） • 👍 JSはブラウザでの動作のみを考慮すれば良いため、認知負荷は 下げられた ◦ パフォーマンスとのトレードオフだと思うが、いまの僕たちは これで良かったと思っている
34. やってみての振り返り（6） • SPAだとボトルネックになりがちな初期にロードするJSは400kb台 （gzip）に抑えられている ◦ 今後機能追加をしていくと増えていくので、対策は必要 ▪ => この辺りはフレームワークだと乗っかれるのが良いで すね ◦ いまはバンドルサイズを継続的に可視化できていないので、仕 組みを導入予定
35. やってみての振り返り（7） • 💪 フロントエンド技術の進化のキャッチアップが大変 ◦ フロントエンドを牽引しているNext.js, Remixのアップデート を追えていないという焦り [個人的な今年の目標] • 個人開発、または、副業でNext.js, Remixを触り倒す
36. さいごに
37. さいごに プロダクト特性にあった技術選定をすることは大切。 とはいえ、Next.jsやRemixなどフロントエンドの進化をキャッチアッ プして、備えておけるといいのかな。 みんなでフロントエンド技術の発展を楽しんでいきましょう👍
38. Q&A