JavaScript の別の JS ファイルからの関数の呼び出し

Mehvish Ashiq 2023年10月12日
  1. HTML ファイルからの JavaScript 呼び出し関数
  2. ある JS ファイルから別の JS ファイルへの JavaScript 呼び出し関数
  3. ES6 インポートおよびエクスポートを使用した JavaScript 呼び出し関数
  4. jQuery を使用したある JS ファイルから別の JS ファイルへの JavaScript 呼び出し関数
JavaScript の別の JS ファイルからの関数の呼び出し

このレッスンでは、別の 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() 関数は、タイプ buttoninput 要素をクリックするとすぐに実行されます。円の面積を計算し、ブラウザに表示します。

createElement() メソッドは、特定の名前の要素ノードを作成します。この名前は、INPUTBUTTONP などの名前にすることができます。

このサンプルコードで input 要素を作成し、setAttribute() メソッドを使用して 2つの属性(typevalue)を設定します。

その typetextvalue に円の領域で設定します。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"のファイルを importexport に追加することを忘れないでください。

両方の .js ファイルを追加する必要はありません。関数をインポートするファイルを追加するだけで十分です。たとえば、HTML ファイルに second.js ファイルを追加しています。

importexport を使用するには、ローカルマシンでは機能しないため、サーバーでアプリケーションを実行する必要があります(Node.js を使用できます)。Visual Studio コードでライブサーバー拡張機能を使用し、学習目的で Open with Live Server を使用してコードを実行できます。

importexport の詳細については、このリンクを確認してください。

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() メソッドによって返されたブラウザに出力を書き込みます。

著者: Mehvish Ashiq
Mehvish Ashiq avatar Mehvish Ashiq avatar

Mehvish Ashiq is a former Java Programmer and a Data Science enthusiast who leverages her expertise to help others to learn and grow by creating interesting, useful, and reader-friendly content in Computer Programming, Data Science, and Technology.

LinkedIn GitHub Facebook

関連記事 - JavaScript Function