JavaScriptやVue.jsには、他のファイルの処理内容を読み込むことができるimport fromという記述があります。
import fromを使うと、指定した.jsや.vueファイルの変数や関数、処理などを、読み込み先のファイルの中で使うことができます。
このとき、変数や関数、処理などの渡し方には「export default」と「export」の2種類があります。
どちらもファイルの内容を別のファイルでインポート（読み込み）できるようにするという目的は変わりませんが、その記述方法や渡せる内容が異なるので注意が必要です。
ここでは「export default」と「export」の違いについて、それぞれの実例を交えて解説しています。
「export default」と「export」の違い
「export default」と「export」の主な違い
「export default」と「export」の大きな違いは以下になります。
- export default: 渡せるのは１つだけ。
- export: 複数渡せる。
export defaultとは何か？
export defaultの場合は、変数や定数、関数などの処理を、１つの機能として渡します。いわゆるモジュールです。
export default 渡す変数や処理受け取るとき（importするとき）に指定するのもモジュール名の１つだけです。
import モジュール名 from 'ファイルパス'exportとは何か？
exportの場合は変数や定数を複数渡すことができます。
export { 変数名１, 変数名2, 変数名3,,, };受け取るとき（importするとき）に指定するのは欲しい変数や定数です。不要なものは記載しなければimportされません。
import { 変数名1, 変数名3 } from 'ファイルパス' 別の変数名を指定する方法
「as」を使うとexportするときに変数名を変えたり、受け取るときに別の変数名にすることもできます。
変数名 as 変更後の名前▼exportの場合
export { 変数名１ as 変数名1', 変数名2 as 変数名2', 変数名3,,, };▼importの場合
import { 変数名1' as 変数名1'', 変数名3 as 変数名3' } from 'ファイルパス' export defaultの実例
変数や定数、関数などの処理を、１つの機能（モジュール）として渡すexport defaultす場合は以下のようになります。
変数や定数を渡す方法
例えば、定数「price」, 「tax」とそれを掛け合わせた販売金額を算出する処理「totalPrice」が記述してあるtotal_price.jsという.jsファイルがあるとします。
const price = 1000
const tax = 1.10
const totalPrice = Math.floor(price * tax) + "円"
export default totalPriceなお、以下のようにexport defaultに直接処理を記述することもできます。
const price = 1000
const tax = 1.10
export default Math.floor(price * tax) + "円"
この、total_price.jsを別の.jsや.vueというファイルの中で、「jsTotalPrice」というモジュール名で読み込む場合は以下のようになります。（ファイルの場所は同じ階層とします）
import jsTotalPrice from './total_price' 以上で、export defaultに記述してある「totalPrice」という変数（定数）を、「jsTotalPrice」という変数で使うことができます。
関数を渡す方法
functionや ()=>{}といった関数（アロー関数）を渡すこともできます。
例えば、定数「price」, 「tax」とそれを掛け合わせた販売金額を算出する処理「totalPrice」が記述してあるtotal_price.jsという.jsファイルがあるとします。
const totalPrice = function(price, tax){
return Math.floor(price * tax) + "円"
}
export default totalPriceアロー関数を使ってfunctionを省略し以下のようにも記述できます。
↑↓ 同じ
const totalPrice = (price, tax) => {
return Math.floor(price * tax) + "円"
}
export default totalPrice
この、total_price.jsを別の.jsや.vueというファイルの中で、「jsTotalPrice」というモジュール名で読み込む場合は以下のようになります。（ファイルの場所は同じ階層とします）
import jsTotalPrice from './total_price' 以上で、export defaultに記述してある「totalPrice」という関数処理を、「jsTotalPrice」という変数で使うことができます。
実際に使う時はjsTotalPrice( 引数1, 引数2 )のように引数を渡す必要があります。
exportの実例
変数や定数（あるいは関数や処理が入った変数や定数）を、それぞれ個別に渡す場合はexportを使います。
先ほどの例と同様に、定数「price」, 「tax」とそれを掛け合わせた販売金額を算出する処理「totalPrice」が記述してあるtotal_price.jsという.jsファイルがあるとします。
このファイルの中で「price」「tax」「totalPrice」をそれぞれ個別に渡せるようにしたい場合は以下のようにします。
const price = 1000
const tax = 1.10
const totalPrice = Math.floor(price * tax) + "円"
export { price, tax, totalPrice }
この、total_price.jsの「price」「totalPrice」の２つだけを、別の.jsや.vueというファイルの中で読み込む場合は以下のようになります。（ファイルの場所は同じ階層とします）
import { price, totalPrice } './total_price' 以上で、別ファイルの変数「price」と「totalPrice」を読み込むことができます。
exportで変数名を変える実例（asの使用）
exportでは「as」を使うことで、渡す変数名と、importで受け取る時の変数名を元の名前から変更することができます。
元の変数名 as 変更後の名前実例
以下のように、定数「price」, 「tax」とそれを掛け合わせた販売金額を算出する処理「totalPrice」が記述してあるtotal_price.jsという.jsファイルがあるとします。
このファイルの中で「price」「tax」「totalPrice」をそれぞれ個別に渡し、変数名「price」を「cost」に、「tax」を「rate」に変更する場合は以下のようになります。
const price = 1000
const tax = 1.10
const totalPrice = Math.floor(price * tax) + "円"
export { price as cost, tax as rate, totalPrice }上記の「price」と「tax」を受け取る場合は、変更後の名前で「cost」と「rate」で指定する必要があります。
import { cost, rate } from './total_price' 更に、importするときに、「rate」という変数名を「tax_rate」に変更する場合は以下のようになります。
import { cost, rate as tax_rate } from './total_price' importを記述したファイルで使える変数は「cost」と「tax_rate」になります。
