【JavaScript】void演算子の使い方｜void 0・javascript:void(0)・IIFE・モダンな代替手段まで完全解説

この記事で学べること

• void演算子の基本構文と「常にundefinedを返す」仕組み
• void 0 で安全にundefinedを取得する理由（ES5以前の歴史）
• javascript:void(0) の仕組みとリンク無効化パターン
• IIFE（即時実行関数）を void で書くテクニック
• アロー関数の戻り値を無視する void の活用法
• モダンなJavaScript/HTMLにおける代替手段
• ESLint no-void ルールとベストプラクティス

// 構文: void 式
void 0;          // undefined
void(0);         // undefined（括弧は任意）
void 'hello';    // undefined
void true;       // undefined
void [];         // undefined
void {};         // undefined
void (1 + 2);    // undefined（式は評価されるが結果は捨てられる）
void alert('Hi'); // undefined（alertは実行される）

? 重要ポイント：void は「式を無視する」のではなく、「式を評価した上で結果をundefinedに置き換える」演算子です。関数呼び出しなどの副作用は実行されます。

// 括弧は演算子の優先順位を制御するだけ
// void(0) は void (0) と同じで、関数呼び出しではない
console.log( void 0 === void(0) );  // true
console.log( void 0 === undefined ); // true

// typeof でも undefined
console.log( typeof void 0 );  // "undefined"

// ES5以前では undefined はグローバルオブジェクトの書き換え可能なプロパティだった
undefined = 'not undefined!';  // ES5以前では可能だった！

// そのため undefined を使った比較が壊れる可能性があった
if (value === undefined) {  // 信頼できない
    // ...
}

// void 0 なら常に本物の undefined を返す
if (value === void 0) {     // 常に安全
    // ...
}

⚠ 現在のJavaScript（ES5+）：グローバルの undefined は書き換え不可（non-writable）になりました。ただし、ローカルスコープではundefinedという変数名を使えてしまうため、厳密にはまだvoid 0の方が安全です。

// ローカルスコープでは undefined を変数名として使えてしまう
(function() {
    var undefined = 'oops';  // エラーにならない！
    console.log(undefined);     // "oops"
    console.log(void 0);        // undefined（本物）
})();

// ミニファイ（圧縮）ツールが void 0 を使う理由
// "undefined" → 9文字
// "void 0"    → 6文字  ← 3文字節約
// UglifyJS / Terser などが undefined を void 0 に置換する

<!-- クリックしてもページ遷移しない -->
<a href="javascript:void(0);" onclick="doSomething()">クリック</a>

<!-- void(0) がないと、戻り値があるときにページが書き換わる -->
<a href="javascript:'Hello'">クリック</a>
<!-- ↑ クリックするとページが "Hello" という文字だけのページになる -->

<!-- 戻り値: undefined → ページ遷移しない -->
<a href="javascript:void(0)">安全</a>

<!-- 戻り値: undefined → alert()はundefinedを返す -->
<a href="javascript:alert('Hi')">安全（alertの戻り値はundefined）</a>

<!-- 戻り値: 文字列 → ページが書き換わる！ -->
<a href="javascript:'Hello World'">危険</a>

<!-- 戻り値: 数値 → ページが書き換わる！ -->
<a href="javascript:1+2">危険（ページが "3" になる）</a>

<!-- ❌ 非推奨: javascript:void(0) -->
<a href="javascript:void(0);" onclick="doSomething()">クリック</a>

<!-- ✅ 推奨1: button要素を使う（最もセマンティック） -->
<button type="button" onclick="doSomething()">クリック</button>

<!-- ✅ 推奨2: event.preventDefault() -->
<a href="#" onclick="doSomething(); return false;">クリック</a>

<!-- ✅ 推奨3: addEventListener + preventDefault -->
<a href="#" id="myLink">クリック</a>

<script>
document.getElementById('myLink').addEventListener('click', function(e) {
    e.preventDefault();  // ページ遷移を防止
    doSomething();
});
</script>

❌ javascript: が非推奨な理由：

• CSP（Content Security Policy）で unsafe-inline が禁止されると動かない
• アクセシビリティ：スクリーンリーダーがリンク先を正しく認識できない
• HTML/JS分離の原則に反する
• 右クリック→新しいタブで開くと空白ページになる

⚠ SEOへの影響：検索エンジンのクローラーは javascript: プロトコルのリンクを辿れません。href="javascript:void(0)" で設定したリンクは、ページ間のリンクジュース（PageRank）を渡さないため、内部リンク構造にも悪影響があります。実際のURLに遷移する機能がある場合は、必ず実URLを href に設定しましょう。

// 通常のIIFE（括弧で囲む）
(function() {
    console.log('即時実行！');
})();

