React.js で複数のモジュールをエクスポートする

2024-05-15

React.js で複数のモジュールをエクスポートする方法

モジュールをエクスポートするには、主に以下の 2 つの方法があります。

名前付きエクスポートを使用すると、個々のコンポーネント、関数、変数などに名前を付けてエクスポートすることができます。これにより、インポート時にどのエンティティを指しているのかを明確にすることができます。

// MyComponent.js
export const MyComponent = () => {
  // ...コンポーネントのコード
};

export const MyFunction = () => {
  // ...関数のコード
};

export const myVariable = 'Hello, world!';

他のファイルから上記のモジュールをインポートするには、次のようにします。

// App.js
import { MyComponent, MyFunction, myVariable } from './MyComponent';

const App = () => {
  return (
    <div>
      <MyComponent />
      <p>{MyFunction()}</p>
      <p>{myVariable}</p>
    </div>
  );
};

デフォルトエクスポートを使用すると、モジュールから 1 つのエンティティのみをエクスポートすることができます。通常は、モジュールの主要なコンポーネントをエクスポートするために使用されます。

// MyComponent.js
export default MyComponent;

// または

export default function MyComponent() {
  // ...コンポーネントのコード
}

// App.js
import MyComponent from './MyComponent';

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

再エクスポートを使用すると、別のモジュールからインポートしたエンティティをさらに別のモジュールにエクスポートすることができます。これにより、モジュールの依存関係を整理し、コードをよりモジュール化することができます。

// MyUtilities.js
import { MyFunction } from './MyComponent';

export { MyFunction };

// App.js
import { MyFunction } from './MyUtilities';

const App = () => {
  <p>{MyFunction()}</p>;
};

React.js では、名前付きエクスポート、デフォルトエクスポート、再エクスポートを使用して、複数のモジュールを効率的にエクスポートすることができます。それぞれの方法を適切に理解し、状況に応じて使い分けることが重要です。

React.js で複数のモジュールをエクスポートするサンプルコード

名前付きエクスポート

この例では、MyComponent.js という名前のモジュールで、MyComponent コンポーネント、MyFunction 関数、myVariable 変数を定義し、それぞれを名前付きエクスポートします。

// MyComponent.js
export const MyComponent = () => {
  return (
    <div>
      <h1>My Component</h1>
      <p>{myVariable}</p>
    </div>
  );
};

export const MyFunction = () => {
  return 'Hello from MyFunction!';
};

export const myVariable = 'This is a variable.';

App.js という別のファイルで、MyComponent.js モジュールをインポートし、エクスポートされたコンポーネント、関数、変数を使用します。

// App.js
import { MyComponent, MyFunction, myVariable } from './MyComponent';

const App = () => {
  return (
    <div>
      <MyComponent />
      <p>{MyFunction()}</p>
      <p>{myVariable}</p>
    </div>
  );
};

デフォルトエクスポート

// MyComponent.js
export default MyComponent;

// または

export default function MyComponent() {
  return (
    <div>
      <h1>My Component</h1>
    </div>
  );
}

// App.js
import MyComponent from './MyComponent';

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

再エクスポート

この例では、MyUtilities.js というモジュールで、MyComponent.js モジュールからインポートした MyFunction 関数を再エクスポートします。

// MyUtilities.js
import { MyFunction } from './MyComponent';

export { MyFunction };

// App.js
import { MyFunction } from './MyUtilities';

const App = () => {
  <p>{MyFunction()}</p>;
};

これらの例は、React.js で複数のモジュールをエクスポートする方法を理解するための出発点です。実際のプロジェクトでは、より複雑なモジュール構造と依存関係を扱う必要がある場合があります。

React.js で複数のモジュールをエクスポートするその他の方法

動的インポートを使用すると、コンポーネントを非同期にロードすることができます。これにより、ページの読み込み速度を向上させることができます。

// App.js
const MyComponent = async () => {
  const { default: MyComponent } = await import('./MyComponent');
  return <MyComponent />;
};

スターエクスポートを使用すると、モジュール内のすべてのエクスポートを一度にインポートすることができます。ただし、これはあまり一般的ではなく、モジュールの内容がわかりにくくなる可能性があるため、注意が必要です。

// App.js
import * as MyModule from './MyComponent';

console.log(MyModule.MyComponent); // MyComponent コンポーネントにアクセス
console.log(MyModule.MyFunction); // MyFunction 関数にアクセス
console.log(MyModule.myVariable); // myVariable 変数にアクセス