JavaScript - voidキーワード：入門ガイド

こんにちは、未来のJavaScript魔法使いさんたち！今日は、JavaScriptのvoidキーワードの世界に楽しく飛び込んでみましょう。コードを書いたことがない人も心配しないでください。あなたの親切なガイドとして、私はこのテーマをステップバイステップで探求していきます。では、バーチャルの魔杖（つまりキーボード）を手に取り、一緒に潜りましょう！

voidキーワードとは？

本題に入る前に、まずvoidとは何かを理解しましょう。JavaScriptでは、voidは式を評価した後、undefinedを返すオペレータです。あなたは思うかもしれません、「なぜそんなことをするのか？」。そうですね、好奇心の強い皆さん、それには理由があります。それを一緒に見つけ出しましょう！

文法

voidキーワードの文法は非常にシンプルです：

void expression

ここで、expressionは任意の有効なJavaScript式です。voidオペレータはこの式を評価しますが、常にundefinedを返します。

簡単な例を見てみましょう：

console.log(void 0); // 出力：undefined
console.log(void(0)); // 出力：undefined
console.log(void "Hello"); // 出力：undefined
console.log(void (2 + 3)); // 出力：undefined

ご覧の通り、voidの後ろに何を置いても、常にundefinedを返します。まるで何でもかもウサギに変える魔术師のように – ただし、私たちの魔术師はすべてをundefinedに変えます！

voidキーワードの優先順位の重要性

それでは、少し進んだ話題 – voidキーワードの優先順位について話しましょう。JavaScriptでは、オペレータには異なる優先順位があり、それが評価の順序を決定します。

voidオペレータは非常に高い優先順位を持っています。つまり、他のほとんどのオペレータよりも先に評価されます。例を見てみましょう：

let x = 1;
console.log(void x === undefined); // 出力：true
console.log(void (x = 5)); // 出力：undefined
console.log(x); // 出力：5

この例では、void x === undefinedは(void x) === undefinedとして評価され、void (x === undefined)として評価されるわけではありません。voidオペレータはまずxに適用され、undefinedを返します。

2行目では、xに5を割り当てているにも関わらず、voidオペレータは引き続きundefinedを返します。しかし、割り当ては行われるため、3行目でそれを確認できます。

javascript:void(0)とは？

HTMLでjavascript:void(0)に遭遇したことがあるかもしれません。特にアンカータグのhref属性で使われていることが多いです。それを解明しましょう！

<a href="javascript:void(0);" onclick="console.log('Clicked!')">クリックしてね</a>

この例では、javascript:void(0)はリンクのデフォルト動作（新しいページに移動すること）を防ぐために使われています。onclickイベントはまだ発火しますが、リンクは他の何もしないままです。

まるで「ボールを投げる前に犬に「止まれ」と言う」ようなものです – 犬は動作を見ますが、動かない！

関数との組み合わせ

voidキーワードは関数とも使うことができます。例を見てみましょう：

function greet() {
console.log("Hello, world!");
}

console.log(greet()); // 出力：Hello, world! undefined
console.log(void greet()); // 出力：Hello, world! undefined

どちらの場合でも、「Hello, world!」がコンソールに表示されます。しかし、greet()は implicitly undefinedを返します（JavaScriptの関数は、返り値が指定されていない場合、默认でundefinedを返します），一方でvoid greet()は明示的にundefinedを返します。

即時関数式（IIFE）との組み合わせ

最後に、voidが即時関数式（IIFE）とどのように使われるかを見てみましょう。IIFEは定義されたと同時に実行される関数です。

void function() {
console.log("I'm an IIFE!");
}();

// 出力：I'm an IIFE!

この場合、voidは関数式が式として扱われるようにするために使われ、宣言ではありません。まるでパーティーに忍び込むために仮装するようなものです – 関数は実行されますが、その後は残りません！

voidキーワードの用法のまとめ

以下に、voidキーワードの使い方をまとめた表を示します：

方法	例	説明
基本的な用法	void 0	undefinedを返す
式との組み合わせ	void (2 + 3)	式を評価し、undefinedを返す
HTMLでの使用	<a href="javascript:void(0);">	デフォルトのリンク動作を防ぐ
関数との組み合わせ	void greet()	関数を呼び出し、undefinedを返す
IIFEとの組み合わせ	void function() {}();	IIFEを実行し、undefinedを返す

そして、皆さん！voidキーワードの世界を旅しました。voidは毎日使うものではありませんが、理解することで、より完全なJavaScript開発者になります。

練習を続け、好奇心を持ち続け、すぐにプロのようにJavaScriptの魔法を操るようになるでしょう！次回まで、楽しいコードを！

Credits: Image by storyset