【JavaScript】javascript voidとは？初心者向けにわかりやすく解説

フロントエンド開発•2025/2/15

はじめに

JavaScriptで開発をしていると、javascript:void(0) と書かれたリンクやコードを見かけることがあるかもしれません。しかし、初めて目にすると「これは何のために使うのだろう？」と戸惑うのではないでしょうか。

javascript:void(0) は、JavaScriptにおいて「値を返さない」「何も処理を行わない」といったニュアンスで使われる記述です。ただ、その役割や使いどころをきちんと理解しないまま使ってしまうと、意図せぬ動作や混乱を招く可能性があります。

この記事では、javascript:void(0) の概要や具体的な使用例を紹介しながら、なぜこの書き方が存在するのかを丁寧に解説します。クリックイベントの抑制やリンクとしての挙動を変えたい場合など、実務でどのように役立つかにも触れていきましょう。

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

javascript voidの基本概念
実務での具体的な活用シーンとリンクとの関連
return falseや他の記述方法との違い
セキュリティ観点からの注意点
コード例を通じた実践的な活用イメージ

javascript voidの概要

JavaScriptには、式（expression）を評価した結果が返ってくるという仕組みがあります。一方、void は「式の評価結果を返さずに終わる」ようにする演算子のような役割を持っています。

たとえば、void(0) と書いた場合は、「0という式を評価した結果を返さない」ということになります。よく見る javascript:void(0) は、HTMLのリンク要素（<a>タグ）と組み合わせて使われることが多いです。

特に、<a href="javascript:void(0)"> のように書くと、リンクをクリックしてもページ遷移を発生させずに、純粋にクリックイベントだけを扱いたい場合に用いられます。こうすることで、不要なページリロードを回避できるため、インタラクションが必要でも画面遷移させたくないシーンで役立ちます。

基本的に void(0) の部分には、void(anyExpression) の形で任意の式を入れることもできます。しかし、慣習的に void(0) が最もよく使われる書き方になっています。ここでは初心者の方でも理解しやすいよう、void(0) をメインに例示していきます。

基本的な使い方

<a href="javascript:void(0)">クリックしてもページ遷移しないリンク</a> と書くと、クリックしても画面の移動が起きません。実際にはJavaScriptとして void(0) が評価されるのですが、返り値がないため、リンク先のロードは行われないのです。

リンクにどんな役割を持たせたいかはケースバイケースですが、ページの一部だけを動的に変更したいときなどに使われることがあります。ただし、最近ではJavaScriptのイベントリスナーを使って、リンク自体ではなくイベント側で制御することも増えています。

どうしてjavascript voidを使うのか？

最初に思う疑問は、「単にイベントを設定すればいいのに、なぜ javascript:void(0) を使う必要があるの？」という点かもしれません。これは歴史的・慣習的な理由と、リンクそのものの挙動を制御したいという意図が複雑に絡み合った結果でもあります。

例えば、<a href="#"> のように書いてしまうと、クリック時にページの最上部にスクロールしてしまう動作が起きることがあります。それを回避する目的で javascript:void(0) を使うというケースが一つの例として挙げられます。また、<a href="javascript:;"> という書き方も見かけるかもしれませんが、結果的にやりたいことが同じであれば void(0) を使った方がより「何も返さない」意図がはっきりするとも言えます。

クリックイベントとの関連

javascript:void(0) は、リンクをクリックしたときにページ遷移が行われないようにする記述としてよく使われます。これと組み合わせて onclick 属性を指定すれば、リンクのクリックでJavaScriptの処理だけを実行させることが可能です。

また、ReactやVueといったJavaScriptフレームワークでは、そもそも <a> タグを使わず、専用のコンポーネントを利用することが多いです。しかし、純粋なHTMLとJavaScriptだけでインタラクティブな要素を作る場合は、javascript:void(0) は今でも一定の存在意義を持っています。

JavaScriptリンクの書き方

リンクをクリックした瞬間にJavaScriptコードを発火させるための書き方のひとつに、以下のような形が挙げられます。


<a href="javascript:void(0)" onclick="alert('リンクがクリックされました')">
  アラートを表示する
</a>

この場合、クリックするとアラートメッセージが表示されますが、ページ遷移は起きません。シンプルな実験的コードとしてわかりやすい例です。

JavaScript無効化とjavascript void

ユーザーのブラウザでJavaScriptが無効になっている場合、このような書き方をしてもリンクとしての動きがどうなるかは環境依存です。クリック時に何も起きない、あるいはリンク先が存在しないために単なる無効リンクのように扱われる可能性があります。実務では、JavaScriptが無効の環境をどの程度考慮するかはプロジェクトによって異なるでしょう。

