javascript:void(0)とは？

htmlのリンクタグ（aタグ）をクリックしたとき、画面遷移をさせずにjavascriptで何らかの処理を行わせることがある。
そんな時、次のようにすると、クリックしても反応しなくなる。

ここでは、『なぜjavascript:void(0)を使用するのか』と『勝手にjavascript:void(0)に変わるケース』『リンクをクリックしたときにjavascriptを呼び出す方法』などについてお伝えします。

javascript:void(0)は、Webページの元となるhtmlのaタグまたはリンクタグと呼ばれる要素でリンク先として記述することで、リンク機能を無効にする目的で使用されます。

リンクタグは、次のようなものです。

<a href="https://affi-sapo-sv.com/">リンク文字</a>

上の例を書き込んだhtmlをブラウザが読み込むと、次のようにリンクが表示されます。

リンク文字

このリンクをクリックすると、『https://affi-sapo-sv.com/』のWebページに画面が切り替わります。

では、リンクタグに『javascript:void(0)』を使用してみます。

<a href="javascript:void(0)">リンク文字</a>

上の例を書き込んだhtmlをブラウザが読み込むと、次のようにリンクが表示されます。

リンク文字

このリンクをクリックしても何もおこりません。

『javascript:void(0)』ではなく、何か適当な文字を入力すると、次のように「ページが無い」という意味の画面が表示されます。

『javascript:void(0)』の場合は、本当に何もしていないので、上の画面が表示されないのです。

いつものWebページを見ていたら、ある日突然リンクが機能しなくなった。
こんな話を時々聞きます。

僕の記事でも時々お叱りのメールを頂きます。
そのほとんどが僕の設定ミスですが、たまに一部の読者さんにだけ症状がでていることがあります。

その原因の多くが、ブラウザの拡張機能でインストールしたアプリだったりします。
特に怪しいのが広告のブロックツールと呼ばれるもの。

このツールは、広告のリンク先をjavascript:void(0)にすることで広告への画面遷移を防いでいるものがあるようです。

しかし実際のところ、リンク先が広告かどうか正確に判断するのは非常に難しいことです。
どんなに頑張ったって、判断を間違えることがあります。
その結果何の問題もないリンクが無効にされた、という悲しい結果になってしまうのです。

もし、いつも見ているWebページのリンクが機能していないときは、拡張機能に登録してあるアプリでリンク操作していそうなものを無効にしてみてください。

ここからはプログラマ的な観点から、javascript:void(0)を見ていきます。

『javascript:void(0)』にはプログラム的に、どんな意味があるのでしょうか。

各パートに分けて解説します。

『javascript:』の意味

javascript:は、URLのhttp:やhttps:に相当します。

http:やhttps:は、インターネット上からページのデータを取得しなさいという意味を持っています。

javascript:は、その後の文字列をスクリプトコードとみなして実行しなさい、という意味があります。

『void(0)』の意味

void(0)は引数0を受け取る関数のように見えますが、voidの後の式（値）を評価してundefinedを返す単項演算子です。

次の例は、全てundefinedになります。

void(0)とvoid 0は、()があるかないかだけで同じものです。

結論

以上のことから、javascript:void(0)は次のような意味になります。

1. void(0)をスクリプトとして実行する
2. void(0)の実行結果はundefined

href属性とundefined

aタグはhref属性の評価結果がundefinedの場合、何も行わないという決まりがあります。
そのためaタグのhref属性にjavascript:void(0)を記述すると、タグがクリックされても画面遷移が実行されません。

また、その他にも結果がundefinedになれば、画面遷移が実行されません。

ちなみにundefined以外は、その値で画面が遷移します。

aタグのリンク機能を無効にするなら、href属性に『javascript:undefined』を指定するのが、意味的にも妥当な気がします。

しかし古いJavaScriptのundefinedは、次のような仕様でした。

• undefinedはグローバルオブジェクトのプロパティであり、値としてundefinedというプリミティブを持つ。
• グローバルオブジェクトのundefinedプロパティは値を変更できる

ソースコード上でundefinedと記述すると、グローバルオブジェクトのundefinedプロパティが参照されます。

ここで問題なのが、次のようなコードでundefinedの値が変更できるという点です。

undefined = 1;

しかもグローバルオブジェクトのプロパティのため、外部コードも含めて全てのコードで影響を受けます。

そのため、undefinedがundefinedとして評価されず、画面遷移がおこります。

そのため、確実にundefinedを返すvoid演算子が使用されるようになったのです。

リンクを無効にするなら他の方法がありそうです。

しかしやってみたら上手く動かないという結果が多いです。

