JavaScriptのvoid(0)の使い方を現役エンジニアが解説【初心者向け】

初心者向けにJavaScriptのvoid(0)の使い方について解説しています。void演算子の役割、よく使用されるaタグの画面遷移の無効化の例を説明します。使用時の注意点も含めて覚えておきましょう。

TechAcademyマガジンはオンラインのプログラミングスクールTechAcademy [テックアカデミー]が運営する教育×テクノロジーのWebメディアです。初心者でもすぐ勉強できる記事が2,000以上あります。

JavaScriptのvoid(0)の使い方について、TechAcademyのメンター(現役エンジニア)が実際のコードを使用して初心者向けに解説します。

そもそもJavaScriptについてよく分からないという方は、JavaScriptとは何なのかについて解説した記事を読むとさらに理解が深まります。

 

なお本記事は、TechAcademyのオンラインブートキャンプJavaScript/jQuery講座の内容をもとにしています。

 

田島悠介

今回は、JavaScriptに関する内容だね!

大石ゆかり

どういう内容でしょうか?

田島悠介

void(0)の使い方について詳しく説明していくね!

大石ゆかり

お願いします!

 

void(0) の意味は?

void演算子は、どんな値を入れても「undefined未定義であることを示す値)」で返してくれる演算子です。ですので、void(0)でもvoid(123)でもvoid(”ABC”)でも、結果はすべて「undefined」で返ってきます。慣例的にvoid(0)が使われるようになりました。

そしてどんな時に利用するかと言うと、動作を無効化をしたい時に利用します。一般的にはaタグリンクの画面遷移を無効化したい時に利用されてきました。

 

画面遷移とvoid(0) の関係

よく使われるのは、「aタグを利用してリンクを意識させたい(マウスを上に持っていくとクリック可能だとわかる)けど、動作はJavaScript側のonclickで制御したい」といった時に利用されます。

<a href=“javascript:void(0)” onclick=“window.open(‘https://www.google.com/?hl=ja)”>URLを開く</a>

aタグは、”href”に値を入れるとテキスト上にマウスがある時にポンターが変わるのですが、クリックすると”href”の内容をリンク先と認識して画面遷移してしまいます。しかし、undefinedを指定するとリンク先に飛ばない仕様となっています。そこで、「void(0)」を利用しundefinedを指定するようにしています。

最近は、この書き方はあまり推奨されていません。テキスト上にマウスがある時にポンターを変えたければ、CSSのcursorを利用すればいいからです。また、古いブラウザーなどでは利用できない場合もありますので注意して下さい。

 

[PR] JavaScript・jQueryで挫折しない学習方法を動画で公開中

監修してくれたメンター

小宮山晃史(こみやまこうじ)

現在はOracle系システムの導入コンサルに勤め、仕事でコーディングをする機会は少なくなくなっているが、ライフワークで数多くの言語を勉強中。

iphoneのアプリ開発やWEBサーバの構築など幅広く挑戦しています。

 

大石ゆかり

内容分かりやすくて良かったです!

田島悠介

ゆかりちゃんも分からないことがあったら質問してね!

大石ゆかり

分かりました。ありがとうございます!

TechAcademyでは、初心者でも最短4週間でJavaScript・jQueryを使ったWebサービス公開を習得できるオンラインブートキャンプを開催しています。

また、現役エンジニアから学べる無料体験も実施しているので、ぜひ参加してみてください。