webサービスを開発する過程において、React-Reduxに係る作業を効率化するコード・マネージャーを開発いたしました。
React-Reduxの単純作業が生む、多大な非効率
reduxはボイラープレートやこれに準ずる繰り返しの記述が多い結果、全体的な構造の見通しが困難で、人的ミスに起因するバグが発生しやすいツールとなっております。
また、react-reduxは、reduxにて作成したモジュールと密接な関係をもつreactコンポーネントの配置箇所の決定に問題を抱えております。reactとreduxの配置を分離する場合、モジュール名変更などのリファクタリングが困難な一方、相似なディレクトリ構造の構築は手間がかかり、人的ミスのリスクが高まります。同一ディレクトリ内に配置する場合、役割別にサブディレクトリを作る等の手間がやはり発生します。
これらの問題が機能毎に発生する結果、総体として、多大な非効率性が発生する状態となっておりました。
コードの構造化と管理を、一元的に
上記の問題を解決するため、コードの構造化や管理を一元的に担うマネージャーを開発いたしました。
Redux管理
reduxコードを構造化し、見やすいインターフェイスにて管理します。各モジュールに、情報集約用スライス、アクション用スライス、ビュー用Reactコンポーネントを作成します。
高速なコードアクセス
各アイテムに、コードファイルのデフォルトエディタにおけるオープン、インポートコードのコピー、dispatchコードのコピーを搭載しています。
Reactページ管理、パーツ管理
似通ったコードの頻発により非効率的なページ管理をマネジメントします。
再利用パーツとして大量に必要となるReactコンポーネント群を、構造化して管理します。
Styled Component Creator
styledコンポーネントを瞬時に作成します。僅かに異なる定型文への対応や、CSSプロパティの検索による非効率性を排除します。
