export defaultとexportの違いは何か?指定した複数の変数や関数、処理を別の.jsや.vueファイルにインポートする方法|モジュール名を指定・変更する方法(defaultありなし)

javascript-prograshi(プロぐらし)-kv JavaScript
記事内に広告が含まれていることがあります。

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: 渡せるのは1つだけ。
  • export: 複数渡せる。


export defaultとは何か?

export defaultの場合は、変数や定数、関数などの処理を、1つの機能として渡します。いわゆるモジュールです。

export default 渡す変数や処理

受け取るとき(importするとき)に指定するのもモジュール名の1つだけです。

import モジュール名 from 'ファイルパス'


exportとは何か?

exportの場合は変数や定数を複数渡すことができます。

export { 変数名1, 変数名2, 変数名3,,, };

受け取るとき(importするとき)に指定するのは欲しい変数や定数です。不要なものは記載しなければimportされません。

import { 変数名1, 変数名3 } from 'ファイルパス' 


別の変数名を指定する方法

「as」を使うとexportするときに変数名を変えたり、受け取るときに別の変数名にすることもできます。

変数名 as 変更後の名前

▼exportの場合

export { 変数名1 as 変数名1', 変数名2 as 変数名2', 変数名3,,, };


▼importの場合

import { 変数名1' as 変数名1'', 変数名3 as 変数名3' } from 'ファイルパス' 


export defaultの実例

変数や定数、関数などの処理を、1つの機能(モジュール)として渡す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」の2つだけを、別の.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」になります。


参考リンク

MDN公式 export


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