【React】 export? default export?
はじめに
今回はReact初学者の方に向けた記事になります。
Reactの勉強を始めたばかりの私の備忘録としても残しておきたいと思います！
対象読者
- React初学者
- これからReactを始められる方
Reactとは？
まず、大雑把にReactとはなんなのか？という部分です。
Reactはその中身の大半がJavaScriptになっており、
そのJavaScriptの再利用性を高め描きやすくしたものになります！
例えば、機能Aを作成しておりその機能Aを別ファイルでも使用したい！となった時に再度同じ内容のJavaScriptを記述する必要が出ます。
しかし、Reactを使用するとcomponentという、ひとかたまりの機能Aというパーツにすることができます！
そのパーツを再利用する際に使用するのが今回のタイトルのexportになります。
exportとは？
exportとはなんですか？なぜ記述するのですか？という疑問を解消したいと思います。
和訳では輸出になり、その名の通りパーツAを輸出できますよ！と宣言するイメージです。
例えば、下記のようなGallery.jsというファイルがあるとします。このファイルの中にはProfileというパーツがあり、そのパーツを使用した新たなパーツGalleryがあります。
このGalleryパーツをexport defaultで輸出できます！と宣言しているので他のファイルでも使用することができます。
ここではexport defaultと記述されていますが、実際はdefaultは記述しなくても他のファイルで使用することができます。今回のタイトル通りじゃあどのように使い分けたらいいの？となります。
自分はなりました、、、次章で説明いたします！
function Profile() {
return (
<img
src="https://i.imgur.com/QIrZWGIs.jpg"
alt="Alan L. Hart"
/>
);
}
export default function Gallery() {
return (
<section>
<h1>Amazing scientists</h1>
<Profile />
<Profile />
<Profile />
</section>
);
}
export? default export?
前置きが長くなりましたが、本題になります。
結論としてdefaultをつける時の違いは、
1. default exportは同ファイルに1つしか宣言できず、exportは複数使用可能。
2. importする際のする方法がexportの記述によって変化する。
3. defaultではimport側で名前を自由に決めることができる(※asを使用すれば変更することも可能)
上記3点になります。
1. default exportは同ファイルに1つしか宣言できず、exportは複数使用可能。
1つ目の違いとして複数使用可能かどうかがあります。
先程のGalleryファイルのようにGalleryコンポーネントのみをexportする際はdefault exportで問題ないですが、このファイルにもうひとつexportしたいcomponentを作成する場合はdefaultをつけてしまうとエラーになります。
2. importする際の方法がexportの記述によって変化する
2点目がimportの記述方法が異なるということです。
importは和訳で輸入という意味で、exportでコンポーネントというパーツを輸出します！
と宣言すれば使用する側もimportで輸入します！と宣言必要ということですね！
例えば先程のGalleryをApp.jsというファイルで使用するためには下記１行目のように記述することで使用することができます。
import Gallery from './Gallery.js';
export default function App() {
return (
<Gallery />
);
}
ここでGalleryのexportにdefaultがついていないと上記importの記述方法ではエラーになります。
App.jsのimport部分を下記のように変更する必要があります！
import {Gallery} from './Gallery.js'
これで使用することができます。
3.defaultではimport側で名前を自由に決めることができる
最後にdefaultがついていればimport側で名前を自由に決めることができることです。
例えば、先程のGalleryファイルのexportにdefaultが記述されたままであれば、
下記のようにApp.jsファイル内で別名で使用することができるようになります。
これであればimport側で自由に命名できるので使用しやすい名前で再利用できることでしょう！
import Picture from './Gallery.js';
export default function App() {
return (
<Picture />
);
}
注意
from以降の記述は現在記述しているファイルから見たimport先のファイルパスを記述しているので、この部分は変更できない！
おわりに
最後まで見ていただきありがとうございました！
まだまだ初学者な為、至らない点あるかもしれませんがご了承ください。
実際、僕自身React学習しており初学者向きの本を購入し進めていたのですが、当たり前のようにこの部分が書かれておらず進めていくことになったので、初学者の方が疑問に感じて調べた時にこの記事が参考になれば嬉しく思います。
もし、これから勉強される方はまずJavaScriptを勉強したのちに下記参考文献一通り確認してからReactの書籍にあたってみてください！
理解度が違うと思います！
参考文献