JavaScript

The `try...catch` in JavaScript is a mechanism to safely execute code that might throw an error and handle the error if it occurs.

try...catch [statement]

　JavaScriptのtry...catch文は、エラーが発生する可能性のあるコードを安全に実行し、発生したエラーを適切に処理するための仕組みを提供します。tryブロック内にエラーが発生しそうなコードを記述し、もしエラーが発生した場合にはcatchブロックでそのエラーを受け取り、適切な対処を行います。

　try...catch文は、プログラムの実行中にエラーが発生する可能性がある箇所で使用します。通常、エラーが発生するとプログラムは停止しますが、try...catch文を用いることで、エラーを「捕捉」して、プログラムを停止させずに処理を続けることが可能です。

　try文は以下のような形で書かれます。

Syntax

try {
	// エラーが発生する可能性のあるコード
} catch (error) {
	// エラーが発生した場合に実行されるコード
	console.error(error); // エラーを出力する例
} finally {
	// エラーの有無に関わらず、最後に必ず実行される処理（省略可能）
}

　tryブロック内には、エラーが発生するかもしれないコードを置きます。もしエラーが発生した場合は、catchブロックが実行され、エラー情報が error という変数に渡されます。この error変数を使って、エラーの原因を調べたり、ユーザーにメッセージを表示したりすることができます。

　finallyブロックは省略可能で、エラーが発生したかどうかに関わらず、最後に必ず実行される処理を記述することができます。

使用例

JavaScript

try {
	let result = someFunction(); // ここでエラーが発生するかもしれない
	console.log(result);
} catch (error) {
	console.error('エラーが発生しました:', error.message);
} finally {
	console.log('この処理はエラーの有無にかかわらず実行されます。');
}

　このように、try...catch文を使うことで、プログラムがエラーで止まってしまうことを防ぎ、適切なエラーハンドリングを行うことができます。

Sample 1

　この例では、ユーザーが数値を入力し、それが有効な数値かどうかをチェックします。無効な場合はエラーメッセージを表示します。


メッセージ

HTML

<input type="text" id="numberInput" placeholder="数値を入力してください"><br>
<button onclick="checkNumber()">確認</button>
<p id="message">メッセージ</p>
<script>
	<!-- JavaScript code here -->
</script>

JavaScript

function checkNumber() {
	var input = document.getElementById('numberInput').value;
	try {
		var num = Number(input);
		if (isNaN(num)) {
			throw new Error('有効な数値ではありません。');
		}
		document.getElementById('message').textContent = '入力された値は有効な数値です：' + num;
	} catch (error) {
		document.getElementById('message').textContent = 'エラー：' + error.message;
	}
}

　このコードでは、ユーザーが入力欄に値を入れ、ボタンをクリックすると checkNumber関数が呼び出されます。関数内で、入力された値が数値かどうかをチェックし、数値でない場合はエラーを投げ(throw)、catchブロックでエラーメッセージを表示します。これにより、エラーが発生してもプログラムが停止せず、ユーザーに適切なフィードバックを提供することができます。

Sample 2

　Sample 1では Number(input)で数値の検証を行っていますが、空文字やスペースが含まれた場合も 0 と解釈されることがあります。正規表現を使った厳格な数値チェックを追加してみます。


メッセージ

Code before change

JavaScript

var num = Number(input);
if (isNaN(num)) {
	throw new Error('有効な数値ではありません。');
}

Code after change

JavaScript

// 正規表現で数値かどうかを厳密にチェック
if (/\D/.test(input)) {
	throw new Error('有効な数値ではありません。');
}
var num = Number(input);

　正規表現を使用することで、入力値が適切な数値形式であることをより厳密にチェックできます。これにより、Number()の曖昧な挙動を避け、予期せぬ入力（例：空白のみの文字列など）を排除します。

　ここでの正規表現の `/\D/` は、「数字以外の文字」が含まれているかどうかをチェックします。test() メソッドは、入力値に１つでも数値以外の文字が含まれていると true を返します。

Full code of JavaScript

JavaScript

function checkNumber() {
	var input = document.getElementById('numberInput').value;
	try {
		// 正規表現で数値かどうかを厳密にチェック
		if (/\D/.test(input)) {
			throw new Error('有効な数値ではありません。');
		}
		var num = Number(input);
		document.getElementById('message').textContent = '入力された値は有効な数値です：' + num;
	} catch (error) {
		document.getElementById('message').textContent = 'エラー：' + error.message;
	}
}

Sample 3

　表示するメッセージの部分で、XSS（クロスサイトスクリプティング）攻撃のリスクを軽減するため、入力値に関しては HTMLエンコードすることを考慮すべきです。これにより悪意のあるスクリプトが入力されるのを防ぎます。


メッセージ

Added code

JavaScript

function escapeHtml(unsafe) {
	return unsafe
		.replace(/&/g, "&amp;")
		.replace(/</g, "&lt;")
		.replace(/>/g, "&gt;")
		.replace(/"/g, "&quot;")
		.replace(/'/g, "&#039;");
}

　escapeHtml()関数を追加して、HTMLに表示する前に入力値やエラーメッセージをエンコードすることで、XSS攻撃を防ぐことができます。

Full code of JavaScript

JavaScript

// HTMLエンコードの追加
function escapeHtml(unsafe) {
	return unsafe
	.replace(/&/g, "&amp;")
	.replace(/</g, "&lt;")
	.replace(/>/g, "&gt;")
	.replace(/"/g, "&quot;")
	.replace(/'/g, "&#039;");
}

function checkNumber() {
	var input = document.getElementById('numberInput').value;
	try {
		// 正規表現で数値かどうかを厳密にチェック
		if (/\D/.test(input)) {
			throw new Error('有効な数値ではありません。');
		}
		var num = Number(input);
		document.getElementById('message').textContent = '入力された値は有効な数値です：' + num;
	} catch (error) {
		document.getElementById('message').textContent = 'エラー：' + error.message;
	}
}