1 はじめに
2 方法1 : HTMLファイルに複数のJSファイルを読み込む
3 方法2 : documnet.write() を利用して呼び出し元のHTMLファイルに動的に読み込み用のscriptタグを出力する
4 方法3 : RequireJS を利用する
5 方法4 : import文を利用して動的にJSファイルを読み込む
6 補足 : require() 関数の利用

JavaScriptのJSファイルから別のJSファイルを呼び出す - JSファイルの分割 - JavaScript

JavaScriptのJSファイルが大きくなってくると、コードファイルを分割したいことがあります。JSファイルから別のJSファイルを呼び出す方法を紹介します。

はじめに

クライアントサイドで実行される JavaScriptには別ファイルを読み込む仕組みは、古いブラウザではありません。そのため、通常の方法では、JSファイルからJSファイルを読み込んだり処理を実行することはできません。

方法1 : HTMLファイルに複数のJSファイルを読み込む

HTMLのscriptタグで読み込まれたJSファイルはすべてがスコープの範囲になるため、JSファイル側からHTMLファイルの要素にもアクセスでき、別のJSファイルにもアクセスできます。JSファイルから別のJSファイルを呼び出すために、呼び出し元のHTMLファイルに両方のJSファイルの読み込み処理を記述します。
scriptタグによるJSファイルの読み込みの詳細はこちらの記事も参照してください。

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8" />
  <title></title>
  <script src="proc-if.js"></script>
  <script src="proc-lib.js"></script>
</head>
<body>
  <input id="Button1" type="button" value="button" onclick="exec();" />
  <div id="output"></div>
</body>
</html>

proc-if.js

function exec() {
    var result = getData(4);
    var elem = document.getElementById("output");
    elem.innerHTML = result;
}

proc-lib.js

function getData(value) {
    value++;
    return "結果:" + value;
}

HTMLファイルに、proc-if.js と proc-lib.js の2つのJSファイルの読み込みを記述することで、proc-if.js ファイルから proc-lib.js の関数を呼び出せます。
上記のHTMLファイルをWebブラウザで開くと下図の画面が表示されます。

[button]をクリックします。ボタンの下部に「結果:5」のメッセージが表示されます。

方法2 : documnet.write() を利用して呼び出し元のHTMLファイルに動的に読み込み用のscriptタグを出力する

JSファイル側からdocument.write() メソッドを呼び出して元のHTMLファイルにscriptタグを記述する方法です。
仕組みは先ほどのHTMLファイルに複数のJSファイルの読み込みのscriptタグを記述する方法と同じです。この方法では、HTMLページ側にscriptタグを一つだけ記述するだけでよいため、複数のJSファイルがあり、ライブラリ化されている場合の導入が容易になります。

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8" />
  <title></title>
  <script src="dwproc-if.js"></script>
</head>
<body>
  <input id="Button1" type="button" value="button" onclick="exec();" />
  <div id="output"></div>
</body>
</html>

dwproc-if.js

document.write("<script src=\"proc-lib.js\"></script> ");

function exec() {
    var result = getData(4);
    var elem = document.getElementById("output");
    elem.innerHTML = result;
}

proc-lib.js

function getData(value) {
    value++;
    return "結果:" + value;
}

上記のHTMLファイルをWebブラウザで表示します。下図の画面が表示されます。

[button]をクリックします。先の例と同様にボタンの下部に「結果:5」のメッセージが表示されます。

WebブラウザのツールでDOMの状態を確認します。HEADセクションのdwproc-if.js を読み込んだscriptタグの次の行に proc-lib.js を読み込むscriptタグの行が追加されていることが確認できます。

方法3 : RequireJS を利用する

RequireJS (https://requirejs.org/) を利用すると、JSファイルから別のJSファイルを呼び出すことができます。

方法4 : import文を利用して動的にJSファイルを読み込む

import文を利用すると動的にJavaScriptのファイルを読み込むことができます。import文の利用はこちらの記事を参照して下さい。
Chrome, Microsoft Edge などの最新のWebブラウザでは動作しますが、Internet Explorer では動作しないため注意が必要です。

補足 : require() 関数の利用

クライアントサイドのJavaScriptではなく、サーバーサイドで実行されるJavaScript(Node.js)であれば、require() 関数が利用できます。

このページのキーワード

JSのJSファイルから別のJSファイルを呼び出す - JSファイルの分割

著者

Penta

iPentecのメインプログラマー
C#, ASP.NET の開発がメイン、少し前まではDelphiを愛用

目次