こんにちは！Reiです(˵ •̀ ᴗ – ˵) ✧
コンポーネントを別ファイルに分けるようになると、毎回出てくるのが export と import。
このあたりで、こんな風に迷ったことありませんか？
default export と named export って何が違うの？
{ } がいるときといらないときの違いは？
なんとなく書いているけど、
最初の方はちょっと引っかかるポイントですよね ( ; ˘-ω-)
今回は、exportの基本から、default export と named export の違いを整理していきます！
exportとは？
まず前提から！
export とは、ファイルの中身を、他のファイルから使えるようにする仕組みのこと です。
たとえば、別ファイルに処理を書いたとします↓
const message = "こんにちは";
このままだと、定義したファイルの中でしか使えないです。
そこで、
export const message = "こんにちは";
のように export を付けて書くと、他のファイルから使えるようになります。
そして、この「定義した値や関数を他のファイルから使えるようにする方法」には、大きく2つあります。
- named export
- default export
この2つは見た目は似ているんですが、書き方や使い方が少しずつ違うんです。
このあと、それぞれの違いを見ながら整理していきます！
named export の特徴
まずは named export について！
named export とは、定義しているファイル内で名前をつけて、外で使えるようにする書き方のことを指します！
書き方はカンタン！変数や関数の宣言の前に export と付けるだけです！
export const message = "こんにちは";
この場合、message という名前のまま他のファイルでも使えるようになるのです。
そして、このように読み込みます↓
import { message } from "./message.js";
ここでポイントになるのが、名前をそのまま使う という点です！
また、{} がついているのは、「この名前を指定して取り出していますよ」という意味です！
また、named export は複数まとめてxportできるので、
import { message, userName } from "./message.js";
のように、複数まとめて読み込むこともできちゃいます！
exportしたときの名前と、importするときの名前が一致していないと動きません💦
なので named export は、
・ { } の中に名前を書いて読み込む必要がある
・ exportした名前と同じ名前で読み込む必要がある
・複数の値をまとめてexportできる
という特徴があります。
ちょっとルールはありますが、その分、わかりやすい書き方です！
default export の特徴
次に default export について。
default export とは、1つの値を他のファイルで使えるようにする書き方のことを指します。
これだけ聞くと、named export の方だけでよくない？ と思うのですが、「1つだけシンプルに扱いたいとき」に便利なのが default export なんです。
書き方は、export default のあとに変数名や関数名を書くことで、その定義を自由にファイル外で使えるようになります！
const message = "こんにちは";
export default message;
読み込むときはこうなります↓
import message from "./message.js";
named export と違って、{ } を使わないのがポイント！
さらにもう1つ特徴があって、
それは、名前を自由に変えられるという点。
たとえば、こんなふうに名前を変えて読み込むこともできちゃいます↓
import msg from "./message.js";
default export は名前を指定して渡していないため、importする側で好きな名前をつけて使うことができるのです。
なので default export は、
・ { } を使わずに読み込める
・名前を自由に変えられる
・1つだけexportできる
named export と比べると、
1つの定義をよりシンプルに読み込めるのが default export の特徴です！
補足💡 named export と default exportの併用について
named export と default export は同じファイルで併用できます。
たとえば、
「よく使う1つ」は default export、
「一緒に使う補助的なもの」は named export、
といった感じに分けて書くこともできちゃうのです。
default export の注意点
default export は便利に見えますが、少し気をつけたいポイントもあるのです…！
import Message from "./components/Message";
import Msg from "./components/Message";
import M from "./components/Message";
これ、どれも同じものを読み込んでいます。
この自由さのせいで、
- 同じものなのに名前がバラバラになる
- 検索しても見つけにくい
- 修正するときに追いかけづらい
という状態になりやすいです 💦
なので、チーム開発や大きなプロジェクトでは、名前がブレにくい named export を使うことが多いです！
方針に則って使い分けましょう！
importでよくあるミス
一番多いミスは、{ } の付け忘れ・付け間違いです…！
たとえば、named export なのに default export で書いてしまうこと。
import message from "./message.js";
{}がないので、JavaScriptは「default exportがある」と判断して読み込もうとするため、エラーになってしまいます 💦
逆に、default export なのに named export で書いてしまってもエラーになってしまいます…！
import { message } from "./message.js";
今回のポイントおさらい !!
今回の内容をまとめると、こんな感じです↓
export
・ファイルの中身を外で使えるようにする仕組み
named export
・名前をそのまま渡す
・複数exportできる
・{ } が必要
default export
・1つだけ取り出す
・{ } はいらない
・名前を変えられる
この違いを押さえておくだけで、
named export と default export の「どっちを使えばいいんだっけ？」と迷いにくくなるはず！
最後に
export と import は一見シンプルですが、書き方の違いだけで挙動が変わるので、最初はちょっと混乱しやすいところ 💦
少しずつ使いながら慣れていけばいいので、「あ、これどっちだっけ？」と思ったら、ぜひ今回の内容を思い出してみてください！
少しでも参考になっていたら嬉しいです ᥫᩣ ̖́-
コメント