インポート(import)とエクスポート(export)
インポート(import)とエクスポート(export)を使用すると、 別のモジュール(ファイル)から関数やオブジェクトを参照して使う事ができるようになります。
Defaultのエクスポートとインポート
モジュールから1つの対象をエクスポートする場合、 デフォルトのエクスポートを行う事ができます。
エクスポート(export)側の書き方
関数を1つ公開する場合、export defaultを関数の前につけます。
//sample.js
export default function () {
console.log("import sample function");
};as defaultで関数の名称からdefaultでエクスポートする対象を指定することも可能です。
//sample.js
function sampleFunction() {
console.log("import sample function");
};
export {sampleFunction as default};インポート(import)側の書き方
Webブラウザで動かしてる場合、
インポート側のscriptタグでtype="module"を指定する必要があります。
ここではエクスポート側sample.js、インポート側main.jsとします。
<script src="sample.js"></script>
<script src="main.js" type="module"></script>使う側は
import 使いたい名称 from 'モジュールjsファイルのパス';とします。具体的には、関数のインポートは次のようになります。
// main.js
import samplefunc from './sample.js';
samplefunc(); // import sample function
クラス(class)のインポート(import)とエクスポート(export)
クラスのインポートも同様に記載できます。
// sample.js
export default class {
constructor(name){
this.name = name;
}
getName(params) {
return this.name;
}
};// main.js
import SampleClass from './sample.js';
let instance = new SampleClass('Taro');
console.log(instance.getName()); // 'Taro'
名前付き(named)のエクスポートとインポート
モジュールから任意個数の対象をエクスポートする場合、 名前付きのエクスポートを行う事ができます。
エクスポート(export)側の書き方
公開する対象にexportを付与します。
//sample.js
export let PI = Math.PI;
export function sampleFunction(number) {
return number * number;
};exportをまとめて記述することもできます。
//sample.js
let PI = Math.PI;
function sampleFunction(number) {
return number * number;
};
export { PI, sampleFunction };インポート(import)側の書き方
// main.js
import { PI, sampleFunction } from './sample.js';
console.log(PI); // 3.141592653589793
console.log(sampleFunction(5)); // 25
エクスポート(export)時の名前の変更
エクスポート時に名前を変えることも可能です。
//sample.js
let PI = Math.PI;
function sampleFunction(number) {
return number * number;
};
export { PI as PI_VALUE, sampleFunction as square };モジュールの全体を読む
アスタリスク*でモジュール全体の内容を読み込みます。
次の場合、sampleModuleは名前空間のように使えます。
// main.js
import * as sampleModule from './sample.js';
console.log(sampleModule.PI_VALUE);
console.log(sampleModule.square(5));インポート(import)時の名前の変更
import側でasの後に名称を記載することで、名前を変える事もできます。
// main.js
import { PI_VALUE as MYPI, square as mysquare } from './sample.js';
console.log(MYPI);
console.log(mysquare(5));Defaultの名前付き混在のエクスポートとインポート
Defaultと名前付きのエクスポートを混在させた記述の場合は次のようになります。
// sample.js
export default function () {
console.log("import sample function");
};
let PI = Math.PI;
function sampleFunction(number) {
return number * number;
};
export { PI, sampleFunction as square };
/*// main.js
import samplefunc , * as myModule from './sample.js';
samplefunc();
console.log(myModule.PI);
console.log(myModule.square(5));インポート側で名前を直接指定した記述をすることもできます。
import samplefunc , {PI ,square as mysquare } from './sample.js';
samplefunc();
console.log(PI);
console.log(mysquare(5));