JavaScript

この記事では「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

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

数値1：
数値2：

結果:

mathUtils.js

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

HTML

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

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

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

　入力値の検証は、不正な入力を防ぐために重要です。type="number" の入力値は文字列として取得されるため、Number() で数値に変換し、空欄ではないことと有限な数値であることを確認してから計算します。

入力検証 (Number関数とNumber.isFiniteの使用)

Number関数で入力値を数値へ変換し、Number.isFiniteで計算に使える値かを確認します。
空欄も明示的に確認することで、Number('')が0になることによる誤判定を防ぎます。

検証済みの値を表示する

計算には検証済みの数値だけを使い、結果の表示にはtextContentを使います。
入力欄の値を書き換えて「サニタイズ」することは、この数値入力例では必要ありません。

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