JavaScript: void(0)の意味とは?代替手段も紹介!

aタグのhref属性に設定されているJavaScript: void(0)の意味について解説します。またリンクを無効化させるvoid(0)の代替手段についてもサンプルコード付きで解説します。

コンテンツ [表示]

  1. 1JavaScript: void(0)とは?
  2. 1.1void演算子
  3. 1.2まとめ
  4. 2void(0)の代替手段
  5. 2.1リンクである必要が無い場合
  6. 2.2どうしてもaタグの必要がある場合
  7. 2.3まとめ

JavaScript: void(0)とは?

void(0)の表記をどこかで見たことがありますでしょうか?

ブラウザ上でリンクをクリックしたらブラウザ上にエラーが表示され、その中にvoid(0)があったという場合や、開発者であればHTMLのコードの中にvoid(0)が設定されていたなど見たことがある方もいるかと思います。

このvoid(0)ですが、aタグに対して慣習的に下記のように利用されます。

void(0)を使った慣習的な書き方

<a href="javascript:void(0)" onclick="JavaScriptでクリック時の処理">リンク</a>

aタグのhref属性にjavascript:void(0)とする書き方は通常href属性には遷移先のURLなどを指定しますが、上記のようにjavascript: スキーム名とすることで続くJavaScriptのコードを実行させることが出来ます。

ではvoid(0)は何を表すかという点ですが、void演算子についてまずは紹介します。

void演算子

void演算子は続く括弧の中の式を評価し、undefinedを返す演算子です。void(0)でもvoid(123)でもundefinedを返します。
(慣習的に0がよく使われます)

一見すると意味のないような演算子に見えますが、式の評価はするため「JavaScriptを実行したいが、特に値は返したくない」という場合に有用です。

例えば下記のような書き方も可能になります。

void演算子の使い方例

<a href="void(document.getElementById('sample').style.backgroundColor='#fff')">リンク</a>

またvoid演算子は必ずundefinedを返しますが、undefinedと文字をタイプするよりもvoid(0)の方がタイプ数が短いということもあり、慣習的に使われている面もあります。

まとめ

ここまでをまとめるとhref属性のvoid(0)undefinedを返します。

つまりhref属性にundefinedが指定されることになりますが、これはhref属性がjavascript: スキームに対応していて、JavaScriptが有効になっているブラウザでは「何も遷移させない」という結果になります。つまりリンクの遷移の無効化です。

そして本命のJavaScriptの動作をaタグのonclick属性で指定して行うような使い方をしているケースが多いです。

void(0)の代替手段

さて、これまで紹介してきましたhref属性にvoid(0)を指定するやり方ですが、あまりおすすめではありません。というのも特定の条件で遷移エラーが発生する場合があるからです。

例えばブラウザのバージョンが古かったりJavaScriptが無効になっている場合はブラウザの遷移エラーが発生します。

ではhref属性のvoid(0)の代わりにどのような方法をとればいいのでしょうか?

リンクである必要が無い場合

これはまではaタグのhref属性を利用していましたが、必ずしもaタグである必要がないのであれば別のタグを利用しましょう。

他のを使ってJavaScriptを実行

<button type="button" onclick="本命のJavaScript">ボタン</button>

<span onclick="本命のJavaScript">span</span>

aタグでは無い、別のタグに置き換えればページ遷移することはないので、リンクの無効化自体が必要ではありません。

どうしてもaタグの必要がある場合

ページ内リンクにする

href属性の遷移先を"#"にすると、ページ内遷移で先頭に遷移しますが、エラーの発生は無くなります。

遷移先を"#"にする

<a href="#" onclick="本命のJavaScript">リンク</a>

CSSでリンクを無効にする

CSSでリンクを無効化することが出来ます。pointer-eventsプロパティをnoneに設定してみましょう。下記のサンプルコードをご覧下さい。

上記のサンプルコードではaタグのhref属性にリンク先が設定されていますが、クリックしても遷移しないと思います。

あわせて読みたい
pointer-events
CSSのpointer-eventsプロパティはポインターイベントの発生の対象を制御するプロパティです。pointer-eventsプロパティの構文や使い方をサンプルコード付きで解説します。

まとめ

このようにvoid(0)以外でもリンクを無効化できる方法は存在します。

慣習的にvoid(0)を使ってもいいですが、全てのブラウザでサポートされた方法では無いことと、それを知った上でいくつかのやり方を組み合わせてリンクを無効化した方が確実ですので、ぜひ今回の内容を参考に組み合わせてリンクの無効化をしてみて下さい。

今だけ
無料

【7月31日まで】全カリキュラム無料で提供中!

Qumeru

Qumeru[クメル]ではプログラミング学習が出来るカリキュラムを7月31日までの期間限定で無料で提供しています。

無料登録することで、すぐにプログラミング学習を始められます。ぜひカリキュラムをお試し下さい!

関連記事

【期間限定】全カリキュラム無料で提供中!

Qumeru[クメル]ではプログラミング学習の全カリキュラムを7月31日まで期間限定で無料で提供しています。

無料登録することで、すぐにプログラミング学習を始められます。ぜひお試し下さい!

目次