React ES6 モジュール

Volardev 編集部 April 28, 2026

1. モジュール (Modules)

JavaScript のモジュール（Modules）を使用すると、コードを別々のファイルに分割して管理できます。
これにより、コードベースのメンテナンスが非常に容易になります。

ES モジュールは、import（インポート）および export（エクスポート）ステートメントによって機能します。

任意のファイルから関数や変数をエクスポートできます。
まず、エクスポートしたい内容を含む person.js というファイルを作成してみましょう。

エクスポートには、Named Export（名前付きエクスポート）と Default Export（デフォルトエクスポート）の 2 種類があります。

名前付きエクスポートを作成するには、主に 2 つの方法があります。

個別にインラインで記述する方法：

person.js

export const name = "トビアス"
export const age = 18

最後にまとめて記述する方法：

person.js

const name = "トビアス"
const age = 18

export { name, age }

次に、デフォルトエクスポートを説明するために、別のファイル message.js を作成します。
1 つのファイルにつき、デフォルトエクスポートは 1 つしか設定できないことに注意してください。

message.js

const message = () => {
  const name = "トビアス";
  const age = 18;
  return name + ' は ' + age + ' 歳です。';
};

export default message;

ファイルにモジュールをインポートする方法は、エクスポートの種類（名前付きかデフォルトか）によって異なります。

名前付きエクスポートは、波括弧 {} を使用して分割代入（Destructuring）する必要がありますが、デフォルトエクスポートはその必要がありません。

person.js から名前付きエクスポートをインポートする例：

import { name, age } from "./person.js";

message.js からデフォルトエクスポートをインポートする例：

import message from "./message.js";

開発効率を高めるためには、各モジュールの役割を明確にし、これらのインポート・エクスポートを適切に使い分けることが重要です。