javascript:void(0)とは？void演算子の使い方と注意点

2024年12月27日

1. はじめに
2. voidとは
3. なぜvoid(0)なのか
4. undefinedの歴史
5. voidとJavaScript URI
6. voidとIIFE
7. まとめ
8. 参考資料：

はじめに

システム部の李です。

今回は、時々目にする javascript:void(0) をきっかけに、 void 演算子について紹介したいと思います。

voidとは

英単語としてのvoidには「空」という意味があります。そのため、「空の値を返す」記号として、さまざまなプログラミング言語で使用されています。

JavaScriptでも同様に、 void の後ろに式を置くことで、例えば void 0 のように記述すると、戻り値として undefined を返します。式の範囲を明確にしたい場合は括弧を追加することも可能で、例えば void(0) のように記述すると良いでしょう。

なぜ`void(0)`なのか

「 void(1) はどうなりますか？」と思う方もいるかもしれませんが、その答えは「 void(0) と同じで、 undefined です」。

実際、 void() 、 void('hello') 、 void(void(0)) などもすべて戻り値は undefined となります。 void の戻り値は、常に undefined です。

では、なぜ0がよく使われるのでしょうか？それは、シンプルさと明確さのための慣例に過ぎません。他の値が機能しないわけではなく、技術的にはどんな値でも void と組み合わせることで、同じく undefined を得ることになります。

`undefined`の歴史

「直接 undefined を書いた場合、どうなるのか？」と思う方もいるかもしれません。その答えは、「2024年の現時点では、確かに直接 undefined を書くことができます」。

過去には、 undefined が予約語ではない時期がありました。そのため、 undefined を再定義でき、以下のコードを実行するとコンソールに「1」が出力されていました。

var undefined = 1;
console.log(undefined);

現在の主流ブラウザは、ECMAScript 5（JavaScript 1.8.5）以降をサポートしており、 undefined はプリミティブ値として再定義できない仕様となっています。そのため、現在は直接 undefined を書いて使用できます。

これが、 void(0) が徐々に使われなくなっている理由の一つです。ただし、 void の用途は void(0) だけにとどまりません。

`void`とJavaScript URI

タイトルにもある通り、 void(0) が使用される場面の多くは、 javascript: と組み合わせた <a href="javascript:void(0);"> の形です。これは、HTMLの文脈において、ブラウザが javascript: というURI（統一リソース識別子）を認識し、その後の内容がJavaScriptコードであることを理解するためです。

この仕組みを利用すると、HTML内に簡単にJavaScriptコードを挿入することが可能です。例えば、以下の <a> タグをクリックすると、コンソールに「これはaタグです。」と出力されます。

<a href="javascript:console.log('これはaタグです。');">  
  aタグ  
</a>

また、他のJavaScriptファイルで定義された関数を呼び出すこともできます。関数の実行だけが必要で、その戻り値が不要な場合には void が活躍します。これは、 void 演算子の特性として、戻り値が常に undefined であることに加え、渡された式が確実に実行される点によるものです。

<a href="javascript:void(doSomethingAndReturn());">  
  関数の実行がほしくて、戻り値がいらない 
</a>

ただし、このように便利ではありますが、モダンな開発のベストプラクティスの観点から見ると、 javascript: の使用にはセキュリティリスクやアクセシビリティ上の問題があります。そのため、代わりにクリックイベントハンドラーを使用することが推奨されています。

`void`とIIFE

最後に、void 演算子のもう一つの使い方について簡単に触れたいと思います。それは、IIFE（即時実行関数式）の定義での使用です。

通常、IIFEは関数宣言として解釈されないよう、以下のように括弧で囲むのが一般的です。

(function () { 
  console.log("IIFEです。"); 
})();

ここで、 void を使用することもあります。この場合、関数式の戻り値が破棄されることを明確に示すことができます。

void function () { 
  console.log("IIFEです。"); 
}();

ただし、注意点として、functionキーワードではなく、アロー関数を使用したIIFEには void を適用することはできません。

まとめ

undefined がプリミティブ値としてキーワードに予約され、またJavaScript URIの使用が非推奨とされる意識が広まるにつれて、 void の使用は徐々に減少していくのではないかと思います。しかし、関数の戻り値が利用されないことを明示的に伝えたい場合には、 void は非常に適した選択肢です。

これからも時折目にする機会があると思いますので、この機会にぜひ void の動作について覚えておいてください。

最後までお読みいただき、ありがとうございます！この文章を通じて、 void についての理解を少しでも深めていただけたなら幸いです。

弊社ではWeb開発案件も承っております。ご興味がございましたら、ぜひお問い合わせフォームよりお気軽にご相談ください。