JavaScriptのvoid(0)の意味は？使い方・よくあるミスを現役エンジニアが解説！

2024-07-14

当サイトでは一部リンクに広告が含まれています

Webサイト制作の現場では、<a>タグのリンク先URLとして"javascript:void(0)"という記述をよく目にします。

ただ、この意味をちゃんと理解している方はそこまで多くないかもしれませんよね。

そこで本記事では、javascript:void(0)の意味と使い方、さらには最近の動向まで詳しく解説します
JavaScriptの基礎知識から、実践的なコーディングのコツまで、幅広く学べる内容となっています。

この記事を書いた人

そもそもvoid演算子とは？

voidは、JavaScriptの単項演算子の一つです。

void演算子の後に式を記述すると、その式を評価しますが、常にundefinedを返します。

つまり、式の評価結果を返さないようにするのがvoid演算子の役割だと言えます。

void(0); // undefined
void(1 + 2); // undefined
void("hello"); // undefined

<a>タグは本来、別のページへのリンクを作成するために使用されます。

しかし、JavaScriptでクリックイベントを処理する際、ページ遷移をさせたくない場合があります。

そんな時は、<a>タグのhref属性にjavascript:void(0)を指定すると便利です。

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

上記のコードでは、javascript:void(0)によってリンクの遷移先が無効化され、代わりにonclickに指定したJavaScriptが実行されます。

リンクをクリックしてもページ遷移は発生せず、アラートが表示されるだけです。

上記のデメリットを踏まえ、最近ではよりモダンな方法が推奨されています。いくつか代表的な例を紹介しましょう。

リンクっぽい見た目だけど遷移はさせたくない、というケースでは<button>要素を使うのがベストです。

button>ならCSSでスタイリングすれば、<a>と同じような見た目にできますし、アクセシビリティの点でも問題ありません。

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

どうしても<a>タグを使いたい場合は、href属性を指定せずにonclickでイベントハンドラを設定します。

そのイベントハンドラ内でevent.preventDefault()を呼び出せば、デフォルトのリンク動作をキャンセルできます。

<a onclick="event.preventDefault(); alert('リンクがクリックされました！');">クリックしてください</a>

javascript:void(0)は一見便利な記述方法ですが、最近ではあまり推奨されていません。

<button>要素を使ったり、event.preventDefault()を呼び出すことで、よりスマートにリンクを無効化することができます。

単にJavaScriptが実行できればOKというわけではなく、ユーザー体験やアクセシビリティ、SEOなども考慮に入れる必要があります。
少しでも良いコードを書けるよう、これからも技術の変化にアンテナを張っておきましょう。

JavaScript には興味があっても、プログラミング学習をはじめたばかりであれば、以下のような疑問を持つかもしれません。

JavaScriptは学ぶべき内容が非常に多いため、勉強法の選び方を間違うと時間・労力・お金が無駄になってしまいます…。

そのため、こちらの記事を参考に、ご自身に最適な学習方法を選んでみませんか？

Muscle Coding

【初心者向け】JavaScriptの勉強法3選を現役エンジニアが比較・解説！ | Muscle Coding JavaScriptの効果的な学習方法を現役エンジニアが解説！本、動画教材（Udemy）、プログラミングスクールの特徴を比較し、最適な方法を提案します。初心者でも理解しやすい…