別の JS ファイルから関数をインポートする方法

別の JavaScript ファイルから関数を呼び出すには、環境に応じた共有方法を選びます。従来の <script> タグはブラウザのグローバルとして公開し、ECMAScript モジュールは export と import を使い、Node.js の CommonJS は module.exports と require を使います。以下の例では、ファイルを接続する方法と、各アプローチがどこで実行されるかを示します。

ブラウザで別の JavaScript ファイルから関数を呼び出す

従来のスクリプトを使うページでは、あるファイルで関数を定義し、そのファイルを呼び出し側のスクリプトより前に読み込みます。従来のスクリプトはページのグローバルスコープを共有するため、最初のファイルは関数を window にアタッチできます。

• greeting.js に window.showGreeting = function () { document.querySelector("#message").textContent = "Hello from greeting.js"; }; と書きます。
• app.js に document.querySelector("#show").addEventListener("click", window.showGreeting); と書きます。

これらのファイルを index.html の隣に保存します。このページは必要な順序でファイルを読み込み、ボタンとメッセージ要素を提供します。

<!doctype html>
<html lang="en">
  <meta charset="utf-8">
  <title>Call a function from another file</title>
  <p id="message">Click the button to show the message.</p>
  <button id="show" type="button">Show greeting</button>
  <script src="greeting.js"></script>
  <script src="app.js"></script>
</html>

ボタンがクリックされると、app.js のハンドラーが greeting.js から読み込まれた関数を呼び出します。定義側のスクリプトを先に置いてください。そうしないと、window.showGreeting が存在する前にページがハンドラーを登録しようとする場合があります。この html ブロックはブラウザページの例であり、実行時の出力の記録ではありません。

ECMAScript モジュールで関数を共有する

共有グローバルの代わりに明示的なインポートを使いたい場合は、ECMAScript モジュールを使います。次の3つの完全なファイルを同じディレクトリに保存します。最初のファイルが関数をエクスポートし、2番目のファイルがそれをインポートしてページを更新します。

• greeting.js: export function makeGreeting(name) { return \Hello, ${name}!`; }`
• app.js: import { makeGreeting } from "./greeting.js"; document.querySelector("#message").textContent = makeGreeting("Ada");

この完全なページを、それらのファイルの隣に index.html として保存します。モジュールが実行される前に、メッセージ要素が存在しています。

<!doctype html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <title>Share a function with a module</title>
  </head>
  <body>
    <p id="message">The greeting will appear here.</p>
    <script type="module" src="app.js"></script>
  </body>
</html>

相対インポートパスはファイルの場所と一致させてください。ブラウザはモジュールをモジュールのセマンティクスで読み込み、その宣言を window には置きません。

ページはローカルの開発サーバーで HTTP 経由で提供してください。file: URL として直接開くと、通常はモジュールの読み込みが妨げられます。これはブラウザのホスティング要件であり、Node.js を実行する要件ではありません。Node.js も ECMAScript モジュールをサポートしますが、独自のパッケージとファイル拡張子のルールがあります。ECMAScript モジュールのエクスポート構文は、関数やその他の値に対して同じ export の仕組みを使います。

Node.js で CommonJS を使って関数をインポートする

CommonJS は Node.js の従来のモジュールシステムです。モジュールは関数を module.exports に割り当てることができ、別のファイルは require でそれを取得できます。リンク先の JavaScript の import と require の比較では、これらのモジュールシステムの違いを説明しています。

この自己完結型の Node.js の例は、ヘルパーファイルを作成し、その関数をインポートして呼び出します。コードを main.cjs として保存し、Node.js がインストールされたターミナルで node main.cjs を実行します。

const fs = require("node:fs");
const os = require("node:os");
const path = require("node:path");

const folder = fs.mkdtempSync(path.join(os.tmpdir(), "function-demo-"));
try {
  const helperPath = path.join(folder, "math.cjs");
  fs.writeFileSync(helperPath, "module.exports = (a, b) => a + b;\n");
  const add = require(helperPath);
  console.log(`Result: ${add(5, 3)}`);
} finally {
  fs.rmSync(folder, { recursive: true, force: true });
}

Result: 8

ヘルパーファイルは1つの関数をエクスポートし、呼び出し側はそれを require の戻り値として受け取ります。最後の console.log 呼び出しは、その返された関数を使用します。.cjs 拡張子は、周囲のプロジェクトが ECMAScript モジュールを使用している場合でも、ヘルパーの CommonJS 形式を明示します。この例は Node.js 向けに書かれており、ブラウザページでは実行されません。

jQuery で JavaScript ファイルを読み込む

jQuery の $.getScript() は、必要に応じてスクリプトを読み込むことができます。これは、すでに jQuery を使用しているページ向けの従来の代替手段です。新しいコードでは、通常、ブラウザモジュールや通常のスクリプトタグの方が明確です。呼び出し側より前に jQuery を読み込み、ダウンロードされたファイルの関数を使用する前に読み込みコールバックを待ちます。

たとえば、mathUtils.js は window.mathUtils = { add: (a, b) => a + b }; でブラウザのグローバルを公開できます。ページでは、まず jQuery を読み込み、スクリプトが読み込まれた後にコールバックで関数を呼び出します。

<script src="https://code.jquery.com/jquery-3.6.4.min.js"></script>
<script>
  $.getScript("mathUtils.js")
    .done(function () {
      const result = window.mathUtils.add(5, 3);
      $("body").append(`<p>Result: ${result}</p>`);
    })
    .fail(function () {
      $("body").append("<p>The script could not be loaded.</p>");
    });
</script>

リクエストは非同期であるため、mathUtils に依存するコードは、$.getScript() の直後ではなく、.done() の中（または別の完了ハンドラー内）に置きます。クロスオリジン URL の場合、jQuery はスクリプト要素を通じてスクリプトを読み込むことができます。ブラウザは通常、その種のスクリプト読み込みに CORS を要求しません。クロスオリジンの fetch() や XHR リクエストでは、サーバーが CORS で許可する必要があります。スクリプトの読み込みは、Content Security Policy などのブラウザポリシーによってブロックされたり、URL に到達できない場合に失敗したりすることもあります。その読み込み動作については、jQuery $.getScript() ドキュメントを参照してください。