Webサイトを閲覧しているとき、リンクをクリックしても何も起きなかったり、ステータスバーに「javascript:void(0)」と表示されたまま反応しなかったりすることはありませんか？
あるいは、Web制作の現場で「この書き方は古いから直して」と指摘された経験がある方もいるかもしれません。
javascript:void(0) は、かつてWeb開発で頻繁に使われていたテクニックですが、現在では「非推奨」とされるケースが増えています。セキュリティやSEO（検索エンジン最適化）、アクセシビリティの観点から、より適切な記述方法への移行が求められているからです。
この記事では、javascript:void(0) が持つ本来の意味と問題点、そして現在推奨される「解決方法（代替コード）」について、具体的なサンプルコードを交えて徹底解説します。
 執筆者：マヒロ |
|
- OS：Windows 11 / macOS Sequoia
- IDE：Visual Studio / VS Code / IntelliJ IDEA
- その他：Chrome DevTools / 各言語最新安定版
※本メディアでは、上記環境にてコードの動作と情報の正確性を検証済みです。
javascript:void(0) の正体と使われる理由
そもそも、なぜjavascript:void(0)という不思議な記述が多くのWebサイトで使われてきたのでしょうか。
その仕組みを知ることで、解決への糸口が見えてきます。
そもそも「void(0)」は何をしているのか？
JavaScriptにおける void は演算子の一つで、「何らかの式を評価するが、値は返さない（undefinedを返す）」という役割を持っています。
つまり void(0) は、「0という計算をするけれど、結果として何もしない（undefined）」を作り出すための記述です。
なぜリンク（aタグ）に使われてきたのか
HTMLの <a> タグ（リンク）は、クリックすると別のページへ移動したり、ページトップへスクロールしたりするのが基本動作です。
しかし、Webアプリなどでは「クリックしてもページ移動はせず、JavaScriptのプログラムだけを実行したい」という場面が多々あります。
そこで、href 属性に「何もしない」命令である javascript:void(0) を記述することで、リンク本来の動き（ページ遷移）を無効化し、JavaScriptを実行させるためのボタンとして利用してきたのです。
<!-- 昔の一般的な書き方 -->
<a href="javascript:void(0);" onclick="openMenu()">メニューを開く</a>href="javascript:void(0);": この記述により、リンクをクリックしてもページ遷移が発生しません。ブラウザは「何もしない」という結果を受け取るだけです。onclick="openMenu()": リンク本来の動きを止めた代わりに、ここで指定したJavaScriptの関数（メニューを開くなど）を実行します。
なぜ「javascript:void(0)」は非推奨・解決すべきなのか？
「動くならそのままでいいのでは？」と思うかもしれませんが、現在ではいくつかの明確なデメリットがあります。
SEOとアクセシビリティへの悪影響
検索エンジンのクローラーは、<a> タグを見つけると「これはどこかのページへのリンクだ」と判断して辿ろうとします。
しかし、行き先が void(0) だと、「中身のない無効なリンク」として認識され、サイトの評価を下げる要因になりかねません。
また、スクリーンリーダー（音声読み上げソフト）を使用しているユーザーにとっても、「リンク」と読み上げられるのにどこにも行けないため、混乱を招く原因となります。
CSP（セキュリティポリシー）によるブロック
最近のWebサイトでは、セキュリティ対策として CSP（Content Security Policy） を導入することが増えています。
CSPの設定によっては、HTML内に直接書かれたJavaScript（インラインスクリプト）がブロックされることがあり、javascript:void(0) が全く機能しなくなる可能性があります。
【解決策】void(0)を使わない！推奨される3つの代替パターン
では、これからのWeb制作ではどのように実装すべきなのでしょうか。
現在のスタンダードな解決方法を3つ紹介します。
buttonタグを使う（最も推奨）
ページ遷移を伴わない操作（メニューを開く、ポップアップを出すなど）は、そもそも「リンク」ではありません。
機能的なボタンには、<a> タグではなく <button> タグ を使うのが、HTMLの意味的（セマンティック）にも最も正しい方法です。
<button type="button" class="menu-btn" onclick="openMenu()">
メニューを開く
</button>
<style>
/* buttonタグの見た目をリンク風にするCSS例 */
.menu-btn {
background: none;
border: none;
color: blue;
text-decoration: underline;
cursor: pointer;
padding: 0;
}
</style>
まず、<button type="button"> でフォーム送信を行わない、汎用的なボタンであることを宣言します。
そして、CSSで background: none; border: none; などを指定すれば、見た目をテキストリンクと同じにすることができます。
この方法なら、SEO上のペナルティもなく、スクリーンリーダーでも「ボタン」として正しく認識されます。
2. href=”#” と preventDefault() を組み合わせる
どうしても <a> タグを使いたい（既存のCSSを流用したい等）場合は、href="#" を指定しつつ、JavaScriptで「ページトップへ戻る動き」を無効化します。
<a href="#" class="menu-link">メニューを開く</a>
<script>
document.querySelector('.menu-link').addEventListener('click', function(e) {
e.preventDefault(); // リンクのデフォルト動作（#への移動）を無効化
openMenu(); // 任意の処理を実行
});
</script>
コード解説
href="#": HTML上は有効なリンクとして記述します（ページトップへのリンク）。e.preventDefault(): JavaScriptのイベントリスナー内でこのメソッドを呼ぶことで、ブラウザ標準の「クリックしたらhrefへ移動する」という動作をキャンセルします。これにより、URLに#が付いたり、勝手にスクロールしたりするのを防げます。
3. CSSでカーソルを調整してdivやspanを使う
リンクでもボタンでもない、単なる「クリック可能な要素」として実装する方法です。
<span class="clickable-text" onclick="openMenu()">メニューを開く</span>
<style>
.clickable-text {
cursor: pointer; /* マウスカーソルを指の形にする */
color: blue;
text-decoration: underline;
}
</style>
コード解説
spanやdivにonclickを設定します。- そのままだとマウスカーソルが矢印のままなので、CSSで
cursor: pointer;を指定して、クリックできることをユーザーに伝えます。 - ただし、キーボード操作（Tabキーでの移動など）ができないため、アクセシビリティの観点からは
buttonタグの方が優れています。
javascript:void(0) が反応しない・効かない時の対処法
最後に、開発者ではなく「ユーザー」としてWebサイトを見ている時に、javascript:void(0) のリンクが反応せず困った場合の対処法を紹介します。
ブラウザのJavaScript無効化を確認
最も単純な原因は、ブラウザの設定でJavaScriptが「オフ」になっていることです。
ChromeやEdgeの設定メニューから「サイトの設定」→「JavaScript」を確認し、許可されているかチェックしましょう。
広告ブロッカーやセキュリティソフトの影響
ブラウザの拡張機能（アドブロックなど）や、セキュリティソフトがスクリプトの実行を遮断している場合があります。
一時的に拡張機能をオフにするか、シークレットモード（プライベートウィンドウ）でアクセスして動作するか確認してください。
JavaScriptのスキルを活かして年収を上げる方法
以上、JavaScriptのvoid(0)や、リンクが動かない時の解決法について詳しく解説してきました。
| 年収アップにこだわりたい方 （平均アップ額138万円の実績） | テックゴー |
| 未経験・経験者問わず幅広く探したい方 | ユニゾンキャリア |
| 業界に精通した担当者に相談したい方 | キッカケエージェント |
| ゲーム業界への転職を志望する方 | ファミキャリ |
| エンジニア未経験からキャリアを築く方 | イーチキャリア |
