概要
Reactを学習するにおいて、実際に手を動かすのが吉ということで、アプリケーションを作成します。
その中で、exportという概念が出てきたので解説します。
元記事
前の記事
次の記事
exportとは
特定の関数、オブジェクトを、他のファイルで使用できるようにするためにする処理。
使用するファイルでは、import文を用いて使用できるようになります。
exportには以下2種があります。
named export
特徴
- １つのモジュール内に何度でもexportできる
- 呼び出すファイルでは、指定の名前でimportしなければならない
- エディタでimport文を自動補完してくれる
実装
ColorMessageをexportすると、このような実装になります。
また、named exportは複数可能なので、セットで増やすことができます。
App.jsx
----------------------------------
import { ColorMessage } from "./compornents/ColorMessage";
・
・
<ColorMessage color="blue" message="hello" />
・
・
compornents/ColorMessage.jsx
----------------------------------
export const ColorMessage = (props) => {
const { color, message } = props;
const contentStyle = {
color: color,
fontSize: "25px",
};
return (
<>
<p style={contentStyle}>{message}</p>
</>
);
};default export
特徴
- １つのモジュール内に1度しかexportできない
- 呼び出すファイルでは、任意の名前でimportできる
- 「export default hogehgoe」という記述が必要
実装
ColorMessageをexportすると、このような実装になります。
また、default exportは1つしかできないので、セットで増やすことができません。
App.jsx
----------------------------------
import cmTest from "./compornents/ColorMessage";
・
・
<cmTest color="blue" message="hello" />
・
・
compornents/ColorMessage.jsx
----------------------------------
const ColorMessage = (props) => {
const { color, message } = props;
const contentStyle = {
color: color,
fontSize: "25px",
};
return (
<>
<p style={contentStyle}>{message}</p>
</>
);
};
export default ColorMessageまとめ
実際に手を動かして実装することで、イメージを少し掴めてきました。
named exportとdefault exportのどちらをつかうべきか…となると、私はnamed exportかと思います。
いくつか理由はありますが、named exportの方がより柔軟性が高く使いやすいためです。
以上、exportについてでした。参考になりましたら幸いです！
コメント