そこで初心者がやりがちな、失敗例をお伝えします。

href属性に『""』

画面遷移したくないならhref属性の中身を空欄（""）を使用すればいい、ような気がします。
そこでやってみます。

リンクにマウスカーソルを乗せてみてください。
ブラウザの左下に、今見ているページのURLが出てきます。

これは、そのページに画面遷移するということです。

動作としては、onclickを処理（アラート表示）した後に、現在のページを再読み込みしてファーストビューが表示されます。

つまりhref属性=""は、今見ているページに画面遷移するということです。
リンク無効にはなっていませんね。

href属性を書かない

だったらhref属性がなければいい、ような気がします。

クリックすると画面遷移がおこなわれません。
リンク機能が無効になっています。

よく見ると、リンクの下線が消えています。
そしてマウスカーソルが指マークに変わってくれません。

aタグにhref属性がないと、ブラウザがリンクとして扱ってくれないからです。

aタグを使用するのは、画面遷移はおこなわないけれどクリックはしてほしい、という目的があります。
しかし下線がないため、ユーザーがリンクと判断せず、クリックをしてくれません。

リンク機能は無効になりましたが必要なものが失われているので、href属性の削除はしない方がよさそうです。

画面遷移を無効にする理由の一つに、要素がクリックされたらjavascriptを実行させたいというものがあります。

そこで、その方法を二つ挙げてみます。
なおaタグでなくても動作します。

onclick属性を使用

この記事でも例として取り上げていますが、onclick属性を記述するとjavascriptの関数を呼び出すことができます。

onclick属性を使用すると、タグと呼び出される関数の関係が明確になるので、はじめのうちはこちらを使用する人が多いと思います。
しかし悪意を持った第三者が解析しやすくなるというデメリットもあります。

また何らかの理由で処理が必要でなくなったり、呼び出す関数を変更したいときなどは、htmlの修正が必要になります。
複数のページ修正が必要なケースもあり、とても苦労する可能性があるのは、大きなデメリットです。

addEventListenerを使用

javascript上でaddEventListener()を使用して、クリック時に呼び出す関数を登録します。

window.addEventListener("DOMContentLoaded",()=> {
                const element = document.getElementsByClassName("クラス名");
                for(let i = 0; i < element.length ; i++){
                   element[i].addEventListener("click"
                                  ,function(){
                                             // 処理
                                        }
                }
            });

DOM要素が構築された後でないと要素の操作ができないので、DOMContentLoadedで待ちます。
その後、同じクラスを持つ要素に対してクリックイベントを登録していきます。

この処理は外部ファイルで保存しておき、htmlに読み込ませます。

こうすることで、htmlの変更なしで動作を変えることができます。

多くのユーザーは、リンクは他ページや他サイトへ移動と認識しています。
もしaタグで画面遷移しないなら、ユーザーがわかるように説明する必要があります。

例：

<a href="javascript:void(0)">ここをクリックすると〇〇を実行します</a>

ここをクリックすると〇〇を実行します

aタグはリンク、つまり画面遷移を目的としたものです。
そのため、javascriptのコードを実行する目的で使用するのは少しおかしいという意見があります。

buttonタグの使用

僕としては代替手段として、buttonタグを使うことをおススメします。

ここを押すと〇〇を実行します

ただしユーザーに不審がられないように、ボタンを押したら何がおこるのか詳しく説明をしておきましょう。

spanタグの使用

ボタンではなくて、どうしてもaタグの外観を使用したいなら、spanタグを使用します。

外観をaタグに合わせてセットしていきます。

<style>
    .nolink{
        color: #0066cc;
        text-decoration: underline;
        cursor: pointer;
    }
    .nolink:hover{
        left: 1px;
        position: relative;
        top: 1px;
    }
</style>

<span class="nolink" onclick="alert('aaa')">aaa</span>

aaa

既存のaタグが手の込んだスタイル設定をしていると、見た目を同じにするのが難しくなります。
意地になって頑張ってしまいがちですが、少しぐらい違っていてもユーザーの印象やサイトとしての価値は変わりません。

ほどほどにしておいて、別のことを頑張りましょう。

javascript:は、その後の文字列をスクリプトコードとみなして実行しなさい、という意味。
void(0)は何でもかんでもundefinedにする演算子。

aタグのhref属性に評価がundefinedになる式を記述すると、画面遷移しません。

しかしaタグはリンクを表すので、遷移しないのは正式な使い方ではないという意見があります。
要素がクリックされたときjavascriptで処理をおこないたいなら、aタグを使用しない方向で検討しましょう。