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

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

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

リンクを無効化するjavascript:void(0)の使い方

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

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

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

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

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

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

javascript:void(0)を使うメリットとデメリット

メリット

  • シンプルな記述でリンクを無効化できる
  • クリック可能な要素であることが一目でわかる(カーソルがポインターになる)
  • onclick属性に指定したJavaScriptを実行できる

デメリット

  • リンク先URLがjavascript:void(0)と表示されるため、ユーザーに不安を与える可能性がある
  • アクセシビリティの観点から好ましくない(キーボード操作でのフォーカスが当たらない)
  • SEOにも悪影響がある(クローラーがJavaScriptを読み込まない場合がある)

javascript:void(0)の代替手段

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

1. button要素を使う

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

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

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

2. event.preventDefault()を使う

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

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

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

まとめ

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

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

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

JavaScriptを効率的に身につける勉強法は?

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

  • JavaScript を身に付けてエンジニアになるには何をすればいい?
  • 何から勉強すればいいんだろう?
  • 効率よく勉強するには?

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

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

目次