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

Slide 1

Slide 1 text

「業務システムSPAのフロントエンド技術選定」の振り返り 2024/02/02 Netadashi Meetup #12 Taku Hiramatsu

Slide 2

Slide 2 text

自己紹介 ● Taku Hiramatsu（ひらたく） ● X: @hirataq__ ○ （最近アカウント作り直しました） ● 関西在住、娘👭 ● 趣味はサッカー、山登り、コードを書くこと ● ソフトウェアエンジニア ● 経歴 ○ 新卒で株式会社フリークアウト ○ いくつかの新規事業に従事 ○ 2020/6〜株式会社カケハシ

Slide 3

Slide 3 text

今日話すこと 2023年に業務システムの立ち上げに携わり、フロントエンドをSPAで構築しました。その技術選定についてお話しできればと思います。 Next.jsやRemixの選択肢も検討しましたが、僕たちはフレームワークを利用せずビルドツールであるViteを採用することに決めました。この技術選定がどうだったのか、その他どのような技術選定を行ったかお話しできればと思います。

Slide 4

Slide 4 text

今日話すこと「業務システム SPA のフロントエンド技術選定（2023年版）」というタイトルで2023年のアドベントカレンダーに書いた記事の詳細版です。 https://kakehashi-dev.hatenablog.com/entry/2023/12/13/091000

Slide 5

Slide 5 text

アジェンダ ● プロジェクトの背景 ● どんな技術選定をしたか ● やってみての振り返り ● さいごに

Slide 6

Slide 6 text

プロジェクトの背景

Slide 7

Slide 7 text

プロジェクトの背景まず、カケハシの紹介を少しさせてください。

Slide 8

Slide 8 text

No content

Slide 9

Slide 9 text

No content

Slide 10

Slide 10 text

プロジェクトの背景 ● 薬局向けの新規プロダクト開発 ○ まだクローズドベータなので詳細は話せません󰢛 ● 2023年3月にチームが発足、メンバーが揃ったのが4月 ● メンバー ○ PdM ○ EM/SM ○ フルスタックエンジニア（バックエンド中心） ○ フルスタックエンジニア（フロントエンド中心） ○ デザイナ（週2）

Slide 11

Slide 11 text

開発チームについて https://speakerdeck.com/kakehashi/develop-a-new-product-with-bad-practices?slide=7 から抜粋

Slide 12

Slide 12 text

プロジェクトをどう進めたかをもっと知りたい方は、、

Slide 13

Slide 13 text

宣伝同僚がRSGTで発表しているので、興味ある方はぜひみてみてください😄 https://speakerdeck.com/kakehashi/develop-a-new-product-with-bad-practices

Slide 14

Slide 14 text

プロダクト特性 ● PCでの操作がメイン ● 薬局内での利用を想定しており、比較的安定した環境からの利用 ● ユーザがログインして利用する業務システムSaaS ● ユーザインタラクションが多い ● 認証なしで閲覧できるページはなく、SEOは考慮しなくて良い

Slide 15

Slide 15 text

どんな技術選定をしたか

Slide 16

Slide 16 text

React or Vue or Angular ● 会社としてはAngularやReactの採用実績があり、新しいプロダクトは基本的にReactに統一していた ● 初期メンバー二人ともReact経験者どんな技術選定をしたか

Slide 17

Slide 17 text

React or Vue or Angular ● 会社としてはAngularやReactの採用実績があり、新しいプロダクトは基本的にReactに統一していた ● 初期メンバー二人ともReact経験者 => すんなりReactに決まったどんな技術選定をしたか

Slide 18

Slide 18 text

フレームワークを使う？ ● Reactの公式ドキュメントには2023年はじめくらいにフレームワークの利用を推奨する記載が追加されたどんな技術選定をしたか https://ja.react.dev/learn/start-a-new-react-project

Slide 19

Slide 19 text

フレームワークを使う？当時（2023年5月）選択肢として以下が候補に挙がった ● フレームワークを使う ○ Next.js ○ Remix ● フレームワークを使わない ○ Viteなどのビルドツールと組み合わせて使うどんな技術選定をしたか

Slide 20

Slide 20 text

フレームワークを使う？そのときの心境（2023年5月） ● Next.js勢いあっておもしろそう。乗っからないと置いていかれそう ● ちょうどApp Routerが安定版になった。仕事でもさわれたらいいな ● React Server Component（RSC）を見据えたらNext.jsにBetした方が良いのかな ● Remixもおもしろそう。社内で実績ないし、チャレンジするのもありかも ● 今回のプロダクトはCSRのみで十分だよな ● SSRは必須ではないし、もしやるならインフラどうしよ ● CSRのみなら、Next.jsのStatic Exportもありかもどんな技術選定をしたか

Slide 21

Slide 21 text

