【React/ES6】named exportsとdefault exportsの使い分け

JavaScript/jQuery React

f:id:bonoponz:20200611204028p:plain

もくじ

Reactにおけるエクスポート

export自体はJavaScriptの構文ですが、Reactで使用する場合の記事になります。React以外での記述方法には多少の違いがあることを念頭においてください。

exportとは

export文は、モジュールから関数、オブジェクト、プリミティブ値をエクスポートするための JavaScript モジュールを作成するときに使用し、これらは別のプログラムから import 文で利用することができます。

出典：export - JavaScript | MDN

要は、定義したモジュールやクラスを他所で使用したい時、exportしてimportすれば使えますよっと。

importとは

import 文は、他のモジュールからエクスポートされたバインディング（関数、オブジェクト、プリミティブ）をインポートするために用います。

出典：import - JavaScript | MDN

要は、exportされた関数なんかを他のファイルに呼び出すときにimportします。

エクスポート方法

エクスポート方法は、named exports（名前付きエクスポート）とdefault exports（デフォルトエクスポート）の2種類あります。

名前付きエクスポートはモジュールごとに複数持てますが、デフォルトエクスポートはファイル1つに対して1つに限ります。

named exports

宣言の先頭にexportを記述し、いくつでもexportできます。

export

  • Sample.js
export const Sample: React.FC = () => {
  return <h1>サンプル</h1>
}

export const Test: React.FC = () => {
  return <h1>テスト</h1>
}

import

  • index.js
import {Sample, Test} from './Sample'

もちろん、ひとつだけ呼び出すこともできます。

import {Sample} from './Sample'

default exports

値をひとつエクスポートしたい、あるいはモジュールでフォールバック先の値を持ちたい場合は、デフォルトエクスポートを使用します。

まず定義し、最後にエクスポートとします。

export

  • Sample.js
const Sample: React.FC = () => {
  return <h1>タイトル</h1>
}

export default Sample

import

  • index.js
import Sample from './Sample'

このdefault exportの場合、ファイルがインポートされると自動的に「export default 値」の値がインポートされます。そのためエクスポート時の値の名前と、インポート時の値の名前に違いがあっても問題ありません。

import SampleTest from './Sample'　// 問題なくSampleを呼び出せる

named exportsとdefault exportsの使い分け

importする際に中括弧{}を使ってクラス等を指定して呼びだすことができます。

named exportsで複数クラス等を定義している場合、中括弧{}の中にカンマで区切って複数インポートができます。

default exportsはそもそもひとつしかエクスポートできないので、中括弧{}では括らずそのまま記述します。

  • index.js
import {Sample} from './Sample'　// named exports
import {Sample, Test} from './Sample'　// named exports　複数の場合
import Sample from './Sample'　// default exports

named Exportsを使うべし

上記のようにエクスポートには2種類ありますが、可能な限りdefault exportしない方がいいよねという風潮があるようです。

default exportの説明でも述べたようにimportする際のクラス名や関数名が一致していなくても呼び出せることから、予期せぬエラーが生じるのを回避するためかもしれませんね、

意図的にdefault exportsを使用するのでなければ、named exportsを使用しましょう。

参考URL

export - JavaScript | MDN

ES6のexportについて詳しく調べた - Qiita