サイトの負債と向き合うweb技術選定

クラスター株式会社では現在ユーザーによる自作アイテムの売買を可能にする「アイテムストア機能」の開発に力を入れていますが、それに関連して新たに社内向けのツールの開発も行っています。

社内ツールを新規作成するにあたってまずは利用するライブラリの選定やシステム構成などをするのですが、その際にweb開発チームで話し合い、「clusterのwebサイトがいま抱えている課題の解決」につながる構成にチャレンジすることになりました。

そこでこの記事では現在開発中の社内ツールで新規に採用したライブラリについて、サイトがどのような課題を抱えているのかも説明をしつつ紹介をしていこうと思います。

筆者について

クラスター株式会社でSoftware Engineerをしているわらび餅といいます。普段はwebサイトの機能追加やAndroidアプリの開発などを主に行っています。

技術選定の方針について

新規ツールでの技術選定をするにあたり、まず選定理由で重要視する点を決めることにしました。

1. サイトで利用している技術スタックと大きく離れることはしない

クラスター株式会社でwebの開発をするメンバーは自分を入れて現在5人で決して多いとは言えず、この人数でwebサイト開発の全体を行っている状態です。
作成する社内ツールもこの5人で今後の運用を行っていくことになるので、webサイトとなるべく似た構成にすることをまず前提としました。

2. サイトの課題を改善する技術選定

大きくズレた技術スタックにはしないという前提はありつつも、全てをwebサイトにそろえる訳ではありません。
サイトで現在課題に感じている部分は、それに代わる別のライブラリを使うチャレンジをすることにしました。
ツールの開発でこの取り組みが成功した場合、将来的にwebサイト側にも導入する事でそちらの改善にもつながるという目的があります。

解決に向けたライブラリの選定

状態管理ライブラリ

解決したい課題: 状態管理のコードがCode Splitting されていない

clusterのwebサイトでは現在、状態管理ライブラリにReduxを採用しています。

Reduxは状態管理を扱うライブラリで非常に人気なライブラリですが、状態を1つの巨大なstateとして管理するため複数の機能があるwebページの場合は用途に関係のない状態も読み込む必要があり、その分起動時のパフォーマンスが悪化していることが現在cluster.muで1つの問題となっています。

webのソースコードが必要なタイミングになるまで読み込まれないようコードを分割する技術をCode Splitting と呼び、ReduxでもCode Splittingをする方法は提供されています。
しかしその方法が多少複雑だったこともあり、既にある大量のstateをCode Splitting する実装に置き換えるコストや今後の実装でも常にその複雑さと向き合い続ける事などを考慮して、ReduxでのCode Splittingは見送る判断をしました。
https://redux.js.org/usage/code-splitting

導入したライブラリ: Recoil

今回の社内ツールでは状態管理にReduxではなくRecoilを導入しました。

RecoilとReduxの大きな差は、stateが中央集権にならず必要な画面で必要なstateだけ呼び出せる点にあります。
その特徴からRecoilではCode Splitingが容易に行えます。