JavaScript 別ファイルの関数呼び出し方法２つ＜JS共通化＞

Web開発をしていると、Javascriptで定義した関数を、別のJavascriptファイルでも使用したいとき、ありますよね。

実は、（というか当たり前かもしれませんが、）そのまま呼び出したのでは動きません。

例）モーダルの開閉ができる機能をjsの関数として共通化して、別ファイルに切り出したい

modal.js

// モーダルの開閉（共通の関数）
function set_modal(name, class) {
  // モーダルを開く
  $(`open-#${name}`).on("click", function () {
    $(class).fadeIn();
    return false;
  });
  // モーダルを閉じる
  $(`close-#${name}`).on("click", function () {
    $(class).fadeOut();
    return false;
  });
}

my_page.js

// ユーザー選択、地域選択のモーダル画面を表示
$(function () {
  set_modal("user", ".select-user");
  set_modal("area", ".select-area");
});

これで動かそうとすると、ブラウザ検証コンソールで下記エラーが出て動きません。

my_page.js:78 Uncaught ReferenceError: set_modal is not defined

ではどうすればよいか？

検索すると意外と記事が出てきたのですが、うまくいく方法といかない方法がありましたのでご紹介します。（環境とかによるのかもしれません）

結論だけ見たい人は目次から「うまくいった関数呼び出し方法」に飛んでね♪

JS開発環境
うまくいかなかった関数呼び出し方法
うまくいった関数呼び出し方法２つ
- １．window.globalFunctionを使う方法
- ２．export&importを使う方法
別のJSファイルで定義した関数を呼び出す方法２つまとめ

JS開発環境

Docker × Ruby on Rails

OS：Debian系
FW：Rails6
言語：Ruby
DB：MySQL
JS関連プラグイン：jquery-3.6.0.min.js、webpack
ブラウザ：GoogleChrome

coffeescriptは使用してません。関数の中身としてはjqueryを使っておりますので、jquery環境にない人は少なくともコピペでは動かない旨ご承知おき願います。

うまくいかなかった関数呼び出し方法

my_page.js（呼び出す側のJSファイル）に

document.write("<script src=\"modal.js\"></script> ");

や

require("modal.js");

を書いてみましたがエラーメッセージは変わらず・・・

うまくいった関数呼び出し方法２つ

１．window.globalFunctionを使う方法

window.globalFunctionという配列に定義してあげると、どこでも使えるようになるようです。（参考文献）

modal.js

function set_modal(name, class) {
  $(`open-#${name}`).on("click", function () {
    $(class).fadeIn();
    return false;
  });
  $(`close-#${name}`).on("click", function () {
    $(class).fadeOut();
    return false;
  });
}
window.globalFunction = {};
window.globalFunction.set_modal = set_modal;

my_page.js

$(function () {
  window.globalFunction.set_modal("user", ".select-user");
  window.globalFunction.set_modal("area", ".select-area");
});

モーダル開きました。ただ、毎度定義するのは少し億劫ですよね・・・しかもwindow.globalFunctionって長い！せっかくjquery使って短い記述で済んでるのに。

２．export&importを使う方法

使いたい関数をexportして、使いたいファイルでimportしてあげる方法です。

modal.js

export default function set_modal(name, class) {
  $(`open-#${name}`).on("click", function () {
    $(class).fadeIn();
    return false;
  });
  $(`close-#${name}`).on("click", function () {
    $(class).fadeOut();
    return false;
  });
}

my_page.js

import set_modal from 'modal';

$(function () {
  set_modal("user", ".select-user");
  set_modal("area", ".select-area");
});

export〜の後に関数をいつもどおり記述して、使いたいJSファイルでimportするだけ！

しかもどのJSファイルから呼び出すか明記する必要があるので、呼び出された関数だけを見つけた人も、元の関数を追いやすいですね。しかもこちらの方がシンプルで、なんか、全体的に良いですね。（優秀な後輩に教えていただきました。）

ちなみに、defaultをつけておくと、汎用性高く使えるようです。（参考：MDNサイト）ただし、その便利さゆえの弊害もあるようなので、付けるべきか否か、は検討材料かもしれません。（参考：なぜ default export を使うべきではないのか？）

また、IEだと使えないという記事も・・・参考：jsのimportとrequireの違い

もしそれが本当なら、それだとお客さんに納品するものとしてはちょっと、という感じですね。まだブラウザテストは実施していないので進展あったら更新します！

＜追記＞IEはサポート終了が決定しているのですね！（知らずに恥ずかしい・・・）ならIEだと使えないというのはデメリットになりにくそうですね。（IEにも対応してほしいと言うお客さまにはむしろ脱IEを勧めましょう！！）
ご参考：いよいよ完全終了へ。Internet Explorer（IE）サポート終了スケジュール