JavaScriptにおけるリンク遷移禁止エラーの解説

以下のリンクがあるとします:

<a href="">link</a>

このリンクを変数に取得します:

let link = document.querySelector('a');

リンクにクリックイベントハンドラーをバインドします。この際、ページのリロードを防ぐために、リンクのデフォルトの遷移動作をキャンセルします:

link.addEventListener('click', function(event) {
	console.log(this.textContent);
	event.preventDefault();
});

これで予期せぬ動作から完全に守られているように思えます。実際にはそうではありません。問題は、構文エラーが発生すると JavaScriptコードが実行されず、リンクのブロックが機能せず、リンク遷移が実行されてしまうことにあります。

この場合、コードの実行結果もコンソールのエラーも確認できません。なぜならページがリロードされてしまうからです。実際にコード内に意図的にエラーを作成し、確かめてみましょう:

link.addEventListener('click', function(event) {
	thiss.textContent = 'text'; // 構文エラー
	event.preventDefault();
});

この問題には特徴的な兆候があります: リンクをクリックした瞬間にコンソールを見ると、一瞬だけ赤いエラーが表示され、ほとんどすぐに消えてしまいます。

もちろん、エラーメッセージを読み取る時間はなく、これはエラーの発見を著しく困難にします。しかし、巧妙な対処法があります。リンクの href属性にハッシュ（#）を設定するのです。これによりリンク遷移は発生せず、コンソールにスローされたエラーを確認できるようになります:

<a href="#">link</a>