JavaScriptでグローバル変数を使って別ファイルの関数を実行させる
今回は少し小ネタ的な使い方になるのですが、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で定義された関数です
実行するとこのように別ファイルからでも関数を使えることが確認できました。もちろん引数も同じように使うことができます。
ゼロからスクリプトを書いていく場合にはあまりないかもしれませんが、すでに完成しているサイトの改修であったり、スポットで機能追加などの場合には使えるのではないでしょうか。ただしグローバル関数となるので不必要に使いすぎないように気をつけたいですね。
categories
- WordPress（61）
- JavaScript（49）
- Vue.js（48）
- CSS（46）
- jQuery（34）
- Nuxt.js（22）
- Sass（21）
- Gulp（17）
- webpack（16）
- PHP（14）
- HTML（14）
- GSAP（11）
- React（10）
- Vite（9）
- Pug（9）
- Laravel（8）
- Cordova（8）
- Linux（7）
- Next.js（6）
- Apache（5）
- Shopify（4）
- REST API（4）
- Node.js（4）
- Smarty（3）
- Git（3）
- JSON（3）
- その他プログラミング（3）
- Google Apps API（3）
- Bootstrap（3）
- 環境構築・システム（3）
- TypeScript（2）
- EJS（2）
- RMS（2）
- Docker（2）
- Instagram API（2）
- Excel VBA（2）
- SVG（1）
- Dart（1）
- ECカートASP（1）
- Markdown（1）
- AMP（1）
- Nginx（1）
- XML（1）
- shellscript（1）
- Ruby（1）
- MySQL（1）
