React.jsプロジェクトのファイル構成

迷うことが多いので一度情報を整理してみます。もし誤りがあれば教えていただけますと助かります！

目次

• 各フォルダと構成についての説明
• CSSの適用方法

フォルダ構成の一例↓↓

/src
  /components
    /Navigation
      Navigation.jsx
      Navigation.css
    /Search
      Search.jsx
      Search.css
    /Filter
      Filter.jsx
      Filter.css
    /CountryFlag
      CountryFlag.jsx
      CountryFlag.css
  /pages
    Home.jsx
    Home.css
    CountryDetail.jsx
    CountryDetail.css
  /services
    ApiService.js
  /utils
    HelperFunctions.js
  App.jsx
  App.css
  index.jsx

各フォルダと構成についての説明

• components:

コンポーネントを格納する場所。各コンポーネントに対応するCSSファイルもこの中に配置する。例えば、Navigation.jsxに対応するスタイルはNavigation.cssに記述する。

• pages:

アプリケーションのページごとにコンポーネントを分類する場所。各ページに対応するCSSファイルもこの中に配置する。例えば、Home.jsxに対応するスタイルはHome.cssに記述する。

• services:

APIとの通信やデータの取得など、ビジネスロジックを担当するサービスファイルを格納する。

• utils:

アプリケーション全体で使用するユーティリティ関数やヘルパー関数を格納する。

• App.jsx:

アプリケーションのルートコンポーネントであり、全体のレイアウトやルーティングを設定しする。通常、このファイルには直接CSSを書くことは少なく、グローバルなスタイルやフォントの設定などを含むことがある。

• index.jsx:

アプリケーションのエントリーポイントで、ReactDOM.render()を使用してAppコンポーネントをDOMにマウントする。

CSSの適用方法

• ローカルスコープCSS:

Reactでは、CSS Modulesやstyled-componentsなどを使って、コンポーネントごとにスタイルをカプセル化する方法が一般的。これにより、異なるコンポーネントのスタイルが衝突するのを防ぐ。

衝突の一例
異なるコンポーネントが同じ名前のクラスを持つと、通常のCSSではスタイルが衝突する可能性がある。下記の例の場合、ComponentAのボタンにもComponentBのボタンにも二番目のスタイルが適用されることになる (CSSは後に書いてあるスタイルによって上書きされるため)

/* ComponentA.css */
.button {
 background-color: blue;
 color: white;
}

/* ComponentB.css */
.button {
 background-color: red;
 color: black;
}

解決策としては主に二つ。ひとつは、コンポーネントごとのCSSを定義する方法。次はコンポーネントの中にスタイルを定義する方法である。

1. CSS Modules:

// ComponentA.jsx
import styles from './ComponentA.module.css';

function ComponentA() {
  return <button className={styles.button}>Click me</button>;
}

/* ComponentA.module.css */
.button {
  background-color: blue;
  color: white;
}

// ComponentB.jsx
import styles from './ComponentB.module.css';

function ComponentB() {
  return <button className={styles.button}>Click me</button>;
}

/* ComponentB.module.css */
.button {
  background-color: red;
  color: black;
}

1. styled-components:

// ComponentA.jsx
import styled from 'styled-components';

const Button = styled.button`
  background-color: blue;
  color: white;
`;

function ComponentA() {
  return <Button>Click me</Button>;
}

// ComponentB.jsx
import styled from 'styled-components';

const Button = styled.button`
  background-color: red;
  color: black;
`;

function ComponentB() {
  return <Button>Click me</Button>;
}

• グローバルCSS:

App.cssやindex.cssなどのグローバルなCSSファイルを作成し、アプリケーション全体のスタイルを設定することができる。(ただし、ローカルスコープのCSSを使用が推奨されている。)

• CSSフレームワーク:

必要に応じて、BootstrapやTailwind CSSなどのCSSフレームワークを導入して、スタイルの設計や効率化ができる。

ポイント

コンポーネントごとにCSSを管理: 各コンポーネントに対応するCSSファイルを作成し、コンポーネントごとにスタイルを分離して管理することで、可読性とメンテナンス性を向上できる。

スタイルの継承とオーバーライド: Reactでは、CSS Modulesやstyled-componentsを使用することで、スタイルの継承やオーバーライドを柔軟に行うことができる。