【React】フォルダ構成の考え方

ARANK

はじめにReactのフォルダ構成は難しいReactは、フォルダ構成に"意見を持ちません"。この柔軟性が、フォルダ構成の難しさに繋がっていると思います。また、フォルダ構成について体系的に書かれている情報が少なく、特に用語の説明がなかったりするため、理解が難しいと感じました。そこで、フォルダ構成を体系的に理解し、作成できるようになるため、フォルダ構成の考え方についてまとめました。この記事の目的フォルダ構成について：意見を持てるようになる調べやすくなるそして、リポジトリを見た時に構造化して見えるようになることを目的としています。フォルダ構成の種類フォルダ構成の種類は、大きく分けて３つに分類できます：type-basedfeature-basedlayer-based「by 〇〇」という呼び方も存在しますが、意味は同じです。詳細は、〇〇-based以外の呼ばれ方に記載しました。type/ feature/ layerとは？type「技術的な種類」のことです。例えば、hooks、components、typesフォルダが該当します。Reactは関係ありませんが、深く理解するために、MVCパターンで類比してみます。MVCは技術的な関心の分離を行っています。従って、Model、View、Controllerもtypeに分類され…