【JavaScript】変数や関数をファイル分割。必要な時に読み込みする方法【モジュール化しよう】

JavaScriptで変数や関数をファイル分割。必要な時に応じて読み込みたい。
このようなお悩みはモジュール化すると解決します。
本記事ではモジュールの作成・実装方法について解説します。
モジュールとは?作成方法
モジュールとは変数や関数を一つのファイルにまとめたものです。
必要に応じ変数や関数をエクスポート(読み込み形式にする)・インポート(読み込みする)できます。
モジュールの作成方法は以下の通りです。
エクスポートファイルを作成
export let name = "John";
export function Hello(user) {
console.log(`Hello ${user}`);
}
エクスポートファイルを作成するコード例です。
新規でJavaScriptファイルを作成。
エクスポートしたい変数・関数の前にexportと記述してファイルを保存します。
本記事では例としてname変数とhello関数を定義してます。
インポートする
<script type="module">
// インポート
import { name, Hello } from "./moduleA.js";
console.log(name);
Hello("tanaka");
</script>
//コンソール
//John
//Hello tanaka
エクスポートファイルをインポートするコード例です。
インポートしたい箇所のscriptタグにtype=”module”属性を付与。
インポートするにはscript内で下記のように記述します。
import {読み込みたい変数 or 関数} from “./エクスポートファイルへの相対パス“;
inportとformの間{}内にエクスポートファイルから読み込みたい変数・関数名を記述。
from の後にエクスポートファイルへの相対パスを記述します。
以上でファイル分割されたエクスポートファイルから必要に応じコードを読み込みする事が出来ます。
インポート側で変数名・関数名を変更
// インポート
import { name as val, Hello as Message } from "./moduleA.js";
console.log(val);
Message("tanaka");
//コンソール
//John
//Hello tanaka
インポート側でエクスポートファイルで定義された変数名・関数名を変更する事が出来ます。
変更方法は以下の通りです。
import {読み込みたい変数 as 変更したい変数名} from “エクスポートファイルへの相対パス”;
読み込みたい変数の後にasを挿入。
続けて変更したい変数名を入れます。
以上で実装完了です。
変更後の変数が機能すれば成功です。
まとめ
JavaScriptで変数や関数をファイル分割。必要な時に読み込みする方法(モジュール化)について紹介しました。
以上で解説を終わります。