【JavaScript】javascript void 0とは？使い方や注意点を初心者向けにわかりやすく解説

プログラミング言語•2025/2/15

はじめに

JavaScriptで開発を進めていると、javascript void 0 という書き方を見かけることがあるかもしれません。これは普段の開発ではあまり使わない印象があるものの、HTMLのリンクやクリックイベントと組み合わせて用いられるケースがあります。

一見すると難しそうな表記ですが、実際にはシンプルな意味を持っています。初心者の方でも理解できるように、JavaScriptの void 演算子がどのような仕組みで動き、なぜ void 0 を使うのかを丁寧に解説していきます。

本記事では、実務でも役立つ具体的な例とともに、注意点やアンチパターンも紹介します。まずは この記事を読むと、何がわかるのか を確認してみましょう。

この記事を読むとわかること

javascript void 0 がどのような役割を持つのか
void 演算子と undefined の関係
HTMLのリンクやクリックイベントでの使い方
実際に使う場合に気をつけたいポイントとアンチパターン

以上を踏まえて、初心者でもわかりやすい言葉で解説していきます。

JavaScriptにおけるvoidとは何か

JavaScriptにはいろいろな演算子がありますが、その中でもあまり頻繁に見かけないものとして void 演算子があります。これは「何も返さない」もしくは「評価結果を無効化する」という役割を持つ特殊な仕組みです。

void演算子の概念

void は、後に続く式の結果を明示的に無効化し、常に undefined を返します。たとえば void (expression) と書くと、その expression は評価されるものの、最終的な返り値は undefined になります。


console.log(void (2 + 3)); // 結果は undefined

このように 2 + 3 は計算されるものの、その結果を返さずに undefined が返ってきます。では、なぜわざわざ void を使うのでしょうか。

undefinedとの関係

JavaScriptにおいて undefined は、変数がまだ値を持たない状態や、関数で何も返していないときなどに得られる値です。一方で void は、意図的 に undefined を返すための仕組みといえます。

undefined という文字列を直接使うこともできますが、意図や可読性の面で void 0 の形を使うことが昔から存在してきました。古い文法との互換性や、何か明示的に「値を返さない」ことを示すためなどの理由が挙げられます。

ただし、現代のJavaScript開発では、あえて void を使わなくても return undefined; のように書くほうがわかりやすい場合もあります。それでも、過去のコードやレガシーなスクリプトには void 0 が残っているケースがあり、これを読む際に背景知識として押さえておくと便利です。

'javascript: void(0)' が使われるシーン

javascript: void(0) という形をもっともよく見かけるのは、HTMLのリンク要素 (<a>) においてです。 href="javascript: void(0)" と書くことで、リンクをクリックしたときに「何も起こさない」動作を実現するケースが典型例です。

リンクにおける役割

HTMLの <a> タグに href 属性を指定すると、通常はリンク先に移動します。しかし、メニューアイテムなどでリンク先が実装されていない段階や、リンク自体を無効化したいときに href="#" と書くこともありますよね。

この # を使うと、ページの先頭に飛んだり、URLの末尾に # がついてしまうことがあります。そこで代わりに href="javascript:void(0)" とすると、クリック時にページの遷移が行われず、その後の処理も行われないため、「何も起きない」リンクにできます。


<a href="javascript:void(0)">クリックしてもページ遷移しないリンク</a>

この仕組みを利用して、JavaScriptで動的に機能を追加する前段階として、リンクのデフォルト挙動を抑制することがあるのです。

クリックイベントとの組み合わせ

「何もしない」という挙動は、クリックイベントと組み合わせるケースで応用されることがあります。リンクやボタンに対して onclick 属性を付け、JavaScriptコードを発火させることがありますが、リンク先に移動してほしくないときに javascript:void(0) を活用することがあるのです。


<a href="javascript:void(0)" onclick="alert('クリックされました');">
  通知を表示するだけのリンク
</a>

上記の例では、リンクをクリックしても別のページには飛ばず、代わりに onclick 内のアラートが実行されます。このように、UI上ではリンクに見えるものの、実際には「単純なイベントトリガー」でしかないという使い方ができるわけです。

実務での具体的な活用例

ここからは、実務における活用例を少し掘り下げてみましょう。といっても、近年は preventDefault() や event.stopPropagation() を使ってリンクの遷移を制御する方法が主流になりつつあります。

しかし、まだまだ既存の大規模プロジェクトなどでは javascript:void(0) が使われていることもあります。そうしたコードをメンテナンスするとき、「なぜこう書いてあるのか？」を理解しておくとスムーズです。

ユーザー操作を無効化するケース

ユーザーがクリックできる見た目の要素を用意しながらも、クリックしてもページ遷移や画面変化はしないという場面があります。たとえば「実装予定のメニューだけ先にデザイン上配置しておき、機能は後日追加する」ような場合です。


<li>
  <a href="javascript:void(0)">
    機能未実装メニュー
  </a>
