【JavaScript】javascript:void(0)とは？――void演算子の意味・undefinedとの違い・使い所/やめ所・アクセシビリティ/SEO/セキュリティまで完全整理

「リンクをクリックしてもページ遷移させたくない」

「ブックマークレットから副作用だけ実行したい」――

そんな場面でよく見かけるのが javascript:void(0) です。

この記事では、void演算子の正体、void(0)を使う理由と限界、より良い代替実装（<button>、event.preventDefault() など）まで深掘りします。

少しでもご参考になれば幸いです！

結論（最短サマリ）

• voidは「評価しても値を返さない」 JavaScript の単項演算子。void(0) は「0を評価するが undefined を返す」という明示表現。
• javascript: URL スキームの文脈で javascript:void(0) と書くと、式は実行するがナビゲーション結果は undefined → 画面遷移しない。
• ただし、**アクセシビリティ/SEO/CSP（Content Security Policy）**の観点から、モダン実務では非推奨。
  • 推奨代替：
    • UIなら <button type="button"> を使い、クリックで JS 実行。
    • 既存リンクなら href は遷移先（または #）にし、ハンドラで event.preventDefault()。
• void 0 と undefined の違い：今はほぼ等価（undefined は読み取り専用）が、**歴史的互換のため「常に undefined を得る安全な書き方」**として void 0 を使う文化が残った。

javascript:void(0)とは？（メカニズムを分解）

• javascript: URL スキーム
  ブラウザはハイパーリンクの href に javascript:式 があると、その式を評価し、評価値をナビゲーション結果として扱います。
• void(0) の効果
  void はどんな式でも評価値を捨てて undefined を返すため、ページ遷移（ナビゲーション）を発生させない。
  
  例）<a href="javascript:void(0)" onclick="doSomething()">…</a>
  → クリックで onclick は走るが、リンク先へは遷移しない。

void 演算子の仕様と void 0／undefined の関係

• void：ECMAScript に規定された単項演算子。書式は void expression または void(expression)。
• void 0 は慣用的に使われる「確実な undefined」。
  • 歴史的には undefined が再代入され得た（古い JS）ため、**「環境に依存せず undefined を得る」**テクとして void 0 が広まった。
  • 現行仕様・モダン環境では undefined は読み取り専用で、実用上は undefined と同義に扱える。

どんな時に使われてきたか（レガシー用途）

1. リンクで遷移させず副作用だけ実行したいとき
2. ブックマークレット：アドレスバーやお気に入りから JS を実行するとき
3. 古いUIフレームワークの習慣でとりあえず href を埋めたいとき

いま選ぶべき代替（推奨パターン）

アクセシビリティ・SEO・CSP適合のため、以下を優先しましょう。

• UI要素が「ボタン」なら <button> を使う<button type="button" id="do">実行</button> // JS document.getElementById('do').addEventListener('click', doSomething)
  • スクリーンリーダーやキーボード操作（Enter/Space）に自然対応。
  • フォーカス管理やロールが適切で、リンク乱用より望ましい。
• 既存の <a> を使うなら preventDefault()<a href="#" id="action">実行</a> // JS document.getElementById('action').addEventListener('click', e => { e.preventDefault(); // 遷移を抑止 doSomething(); })
  • href="#" は先頭にスクロールする副作用があるため、必要なら e.preventDefault() を必ず。
  • あるいは href を実URLにし、JS 不可時は通常遷移にフォールバックする設計も◎。
• CSP を意識する
  • 厳格なサイトでは javascript: URL やインライン JS を禁止していることが多い。
  • void(0) 前提の実装は CSP 違反になりやすい。

よくある落とし穴

• アクセシビリティ：<a href="javascript:void(0)"> は実体がボタンなのにリンクを装うため、スクリーンリーダー・キーボード操作の期待とずれる。
• SEO：クローラはリンク先を辿らない（javascript: は URL ではあるが、ページ発見に寄与しない）。
• 履歴・分析：ナビゲーションが起きないため、ページビューの計測意図とズレることがある。
• メンテ性：インライン onclick や javascript: は分離原則に反し、CSP 強化で壊れやすい。

Q&A　よくある質問

スクリプトで void とは何ですか？

任意の式を評価した上で、評価結果を必ず捨てて undefined を返す単項演算子です。

例：void 0、void(document.querySelector('#x')) など。

副作用だけ起こして値は使わないときに使えます。

javascript:void(0) は何をしているの？

javascript: URL として式を評価するが、void(0) により評価値は undefined。

ナビゲーション結果が空（undefined）なので遷移しない、というトリックです。

void 0 と undefined は同じ？

現行環境では実質同じです。

歴史的互換のために「必ず undefined」を得るイディオムとして void 0 が残っています。

href="javascript:void(0)" は今も使っていい？

非推奨です。

CSP・アクセシビリティ・SEOの観点で不利。

代替は <button> + JS、または <a> + event.preventDefault()。

return false と event.preventDefault() の違いは？

• event.preventDefault()：既定動作の抑止のみ。
• return false（DOM0 の onclick など）：既定動作の抑止＋イベント伝播停止を同時に起こす実装も多く、読み手に誤解を招く。
  モダンは preventDefault() と stopPropagation() を明示が推奨。

ブックマークレットで void(0) は必要？

遷移させたくないなら有効です（javascript:(function(){ …; return void(0); })() など）。

ただしブックマークレット自体が CSP や拡張機能の制約で動かないサイトも増えています。

JavaScript が無効なブラウザの割合は？

単一の公式な“世界平均”はありません。

国・デバイス・アクセス層で差が出ますし、測定方法（noscript ビーコン等）でも変動します。

実務では自サイトで計測（<noscript> ピクセル、機能検出）し、プログレッシブエンハンスメントで必要最小限のフォールバックを用意するのが現実的です。

実務チェックリスト

• UIはリンクかボタンかをまず判定 → ボタンなら <button>
• 既存リンクで遷移を止めたい：preventDefault() を明示
• CSP（script-src, unsafe-inline, javascript:）に適合
• キーボード操作とロール（role="button" の乱用は避ける）
• JS 不可時のフォールバックと計測の整合を確認

参考リンク

• MDN Web Docs: void 演算子
• MDN Web Docs: javascript: URL
• MDN Web Docs: Event.preventDefault()
• WHATWG HTML Standard: Hyperlink auditing & navigation（仕様原文）
• WAI-ARIA Authoring Practices: Button Pattern