JavaScriptのvoid(0)を理解して効果的に利用する8つの実例付き解説

●JavaScriptのvoid(0)とは？

JavaScriptのvoid(0)は、一見すると意味不明な記述に見えるかもしれません。

でも、実はWebサイトを作る上でとても重要な役割を担っているんです。

void(0)の「void」は、無効にするという意味があります。

そして、「(0)」の部分は、voidの引数を表しています

つまり、void(0)は「引数0を無効にする」という意味になるわけです。

○void(0)の意味

具体的にvoid(0)が何を無効にしているのか、もう少し詳しく見ていきましょう。

Webサイトでリンクをクリックしたときに、指定したURLへ遷移するのが一般的ですよね。

でも、時にはそのリンクをクリックしても、ページ遷移せずに何かしらの処理を実行したいこともあります。

そんな時に使うのがvoid(0)です。

リンクに「javascript:void(0);」と記述することで、そのリンクをクリックしてもページ遷移が無効になり、代わりにJavaScriptの処理を実行できるようになるんです。

○void(0)を使う目的

じゃあ、どんな時にvoid(0)を使うのか、もう少し具体的に見ていきましょう。

よくあるのが、フォームのsubmitボタンをクリックした時の処理です。

フォームの入力内容に不備がある場合、そのままsubmitさせずにエラーメッセージを表示したいですよね。

そんな時は、submitボタンに「onclick=”return false;”」と記述する代わりに、「onclick=”javascript:void(0);”」と記述することで、submitを無効にしつつ、エラーチェックなどのJavaScript処理を実行できます。

他にも、リンクをクリックした時にモーダルウィンドウを開いたり、アコーディオンメニューを開閉したりと、ページ遷移を伴わないUIの実装にvoid(0)はとても役立ちます。

○サンプルコード1：基本的なvoid(0)の使い方

それでは、void(0)の基本的な使い方を見てみましょう。

<a href="javascript:void(0);" onclick="alert('リンクがクリックされました！');">
  クリックしてね
</a>

このように、aタグの href属性に “javascript:void(0);” を指定し、onclick属性でクリック時の処理を記述します。

このリンクをクリックすると、アラートで「リンクがクリックされました！」と表示されます。

リンクをクリックしてもページ遷移は発生しません。

実行結果

クリックしてね(実際は押すとリンクがクリックされました！とアラートが表示されます)

このように、シンプルな例ではありますが、void(0)を使うことでクリックイベントをキャンセルしつつ、任意のJavaScript処理を実行できることがおわかりいただけたかと思います。

次は、実際のサイト制作でよく使われるvoid(0)の活用例を見ていきましょう。

●void(0)の様々な使用例

基本的なvoid(0)の使い方はわかったけど、実際のWebサイト制作でどんな風に活用されているのか気になりますよね。

ここからは、よく見かけるvoid(0)の使用例を見ていきましょう。

○サンプルコード2：リンクのクリックイベントをキャンセル

まずは、リンクのクリックイベントをキャンセルする例です。

<a href="https://www.example.com" onclick="alert('リンクをクリックしました！');return false;">
  リンクをクリック
</a>

このコードでは、aタグのhref属性に遷移先のURLを指定しつつ、onclick属性でクリック時の処理を記述しています。

そして、最後に「return false;」を記述することで、リンクのクリックイベントをキャンセルしています。

このリンクをクリックすると、アラートが表示されますが、ページ遷移は発生しません。

こんな感じで、リンクの本来の動作をキャンセルしつつ、独自の処理を実行したい時に使えます。

ただ、この方法だとhref属性にURLを指定しているので、リンクを右クリックして「新しいタブで開く」とかされちゃうと、意図せずページ遷移してしまうのですよね。

そういう場合は、hrefに “javascript:void(0);” を指定するのがベターです。

○サンプルコード3：フォームのsubmitをキャンセル

続いては、フォームのsubmitをキャンセルする例を見てみましょう。

<form onsubmit="alert('フォームがsubmitされました！');return false;">
  <input type="text" name="username">
  <button type="submit">送信</button>
</form>

formタグに onsubmit イベントを設定し、「return false;」を記述することで、フォームのsubmitをキャンセルしています。

送信ボタンを押すと、アラートが表示されますが、実際にはフォームがsubmitされていません。

こんな感じで、フォームの入力内容をチェックして、不備がある場合はsubmitさせないようにしたりできます。

○サンプルコード4：buttonのclickをキャンセル

ボタンのclickイベントをキャンセルする例も見てみましょう。

<button onclick="alert('ボタンがクリックされました！');return false;">
  クリックしてね
</button>

buttonタグの onclick属性で、クリック時の処理とイベントのキャンセルを記述しています。