フレームワークを使う？最終的にフレームワークを使わないで、ビルドツールのViteでSPAを構築することした。理由は以下 ● 技術的なチャレンジはしたいが、今のPMFしてないプロダクトフェーズではリスクは抑えたかった（そのときまだ何もない） ● 今回のプロダクトにはSSRは不要。サーバのメンテコストを抑えたい ● Next.js、Remixともにどんどんバージョンが上がっていて、リリースまでに何回か大きな修正が必要になるのでは？という不安 ● 依存少なく小さく始めれば、デファクトが決まったときに移行できるのではどんな技術選定をしたか

Slide 22

Slide 22 text

フレームワークを使う？どんな技術選定をしたか => 使わず。Vite + React の SPA 構成に

Slide 23

Slide 23 text

どんな技術選定をしたか今だったら、Remix SPA Mode もありますね（まだUnstableですが）余談

Slide 24

Slide 24 text

「Vite + React の SPA構成」というベースが決まったところまで紹介できたので、そのほかの技術や方針を紹介します。（バックエンドも紹介したいですが、今日は「フロントエンド関連技術」というテーマのなので、フロントエンド中心に）

Slide 25

Slide 25 text

Vite + React の SPA構成どんな技術選定をしたか ● ルーティング ○ React Router ● APIクライアント ○ urql ● フォーム ○ React Hook Form ○ + zod ● UIコンポーネント ○ Mantine ● モノレポ ○ turborepo ○ pnpm workspace ● モニタリング ○ Datadog ● エラートラッキング ○ Sentry ● ホスティング ○ Amplify Hosting

Slide 26

Slide 26 text

Vite + React の SPA構成どんな技術選定をしたか ● コンポーネントカタログ ○ Storybook ● VRT（Visual Regression Test） ○ reg-suit ○ storycap ○ Storybook play function ● テストランナー ○ Vitest ● コンポーネントテスト ○ React Testing Library ● ブラウザテスト ○ Playwright

Slide 27

Slide 27 text

やってみての振り返り

Slide 28

Slide 28 text

7選

Slide 29

Slide 29 text

やってみての振り返り（1） ● 👍 手持ちの知識や社内の知見、既存エコシステムの恩恵を存分に受けることができた ○ それにより生まれた余裕を、プロダクトの品質向上や新たなチャレンジに使うことができた ■ 例えば、日本語コンポーネント、モノレポによるモジュール分割など ○ また、テストの基盤もしっかり整えることができた ○ Viteの起動やホットリロードの開発者体験には満足してる

Slide 30

Slide 30 text

やってみての振り返り（2） ● 👍 リリース後、スピードを落とさず機能追加できているので、今のところ良かったと思っている ○ まだPMFしていないが、ひとつひとつ仮説検証のための機能追加できている ○ 今後、機能が増えたときにどうなるか楽しみ

Slide 31

Slide 31 text

やってみての振り返り（3） ● 👍 新しいメンバー（フロントエンドが専門でないメンバー）も参画後すぐにフロントエンド開発を進められている ○ Reactだけキャッチアップすればコードを書き始められた ○ 褒めてもらえた😍（嬉しかった）

Slide 32

Slide 32 text

やってみての振り返り（4） ● 👍 GraphQLエコシステムはやっぱり強力で開発体験が良い ○ 🤔 RSCが普及した世界線で、GraphQLがどうなっていくんだろうという疑問はまだ解消されていないが） ● スキーマ駆動進めたが、仕様の議論ができるので良い GraphQLスキーマからの自動生成 - フロントエンド開発体験の向上 - Speaker Deck （参考）tsukiji.graphql #2 で話した資料↓

Slide 33

Slide 33 text

やってみての振り返り（5） ● 👍 JSはブラウザでの動作のみを考慮すれば良いため、認知負荷は下げられた ○ パフォーマンスとのトレードオフだと思うが、いまの僕たちはこれで良かったと思っている

Slide 34

Slide 34 text

やってみての振り返り（6） ● SPAだとボトルネックになりがちな初期にロードするJSは400kb台（gzip）に抑えられている ○ 今後機能追加をしていくと増えていくので、対策は必要 ■ => この辺りはフレームワークだと乗っかれるのが良いですね ○ いまはバンドルサイズを継続的に可視化できていないので、仕組みを導入予定

Slide 35

Slide 35 text

やってみての振り返り（7） ● 💪 フロントエンド技術の進化のキャッチアップが大変 ○ フロントエンドを牽引しているNext.js, Remixのアップデートを追えていないという焦り [個人的な今年の目標] ● 個人開発、または、副業でNext.js, Remixを触り倒す

Slide 36

Slide 36 text

さいごに

Slide 37

Slide 37 text

さいごにプロダクト特性にあった技術選定をすることは大切。とはいえ、Next.jsやRemixなどフロントエンドの進化をキャッチアップして、備えておけるといいのかな。みんなでフロントエンド技術の発展を楽しんでいきましょう👍

Slide 38

Slide 38 text

Q&A