この記事は株式会社ビットキー Advent Calendar 2023 5日目の記事です。 はじめに この記事では React を用いたフロントエンドアプリケーションのディレクトリ構成について検討した内容を紹介します。 現在フロントエンド開発を行っていて、ディレクトリ構成にお悩みの方の参考になれば幸いです。 ※ State 管理についての良し悪しやその他 React 向けのフレームワークライブラリについては本記事では触れません。 今回対象とするプロダクト ビットキーのHome事業では、不動産管理会社向けのB2B2Cプロダクトを展開しています。 その中でも不動産管理会社の方が利用する管理画面について、リリース後から様々な機能や画面が実装されシステムが巨大化してきたので、ディレクトリ構成を見直す機会が訪れました。 参考値として、現在のプロダクトは100画面を超えており、ソースファイルも1500
![4年分の負債を解消するために React ディレクトリ構成について真剣に考えてみた - Qiita](https://cdn-ak-scissors.b.st-hatena.com/image/square/2eaa88ceaf750c9702fd3ac039b0c458d8787390/height=288;version=1;width=512/https%3A%2F%2Fqiita-user-contents.imgix.net%2Fhttps%253A%252F%252Fcdn.qiita.com%252Fassets%252Fpublic%252Fadvent-calendar-ogp-background-f625e957b80c4bd8dd47b724be996090.jpg%3Fixlib%3Drb-4.0.0%26w%3D1200%26mark64%3DaHR0cHM6Ly9xaWl0YS11c2VyLWNvbnRlbnRzLmltZ2l4Lm5ldC9-dGV4dD9peGxpYj1yYi00LjAuMCZ3PTkxNiZoPTMzNiZ0eHQ9NCVFNSVCOSVCNCVFNSU4OCU4NiVFMyU4MSVBRSVFOCVCMiVBMCVFNSU4MiVCNSVFMyU4MiU5MiVFOCVBNyVBMyVFNiVCNiU4OCVFMyU4MSU5OSVFMyU4MiU4QiVFMyU4MSU5RiVFMyU4MiU4MSVFMyU4MSVBQiUyMFJlYWN0JTIwJUUzJTgzJTg3JUUzJTgyJUEzJUUzJTgzJUFDJUUzJTgyJUFGJUUzJTgzJTg4JUUzJTgzJUFBJUU2JUE3JThCJUU2JTg4JTkwJUUzJTgxJUFCJUUzJTgxJUE0JUUzJTgxJTg0JUUzJTgxJUE2JUU3JTlDJTlGJUU1JTg5JUEzJUUzJTgxJUFCJUU4JTgwJTgzJUUzJTgxJTg4JUUzJTgxJUE2JUUzJTgxJUJGJUUzJTgxJTlGJnR4dC1jb2xvcj0lMjMzQTNDM0MmdHh0LWZvbnQ9SGlyYWdpbm8lMjBTYW5zJTIwVzYmdHh0LXNpemU9NTYmdHh0LWNsaXA9ZWxsaXBzaXMmdHh0LWFsaWduPWxlZnQlMkNtaWRkbGUmcz1iOTY0YzkxNjMwZDRlMDM0YjAyMGY1MmVjZmE5MjI1YQ%26mark-x%3D142%26mark-y%3D151%26blend64%3DaHR0cHM6Ly9xaWl0YS11c2VyLWNvbnRlbnRzLmltZ2l4Lm5ldC9-dGV4dD9peGxpYj1yYi00LjAuMCZ3PTcxNiZ0eHQ9JTQwdW1pbm9vb29uMTglMjBpbiUyMCVFNiVBMCVBQSVFNSVCQyU4RiVFNCVCQyU5QSVFNyVBNCVCRSVFMyU4MyU5MyVFMyU4MyU4MyVFMyU4MyU4OCVFMyU4MiVBRCVFMyU4MyVCQyUyMCUyRiUyMEJpdGtleSUyMEluYy4mdHh0LWNvbG9yPSUyMzNBM0MzQyZ0eHQtZm9udD1IaXJhZ2lubyUyMFNhbnMlMjBXNiZ0eHQtc2l6ZT0zMiZ0eHQtYWxpZ249bGVmdCUyQ3RvcCZzPWVjMzMzZmI4ZTE2ZGE2MzA0MDcxM2I3MGI4OWI5Yjk2%26blend-x%3D142%26blend-y%3D491%26blend-mode%3Dnormal%26s%3Dd81fa4555e3dca2b12d1fb86a959ca7b)