Webサイト制作の現場では、<a>タグのリンク先URLとして"javascript:void(0)"という記述をよく目にします。
ただ、この意味をちゃんと理解している方はそこまで多くないかもしれませんよね。
そこで本記事では、javascript:void(0)の意味と使い方、さらには最近の動向まで詳しく解説します
JavaScriptの基礎知識から、実践的なコーディングのコツまで、幅広く学べる内容となっています。
- 未経験からWebエンジニアとして転職成功（年収 30% アップ）
- 現役のフルスタックエンジニアとして活躍中
- 開発チームリーダーとして複数プロジェクトをリード
- 副業プログラミングスクール講師として数百名以上を指導してきた教育のプロ
そもそもvoid演算子とは？
voidは、JavaScriptの単項演算子の一つです。
void演算子の後に式を記述すると、その式を評価しますが、常にundefinedを返します。
つまり、式の評価結果を返さないようにするのがvoid演算子の役割だと言えます。
void(0); // undefined
void(1 + 2); // undefined
void("hello"); // undefinedリンクを無効化するjavascript:void(0)の使い方
<a>タグは本来、別のページへのリンクを作成するために使用されます。
しかし、JavaScriptでクリックイベントを処理する際、ページ遷移をさせたくない場合があります。
そんな時は、<a>タグのhref属性にjavascript:void(0)を指定すると便利です。
<a href="javascript:void(0)" onclick="alert('リンクがクリックされました！');">クリックしてください</a>上記のコードでは、javascript:void(0)によってリンクの遷移先が無効化され、代わりにonclickに指定したJavaScriptが実行されます。
リンクをクリックしてもページ遷移は発生せず、アラートが表示されるだけです。
javascript:void(0)を使うメリットとデメリット
メリット
- シンプルな記述でリンクを無効化できる
- クリック可能な要素であることが一目でわかる（カーソルがポインターになる）
- onclick属性に指定したJavaScriptを実行できる
デメリット
- リンク先URLがjavascript:void(0)と表示されるため、ユーザーに不安を与える可能性がある
- アクセシビリティの観点から好ましくない（キーボード操作でのフォーカスが当たらない）
- SEOにも悪影響がある（クローラーがJavaScriptを読み込まない場合がある）
javascript:void(0)の代替手段
上記のデメリットを踏まえ、最近ではよりモダンな方法が推奨されています。いくつか代表的な例を紹介しましょう。
1. button要素を使う
リンクっぽい見た目だけど遷移はさせたくない、というケースでは<button>要素を使うのがベストです。
button>ならCSSでスタイリングすれば、<a>と同じような見た目にできますし、アクセシビリティの点でも問題ありません。
<button onclick="alert('ボタンがクリックされました！');">クリックしてください</button>2. event.preventDefault()を使う
どうしても<a>タグを使いたい場合は、href属性を指定せずにonclickでイベントハンドラを設定します。
そのイベントハンドラ内でevent.preventDefault()を呼び出せば、デフォルトのリンク動作をキャンセルできます。
<a onclick="event.preventDefault(); alert('リンクがクリックされました！');">クリックしてください</a>まとめ
javascript:void(0)は一見便利な記述方法ですが、最近ではあまり推奨されていません。
<button>要素を使ったり、event.preventDefault()を呼び出すことで、よりスマートにリンクを無効化することができます。
単にJavaScriptが実行できればOKというわけではなく、ユーザー体験やアクセシビリティ、SEOなども考慮に入れる必要があります。
少しでも良いコードを書けるよう、これからも技術の変化にアンテナを張っておきましょう。
JavaScript を挫折せず学習するならプログラミングスクールがおすすめ！
この記事を読んでくれた方は、JavaScript を学習中、もしくは使い始めている人かと思います。
ただ、JavaScript は「知らないと困る知識・コツ」が多く、私も最初は苦労しました…。
そのため確実に就職・転職を目指すのならばプログラミングスクールでの学習を検討してみませんか？
JavaScript はフロントエンドのすべてに通じますので、体系的に学んでおくと給与アップにもつながりますよ。
おすすめのプログラミングスクールについては、別の記事でまとめていますので是非ご覧ください。
現役のエンジニア兼プログラミングスクール講師として、自信を持っておすすめできるスクールだけを紹介しています！
