WEBページをインタラクティブにするために、ボタンなどを押下したときのアクションをJavaScriptで制御させることがあります。
本当はaタグのリンクボタンだけど、遷移させずにJavaScriptでアクションをさせることができるのです。
aタグのhref属性に「javascript:void(0);」と書く習慣がありましたが、今はすすめられていません。この記事ではどうして使わない方が良いのかを解説します。
「javascript:void(0);」の意味
void(0)はUndefinedを返す
JavaScriptの「void(0)」は、常にUndefinedを返してくれるとても便利な演算子です。Undefinedと記述するよりも正確に、Undefinedをきちんと返してくれるという特徴があるのです。
ちょっとややこしいですが、Undefinedというのは単なる変数でしかありません。変数であるということは、Undefined以外の他の値を持たせることが可能なのでいつでもUndefinedであるという保証はないのです。
ですから、絶対にUndefinedがかえってきてほしいというときにはvoid演算子を使うことが定着するようになりました。
そしていつでも「void(0)」でなければならないわけでもなく、なんでも良いのです。
たとえば、
void(0);
void(1);
void 0;
void "I love you";
どんな書き方をしてもかえってくるのが、Undefinedなのです。
バリエーションがある中いろんなサイトで「void(0)」という書き方が定着してきたため、たいていの場合で「void(0)」と書くようになりました。
aタグのhrefはなにか記載する必要がある
なぜ、いつでもUndefinedが必要なのでしょうか。
それはaタグのブラウザ上での挙動が関係します。
HTMLのaタグで遷移するのではなく何らかのアクションをさせたい場合、aタグにonclick属性を持たせて、JavaScriptのコードを書くことができます。しかしhref属性にリンク先が書いてあるとアクションが作動する前に遷移してしまい、onclick属性に書いたコードが正しく動きません。
さらにブラウザはaタグのhref属性になにも記載されていなければ、リンクだとみなさないという挙動を取ることがあります。リンクだとみなさないということは、aタグの部分にカーソルを乗せたとしてもカーソルがポインターに変わらず、通常のテキストと同じように扱われてしまうのです。
それではせっかくonclick属性でアクションを指定していても、クリッカブルなのかどうかが分からず押してもらいにくいということが起きてしまい、UI的に大きなマイナスとなってしまうのです。
aタグをクリックしたときにonclickに記述したJavaScriptのコードを動作させるためには、hrefを無効にしなければならないこと、hrefを空白にするだけだとリンクとして認識されないこと、がわかりました。
これらを解決するために登場するのが、voidです。
href属性に「javascript:void(0);」と書くことで、href属性は常に安定してUndefinedがあることになります。ブラウザはなにも記載がない場合はリンクとして判断しませんが、Undefinedならリンクであると判断してくれて、カーソルがポインターになります。
Undefinedですから、リンクと判断しながら遷移の挙動をすることはないという特殊な動作になるのです。
結果として「void(0)」によって、見栄えとしての「押すところ」であることが一目瞭然になり、正しくonclick属性のアクションを作動させられるのです。
というわけで「void(0)」を使ってきたという歴史があります。でも最近は使われなくなってきています。
「javascript:void(0);」を使わなくなったのはなぜか
voidが出るとかっこ悪い
aタグのhref属性に「javascript:void(0);」と書くことにはデメリットもあります。
ブラウザにはリンク先のURLを表示してくれる機能がついています。ブラウザは「javascript:void(0);」をリンクと認識するわけですから、リンク先情報としてそのまま「javascript:void(0);」と表示されてしまいます。
インターネットを使うことにおいてセキュリティーの意識が高くなっている今、多くのユーザーがリンク先として示される情報を見るようになっています。
そんな中で、onclick属性にアクションを仕掛けたaタグにカーソルを重ねると、当然「javascript:void(0);」がリンク先として表示されてしまうのです。どれだけかっこいい最先端のデザインのサイトであったり、ボタンにすごいアクションが仕掛けてあったとしても、ユーザーにとって意味のわからない記述が提示されてしまうことになり、良い印象とはならず興味が覚めてしまうことにもなりかねません。
そこで最近では、「javascript:void(0);」を使わない方法で、JavaScriptのアクションを持たせる方法で書くようになってきています。
voidを使わないその他の書き方
voidを使わないその他の書き方を紹介します。
まずは、CSSで処理する方法です。
問題点としては、href属性がなければaタグにカーソルを合わせたときにポインターを表示しないことでした。
その解決策として、CSSでaタグをホバーしたときの動作としてポインターが表示されるようにします。
<style>
a {
cursor:pointer;
}
</style>
HTMLに上記のコードをいれるだけで、aタグのhref属性から、「javascript:void(0);」を外しても、ポインターが表示されるようになるのです。
また、そもそもクリッカブルな箇所をaタグを使わずに書くようにすることでも解決されます。
<button onClick="alert('Clicked!!');">Click!</button>
href属性がなくても、buttonタグならポインターが表示されるのです。
さらにはイベントを制御する関数で遷移せずにonclick属性を動作させることもできます。
まとめ
void(0)と書いていた歴史的な理由がありましたが、現在では使用されなくなっています。より魅力的なページ作成のためには最新のコーディングのトレンドにも精通していなければなりませんね。コーディングのトレンドに歴史があることを知ると、どのように書くべきなのかがより一層わかるようになります。
この記事のキーワードに関する勉強会・イベントを探す
TECH PLAYでは、ITエンジニア向けの勉強会・イベント情報を提供しています。
興味のある方はぜひご参加ください。
