format_list_bulleted
【JavaScript】void演算子について解説
最終更新日時:2020-05-03 12:48:44



あまり見かけないですがaタグのhref属性値にvoidが使われることがあります.

本記事ではJavaScriptのvoid演算子について解説します。

void演算子

void演算子は次のようにどの値を用いてもundefinedを返します。

console.log(void(0))  //undefined
console.log(void(1000)) //undefined
console.log(void 0) //undefined
console.log(void 1) //undefined
console.log(void "a") //undefined

void演算子は何に利用されるのか

aタグを用いても画面を読み込むことなく、onClickなどの関数を動作するためのトリガーにしたいとき次のコードのようにvoid演算子を用いてhref属性を”undefined”にすることことで、画面を読み込むことなく実行することができます。

(index.html)

<html>
 <head>
   <meta http-equiv="content-type" charset="utf-8">
 </head>
 <body>
   <h2>void演算子</h2>
   <div id = "app" onClick="Click()">読み込まれるか判定</div>
   <a href="javascript:void(0);" onClick="Click()">hrefにvoid(0)</a><hr/>
   <a href="" onClick="Click()">hrefに何も記入なし</a><hr/>
   <script src="./test.js" ></script>
 </body>
</html>

(test.js)

var app = document.getElementById("app")
window.onload = function() {
 app.innerHTML= "Windowが読み込まれてしましました"
}
function Click(){
 app.innerHTML= "Windowが読み込まれずにクリックできました"
}

ですが別にvoid演算子を用いなくても次のコードのようにCSSなどを用いれば同じ動作を実装できます。(JavaScriptのファイルは上記と同じ)

(index.html)

<html>
 <head>
   <meta http-equiv="content-type" charset="utf-8">
   <style>
     #nohref {
         cursor:pointer;
         text-decoration: underline;
         color: blue;
     }
     #nohref:active{color:red;} 
     </style>
 </head>
 <body>
   <h2>void演算子なし</h2>
   <div id = "app" onClick="Click()">読み込まれるか判定</div>
   <a href="javascript:void(0);" onClick="Click()">hrefにvoid(0)</a><hr/>
   <a  id = "nohref"onClick="Click()">hrefも記入されていない(CSSver)</a><hr/>
   <a href="" onClick="Click()">hrefに何も記入なし</a><hr/>
   <script src="./test.js" ></script>
 </body>
</html>

    

この記事のまとめ

本記事ではJavascriptのvoid演算子について説明しました!最後に記事の要点をまとめてみましょう。

  • void演算子はundefinedを返す
  • href属性にvoid演算子を用いることでaタグを用いても遷移することなく処理を実行できる
  • でも実際にはCSSでも実行できる

JavaSscriptを用いて開発してみましょう!