Saleshubのフロントエンドの技術スタックについて

Saleshubでエンジニアをしております安田と申します。
今日は、Saleshubのフロントエンドの技術スタックについてお話したいと思います。

私がSaleshubに入社したのは今年2023年2月ですが、そのタイミングでは、SaleshubのフロントエンドはjQuery、CoffeeScriptで書かれていました。というか今も大半はこの構成で書かれています。

入社直後にSaleshubには、様々な技術課題があると感じましたが、フロントエンドの技術スタックの古さは、その中でも最も大きな課題の一つでした。

開発者の人数が少ない一方で事業優先度の高い課題を優先してきたために、新しい技術スタックの導入まで手が回らずに来た、というのが主な事情かと思います。

その問題に対してどのようなアプローチをとったか？

自分の入社のタイミングが、ちょうど新機能の開発がまさに始まろうとしていたタイミングだったので、この機を逃さず、新機能は新しい技術スタックで開発することになりました。

新機能は折よくそこそこの複雑さを持っていたので、実際jQuery等で頑張ってイベントハンドラをゴリゴリ書くよりも、フレームワークを導入するほうが、導入コストはかかるものの、それを差し引いても開発速度も早いのではないかと思われました。

また別の目算もありました。

前職でフロントエンドのアドバイザーとしてお世話になっていた大谷さんにお手伝いいただける、という話もつけられていたので、新規技術導入のコストを圧倒的に圧縮できそう、という見積もりもありました。彼の技術力、スピード、コミット力を知っていましたので、それも新規技術導入の判断の大きな支えになっていました。

なので短期的な視点から見てもコストがすごく大きいわけでもない、また、中長期的な観点から見ても、新しい技術スタックの導入は避けられないので、このタイミングでの導入にに大きな迷いはありませんでした。

何を導入したか？

技術スタックとしては以下のような技術を新規機能開発において導入しました。

React
TypeScript
Vite
Tanstack Query
OpenAPI React Query Codegen
Mock Service Worker
Zod
Zag.js
Design Tokens
Style Dictionary

一つ一つ事情等について記載してみたいと思います。

React

こちらは、特に多角的に検討したわけではないです。
自分も過去にAngular, Vue.jsを触ったことがあったことと、現状のフロントエンド界隈の状況を鑑みるとReactが妥当かなという判断ではあります。

TypeScript

これも同じですね。
品質の高いフロントエンドのプログラムには欠かせないという判断です。
React含め学習コストについても念頭にはありましたが、そこは払わなければならないコストだと判断しました。

Vite

こちらに関しては、僕の狭いフロントエンド知識で初期段階ではwebpackでもいいのかなと思ったのですが、大谷さんからこのタイミングで検討するならViteでしょう、と言われました。実際使ってみてなかなか充実したエコシステムを持っており、快適に開発できています。

TanStack Query

APIクライアント、何にしましょう？という検討の中で大谷さんからTanStack Queryの提案を受け、採用を決めました。
ここも自分の知識だとaxiosとかでいいかなと考えたりはしていましたが、実際使ってみて、キャッシュ利用やローディングステータスなどをTanStack Queryが面倒を見てくれるので、とてもコーディングが楽になったと感じています。
isLoading, isFetchingといったローディングステータス周りの挙動の理解に若干のわかりにくさがありましたが、そこも理解すれば特に困ることはなさそうです。
なお、現時点でのSaleshubでの設定では、refetchOnWindowFocusはfalseにしています。
ここは今後変更する可能性はあるのですが、WindowFocusごとにいちいち同期を取るほど同期性にユーザーメリットがあるわけではなさそう、という判断です。

OpenAPI React Query Codegen

Saleshubの開発では、サーバーとの通信はOpenAPIを使っています。
なので、TanStack Queryも直接TanStack Queryを利用するのではなく、OpenAPI React Query Codegenで自動生成されたコードを利用する形でAPIを利用しています。
自動生成されたコードを利用するだけなので、自前で記述するコード量がとても少なく助かっています。
今のところそのことによってかゆいところに手が届かないみたいな困り事はありませんね。

Mock Service Worker

これは導入してなかなか良かったと思っています。
msw-auto-mock
を利用することでOpenAPIの定義からmockサーバーを簡単に立てることができました。
そのことによってサーバーの開発状況に左右されずにフロントエンドの開発をかなり進めることができました。

Zod

スキーマ定義とバリデーションのライブラリです。
今回の新機能の開発ではスキーマ定義とバリデーションにおいてすごく高い要求があったわけではないのですが、入れておいた方がいいでしょう、という大谷さんからのアドバイスに基づいて導入しています。
フォームの値をサーバーへのリクエストの内容に変換する際のバリデーションや値の変換に利用しています。
またReactコンポーネント間での値の受け渡しの際の変換処理でも活用しています。

Zag.js

Saleshubは、CSSのフレームワークを利用しておらず、カスタムにスタイルを定義しています。
そのため、スタイルの当たったコンポーネントライブラリではなく、ヘッドレスなライブラリが良いでしょう、ということでこちらも大谷さんから勧められて導入しています。
Saleshubの場合、スタイル周りは日比野さんが担当しているので、おそらく日比野さんはメリットを感じていると思うのですが、自分はちょっとまだあまり分かっていないですw

Design Tokens, Style Dictionary

このあたりも大谷さんにご指導いただきながら導入していますが、自分はまだあまりこのあたり理解できていません。なので説明は端折りますが、こういうものも導入していますという紹介のみしておきます。

最後に

さて、今回はSaleshubのフロントエンドで導入した新しい技術群についてご紹介させていただきました。あくまで概要的なご紹介で詳しいことは書けていませんが、もし「この辺りについて詳しく聞いてみたい」などご興味お持ちいただけるポイントがございましたら、ぜひX（Twitter?）ででもDMいただけますと嬉しいです。
あるいはMeetyなどでお声かけいただく、でも嬉しいです。