JavaScript

The import statement in JavaScript is used to load functions or data from other modules.

import [statement]

　JavaScriptの import文は、他のファイルから機能やデータを読み込むために使用されます。この仕組みにより、コードの再利用性が向上し、プロジェクトの管理が容易になります。

import文の基本

　import文は、モジュールとしてエクスポートされた関数、クラス、オブジェクト、プリミティブを読み込むために使用されます。モジュールとは、特定の機能を持つ JavaScriptのコードが記述されたファイルのことです。

JavaScript

// mathUtils.js
export function add(a, b) {
	return a + b;
}

　この関数を別のファイルで使用するためには、次のように <script type="module"> タグの中で import文を使用して読み込みます。

HTML

<script type="module">
	// app.js
	import { add } from './mathUtils.js';

	console.log(add(2, 3)); // 出力: 5
</script>

Sample

　ユーザーが入力した二つの数値を加算し、結果を表示するシンプルなアプリケーションを考えます。



結果:

mathUtils.js

// 加算機能を提供するJavaScriptファイル
export function add(a, b) {
	return a + b;
}

HTML

<!--  ユーザーインターフェースを持つHTMLファイル -->
<input id="number1" type="number" placeholder="数値1"><br>
<input id="number2" type="number" placeholder="数値2"><br>
<button onclick="calculate()">計算</button>
<div id="result">結果:</div>
<script type="module">
	import { add } from './mathUtils.js';
			
	window.calculate = function() {
		const input1 = document.getElementById('number1');
		const input2 = document.getElementById('number2');
		const num1 = parseInt(input1.value, 10);
		const num2 = parseInt(input2.value, 10);

		// 数値の検証
		if (!isNaN(num1) && !isNaN(num2)) {
			const result = add(num1, num2);
			document.getElementById('result').textContent = `結果: ${result}`;
		} else {
			document.getElementById('result').textContent = "エラー: 数値を入力してください。";
		}

		// 入力フィールドのサニタイズ（安全のために余分なスペースや不正な文字を除去）
		input1.value = num1;
		input2.value = num2;
	}
</script>

　この例では、<script type="module"> タグを使用して、HTMLファイル内で直接モジュールをインポートしています。calculate関数はグローバルスコープに配置され、HTML内のボタンのクリックイベントからアクセスできるようになっています。この方法は、小規模なプロジェクトやデモンストレーションに適していますが、大規模なアプリケーションでは JavaScriptを別のファイルに分割して管理することが一般的です。

　入力値の検証とサニタイズは、不正な入力を防ぐために重要です。JavaScriptで数値を扱う場合、ユーザーからの入力が期待通りの数値であることを確認し、意図しない文字列が処理されないようにする必要があります。

入力検証 (isNaN関数の使用)
  • isNaN関数を使用して、parseIntが数値でないものを解析しようとした際にNaN（Not a Number）を返す場合にエラーメッセージを表示します。
  • これにより、ユーザーが数値以外の入力を行った場合に適切なフィードバックを提供します。
サニタイズ (入力フィールドのクリア)
  • ユーザーが入力した値を、parseIntを通じて整数に変換し直すことで、任意のスクリプトや HTMLタグが混入することを防ぎます。
  • これは XSS（クロスサイトスクリプティング）攻撃を防ぐ基本的な手法の一つです。

　これらのステップにより、アプリケーションはユーザーからの不正な入力に対してより堅牢になります。