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

import { XXX } と import XXX

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

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

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

import getSampleData from '@/utils/sampleCSVData01'

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

export – JavaScript | MDN

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

export 時に default を記述しない方法を「名前付きエクスポート」と呼び、import 時に { } が必要。また、インポートする時は必ず同名。
export 時に default を記述する方法を「デフォルトエクスポート」と呼び、import 時に { } が不要。また、インポート時に好きな名前を設定可。

という事みたい。

名前付きエクスポート（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 は、両方使ってるな。
どんな使い分けなのだろうか。

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

追記

こんなのがあった。

なぜ default export を使うべきではないのか？

フロントエンド開発センター(通称: UIT)の花谷(@potato4d)です。この記事では、 ESModule の仕様であり、現在の JavaScript を用いた開発で必須である import / export 構文について、 defau...

engineering.linecorp.com

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

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