環境
MacBook Pro (2.3 GHz 8コアIntel Core i9)
macOS 14.0（23A344）
Homebrew 4.3.8
gh 2.52.0
まとめ
Default Export |
Named Export |
|
|---|---|---|
| エクスポート数 | 1つのみ | 複数可能 |
| インポート名 | 任意の名前を指定可能 | エクスポートされた名前を使用する必要あり |
| 主な用途 | コンポーネントやモジュール全体を1つの単位で扱う場合 | ユーティリティ関数や定数のグループ化に適している |
| 可読性 | エクスポート元が分かりにくい場合がある | 名前付きで直感的に分かりやすい |
ソースコードの前に
フォルダ構成
folda_structure
├── public/
│ ├── index.html
└── src/
│ ├── index.js(index.jsx)
│ ├── App.js(App.jsx) ← 親コンポーネント
│ └── components/
│ │ └── ColorfulMessage.jsx/ ← 子コンポーネント
index.html
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title>React App</title>
</head>
<body>
<div id="root"></div>
</body>
</html>
index.js
index.js
import { StrictMode } from "react";
import { createRoot } from "react-dom/client";
import { App } from "./App";
const rootElement = document.getElementById("root");
const root = createRoot(rootElement);
root.render(
<StrictMode>
<App />
</StrictMode>
);
ソースコード
App.js（named export）
App.js
import { ColorfulMessage } from "./components/ColorfulMessage";
export const App = () => {
return (
<>
<h1>こんにちは!</h1>
<ColorfulMessage color="blue">お元気ですか？</ColorfulMessage>
<ColorfulMessage color="green">元気です!</ColorfulMessage>
</>
);
};
App.js（default export）
App.js
-import { ColorfulMessage } from "./components/ColorfulMessage";
+import ColorfulMessage from "./components/ColorfulMessage";
export const App = () => {
return (
<>
<h1>こんにちは!</h1>
<ColorfulMessage color="blue">お元気ですか？</ColorfulMessage>
<ColorfulMessage color="green">元気です!</ColorfulMessage>
</>
);
};
default exportの場合は、下記のようにimportする際に自由に変数名を変更できる。
下記の場合は、Hogeに変更している。
App.js
-import ColorfulMessage from "./components/ColorfulMessage";
+import Hoge from "./components/ColorfulMessage";
export const App = () => {
return (
<>
<h1>こんにちは!</h1>
- <ColorfulMessage color="blue">お元気ですか？</ColorfulMessage>
+ <Hoge color="blue">お元気ですか？</Hoge>
- <ColorfulMessage color="green">元気です!</ColorfulMessage>
+ <Hoge color="green">元気です!</Hoge>
</>
);
};
ColorfulMessage.jsx（named export）
ColorfulMessage.jsx
export const ColorfulMessage = (props) => {
const contentStyle = {
color: props.color,
};
return <p style={contentStyle}>{props.children}</p>;
};
ColorfulMessage.jsx（default export）
ColorfulMessage.jsx
-export const ColorfulMessage = (props) => {
+const ColorfulMessage = (props) => {
const contentStyle = {
color: props.color,
};
return <p style={contentStyle}>{props.children}</p>;
+ export default ColorfulMessage;
};
イメージ
ColorfulMessage.jsx（named export）
ColorfulMessage.jsx（default export）
