山崎屋の技術メモ

IT業界で働く中で、気になること、メモしておきたいことを書いていきます。

Vue の export default と import

Vue の勉強中です。

export default ってどういう意味なのか分からなくてググったらこちらの記事に紹介されていたのですが、いまいち理解できなくて自分でも試してみました。
export default ってなに?

気になるところ

export にはいろいろな書き方があります。
export - JavaScript | MDN

関数名を指定して export する次のような例は直感的に分かります。

export { func1, func2 }

function func1() {
    console.log('module1 の func1 です。')
}

function func2() {
    console.log('module1 の func2 です。')
}


別のモジュール(ファイル)で import するときも次のように関数名を指定します。

import { func1 ,func2 } from './module1.js'


今回気になったのは次のような書き方です。

export default function() {
    console.log('module1 の 無名関数 です。')
}

この default を指定することにより、どのようなことがおきるのでしょうか?

答え

※ 自分なりの考え方なので厳密ではありません。
 
 
「default でエクスポートした関数は自動で「default」という名前が付けられ、しかも import 時にその名前を省略できます。」
 
 
先ほどの default 付きで export した無名関数をインポートして「func3」という変数に格納するときは通常、次のようにします。

import func3 from './module1.js'

 
上記 import 文はいろいろ省略されており、次のように長く書くと分かりやすいのではないでしょうか?

import { default as func3 } from './module1.js'

 
 

当然ですが default で export できる関数はモジュール(ファイル)内で 1 つだけです。(「default」という関数名が被ってしまいます。)
 
 

まとめ

もう default 怖くない。
 
 

これで勉強いています。

基礎から学ぶ Vue.js

基礎から学ぶ Vue.js



最近発売されたこれも欲しい。
Vue.js入門 基礎から実践アプリケーション開発まで

Vue.js入門 基礎から実践アプリケーション開発まで

  • 作者: 川口和也,喜多啓介,野田陽平,手島拓也,片山真也
  • 出版社/メーカー: 技術評論社
  • 発売日: 2018/09/22
  • メディア: 単行本(ソフトカバー)
  • この商品を含むブログを見る