ボタンをクリックするとアラートが表示されますが、ボタンの デフォルトの動作である「フォームのsubmit」などは発生しません。

○サンプルコード5：void(0)とカスタムデータ属性の組み合わせ

最後は、void(0)とカスタムデータ属性を組み合わせた例を見てみましょう。

<a href="javascript:void(0);" data-message="ようこそ！">
  カスタムデータ属性を使ったリンク 
</a>

<script>
document.querySelector('a').addEventListener('click', function() {
  alert(this.dataset.message);
});
</script>

aタグに、”javascript:void(0);”を指定することでクリックイベントをキャンセル。そして、data-message属性にメッセージを設定しています。

そして、JavaScriptでaタグをクリックした時に、data-message属性の値を取得してアラート表示しています。

このようにvoid(0)と data-* 属性を組み合わせることで、リンクにクリックイベントを設定しつつ、リンク先のURLなどの情報を保持しておくことができます。

●よくあるエラーと対処法

void(0)を使っていると、時にはエラーに遭遇することもあるでしょう。

ここでは、よくあるエラーとその対処法を見ていきます。

○Chromeでvoid(0)のリンクが開かない問題

まずは、Google Chromeでvoid(0)のリンクがクリックできない問題について。

<a href="javascript:void(0);" onclick="alert('クリックされました！');">
  クリックしてね
</a>

このようなコードを書いて、Chromeで開いてみると、リンクをクリックしてもアラートが表示されず、コンソールに次のようなエラーが出ることがあります。

Uncaught TypeError: Cannot read properties of undefined (reading 'preventDefault')

これは、Chromeのバージョンによっては、javascript:void(0); を使ったリンクのクリックイベントが正しく動作しない場合があるためです。

この問題を回避するには、javascript:void(0); の代わりに # を使うのがおすすめ。

<a href="#" onclick="alert('クリックされました！');return false;">
  クリックしてね
</a>

href属性に # を指定し、onclickイベントの最後で return false; を返すことで、リンクの デフォルトの動作をキャンセルできます。

こうすることで、Chromeでも問題なくvoid(0)のような動作を実現できますよ。

○EdgeでJavaScriptが動作しない場合の対処法

続いて、Microsoft EdgeでJavaScriptが動作しない問題についてです。

Edgeでは、セキュリティ上の理由から、JavaScriptが無効化されていることがあります。

その場合、void(0)を使ったコードも動作しません。

この問題を解決するには、次の手順でJavaScriptを有効化します。

1. Edgeの右上にある「…」アイコンをクリックし、「設定」を選択。
2. 「Cookie とサイト アクセス許可」をクリック。
3. 「JavaScript」のトグルスイッチをオンにする。

これでEdgeでもJavaScriptが動作するようになり、void(0)も問題なく使えるはずです。

ただ、セキュリティ上の理由でJavaScriptを無効化しているユーザーもいるので、void(0)を多用しすぎないのも大切ですね。

○void(0)が非推奨という警告メッセージへの対応

最後に、void(0)が非推奨だという警告メッセージへの対応方法を見てみましょう。

コンソールを開くと、次のような警告が表示されることがあります。

[Deprecation] Synchronous XMLHttpRequest on the main thread is deprecated because of its detrimental effects to the end user's experience. For more help, check https://xhr.spec.whatwg.org/.

これは、メインスレッドで同期的にXMLHttpRequestを使うことが非推奨だというメッセージです。

void(0)自体が非推奨というわけではありません。

このメッセージが出ても、void(0)は問題なく動作します。

ただ、ユーザー体験を損なう可能性があるので、非同期的な処理を使うのがベターですね。

例えば、void(0)でリンクのクリックイベントをキャンセルしつつ、fetch()を使って非同期にデータを取得するなどです。

document.querySelector('a').addEventListener('click', function(event) {
  event.preventDefault();
  fetch('https://example.com/data')
    .then(response => response.json())
    .then(data => {
      console.log(data);
    });
});

このように、void(0)はそのままに、非同期処理を導入することで、警告メッセージに対応しつつ、ユーザー体験を損なわないコードを書くことができます。

●void(0)を使ったより実践的な例

ここまでvoid(0)の基本的な使い方や注意点を見てきましたが、実際のWebサイト制作では、もっと実践的な使い方があります。

ここからは、void(0)を活用したUIの実装例を見ていきましょう。

○サンプルコード6：モーダルウィンドウを開く

まずは、リンクをクリックした時にモーダルウィンドウを開く例です。

<a href="javascript:void(0);" onclick="openModal()">モーダルを開く</a>

<div id="modal" class="modal">
  <div class="modal-content">
    <span class="close" onclick="closeModal()">&times;</span>
    <p>モーダルの内容はここに書きます。</p>
  </div>