実務での活用シーン

実際の開発現場では、javascript:void(0) をどう使うかが気になるところだと思います。あらためて整理すると、主な活用シーンは「ページ遷移を発生させず、特定のJavaScript処理だけを実行したい」という状況に集約されます。

ページ遷移を抑制したいとき

例えば、フォームをモーダルダイアログで開きたいときに、リンクをクリックしてページ全体を切り替えるのではなく、そのままモーダルを表示するだけに留めたいことがあります。このような場合、<a href="javascript:void(0)" onclick="showModal()">モーダル表示</a> のようにすれば、ユーザーの操作とJavaScriptの動きを紐付けられます。

また、メニュー要素をクリックしてサブメニューをドロップダウン表示させたいケースでも、ページ遷移が不要なら javascript:void(0) で対応できます。最近ではメニューを含め、ほぼすべての操作をイベントリスナーと組み合わせて扱うため、リンクやボタンの形状によっては preventDefault() を使ったり、button 要素の使用を検討したりすることもあります。

SPAやAjaxの流れで

シングルページアプリケーション（SPA）やAjaxを活用しているサイトの場合、部分的な更新だけで画面を切り替えることが多くなります。そうしたとき、リンク要素を使ってユーザーにクリック操作を促しつつ、ページは全く移動させたくないという場面で javascript:void(0) が利用されます。

とくに、ページ全体でAjaxを活用している場合は、リロードを伴わない更新がメインとなります。そのため、リンクのクリックもJavaScriptのトリガーとしての役割のみを持つことが多いのです。その場合は href 属性で無理にパスを指定せず、javascript:void(0) を設定しつつ、onclick などで処理を定義するのが一つのやり方になっています。

javascript void(0)とエラーハンドリング

void 演算子は何も返さないという特徴があるため、もしクリックイベント内でエラーが起きても、その影響がリンク遷移にまで波及することはありません。ただし、JavaScript内部で起きたエラーが何も表示されないというわけではなく、コンソール上には表示されることが多いです。

クリックされた時点で実行されるコードがある程度複雑であれば、エラーをハンドリングする仕組み（try...catch など）をきちんと組み込む必要があります。 javascript:void(0) はあくまで「戻り値を返さない」「ページ遷移を発生させない」という仕組みなので、エラーハンドリング自体の責務は別途考慮する必要があるわけです。

javascript voidとreturn falseの違い

似たような用途で return false; を使うケースがあります。 return false; はイベントハンドラの中で呼び出すと、そのイベントをキャンセルしてデフォルトの動作を止める効果があります。

例えば、<a href="#" onclick="doSomething(); return false;">クリック</a> のように書くと、doSomething() が呼び出された後に return false; によりリンクのデフォルト動作（ページ遷移）が抑止されます。一方、javascript:void(0) は単に「リンク先はなし」と宣言しているに過ぎません。「戻り値が存在しない状態」を作っているのが void(0)、イベントをキャンセルする役割を担っているのが return false; という違いがあります。

Reactなどのフレームワークでイベントを扱う際は、preventDefault() を呼び出してページ遷移を抑止することが一般的です。しかし、素のHTMLとJavaScriptだけで対応する場合、javascript:void(0) と onclick="return false;" を組み合わせて使うスタイルも昔から存在します。

return false; は「イベントをキャンセルする」という明確な意図を持ちます。
一方で javascript:void(0) は「何も返さない」という役割のため、ページ自体の移動先を空にしているというイメージです。

セキュリティ面への考慮

リンク要素の中に JavaScript コードを直接書く方法は、セキュリティ的に懸念が生じる場合があります。特に、外部から文字列を注入されてしまうリスク（クロスサイトスクリプティングなど）が高まることがあるため、プロジェクトによっては避ける方針を取ることもあります。

void(0)とセキュアなコーディング

基本的には、HTML内に直接 href="javascript:void(0)" と書く程度で大きな問題が発生するケースは多くありません。ただし、もしここに複雑なスクリプトをベタ書きしている場合や、外部から入力された文字列が混ざるような実装をすると、思わぬリスクを引き起こす可能性があります。

大規模なアプリケーションであれば、イベントリスナーを使ってJavaScriptを外部ファイルに切り出す手法が推奨されるでしょう。それによって、HTMLテンプレート自体へのスクリプト埋め込みを減らせるため、XSS対策の一環としてセキュリティを高められます。

javascript voidの使用例

ここで簡単な例をいくつか紹介してみます。初心者の方でも試しやすい形にしましたが、実際にはイベントリスナーやフレームワークでの実装を検討することも多い点は意識しておきましょう。

