JavaScript の別の JS ファイルからの関数の呼び出し
- HTML ファイルからの JavaScript 呼び出し関数
- ある JS ファイルから別の JS ファイルへの JavaScript 呼び出し関数
-
ES6
インポートおよびエクスポートを使用した JavaScript 呼び出し関数 - jQuery を使用したある JS ファイルから別の JS ファイルへの JavaScript 呼び出し関数
このレッスンでは、別の JS ファイルからの JavaScript 呼び出し関数について説明します。ローカルマシンとライブサーバーを使用して、HTML ファイル内およびある JS ファイルから別の JS ファイルに JavaScript 関数を呼び出す方法を示します。
HTML ファイルからの JavaScript 呼び出し関数
HTML コード：
<!DOCTYPE html>
<html>
<head>
<title>JavaScript Function Call</title>
<script src="./first.js"></script>
</head>
<body>
<input
id="circleArea"
type="button"
value="Show Circle Area"
onclick="circleArea()"
/>
</body>
</html>
JavaScript コード：
const PI = 3.14
let radius = 3;
function circleArea() {
var inputField = document.createElement('INPUT');
inputField.setAttribute('type', 'text');
inputField.setAttribute('value', (PI * radius * radius));
document.body.appendChild(inputField);
}
circleArea() 関数は、タイプ button の input 要素をクリックするとすぐに実行されます。円の面積を計算し、ブラウザに表示します。
createElement() メソッドは、特定の名前の要素ノードを作成します。この名前は、INPUT、BUTTON、P などの名前にすることができます。
このサンプルコードで input 要素を作成し、setAttribute() メソッドを使用して 2つの属性（type と value）を設定します。
その type を text と value に円の領域で設定します。appendChild() 関数は、ノードの最後の子のように動作する新しいノードを追加します。
ある JS ファイルから別の JS ファイルへの JavaScript 呼び出し関数
HTML コード：
<!DOCTYPE html>
<html>
<head>
<title>Call Function from One JS file into another</title>
<script src="first.js"></script>
<script src="second.js"></script>
</head>
<body>
<input
id="circleArea"
type="button"
value="Show Circle Area"
onclick="circleArea()"
/>
</body>
</html>
first.js コード：
const PI = 3.14;
let radius = 3;
function calcArea() {
return PI * radius * radius;
}
second.js コード：
function circleArea() {
document.write((calcArea()).toFixed(2));
}
円の面積を再度計算しますが、first.js から second.js ファイルに calcArea 関数を呼び出します。
document.write() メソッドはブラウザに出力を書き込み、toFixed() 関数は数値を文字列に変換してから、指定された小数点以下の桁数に丸めます。この例では、円の面積を小数点以下 2 桁まで出力します。
ES6 インポートおよびエクスポートを使用した JavaScript 呼び出し関数
ECMAScript6（ES6）を使用すると、import/export 機能を使用できます。これを使用して、関数、変数、クラスをインポート/エクスポートできます。
HTML コード：
<!DOCTYPE html>
<html>
<head>
<title>Call Function from One JS file into another</title>
<script type="module" src="./second.js"></script>
</head>
<body>
<button id="btn" onclick="circleArea()">Show Circle Area</button>
</body>
</html>
first.js コード：
const PI = 3.14;
let radius = 3;
function calcArea() {
return PI * radius * radius;
}
export {calcArea};
second.js コード：
import {calcArea} from './first.js';
document.getElementById('btn').addEventListener('click', function circleArea() {
var inputField = document.createElement('INPUT');
inputField.setAttribute('type', 'text');
inputField.setAttribute('value', (calcArea()).toFixed(2));
document.body.appendChild(inputField);
});
このサンプルコードは、export {calcArea}; を使用して、first.js ファイルから calcArea() 関数をエクスポートしています。second.js ファイルは、最初に first.js ファイルからこの関数をインポートします。そうして初めてそれを呼び出すことができます。type="module"のファイルを import と export に追加することを忘れないでください。
両方の .js ファイルを追加する必要はありません。関数をインポートするファイルを追加するだけで十分です。たとえば、HTML ファイルに second.js ファイルを追加しています。
import と export を使用するには、ローカルマシンでは機能しないため、サーバーでアプリケーションを実行する必要があります（Node.js を使用できます）。Visual Studio コードでライブサーバー拡張機能を使用し、学習目的で Open with Live Server を使用してコードを実行できます。
import と export の詳細については、このリンクを確認してください。
jQuery を使用したある JS ファイルから別の JS ファイルへの JavaScript 呼び出し関数
HTML コード：
<!DOCTYPE html>
<html>
<head>
<title>Call Function from One JS file into another</title>
<script src="second.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
</head>
<body>
<input
id="circleArea"
type="button"
value="Show Circle Area"
onclick="circleArea()"
/>
</body>
</html>
first.js コード：
const PiValue = 3.14;
let radius = 3;
function calcArea() {
return PiValue * radius * radius;
}
second.js コード：
function circleArea() {
$.getScript('first.js', function() {
document.write(calcArea());
});
}
このサンプルコードも円の面積を計算しますが、jQuery を使用して first.js ファイルから second.js ファイルに関数を呼び出します。
second.js ファイルでは、getScript() メソッドを使用して first.js スクリプトが完全にロードされると、コールバック関数が起動されます。document.write メソッドは、calcArea() メソッドによって返されたブラウザに出力を書き込みます。