</div>

<script>
function openModal() {
  document.getElementById("modal").style.display = "block";
}

function closeModal() {
  document.getElementById("modal").style.display = "none";
}
</script>

リンクに void(0) を指定し、onclick属性でモーダルを開く関数を呼び出しています。

モーダルウィンドウはHTMLで定義し、初期状態ではdisplay:noneで非表示にしておきます。

そして、openModal()関数でdisplay:blockにすることで表示させます。

モーダルを閉じる時は、closeModal()関数でdisplay:noneに戻すだけです。

簡単にモーダルウィンドウが実装できましたね。

○サンプルコード7：アコーディオンメニューの実装

次は、クリックすると開閉するアコーディオンメニューを実装してみましょう。

<div class="accordion">
  <a href="javascript:void(0);" class="accordion-title" onclick="toggleAccordion(this)">
    セクション1
  </a>
  <div class="accordion-content">
    <p>セクション1の内容はここに書きます。</p>
  </div>
  <a href="javascript:void(0);" class="accordion-title" onclick="toggleAccordion(this)">
    セクション2
  </a>
  <div class="accordion-content">
    <p>セクション2の内容はここに書きます。</p>
  </div>
</div>

<script>
function toggleAccordion(el) {
  el.classList.toggle("active");
  const content = el.nextElementSibling;
  if (content.style.display === "block") {
    content.style.display = "none";
  } else {
    content.style.display = "block";
  }
}
</script>

アコーディオンのタイトル部分に void(0) を指定し、onclick属性で開閉を制御する関数を呼び出しています。

toggleAccordion()関数では、クリックされたタイトル要素にactiveクラスを付けたり外したりして、見た目を変化させています。

そして、タイトルの次の要素（=内容部分）のdisplayプロパティを切り替えることで、開閉を実現しています。

アコーディオンメニューもvoid(0)を活用することで、わりとシンプルに実装できましたね。

○サンプルコード8：タブ切り替え機能の実装

最後は、タブ切り替え機能を実装する例を見てみましょう。

<div class="tab">
  <a href="javascript:void(0);" class="tab-link active" onclick="openTab(event, 'tab1')">タブ1</a>
  <a href="javascript:void(0);" class="tab-link" onclick="openTab(event, 'tab2')">タブ2</a>
  <a href="javascript:void(0);" class="tab-link" onclick="openTab(event, 'tab3')">タブ3</a>
</div>

<div id="tab1" class="tab-content">
  タブ1の内容はここに書きます。
</div>

<div id="tab2" class="tab-content" style="display:none">
  タブ2の内容はここに書きます。
</div>

<div id="tab3" class="tab-content" style="display:none">
  タブ3の内容はここに書きます。 
</div>

<script>
function openTab(evt, tabName) {
  const tabLinks = document.getElementsByClassName("tab-link");
  for (let i = 0; i < tabLinks.length; i++) {
    tabLinks[i].classList.remove("active");
  }

  const tabContents = document.getElementsByClassName("tab-content");
  for (let i = 0; i < tabContents.length; i++) {
    tabContents[i].style.display = "none";
  }

  evt.currentTarget.classList.add("active");
  document.getElementById(tabName).style.display = "block";
}
</script>

各タブのリンクに void(0) を指定し、onclick属性でopenTab()関数を呼び出しています。

この関数には、クリックイベントオブジェクトと、表示したいタブの id を渡しています。

openTab()関数では、まず全てのタブのactiveクラスを外し、全てのタブコンテンツを非表示にしています。

そして、クリックされたタブにactiveクラスを付け、対応するタブコンテンツを表示させています。

こうすることで、タブの切り替えを実現しています。タブUIもvoid(0)を使えば、割とスマートに実装できます。

まとめ

今回は、JavaScriptのvoid(0)について、基本的な使い方から実践的な活用例まで詳しく解説しました。

void(0)は、クリックイベントをキャンセルしつつ、独自の処理を実行したい時に役立つ記法です。

リンクやボタンのクリック時の動作を制御する時によく使われます。

使い方を誤るとエラーに遭遇することもありますが、適切に対処することで問題なく活用できます。

また、アコーディオンやタブなど、Webサイトでよく見かけるUIの実装にもvoid(0)は威力を発揮します。

JavaScriptの開発でインタラクティブなUIを実装する際は、ぜひvoid(0)を思い出してみてください。

うまく使いこなすことで、よりリッチなWebサイトを制作できるはずです。

void(0)の理解は、JavaScriptのスキルアップに繋がります。

初心者の方も、ここで紹介した例を参考に、ぜひ実際のコーディングで活用してみてくださいね。