アンカー要素の href 属性に "javascript:void(0)" を使うべき？

2024-04-02

JavaScript:void(0) の意味

リンクの遷移を無効にする

通常、アンカー要素をクリックすると、別のページに移動したり、ページ内の別の場所に移動したりします。しかし、href 属性に "javascript:void(0)" を設定すると、クリックしても何も起こらなくなります。

JavaScript コードを実行する

"javascript:void(0)" の後に ; を付けて JavaScript コードを記述することができます。このコードは、アンカー要素がクリックされたときに実行されます。

例

以下の例では、javascript:void(0) を使って、ボタンをクリックしたときにアラートメッセージを表示するコードを書いています。

<button onclick="javascript:void(0); alert('Hello, world!');">ボタン</button>

注意点

"javascript:void(0)" は、以下の点に注意して使用する必要があります。

アクセシビリティ

"javascript:void(0)" を使用すると、JavaScript を無効にしているユーザーや、スクリーンリーダーを使用しているユーザーが、リンクをクリックできない可能性があります。

セキュリティ

"javascript:void(0)" を使用して悪意のある JavaScript コードを実行する可能性があります。そのため、信頼できないソースからのコードを使用する場合は注意が必要です。

代替手段

preventDefault() メソッド

preventDefault() メソッドを使用すると、アンカー要素のデフォルトの動作をキャンセルすることができます。

<a href="#">リンク</a>

<script>
document.querySelector('a').addEventListener('click', function(e) {
  e.preventDefault();

  // ここに JavaScript コードを記述
});
</script>

button 要素

button 要素を使用すると、ボタンをクリックしたときに JavaScript コードを実行することができます。

<button onclick="alert('Hello, world!');">ボタン</button>

"javascript:void(0)" は、リンクの遷移を無効にしたり、JavaScript コードを実行したりするために使用できる便利な機能です。しかし、アクセシビリティやセキュリティに注意して使用する必要があります。

リンクの遷移を無効にする

<a href="javascript:void(0)">リンク</a>

JavaScript コードを実行する

<a href="javascript:void(0); alert('Hello, world!');">リンク</a>

このコードでは、リンクをクリックすると、アラートメッセージが表示されます。

preventDefault() メソッドを使用する

<a href="#">リンク</a>

<script>
document.querySelector('a').addEventListener('click', function(e) {
  e.preventDefault();

  // ここに JavaScript コードを記述
});
</script>

このコードでは、リンクをクリックしてもページ遷移はせず、// ここに JavaScript コードを記述 の部分に記述された JavaScript コードが実行されます。

button 要素を使用する

<button onclick="alert('Hello, world!');">ボタン</button>

"javascript:void(0)" は、さまざまな用途で使用することができます。以下の例は、その一例です。

モーダルウィンドウを開く
タブを切り替える
アニメーションを実行する
フォームの送信を検証する

"javascript:void(0)" を使って、Web ページをよりインタラクティブでユーザーフレンドリーなものにすることができます。

"javascript:void(0)" の代替方法として、以下の方法が考えられます。

<a href="#">リンク</a>

<script>
document.querySelector('a').addEventListener('click', function(e) {
  e.preventDefault();

  // ここに JavaScript コードを記述
});
</script>

<button onclick="alert('Hello, world!');">ボタン</button>

data- 属性を使用して、アンカー要素にカスタムデータを追加することができます。このデータは、JavaScript コードを使用してアクセスすることができます。

<a href="#" data-action="open-modal">リンク</a>

<script>
document.querySelector('a').addEventListener('click', function(e) {
  e.preventDefault();

  const action = e.target.dataset.action;

  // action に応じて処理を行う
  switch (action) {
    case 'open-modal':
      // モーダルウィンドウを開く
      break;
  }
});
</script>

このコードでは、リンクをクリックすると、data-action 属性の値である "open-modal" に応じて処理が行われます。

ARIA 属性を使用して、アンカー要素の役割をアクセシビリティツールに伝えることができます。

<a href="#" role="button" aria-label="Open modal">リンク</a>

<script>
document.querySelector('a').addEventListener('click', function(e) {
  e.preventDefault();

  // モーダルウィンドウを開く
});
</script>