• JavaScript

【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で変数や関数をファイル分割。必要な時に読み込みする方法（モジュール化）について紹介しました。

以上で解説を終わります。