Wistantのフロントエンド技術スタックを刷新した話

こんにちは、フロントエンドエンジニアの池田です。弊社のサービスであるWistantのv5.0が4月にリリースされました。簡単にその経緯と技術選定理由を共有させて頂きます。

技術刷新に至った経緯

v5.0の情報アーキテクチャ（レイアウト）変更

新しいデザイナーさんにJOINして頂き、プロダクトのUI・UXの大胆な改善を行うことになりました。具体的には、プロダクトのコンセプト・ターゲットの変更に伴って、既存のすべてのページにおいてデザインの変更を行うことになりました。

当たり前ですが、全ページの改修は簡単にできることではありません。モーダルなどを含め約100のページが存在しており、それらをすべて改修・チェックする必要があります。

あれこれ考えるうちに、「一からフロントエンドを作り直そう」という提案が出ました。アプリケーション内のすべてのページ改修が必要になるなら、いっそフロントエンドの構造から作り直すことで、今まで積み残されていた技術的負債や、開発者経験（DX）の改善も同時に行っていくのが効率的ではないかという意見です。

技術的負債と開発者経験（DX）

RELATIONSの開発チームでは新機能・バグ対応・保守を6:2:2の割合で開発することをルールとしております。しかし、Wistantは開発が始まってから2年以上の時間が経っていることや、最近の開発スケジュールでは新機能開発に注力してきたことなどもあり、技術的負債が多く溜まってきました。

ライブラリーのバージョンが古かったり、実装におけるDXが低下してしまったり、などはまだ些細な問題ですが、アプリケーションのパフォーマンスに直接影響する部分については、顧客への提供価値を毀損してしまうことから、大きな問題として捉える必要がありました。

これらを解決するために、構造上の問題のある現システムを捨て、新しいアーキテクチャーを一から構築し直すタイミングとしては、最適だと言えると思います。 なにより、技術的負債を返済しつつ、DX・パフォーマンスの向上のために新しい技術を使えることは、エンジニアチームとしてとても胸が熱くなることだったので、開発チーム全員が意気投合してた覚えがあります。

主な技術的変更

v5.0以前の技術スタックに関しては、この記事をお読みください。

Reduxの廃止

Global Stateの管理はモダンなWeb開発において、重要なトピックとなってます。 Redux は長らく React を使う上でのGlobal Stateのデファクトスタンダードになってましたが、それに対する様々なアプローチが可能になった（Apollo Client や React Hooks の登場）今は、最近はその傾向が薄れて来ました。

また、Wistantではreducerが大きくなるに連れ、バンドルサイズが大きくなったり、 actionやreducerの場所が分かりづらくなったり、実装量も増えてしまったり、などといったところに問題を感じていました。

今回は、必要最低限のGlobal Stateは React の Context API と Hooks に任せることにして、 サーバーから返ってくるデータの管理は Apollo Client に任せるという技術選択をしました。結果としてDX及びパフォーマンスの二兎を同時に得ることができるような改善ができたと思います。

デザインシステムの構築

デザインシステムの構築は前からチーム内で多く話されてきたトピックです。現行のWistantのUIは、Stylus を使ってcssを書き、classNameでスタイルを当てる実装にしてました。しかし、コーディングの指針や、デザインの原則などが統一されてない箇所も多く、似たようなコンポーネントが色んな場所に作られるなどの弊害が出てきました。

今回の全ページのUI改修にあたって、デザインシステムを構築し、一貫性のあるUIの提供と、DX向上を図れるようになりました。特に、全ページにデザインシステムを適用したことで、前のバージョンでは不可能に近かった、ダークモードを簡単に実装し、提供することが出来たことも大きいメリットになったと思います。

TypeScriptの導入

時代の流れに便乗して TypeScript を導入しました。型がついていることの便利さは前々から技術共有会などでも話されてきた内容でした。

今回、TypeScript によってコードの多くに型をつけることが出来たことによって、コードベースに対する信頼性が上がったのと、VSCodeで型ヒントが出るようになったことで、実装面でのDXが格段に向上しました。 GraphQL のスキーマをベースに、TypeScript の型を生成してくれる GraphQL Code Generator の使用感もとても良く、かつ非常に便利でした。

最後に

その他にも、ビルド周りを create-react-app に変更したり、開発環境への自動デプロイができるようにしたり、 moment.js というライブラリーを date-fns に変えたり…、とても勉強になることが多かった2ヶ月間でした。次からは、今回の詳しい内容を詳しく話していければなと思います。