【JavaScript】import { XXX } と、import XXX って、どう違うの?

programming システム開発

import { XXX } と import XXX

以下のように書いたらエラーが出なかったけど、

import { getSampleData } from '@/utils/sampleCSVData01'

以下のように書いたらエラー出た。

import getSampleData from '@/utils/sampleCSVData01'

え? { } って、複数指定する場合に使用するだけじゃなくて、挙動も変わるの?
って思って調べたら、公式にちゃんと書いてあった。

export – JavaScript | MDN

エクスポート方法は、名前付きとデフォルトの 2 種類あります。
名前付きエクスポートはモジュールごとに複数持てますが、デフォルトエクスポートは 1 つに限ります。

default が無いエクスポートを「名前付きエクスポート」と呼び、インポートする時は必ず同名。
default が付いたエクスポートは「デフォルトエクスポート」と呼び、インポート時に好きな名前を設定可。

という事みたい。

名前付きエクスポート(named export)

// 【 名前付きエクスポート 】
// 「default」の記述が無い。呼び出す時は「 { } 」が必要
function cube(x) {
  return x * x * x;
}

export { cube };

//==============================

// インポートする時は必ず同名。
import { cube } from './my-module.js';

デフォルトエクスポート(default export)

// 【 デフォルトエクスポート 】
// 「default」が付く。呼び出す時は「 { } 」が不要
export default function cube(x) {
  return x * x * x;
}

//==============================

// インポートする時、好きな名前を付ける事ができる
import originalName from './my-module.js';

どっちを使うのが主流なの?

と思って調べてみた。
よく分かんないけど、「defaultを付ける派」と「defaultを付けない派」に分かれている感じ。
JavaScriptのexport defaultアンチパターンについて、検証してみた
ES modulesのexport defaultは使わないほうがよい

ベースにして遊んでる Vue-Bootstrap-with-Material-Design は、両方使ってるな。
どんな使い分けなのだろうか。

分かんないんで、とりあえず雰囲気で使っとこう。
まー、そのうち正解に近い情報に遭遇するだろ。(適当)

追記

こんなのがあった。

どうやら、デフォルトエクスポートでなく、名前付きエクスポートを使った方が良さそう。

簡単に言えば、
「デフォルトエクスポートを使うと、import 側の裁量で対象を自由に命名できてしまうため、可読性が落ちるし、メンテやリファクタリングの時に余計な手間がかかるから。」

コメント

タイトルとURLをコピーしました