aタグでの使用例


<a href="javascript:void(0)" onclick="console.log('リンクがクリックされました')">
  クリックテスト
</a>

クリックするとコンソールにメッセージを出力しつつ、ページの移動は起こりません。クリックイベントの中で return false; などを使わなくても、リンク本来の遷移が抑制されます。

onclickイベントでの使用例


<a href="javascript:void(0)" onclick="changeColor()">
  色を変える
</a>

<script>
  function changeColor() {
    document.body.style.backgroundColor = "lightblue";
  }
</script>

このように、クリックするたびに背景色を変更するという単純なスクリプトでも、ページ遷移は行われません。ユーザー操作をトリガーにして画面を部分的に更新するアイデアとしてはわかりやすいでしょう。

注意点とベストプラクティス

javascript:void(0) を使う際には、次のようなポイントを意識するとよいでしょう。

不必要なscriptプロトコルの使用を避ける

HTML内にJavaScriptコードを直書きするのはなるべく避け、外部ファイルやイベントリスナーに切り分けると見通しがよくなります。

ボタン要素との使い分け

そもそも「リンク」ではなく「ボタン」として表現したほうが自然な場面もあります。
例: button 要素を使ってクリックイベントを設定する。

アクセシビリティへの配慮

クリックのみを想定すると、キーボード操作をするユーザーが利用しにくくなる可能性があります。
href="#" と javascript:void(0) のどちらが良いかなども、ユーザー体験面から検討する必要があります。

意図しない動作の把握

リンクのクリックによるスクロールのリセットや、既定のスタイリングをどう扱うかを明確にしておきましょう。
javascript:void(0) を使うことで回避したい挙動と、そうでない挙動を混同しないようにすることが大事です。

よくある疑問と回答

ここでは、初心者の方が気になりやすい疑問をいくつか紹介します。

ブラウザ互換性は？

void 演算子自体は、古くからJavaScriptの仕様に存在しているため、主要なブラウザで互換性の問題が起こることはほぼありません。 javascript: スキームに関しても同様で、現行の主要ブラウザであれば問題なく認識されます。

HTML標準との関係

HTML仕様からみても、「リンク先にJavaScriptを直書きする」ことは必ずしも推奨されているわけではありません。実装上は動作しますが、構造と振る舞いを分離して実装する手法が推奨されるという流れが主流になりつつあります。そのため、プロジェクトの規模が大きい場合ほど、イベントリスナーを用いた実装にシフトしていく傾向があります。

javascript:void(0) は悪い書き方というわけではありませんが、大規模なコードベースで頻用すると可読性を下げるリスクがあります。
また、コードレビューの際に意図が伝わりにくくなる場合もあるため、チーム内でのルールを決めて使うとよいでしょう。

イベントリスナーと組み合わせる方法

HTMLをすっきりさせたい場合、href を単に javascript:void(0) としておき、メインの処理はJavaScript側でまとめるのも一案です。以下は、最低限のサンプルコードです。


<!-- HTML -->
<a id="sampleLink" href="javascript:void(0)">実行する</a>

<script>
  // JavaScript
  const link = document.getElementById("sampleLink");
  link.addEventListener("click", function(event) {
    console.log("リンクがクリックされました");
    // デフォルトの動作（ページ移動）がないので、ここで追加の処理が可能
  });
</script>

こうすることで、HTMLとJavaScriptの責務を分けやすくなります。 HTML側ではリンクとしての見た目を維持しつつ、JavaScriptはイベント発生時の動作を集中管理できます。

実務でのコードメンテナンスの考え方

大規模開発になればなるほど、HTML内に onclick="..." を直接書くと管理が煩雑になりやすいです。デザイナーとエンジニアの作業が分かれている場合、イベントリスナーをJavaScript側にまとめることでメンテナンスしやすくなります。

ただし、もし社内で「使いやすい」「伝わりやすい」といった理由で javascript:void(0) が多用されているなら、コードポリシーとの兼ね合いを考慮して変更の優先度を検討してみましょう。機能的には問題なく動作しているなら、修正コストとメリットのバランスを見て判断することになります。

よくある混乱ポイントの整理

`<a href="#">` との違い

href="#" でもクリック後に最上部へスクロールが発生する場合があり、ビジュアル的に違和感を与えることがある。
javascript:void(0) はそもそも遷移先が無いのでスクロールも起きない。

`return false;` との組み合わせ

イベントハンドラ内で return false; を使用すると、イベントのデフォルト動作を阻止できる。
一方で javascript:void(0) は単にリンク先を空にしているだけなので、使い方の意図が少し異なる。

