【JavaScript】<JS共通化>別ファイルで定義した関数を呼び出す方法2つ

Javascript(){別のJSファイルで定義した関数を呼び出す方法2つ};//共通化 Rails・Webシステム開発
スポンサーリンク

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

ではどうすればよいか?

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

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



開発環境

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");

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

うまくいった方法2つ

1.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使って短い記述で済んでるのに。

2.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)サポート終了スケジュール

別のJSファイルで定義した関数を呼び出す方法2つまとめ

  1. window.globalFunctionを使う方法
  2. export&importを使う方法

の2つを紹介しました。モーダルは1つのmodal.jsに全てまとめてしまえば良いのでは?みたいな代替案もあるかと思いますし、他にもっと良い方法があるかもしれませんので、ご存知の方はぜひ教えてください!

この記事が、少しでもUncaught ReferenceErrorに悩むエンジニアの助けになれば幸いです。

ちなみに、エラーの解決手順としては下記のとおりに行いました。おかげでスムーズに質問でき、適切なアドバイスがもらえました♪

はるすと
はるすと

最後まで読んでくださってありがとうございました!

この記事を書いた人
こもれびエンジニア

自然と自由を愛するエンジニア。2021年1月に、大手製造業設計からプログラマ(Rails, AWS)へ転職。動物や自然との触れ合いや、汗を流すのが好き。

/HSP(繊細さん)/18デリケートな象/ストレングスファインダー(1分析思考/2親密性/3学習欲/4調和性/5収集心)、テニス、合気道、登山、あいだみつを、ジブリ、ワンピース、ドラゴンボール、AWS、Ruby on Rails、アイミング

twitterをフォローして、記事にならないちょっとした豆知識もチェック!
Rails・Webシステム開発
スポンサーリンク
SNSでシェア/コメントして、自分のアウトプット/発信力を高めるのにお使いください。 ↓ 各ページへジャンプ ↓
twitterをフォローして、記事にならないちょっとした豆知識もチェック!
スポンサーリンク
「そんなか」サイト

コメント

タイトルとURLをコピーしました