Ownedmedia ウェブ制作に役立つコンテンツを発信中!

JavaScript 2021.02.02

JavaScriptでグローバル変数を使って別ファイルの関数を実行させる

Tags: ,

今回は少し小ネタ的な使い方になるのですが、JavaScriptで別ファイルで定義した関数を実行したい場合に使える方法です。今では、JavaScriptのimportやrequireなどでモジュールとして呼び出すこともできますが、何らかの状況でJSファイルが分かれており、そこに定義されている関数を使いたいということもあるかと思います。

 

そのような場合には、windowオブジェクトのグローバル変数として関数を定義することでどこからでも呼び出せるようになります。まずはサンプルのHTMLを見ていきます。

【index.html】※一部抜粋

<body>
  .....
  <button id="button">Click!!</button>
  <script src="hoge.js"></script>
  <script src="fuga.js"></script>
</body>

 

よくあるようなボタンクリックで処理が実行されるようなもので、ここでは2つの異なるJSファイルが使われています。1つ目のJSファイルには、別ファイルで呼び出したい処理が定義されています。ここでは次のようなものを用意しました。

【hoge.js】

const hogeFunction = () => {
  console.log('hoge.jsで定義された関数です');
}

// windowオブジェクトのグローバル変数用キーに定義した関数を入れる
window.globalFunction = {};
window.globalFunction.hoge = hogeFunction;

 

本来、この処理はこのJSファイルから実行されることになりますが、もう一方のJSファイルから実行したい場合には、このように、windowオブジェクトにグローバル変数として追加する形となります。まずはwindowオブジェクトに対してグローバル関数用のキーを設定し(ここではglobalFunctionという名前にしています)空のオブジェクトを入れておきます。

 

そして、その定義したオブジェクト内に設定した関数用キーの値に先ほどの関数を入れるようにします。こうすることでグローバル変数のキーを指定するとグローバル関数として先ほど定義した関数を呼び出すことができます。実際にコンソールでwindowオブジェクトの中身を確認してみます。

console.log(window.globalFunction);

// console
{
  hoge: () => { console.log('hoge.jsで定義された関数です'); },
  ......
  name: "hogeFunction"
  ......
}

 

このように先ほど定義した関数がwindowオブジェクトのキーの中に入り、グローバル関数として呼び出せるようになりました。あとは、別のJSファイルからwindowオブジェクトにあるキーを指定するだけでOKです。

【fuga.js】

document.getElementById('button').addEventListener('click', () => {
  window.globalFunction.hoge();
});

// console
hoge.jsで定義された関数です

 

実行するとこのように別ファイルからでも関数を使えることが確認できました。もちろん引数も同じように使うことができます。

 


 

ゼロからスクリプトを書いていく場合にはあまりないかもしれませんが、すでに完成しているサイトの改修であったり、スポットで機能追加などの場合には使えるのではないでしょうか。ただしグローバル関数となるので不必要に使いすぎないように気をつけたいですね。

この記事を書いた人

オガワ シンヤ

合同会社デザインサプライ代表兼CEO / ディレクター・ウェブデザイナー・フロントエンドエンジニアをやっています。「ウェブとデザインでヒト・モノ・サービスを繋げ新しい価値を生み出す」をコンセプトに日々奮闘中!制作中はチョコレートが欠かせない三十路Webクリエイター。

  • Twitter

コメントフォーム

記事に関するご質問やご意見などありましたら下記のコメントフォームよりお気軽に投稿ください。なおメールアドレスは公開されませんのでご安心ください。

内容に問題なければ、お名前・ハンドルネームとメールアドレスを入力いただき、下記の「コメントを送信」ボタンを押してください。

CAPTCHA


この記事もよく読まれています

Scroll to Top
ご質問・ご相談はありませんか ?