カミナシ エンジニアブログ

株式会社カミナシのエンジニアが色々書くブログです

トップ > フロントエンド > Reduxのstateの認知負荷を下げたい話

Reduxのstateの認知負荷を下げたい話

フロントエンド Redux

カミナシのソフトウェアエンジニアの天野です。 カミナシは、現場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が何に使われているか一目で理解できるようにして、認知負荷を下げたいというモチベーションが生まれてきました。

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

結論

VS Codeを使っている前提ですが、下記のようにコメントを書くだけでOK。

stateを使用する側でカーソルを当てると、コメントで記載した内容が表示されるようになります。 実際に見てみましょう。

実際に見てみると

こんな感じになります。わかりやすくて嬉しい。 中規模以上の開発では、型定義からだけでは、サービス開始からの歴史的経緯がわかりにくかったりします。 このように歴史的経緯を解明した際にコメントを追加しておくと、認知負荷が下がって開発スピードが上がっていくのではないかなと思います。

カミナシではフロントエンド領域をリードするエンジニアを募集しています！ 一緒に開発しましょう！ herp.careers