この記事はWHITEPLUS Advent Calendar 2021の9日目の記事です。
はじめに
こんにちは。株式会社ホワイトプラス、エンジニアの @napple-w-plus です。
ホワイトプラスでは主にお客様が触れるWeb全般を、フロントエンドからサーバーサイドまで広く担当しています。
最近、弊社のサービスであるLenetの新規注文フォームを新しく作り直す開発を行いました。
その開発にて、React + Redux のディレクトリ構成としてre-ducksパターンというものを導入しました。
そこでこの記事では、re-ducksパターンとはどういうものなのか？ということを紹介していこうと思います。
re-ducksパターンが誕生した理由
re-ducksパターンと聞いて感のいい方ならお気づきかもしれませんが、"re"ということはDucksパターンが存在するのです。
なのでまずは、re-ducksパターンの元となっているDucksパターンについて紹介していきます。
Ducksパターン
Ducksパターンは、Reduxに必要なAction, Reducerなどを「機能ごと」に1つのファイルにまとめるディレクトリ構成です。
- Ducksパターンが生まれる前のディレクトリ構成
- actions - posts.ts - users.ts - reducers - posts.ts - users.ts
- Ducksパターンによるディレクトリ構成
- modules - posts.ts - users.ts
元々、ActionやReducerといった役割ごとでファイルが散乱していましたが、Ducksパターンではまとめて管理しやすくしました。
このDucksパターンのおかげでディレクトリの問題が解決したと思われました。
しかし、サービスの規模が大きくなるにつれファイルが肥大化してしまい、結局管理しづらいファイルとなってしまいました。
そこで誕生したのがre-ducksパターンです。
re-ducksパターン
re-ducksパターンは、Ducksパターンと同様に機能ごとに分けます。
しかし違いとしては、その中でさらに役割ごとのファイルに分けるというところです。
re-ducksパターンでは以下のようなディレクトリ構成になります。
- re-ducksパターンによるディレクトリ構成
- posts - actions.ts - index.ts - operations.ts - reducers.ts - selectors.ts - types.ts - users - actions.ts - index.ts - operations.ts - reducers.ts - selectors.ts - types.ts
メリット
1. 管理しやすい
ファイルごとの役割が明確なので、「どのファイルのどの箇所に何を書けばいいのか」すぐに判断でき、管理しやすくなります。
2. ファイルが肥大化しにくい
これは当たり前ですが、Ducksパターンでまとめていたコードを、re-ducksパターンでは複数ファイルにて管理するので、1ファイルは肥大化しにくくなります。
デメリット
唯一の欠点として、Ducksパターンよりもファイル数が多くなってしまいます。
しかし、慣れてしまえばむしろ目当てのファイルにすぐに辿り着くことが出来るので、ファイルの多さは気にならなくなりました。
実際のディレクトリ構成
このように3つのディレクトリに分けて、中に役割としてのファイルを配置しています。
まとめ
「ファイル多いし大変そうだな…」と思うかもしれません。（私も初めはなんでこんなに分ける必要あるんだ？と思っていました。）
しかし、開発が進むにつれてコード量が多くなり複雑になってきても開発がしやすく、改めてre-ducksパターンの恩恵を感じました。
興味がある方はReact + Redux のディレクトリ構成を考える際、是非re-ducksパターンを導入してみて下さい！
さいごに
ホワイトプラスでは、ビジョンやバリューに共感していただけるエンジニアを募集しています！
ネットクリーニングの「リネット」など「生活領域×テクノロジー」で事業を展開している会社です。どんな会社か気になった方はオウンドメディア「ホワプラSTYLE」をぜひご覧ください。
オンラインでカジュアル面談もできますので、ぜひお気軽にお問い合わせください。
