Reactのフォルダ構成を見直して、コードがスッキリした話

はじめに

これまでReactのフォルダ構成について、特に深く考えずに開発していました。

その結果、

• components フォルダの中にファイルがどんどん増えて、探すのが大変
• 1つのコンポーネントファイルに useState や関数が大量に並んでいて、とにかく見づらい

といった問題に直面しました。

この状況をきっかけにフォルダ設計について改めて考えることにしました。

調べていく中で Bulletproof React という設計思想を知り、実際に取り入れてみました。

問題1：components フォルダがファイルで溢れかえる

当時はすべてのUIを components にまとめていたので、 components フォルダにすべてのUIコンポーネントが集まってしまい、正直カオスでした。

Bulletproof React では、features ごとにフォルダを分けてコンポーネントを管理する方針があります。

これによって、関連するコンポーネントがグループ化され、見通しが大幅に改善されます。

問題2：コンポーネントファイルの肥大化

私のコードが見づらくなっていた最大の原因は、ロジックとUIが混在していたことでした。

Bulletproof Reactを参考にして、ロジックをカスタムフックとして hooks フォルダに切り出したところ、コンポーネントがスッキリしました。

カスタムフックの存在自体は知っていましたが、ロジックの分離という具体的な用途を身をもって理解できたのは大きな学びでした。

感想

• 関連するコンポーネントがまとまり、ファイルを探すのが楽になりました
• コンポーネントがUIに集中できるようになり、何をしているかが一目で分かるようになりました
• あとから直すのは大変なので、最初から設計ルールを決めて進めたほうが良いと思いました

参考

• Bulletproof React