JavaScriptっていろんなことができますよね。
ボタンをクリックした時に要素を動かすようにしてみたり、画面の遷移だって設定できちゃいます。
そんな時気になるのが、ボタンのカーソルですね。
矢印になっているよりも指のマークの方がクリックできそう…
でも<a>タグのリンクは無効にしたい…
今回は、そんな時に使えるvoid(0)について解説していきます！
この記事は下記の流れで進めていきますね。
【基礎】void(0)でaタグのリンクを無効化する
【発展】どんな時にvoid(0)を使う？
【発展】カーソルを変えたいだけならCSSで！
【発展】void(0)のリンクが開かない理由
細かいポイントではありますが、理解すればユーザーが使いやすいサイト作りの大きな力となります。
ぜひ覚えていってください！
void(0)って一体何？
void(0)とは、voidという関数に0という値を入れている状態です。
voidはどんな関数なのか、なぜ0を入れるのか、細かく見ていきましょう。
void演算子の使い方
void演算子は、どんな値を入れてもundefinedで返してくれるのが特徴です。
See the Pen void0 by 河野七海 (@kouno73) on CodePen.
上記のコードでも分かるように、void()の引数に数字や文字列が入っていても全部「undefined」が返ってきます。
undefinedとは「定義されていない」という意味です。
つまり、何を入れても「まだ何も決まってないですよー」と返事をする関数というわけですね。
undefinedについては、下記の記事で基本から応用まで詳しく解説しているのでぜひ参考にしてみてください！
void(0)の意味について
void演算子は、void(0)というようにカッコの中へ値や式を入れることは分かりましたね。
では、なぜ0をいれるのでしょうか？
今では慣例的に0を入れていますが、カッコの中にどんな値や式を入れても良いのか？というとちょっと例外もあります。
例えば、次の例を見てください！
var test = void(alert('hello void'));
この例では、voidの引数にalert()メソッドを記述していますよね？
これは確かにundefinedが返り値として得られるのですが、引数に指定した式は普通に実行されます。
そのため、画面にはアラートのポップアップが表示されるわけです。
つまり、undefinedだけを必ず取得したい場合は何らかの値である必要があり、記述も少なくて分かりやすい0がよく使われるというわけです。
もう少しvoidの意味を深く掘り下げてみたい方は、MDNのリファレンスも合わせて参照してみると良いでしょう。
https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Operators/void
void(0)で<a>タグのリンクを無効化する
void(0)でリンクを無効化するのは簡単です。
下記のように、<a>タグのurlの値に、javascript:void(0)と入れるだけ！
See the Pen void by 河野七海 (@kouno73) on CodePen.
マウスオーバーした時に指マークになるけど、クリックしても画面遷移しない要素ができました！
どんな時にvoid(0)を使う？
void(0)が使われるような場面は、主に<a>タグのリンク無効化です。
つまり、どんな時に無効化したいのか＝void(0)が使われるタイミング、となるわけですね。
リンクの無効化が効果的なのは、例えば下記のような場面です。
・画面を遷移をせず、JavaScriptが動作するときの条件（トリガー）にしたい
つまり、
マウスオーバーで指カーソルにしたいけれど、リンクは飛ばしたくない！
という時、void(0)を使えば実現できるのです。
カーソルを変えたいだけならCSS
ここまでvoid(0)に関して色々と説明をしてきましたが、
正直、あんまり出番はないです。
要素をマウスオーバーした時にカーソルを変えるだけなら、CSS1行で実装できちゃうんです。
その方法はこちらの記事でご確認ください。
HTMLには、タグごとにいろんな意味がありますね。
<a>タグはご存知の通り、リンクを示すタグです。
それなのにリンクがないって、ちょっと構造上おかしくなっちゃいますよね。
HTMLの構造を美しくするためにも、カーソルを変えるのはCSSでやるのがおすすめです。
void(0)は、
どうしてもJavaScriptで実装しなければいけないんです！
という時の切り札にしておきましょう。
void(0)が動作しない時は？
void(0)によってリンクを無効化したものの、JavaScript側でプログラミングした処理が上手く実行されないというケースも少なくありません。これはブラウザのバージョンや環境によって理由はさまざまなんですが、もっとも大きな要因としてはJavaScriptが有効になっているかどうか？という点です。
ブラウザによってはJavaScriptが無効に設定されている場合があり、ユーザー側で意図的にON/OFFができるようになっています。
当然ながら、JavaScriptが無効だといくら完璧なプログラミングをしていても実行されることはありません。
JavaScriptの有効化手順については、次の記事でOS別に詳しく解説しているので合わせて参考にしてみてください！
ちなみに、もう1つ考えられる点としてはポップアップブロックが有効になっているかどうか？ということです。
ブラウザの設定や拡張機能などの導入、もしくはセキュリティソフトの設定によってはポップアップブロックが有効になっている場合があります。
この場合、JavaScript側から新規のブラウザウィンドウを開こうとしてもブロックされてしまい、画面は何も実行されていないように見えます。
また、WindowsのIEを使っている場合も同様な現象になることが少なくないので、まず最初に疑ってみるのが良いでしょう。
まとめ
いかがでしたか？
JavaScriptは色々できます。
ただ、JavaScriptにこだわりすぎなくても、手軽な方法は他にもあったりします。
今回のようにCSSが向いていたり、他の場面ではPHPの方が向いているなんて場面もあるでしょう。
プログラミングは適材適所。
ぜひいろんなものと組み合わせて、JavaScriptの魅力をもっと引き立ててあげてくださいね。