`button` 要素で良いのでは？

クリックアクションでページ遷移を期待しないなら、button を使った方がHTML構造として正しいケースも多い。
ただし、UIデザインや既存ルールの兼ね合いで <a> 要素が使われることもある。

シンプルなデモコード

最後に、javascript:void(0) を使った上で、スクリプトをJavaScriptファイルに切り出す例を示します。これによって、HTML側のスッキリ感とJavaScript側の可読性を両立しやすくなります。


<!-- index.html -->
<a id="demoLink" href="javascript:void(0)">実行</a>
<script src="main.js"></script>


// main.js
window.addEventListener("DOMContentLoaded", () => {
  const demoLink = document.getElementById("demoLink");
  demoLink.addEventListener("click", () => {
    console.log("リンクがクリックされました");
    // ここにロジックを追記
  });
});

これで「リンクをクリックすると、コンソールにメッセージが表示される」動作が実現できます。重要なのは、HTMLとJavaScriptを分離しながらも、リンクという要素の性質を生かしてユーザーに操作を促せる点です。

まとめ

javascript:void(0) はリンク先を「空」にし、ページ遷移を抑制するテクニックとして知られています。ちょっとしたクリックイベントを実装するときには便利な書き方ですが、プロジェクト全体を通じて多用すると可読性やセキュリティ面で課題が出やすいかもしれません。

適切なシーンで正しく使いこなすには、次のようなポイントを意識しておくとよいでしょう。

ボタン要素やイベントリスナーで代替可能なケースとの比較検討
JavaScriptコードを外部ファイルやフレームワーク側にまとめることで可読性を高める
セキュリティ上のリスク（XSSなど）に注意しつつ、HTML内のスクリプト埋め込みを最小限に抑える
return false; や preventDefault() など、同様の機能を持つ書き方との違いを理解する

初心者のうちは、こうしたリンクの仕組みやJavaScriptの動作を組み合わせながら徐々に理解を深めるとよいでしょう。実務で取り入れる際には、チームのコード規約やフレームワークの方針も踏まえて、最適な書き方を選択してみてください。

【JavaScript】javascript voidとは？初心者向けにわかりやすく解説

はじめに

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

javascript voidの概要

基本的な使い方

どうしてjavascript voidを使うのか？

クリックイベントとの関連

JavaScriptリンクの書き方

JavaScript無効化とjavascript void

実務での活用シーン

ページ遷移を抑制したいとき

SPAやAjaxの流れで

javascript void(0)とエラーハンドリング

javascript voidとreturn falseの違い

セキュリティ面への考慮

void(0)とセキュアなコーディング

javascript voidの使用例

aタグでの使用例

onclickイベントでの使用例

注意点とベストプラクティス

不必要なscriptプロトコルの使用を避ける

ボタン要素との使い分け

アクセシビリティへの配慮

意図しない動作の把握

よくある疑問と回答

ブラウザ互換性は？

HTML標準との関係

イベントリスナーと組み合わせる方法

実務でのコードメンテナンスの考え方

よくある混乱ポイントの整理

`<a href="#">` との違い

`return false;` との組み合わせ

`button` 要素で良いのでは？

シンプルなデモコード

まとめ

JavaScriptをマスターしよう

フロントエンドエンジニアとは？初心者にもわかりやすい徹底解説

はじめに

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

javascript voidの概要

基本的な使い方

どうしてjavascript voidを使うのか？

クリックイベントとの関連

JavaScriptリンクの書き方

JavaScript無効化とjavascript void

実務での活用シーン

ページ遷移を抑制したいとき

SPAやAjaxの流れで

javascript void(0)とエラーハンドリング

javascript voidとreturn falseの違い

セキュリティ面への考慮

void(0)とセキュアなコーディング

javascript voidの使用例

aタグでの使用例

onclickイベントでの使用例

注意点とベストプラクティス

不必要なscriptプロトコルの使用を避ける

ボタン要素との使い分け

アクセシビリティへの配慮

意図しない動作の把握

よくある疑問と回答

ブラウザ互換性は？

HTML標準との関係

イベントリスナーと組み合わせる方法

実務でのコードメンテナンスの考え方

よくある混乱ポイントの整理

<a href="#"> との違い

return false; との組み合わせ

button 要素で良いのでは？

シンプルなデモコード

まとめ

JavaScriptをマスターしよう

フロントエンドエンジニアとは？初心者にもわかりやすい徹底解説

`<a href="#">` との違い

`return false;` との組み合わせ

`button` 要素で良いのでは？