MENU

お知らせ:2021/2/18 ツールサイト(affi-sapo-sv.com)から、開発ノートを独立させました。

 

JavaScript関数・メソッド

javascript:void(0)とは?

更新日:2021/01/27

 

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

 

<a href="javascript:void(0)" onclick="行いたい処理">〇〇を実行する</a>

 

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

 

javascript:void(0)とリンクタグ

 

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

 

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

 

リンクタグの例


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

 

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

 

リンク文字

 

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

 

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

 

javascript:void(0)の例


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

 

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

 

リンク文字

 

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

 

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

 

webページ not found

 

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

勝手にjavascript:void(0)に変わるケース

 

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

 

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

 

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

 

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

 

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

 

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

javascript:void(0)の意味

 

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

 

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

 

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

 

『javascript:』の意味

 

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

 

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

 

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

 

 

『void(0)』の意味

 

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

 

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

 

console.log( void 0 ); // 結果: undefined
console.log( void "hello" ); // 結果: undefined
console.log( void (()=>100)() ); // 結果: 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になれば、画面遷移が実行されません。

 

<a href="javascript:void(null)" onclick="alert('void(0)')">click</a>
click

 

<a href="javascript:undefined" onclick="alert('undefined')">click</a>
click

 

<a href="javascript:(()=>undefined)()" onclick="alert('(()=>undefined)()')">click</a>
click

 

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

 

<a href="javascript:0" onclick="alert('void(0)')">click</a>
click

 

<a href="javascript:'hello'" onclick="alert('undefined')">click</a>
click

 

<a href="javascript:(()=>1000)()" onclick="alert('(()=>undefined)()')">click</a>
click

 

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

 

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

 

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

 

プリミティブとプロパティの違いが判らないと意味不明な文章なので、次の記事を参考にしてみてください。
【JavaScript】 プリミティブとは?リテラルやオブジェクトとの違い

 

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

 

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

 


undefined = 1;

 

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

 

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

 

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

 

現在の仕様では、グローバルオブジェクトのundefinedプロパティの値は、変更できないようになっています。

javascript:void(0)を使用しないとどうなる?

 

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

 

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

 

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

 

href属性に『""』

 

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

 

<a  href="" onclick="alert('click!')">click</a>

 

click

 

onclick属性は、クリックしたときに実行する処理を記述します。
href属性は、基本的にURLを指定する場所で、そこに無理やりスクリプトを当てはめただけです。
スクリプトを実行したいなら、onclickを使用します。

 

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

 

ブラウザの左下

 

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

 

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

 

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

 

href属性を書かない

 

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

 

<a  onclick="alert('click!')">click</a> ←href属性を削除してみた

 

click

 

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

 

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

 

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

 

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

 

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

クリック時にjavascriptを実行させる方法

 

画面遷移を無効にする理由の一つに、要素がクリックされたら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の変更なしで動作を変えることができます。

javascript:void(0)の代替手段

 

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

 

例:

 


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

 

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

 

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

 

buttonタグの使用

 

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

 

 

<button onclick="alert('push')">ここを押すと〇〇を実行します</button>

 

 

 

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

 

spanタグの使用

 

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

 

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

 

CSS

 


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

 

html

 


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

 

aaa

 

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

 

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

 

このサイトの管理者は、ほどほどでやめられなくて、時間を無駄にしていつも後悔しています。

まとめ

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

 

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

 

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

 

記事の内容について

 

こんにちはけーちゃんです。
説明するのって難しいですね。


「なんか言ってることおかしくない?」
たぶん、こんなご意見あると思います。

裏付けを取りながら記事を作成していますが、僕の勘違いだったり、そもそも情報源の内容が間違えていたりで、正確でないことが多いと思います。

そんなときは、ご意見もらえたら嬉しいです。

ご意見はこちら。
https://note.affi-sapo-sv.com/info.php

【お願い】

お願い

■このページのURL


■このページのタイトル


■リンクタグ