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

Posted at 2024-07-09

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

/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を定義する方法。次はコンポーネントの中にスタイルを定義する方法である。

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;
}

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を使用することで、スタイルの継承やオーバーライドを柔軟に行うことができる。

You get articles that match your needs
You can efficiently read back useful information
You can use dark theme

What you can do with signing up

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

目次

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

CSSの適用方法

ポイント