webサービスを開発する過程において、React-Reduxに係る作業を効率化するコード・マネージャーを開発致しました。

React-Reduxの単純作業に係る非効率性

reduxはボイラープレートやこれに準ずる繰り返しの記述が多い結果、全体的構造の見通しが困難で、人的ミスに起因するバグが発生しやすいツールとなっております。またreact-reduxは、reduxにて作成したモジュールと密接な関係をもつreactコンポーネントの配置箇所決定に問題を抱えております。reactとreduxの配置を分離する場合、モジュール名変更などのリファクタリングが困難な一方、相似なディレクトリ構造の構築は手間がかかり、人的ミスのリスクが高まります。同一ディレクトリ内に配置する場合、役割別にサブディレクトリを作る等の手間がやはり発生します。これらの問題が機能毎に発生する結果、総体として、多大な非効率性が発生する状態となっておりました。

効率的な開発を実現するコード・マネージャーを開発

上記の問題を解決するため、コードの構造化や管理を一元的に担うマネージャーを開発致しました。

Redux管理

reduxコードを構造化し、見やすいインターフェイスにて管理。各モジュールに情報集約用スライス、アクション用スライス、ビュー用Reactコンポーネントを作成。

高速なコードアクセス

各アイテムにコードファイルのデフォルトエディタにおけるオープン、インポートコードのコピー、dispatchコードのコピーを搭載。

Reactページ管理、パーツ管理

似通ったコードの頻発により非効率的なページ管理をマネージ。

再利用パーツとして大量に必要となるReactコンポーネント群を構造化管理。

Styled Component Creator

styledコンポーネントを瞬時に作成。僅かに異なる定型文への対応や、CSSプロパティの検索による非効率性を排除。