カミナシのソフトウェアエンジニアの天野です。カミナシは、現場DXプラットフォーム「カミナシ」の開発をしています。今日はフロントエンドの小ネタを紹介しようと思います。よろしくお願いします。

TL;DR

Reduxで管理しているstateにコメントを入れておくと useSelector(https://react-redux.js.org/api/hooks#useselector)で値を取り出す時にコメントを表示してくれるようになって安心だよ。

経緯

カミナシのフロントエンドでは、全面的にReduxを採用しています。

まず、前提として「カミナシ」はかなり短期間で開発された経緯があります。また、mobileとwebでサービスを提供する必要があったため、ReactとReact Native (Expo)を採用し、ローンチまでのスピードを上げる狙いがありました。 (↑この辺は推測で書いているので、間違っていたら指摘がほしいです)

また、mobileとwebでデータ構造がほとんど同じなため、stateの型を定義しているファイルが共有する構成になっており、globalなstateが肥大化して、どれが何に使われているかは歴史的経緯を追っていかないとわからない作りになっていました。

その作りでは、globalなstateをuseSelector(https://react-redux.js.org/api/hooks#useselector)で取得する際に、型定義があっても歴史的経緯を掘り起こさないといけなく、認知負荷が高くなっていました。

この状況では、開発スピードに影響するとの判断があり、「技術負債解消プロジェクト」が始動します。「技術負債解消プロジェクト」の詳細については、CTO の登壇スライドもご覧ください。

speakerdeck.com

この取り組みにより、現状のフロントエンドのコードベースを整理することになり、globalなstateもスリム化していくことができました。

今後はさらにstateの整理を進めていき、stateのサイズを最小限にし、別ライブラリへの移行もできたらいいかもという話も上がっています。

その際の副産物として歴史的経緯が解明され、useSelectorで取得するstateが何に使われているか一目で理解できるようにして、認知負荷を下げたいというモチベーションが生まれてきました。

認知負荷を下げるためにはどうすればいいか。初歩的ですが、型定義にコメントが記載されていればいいですね。