迷ったらこれ！ React コンポーネントのエクスポート方法：index.js ファイル vs サブディレクトリ vs TypeScript

2024-06-29

React コンポーネントディレクトリにおける index.js ファイルの役割

コンポーネントのデフォルトエクスポート

index.js ファイルは、そのディレクトリ内に含まれるコンポーネントのうち デフォルトコンポーネント をエクスポートするために使用されます。デフォルトコンポーネントは、他のコンポーネントから直接インポートして使用できる特別なコンポーネントです。

例えば、components というディレクトリに Button.js と Button.css というファイルがあるとします。Button.js ファイル内で Button というコンポーネントを定義し、デフォルトコンポーネントとしてエクスポートする場合、以下のようになります。

import React from 'react';
import './Button.css';

const Button = ({ label, onClick }) => {
  return (
    <button className="button" onClick={onClick}>
      {label}
    </button>
  );
};

export default Button;

このとき、他のコンポーネントから Button コンポーネントをインポートするには、以下のようになります。

import Button from './components/Button';

const MyComponent = () => {
  return (
    <div>
      <Button label="Click me" onClick={() => console.log('clicked!')} />
    </div>
  );
};

ディレクトリ内サブコンポーネントのエクスポート

index.js ファイルは、デフォルトコンポーネントに加えて、そのディレクトリ内にある サブコンポーネント を個別にエクスポートするためにも使用できます。サブコンポーネントは、デフォルトコンポーネントとは異なり、直接インポートして使用することはできません。

サブコンポーネントをエクスポートするには、以下の構文を使用します。

export const SubComponent = () => {
  // ...サブコンポーネントのコード
};

import { SubComponent } from './components';

const MyComponent = () => {
  return (
    <div>
      <SubComponent />
    </div>
  );
};

React コンポーネントディレクトリにおける index.js ファイルは、デフォルトコンポーネントの提供と、サブコンポーネントの整理という重要な役割を担っています。これらのファイルを適切に活用することで、コンポーネントを効率的に管理し、コードの読みやすさを向上させることができます。

補足

index.js ファイルは、必ずしも必要ではありません。デフォルトコンポーネントやサブコンポーネントを直接エクスポートしたい場合は、index.js ファイルを作成する必要はありません。
コンポーネントの命名規則として、一般的には大文字始まりパスカルケース (Button, MyComponent など) が推奨されています。

components/Button/index.js

import React from 'react';
import './Button.css';

const Button = ({ label, onClick }) => {
  return (
    <button className="button" onClick={onClick}>
      {label}
    </button>
  );
};

export default Button;

export const SecondaryButton = ({ label, onClick }) => {
  return (
    <button className="secondary-button" onClick={onClick}>
      {label}
    </button>
  );
};

.button {
  background-color: #4CAF50;
  color: white;
  padding: 10px 20px;
  text-align: center;
  text-decoration: none;
  display: inline-block;
  font-size: 16px;
  margin: 4px 2px;
  cursor: pointer;
}

.secondary-button {
  background-color: #3e8e41;
  color: white;
}

MyComponent.js

import React from 'react';
import Button from './components/Button';

const MyComponent = () => {
  return (
    <div>
      <Button label="Click me" onClick={() => console.log('clicked!')} />
      <Button label="Secondary" onClick={() => console.log('secondary clicked!')} secondary />
    </div>
  );
};

export default MyComponent;

この例では、components/Button ディレクトリに index.js ファイルと Button.css ファイルを作成しています。index.js ファイルでは、Button コンポーネントをデフォルトコンポーネントとしてエクスポートし、さらに SecondaryButton というサブコンポーネントもエクスポートしています。

MyComponent.js ファイルでは、Button コンポーネントと SecondaryButton コンポーネントをそれぞれインポートして使用しています。

React コンポーネントディレクトリにおける index.js ファイルの代替方法

サブディレクトリを使用する

コンポーネントの種類ごとにサブディレクトリを作成し、それぞれのサブディレクトリ内に index.js ファイルを作成するという方法です。この方法により、コンポーネントをより論理的に整理することができます。

components
├── buttons
│   ├── Button.js
│   ├── Button.css
│   └── index.js
├── forms
│   ├── Input.js
│   ├── Input.css
│   └── index.js
└── modals
    ├── Modal.js
    ├── Modal.css
    └── index.js

単一ファイルでエクスポートする

すべてのコンポーネントを index.js ファイル内に直接エクスポートするという方法です。この方法には、シンプルでわかりやすいという利点がありますが、コンポーネントが増えてくるとファイルが冗長になりやすくなるという欠点もあります。

import React from 'react';
import './components.css';

export const Button = ({ label, onClick }) => {
  // ...Button コンポーネントのコード
};

export const Input = ({ type, value, onChange }) => {
  // ...Input コンポーネントのコード
};

export const Modal = ({ title, children, onClose }) => {
  // ...Modal コンポーネントのコード
};

TypeScript を使用すると、コンポーネントの型を定義し、コンポーネント間の相互作用をより明確にすることができます。また、コンポーネントの自動補完やエラーチェックなどの機能も利用できます。

// components/Button/index.ts
import React from 'react';
import './Button.css';

interface ButtonProps {
  label: string;
  onClick: () => void;
}

const Button: React.FC<ButtonProps> = ({ label, onClick }) => {
  // ...Button コンポーネントのコード
};

export default Button;