【保存版】JavaScriptで外部ファイルの関数を読み込む3つの方法とサンプルコード
JavaScript ファイル間で関数を呼び出す方法
この方法は、コードをモジュール化し、再利用性を高めるために役立ちます。
JavaScript ファイル間で関数を呼び出すには、主に以下の 2 つの方法があります。
script タグを用いる
HTML ファイル内に script タグを使用し、呼び出す JavaScript ファイルを指定することで、そのファイル内の関数を呼び出すことができます。
<!DOCTYPE html>
<html>
<head>
<title>Function Call Example</title>
</head>
<body>
<script src="functions.js"></script>
<script>
// functions.js で定義された greet 関数を呼び出す
greet("山田 太郎");
</script>
</body>
</html>
上記の例では、functions.js ファイルで定義された greet 関数を、script タグを使用して呼び出しています。
export と import を用いる
近年では、ES6 以降の構文である export と import を用いて、JavaScript ファイル間で関数を呼び出す方法が主流となっています。
functions.js
export function greet(name) {
console.log("こんにちは、" + name + "さん！");
}
main.js
import { greet } from './functions.js';
greet("田中 花子");
補足
- 関数を呼び出す際には、その関数がグローバルスコープまたはモジュールスコープで公開されている必要があります。
- 関数に引数を渡す場合は、呼び出し側で適切な引数を指定する必要があります。
- 関数が返り値を持つ場合は、呼び出し側でその値を取得することができます。
これらの方法を理解することで、JavaScript でより効率的で整理されたコードを書くことができます。
HTML ファイル (index.html)
<!DOCTYPE html>
<html>
<head>
<title>Function Call Example</title>
</head>
<body>
<script src="functions.js"></script>
<button onclick="greet('佐藤 海')">挨拶</button>
</body>
</html>
JavaScript ファイル (functions.js)
function greet(name) {
alert("こんにちは、" + name + "さん！");
}
export function greet(name) {
console.log("こんにちは、" + name + "さん！");
}
import { greet } from './functions.js';
greet("鈴木 優子");
説明
この例では、index.html ファイル内に script タグを使用して functions.js ファイルを読み込んでいます。
そして、button タグの onclick イベントハンドラーに greet('佐藤 海') 関数を呼び出すコードを記述しています。
このコードを実行すると、ボタンをクリックしたときに、「こんにちは、佐藤 海さん！」というメッセージが表示されます。
そして、main.js ファイルで greet("鈴木 優子") 関数を呼び出しています。
このコードを実行すると、「こんにちは、鈴木 優子さん！」というメッセージがコンソールに表示されます。
これらのサンプルコードは、JavaScript ファイル間で関数を呼び出すための基本的な方法を示しています。
実際の開発では、状況に応じて適切な方法を選択してください。
JavaScript ファイル間で関数を呼び出すその他の方法
CommonJS を用いる
Node.js などでサーバーサイド JavaScript を開発する場合、CommonJSと呼ばれるモジュールシステムを用いて JavaScript ファイル間で関数を呼び出すことができます。
// functions.js
module.exports = function greet(name) {
console.log("こんにちは、" + name + "さん！");
};
// main.js
const greet = require('./functions.js');
greet("高橋 健太");
AMD を用いる
RequireJS などを使用する場合、AMDと呼ばれる非同期モジュール定義方式を用いて JavaScript ファイル間で関数を呼び出すことができます。
// functions.js
define(['require'], function(require) {
return function greet(name) {
console.log("こんにちは、" + name + "さん！");
};
});
// main.js
require(['./functions'], function(greet) {
greet("中村 愛");
});
Universal Module Definition (UMD) は、CommonJS、AMD、およびブラウザグローバルスクリプトを含む、さまざまなモジュールシステムで動作するように設計されたモジュール定義形式です。
// functions.js
(function (factory) {
if (typeof define === 'function' && define.amd) {
define(['require'], factory);
} else if (typeof module === 'object' && module.exports) {
module.exports = factory(require);
} else {
window.greet = factory();
}
})(function (require) {
return function greet(name) {
console.log("こんにちは、" + name + "さん！");
};
});
// main.js
window.greet("前田 美咲");
グローバル変数を使用する
すべての JavaScript ファイルでアクセス可能なグローバル変数に関数を格納することで、ファイル間で関数を呼び出すことができます。
// functions.js
function greet(name) {
console.log("こんにちは、" + name + "さん！");
}
// main.js
greet("伊藤 春香");
注意事項
グローバル変数を使用する方法は、コードの可読性と保守性を低下させる可能性があるため、他の方法よりも推奨されていません。
状況に応じて適切な方法を選択することが重要です。
javascript html