</li>

実装がまだでもUIには出しておきたいときや、デザイン段階でリンク先が決まっていないときに、あえてこう書いておくことがあります。あるいはポップアップを表示するときに、クリックで画面遷移が起こらないようにする手段としても利用されます。

単純なテストやデバッグへの応用

JavaScriptのコードを試す際に、スニペット的に短いHTMLを書いて、その中でイベントの挙動を確認したいときがあります。そういったとき、リンク先が存在しないのにリンクタグを使う場合には href="javascript:void(0)" と書くと、見た目のリンクは有効だが実際の遷移はしないという状態を手軽に再現できます。


<a href="javascript:void(0)" onclick="console.log('クリックしました');">
  ログを確認するためのテストリンク
</a>

機能検証の段階で素早くUI要素を配置したい場面でも、void(0) はシンプルで便利です。ただし、これを本番環境に多用してしまうと、コードの可読性や保守性に悪影響を与える可能性があります。

注意すべきポイント

javascript:void(0) は確かに手軽ですが、いくつかのデメリットも存在します。実務で大規模なコードを扱う場合、後々の保守や変更を踏まえると、別の方法を検討したほうがいいケースも少なくありません。

代替手段との比較

近年のフロントエンド開発では、リンクの遷移を制御したい場合に JavaScriptのイベント制御 を使うことが多いです。具体的には以下のような方法が一般的です。


<a href="#" onclick="event.preventDefault(); doSomething();">
  ページ遷移を防ぎつつ何かの処理を実行
</a>

また、ReactやVue.jsなどのSPAフレームワークを使っている場合は、ルーターやコンポーネントで遷移を管理することが多く、javascript:void(0) を使う場面はほぼありません。要するに、用途ごとに適切な方法を選ぶ ほうが、コードの意図がはっきり伝わりやすいということです。

可読性への影響

javascript:void(0) を見慣れていない初心者にとっては、「何をしているのか」直感的にわかりにくいかもしれません。たとえば event.preventDefault() は「デフォルトの挙動を防止するのだな」という意図が明確に伝わります。

一方で javascript:void(0) は「何もしないようにしている」ことを文法的に示しているだけで、実際の処理内容が隠れてしまう面があります。そのため、チームで開発を行う場合や、将来的に他の人がコードを読む可能性がある場合は、もう少しわかりやすい表現を選ぶほうが良いでしょう。

コード全体の可読性やメンテナンス性を高めるためには、機能を分かりやすく記述することが大切です。

よくある誤解とアンチパターン

javascript:void(0) は確かに便利ですが、何かにつけてこれを使ってしまうとコードが混乱してしまうことがあります。ここでは、ありがちな誤解やアンチパターンをいくつか取り上げます。

不要な場面での使用

ページ遷移が不要な場合でも、そもそもリンクを使わない という選択肢を考慮していないケースがあります。ボタンとして実装したほうが自然な場面でも、見た目をリンクに寄せたいがために <a href="javascript:void(0)"> と書いてしまうことがあります。

しかし、実際の意味合いとしてはリンクではないのに <a> を使うのは、HTMLの意味論(セマンティクス)的にミスマッチです。検索エンジンのクローラーやスクリーンリーダー、あるいは自動テストなどに影響が出ることもあるので注意が必要です。

セキュリティ上のリスクが発生するケース

かつては、javascript: スキームを使ってリンク先に任意のスクリプトを埋め込むことで、意図しないスクリプトが走るリスクが指摘されることもありました。たとえばユーザーが入力できるフォームに、javascript:... のコードを埋め込んでしまうと、XSS（クロスサイトスクリプティング）の温床になることがあります。

もちろん、javascript:void(0) 自体が危険というよりは、javascript: スキームの扱いを誤ると悪用されやすい という面に注意が必要です。もしサーバーサイドでリンク先のURLを動的に生成しているなら、入力値をきちんとバリデーションするなどの対策を講じましょう。

意図しないスクリプトの挿入を防ぐためにも、ユーザー入力をもとにURLを生成するときはセキュリティ面を意識しましょう。

まとめ

ここまで、javascript void 0 という書き方がなぜ存在し、どんな場面で使われるのかを解説してきました。ポイントをおさらいすると、次のようになります。

void 演算子は、後に続く式の評価結果を無視して undefined を返す
javascript:void(0) はHTMLリンクの挙動を無効化するのによく使われる
ただし、可読性や保守性を考慮すると、event.preventDefault() など代替策を使う場面が多い
HTML上でリンクを無効化する必要がある場合でも、ボタンなど別の要素を活用するのも手段の一つ
セキュリティ的には、javascript: スキーム全般の扱いに注意が必要

初心者の方からすると、void(0) は馴染みがない構文かもしれません。しかし、過去のレガシーコードや特殊な状況ではいまでも残っていることがあります。そのため、実務で遭遇した際に混乱しないためにも、本記事の内容を参考にしていただけると幸いです。