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

programming システム開発

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

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

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

import getSampleData from '@/utils/sampleCSVData01'

え? { } って、複数指定する場合に使用するだけじゃなくて、挙動も変わるの?
って思って調べたら、こういうのが見つかった。

ES6でのimportの波括弧がいるかいらないか

おおー。そうだったのかー。
export する時に「default」を付けるか、つけないかで呼び出し方が変わってくるとな。
(default を付けたときは不要で、付けてない時は必要)

って、default を付けるのと付けないのとでは何が変わるの?
と、思って調べたら、公式にちゃんと書いてあった。
export – JavaScript | MDN

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

default が無いエクスポートを「名前付きエクスポート」と呼び、インポートする時は必ず同名。

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

という事みたい。

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

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

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

追記

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

コメント

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