外部のJSファイルを読み込む方法 #JavaScript

外部のJavaScriptファイルを読み込む方法をまとめます。

以下、

index.js→呼び出すファイル

import.js→呼び出されるファイル

とします。

import/export

import/exportを使う方法です。

まず呼び出されるファイルにて、渡したい値にexportを設定します。

import.js

export const nameText = `太郎`;

複数の値を渡す場合などは、最後にまとめて設定することもできます。

import.js

const nameText = `太郎`;

const genderText = `男`;

export { nameText, genderText };

続いて呼び出すファイルにて、importを設定します。

index.js

// 読み込みたい値を設定する
import { nameText } from './import.js';

const testElement = document.getElementById('test');

// 外部ファイルの値を使用できる
testElement.innerHTML = `こんにちは${nameText}さん`;

scriptタグにtype="module"を設定することでimport/exportが機能します。

index.html

<head>
  <script type="module" src="./index.js"></script>
</head>
<body>
  <p id="test"></p>
</body>

scriptタグ（静的）

続いてscriptタグを用いた方法です。

index.html

<script src="./import.js"></script>
<script src="./index.js"></script>

HTMLのscriptタグで読み込まれたJavaScriptファイルは全てがスコープの範囲となるため、外部のJavaScriptファイルにもアクセスできるようになります。

注意点はファイルの読み込み順です。

今回の場合、import.jsを後に読み込んでしまうとエラーになります。

index.jsを実行した時点で、import.js内の値はまだ定義されていないためです。

scriptタグの記述順やdefer属性を付与するなどして、依存関係に注意します。

※defer属性についてはこちら→scriptタグの書き方【同期的読み込みと非同期的読み込み】

scriptタグ（動的）

scriptタグはJavaScriptファイル内で作成、設定することもできます。

index.js

// scriptタグを作成
const scriptElement = document.createElement('script');
// 読み込みたい外部ファイルを設定
scriptElement.src = "./import.js";
// bodyタグ内に設置
document.body.appendChild(scriptElement);

こちらも依存関係に注意しましょう。