Javascript Module export import

別ファイルのJavascript関数を実行する場合
①HTML経由で別ファイルを読み込む方法

②Module化Javascriptファイルを読み込む方法

がある。（おおまかに）

①はHTMLに

<script src='./js/app.js'></script>
<script src='./js/hoge.js'></script>

と記述してhoge.jsからapp.jsの関数を実行する。
デメリットは、scriptタグの記述順番を意識しないといけない。複数ファイルで、同じ名前の関数が存在してしまう場合、意図しない関数が呼ばれる可能性がある。

②のModule化した場合は①のデメリットはなくなる。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <script type="module" src="./js/sample01.js"></script>
    <script type="module" src="./js/sample02.js"></script>
    <title>Document</title>
</head>
<body>
TEST
</body>
</html>

// 変数宣言にexportを付けることが可能
export const hogeCount = 99;
export var hogeMaruCount = 1;
export let hogeBatsuCount = 2;


// export{} で既に宣言されている変数をexportすることが可能
const yakiniku = 'umai';
const yakisoba = 'tanoshii'

export {
    yakiniku,
    // asで名前の変更も可能
    yakisoba as shioyakisaba
}


// 関数もexportするこが可能
export function getHogeData(){
    console.log('hoge');
}


// クラスもexportすることが可能
export class YakinikuClass{
    constructor(){
        console.log('tabehoudai');
    }
}

// import{}の中にexportされている変数、関数を指定してimportする方法
import { getHogeData, hogeCount, yakiniku} from "./sample01.js";

// * as でexportされているものをすべてimportする方法
import * as Hoge from "./sample01.js";

// Hoge.で呼び出し可能
Hoge.getHogeData();

var gogogo = () =>{
    console.log(Hoge.hogeCount);
    console.log(Hoge.yakiniku);
}

bigmac-jp blog

web開発関連のメモ

Javascript Module export import