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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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