javaScript ES6のモジュールをはじめてみました。 これまで javaScript（以下JS） の読み込みは、HTMLに＜script src=”***.js”＞と記述する方法しかありませんでしたが、ES6 では import文 を使ってJS の中から読み込むことができるようになりました。IEのサポートが目出度く終了したので、これからは大手を振って使えるようになります。 ただ、これまでのように＜script＞タグで読み込んだJSファイルのコードをそのまま実行できるものではなく、読み込んで実行できるのはJSの「モジュール」ということになります。 例えば、index.html と同階層にある app.js から、「module_a」と「 module_b」というモジュールが入ったファイル modules.js を読み込むことにした場合、以下のようになります。 ##### index.html モジュールをインポートするファイルを読み込む時は、scriptタグに「type="module"」という属性が必要になります。 ＜script src="./app.js" type="module"＞＜/script＞ ##### app.js import {モジュール名,モジュール名,…} from “JSモジュールのファイル” import {module_a, module_b} from "./modules.js" console.log(module_a) console.log(module_b()) ##### modules.js モジュールは必ず export文でエクスポートされていなければなりません。 // -- module_a export const module_a = "MOD_A" // -- module_b export function module_b(){ return "MOD_B"; } ##### 実行結果 MOD_A MOD_B ##### スコープの範囲に注意 とりあえずこれがJSのモジュール機能を実践する最低限のサンプルということになりますが、ひとつ気をつけておくべきことがあります。普通のJSでは、定義した変数や関数をどのファイルでも使用できましたが、モジュールにおいては読み込まれたファイルの中でしか使うことはできません。 たとえば「app2.js」というファイルを読み込んで、先の「module_a」「module_b()」を参照しようとしても、それはできないのです。