カテゴリー
JavaScript

JavaScriptのモジュール export default

JavaScriptのスクリプトファイル(.js)の読み込み方法

<script src="script.js">

モジュール

上記の方法は、あらかじめ読み込むファイルがわかっている必要がある。

わからない場合、動的に読み込む必要がある。

モジュールで読み込むことができる

export モジュール名;

「モジュール名」は、関数だったりオブジェクトだったりする。

exportに指定したものが、「モジュール」として外部から利用できるようになる。

例)

script.jsにモジュール MyObjを定義

export function MyObj() {
    return {
        red:255, green:125, blue:0,
        total:function(){
            return this.red + this.green + this.blue;
        }
    };
};

HTMLファイルで、モジュール MyObjを読み込む

<html><body>
<script type="module">
import {MyObj} from './script.js';

var ob = new MyObj();
document.getElementById("ob").textContent = ob.total();

</script>
<div id="ob"></div>
</body></html>

export default

上記の方法だと、script.jsにMyObjという名前で関数やオブジェクトが定義されていることがわかっている必要がある。

この問題を解決するのが、export default

名前は読み込んだ側で適当につけるという利用方法

exportする際に、関数やオブジェクト名を指定せず、「default」を指定する。

例)

上記をexport defaultに書き直し

script.jsにexport defaultを定義

export deault function () {
    return {
        red:255, green:125, blue:0,
        total:function(){
            return this.red + this.green + this.blue;
        }
    };
};

HTMLファイルで、モジュール myobjと名前をつけてを読み込む

<html><body>
<script type="module">
import myobj from './script.js';

document.getElementById("ob").textContent = ob.total();

</script>
<div id="ob"></div>
</body></html>

参考文献:

Vue.js&Nuxt.js 超入門 Kindle版

Vue.js&Nuxt.js 超入門

コメントを残す

メールアドレスが公開されることはありません。