// void を使ったIIFE
void function() {
    console.log('即時実行！');
}();

// async 版（トップレベル await が使えない場合）
void async function() {
    const data = await fetch('/api/data');
    console.log(data);
}();

? なぜ void が必要か：function キーワードが文の先頭にあると「関数宣言」として解釈されます。void を前に付けることで「式」として解釈させ、直後の () で即時実行できるようになります。同じ理由で ! や + を使うパターンもあります。

// どれも同じく即時実行される
(function() { })();  // 最も一般的
(function() { }());  // Crockford推奨スタイル
void function() { }();  // void で式にする
!function() { }();     // ! で式にする
+function() { }();     // + で式にする

// void版は戻り値が常にundefined（明示的に「戻り値を使わない」意図を示す）
const a = (function() { return 42; })();  // 42
const b = void function() { return 42; }();  // undefined

// ❌ 問題: 副作用の関数が値を返してしまう
const handleClick = () => setState(true);
// setState() の戻り値が意図せず返される

// ✅ void で戻り値を明示的に捨てる
const handleClick = () => void setState(true);
// 常に undefined を返す

// 実用例: Promiseの戻り値を無視
const logEvent = (event) => void analytics.track(event);
// analytics.track() はPromiseを返すが、awaitしない
// void で「意図的にPromiseを無視している」ことを明示

// Array.forEach のコールバックなど
items.forEach(item => void processItem(item));

? React での活用：イベントハンドラをアロー関数の省略構文で書くとき、void を使うとハンドラの戻り値がReactに影響しないことを保証できます。ただし、通常はブロック構文 () => { setState(true); } の方が読みやすいとされます。

// ❌ ESLint @typescript-eslint/no-floating-promises で警告
fetchUserData();  // Promise が浮いている（awaitもcatchもない）

// ✅ void で「意図的にPromiseを無視している」ことを明示
void fetchUserData();  // ESLint 警告なし

// 実用例: ログ送信（失敗しても問題ない処理）
function handleClick() {
    void analytics.track('button_click');  // 送信を待たない
    showModal();  // すぐにUIを更新
}

// 実用例: useEffect 内の async 処理（React）
useEffect(() => {
    void loadInitialData();
}, []);

? ESLint連携：@typescript-eslint/no-floating-promises ルールは「await も catch もしていない Promise」を警告します。void を付けることで「意図的に無視している」と明示でき、警告が解消されます。これがモダンな開発でvoidが最も有用なパターンです。

// 戻り値なしの関数を表す型
function greet(name: string): void {
    console.log(`Hello, ${name}!`);
    // return 文なし、または return; のみ
}

// コールバックの型定義でよく使う
type EventHandler = (event: Event) => void;

// void と undefined の違い
function fn1(): void {}       // OK: return不要
function fn2(): undefined {}  // エラー: 明示的にreturn undefinedが必要

// void型の変数には undefined のみ代入可能
let v: void = undefined;  // OK
let v2: void = null;       // エラー（strictNullChecks時）

// ❌ void なし: 最後の式の戻り値でページが書き換わる可能性
javascript:document.title
// → ページが記事タイトルの文字だけのページになる

// ✅ void あり: ページを書き換えずにスクリプトを実行
javascript:void(document.body.style.backgroundColor='#1e1e2e')

// 実用例: ページのタイトルとURLをコピー
javascript:void(navigator.clipboard.writeText(
  document.title + ' - ' + location.href
))

{
  "rules": {
    // "error": void を完全に禁止
    // "off": void を許可
    "no-void": ["error", {
      "allowAsStatement": true  // 文としての void は許可
    }]
  }
}

// allowAsStatement: true の場合
void someAsyncFunction();  // ✅ OK（文として使用）
const x = void 0;           // ❌ NG（式として使用）

ベストプラクティスまとめ

• undefined を取得するなら素直に undefined を使う（ES5+は安全）
• javascript:void(0) は使わない → <button> か preventDefault()
• IIFEは括弧スタイル (function(){})(); が最も一般的
• async関数のPromiseを意図的に無視する場合の void asyncFn() は有用
• ミニファイ後のコードに void 0 が出ても驚かない

// void は右辺の最初の式にだけ適用される
void 2 === undefined;   // true  → (void 2) === undefined
void (2 === undefined); // undefined → void (false) → undefined

// カンマ演算子との組み合わせ
void 0, 1;   // 1  → (void 0), 1 → undefined, 1 → カンマ演算子で1
void (0, 1); // undefined → void (0, 1) → void 1 → undefined

? ポイント：void だけが「常に同じ値（undefined）を返す」単項演算子です。他の単項演算子はオペランドに応じて異なる値を返します。この特性があるからこそ、「戻り値を捨てる」「undefinedを確実に取得する」という用途に使えるわけです。