【初心者向け】JavaScript voidとは？リンク無効化の基本

みなさん、HTMLを書いていて、こんなコードを見たことはありませんか？

「void(0) や javascript:void(0) って何？」「どうしてこんな書き方をするの？」

Web開発をしていると、void(0)という記述をよく見かけます。特にHTMLのリンクで使われていることが多いですよね。

でも大丈夫です！

この記事では、JavaScriptのvoidオペレーターについて初心者向けに詳しく解説します。基本的な使い方からリンクの無効化まで、実際に使えるレベルまで理解できるように説明していきます。

一緒にvoidオペレーターをマスターしましょう！

voidオペレーターって何？

基本的な役割

voidオペレーターは、任意の式を評価してundefinedを返すJavaScriptの組み込みオペレーターです。

簡単に言うと、「何かの処理を実行するけれど、結果は必ずundefinedにする」機能なんです。この特性により、特定の場面で意図しない値の返却を防ぐことができます。

// 基本構文
void expression

// 括弧を使った形式（推奨）
void(expression)

// 使用例
void(0)          // undefined
void(1 + 2)      // undefined（計算は実行される）
void(console.log('Hello'))  // undefined（ログは出力される）

この例では、voidオペレーターの基本的な使い方を示しています。 void(0)は最もよく使われる形で、常にundefinedを返します。

重要なのは、式は実行されるが、結果は常にundefinedになることです。

voidの戻り値を確認してみよう

voidオペレーターは常にundefinedを返します。

// 様々な値をvoidに渡してみる
console.log(void(0));         // undefined
console.log(void(42));        // undefined
console.log(void("Hello"));   // undefined
console.log(void(true));      // undefined
console.log(void(null));      // undefined
console.log(void([]));        // undefined
console.log(void({}));        // undefined

// 複雑な式でも結果は同じ
console.log(void(1 + 2 + 3)); // undefined

どんな値を渡しても、結果は必ずundefinedになります。計算式を渡した場合でも、計算は実行されますが、結果はundefinedです。

これがvoidオペレーターの最大の特徴です。

リンクでの使用方法を理解しよう

従来のリンク無効化

最も一般的な使用例は、HTMLリンクの無効化です。

<!-- 従来のリンク無効化 -->
<a href="javascript:void(0)">クリックしても何も起こらない</a>

<!-- または -->
<a href="javascript:void(0);" onclick="handleClick()">
  クリックでJavaScript実行
</a>

javascript:void(0)を使うことで、リンクがクリックされても何も起こりません。 JavaScriptの処理だけを実行したい場合によく使われます。

なぜvoid(0)を使うの？

他の方法と比較してvoidを使う理由を見てみましょう。

<!-- 問題のある方法 -->
<a href="#">リンク1</a>                    <!-- ページトップに移動 -->
<a href="">リンク2</a>                      <!-- ページがリロード -->
<a href="javascript:">リンク3</a>           <!-- 非推奨 -->

<!-- 推奨される方法 -->
<a href="javascript:void(0)">リンク4</a>    <!-- 何も起こらない -->

#を使うとページのトップに移動してしまいます。空文字列を使うとページがリロードされてしまいます。

void(0)を使うことで、意図しないページの移動やリロードを防げます。これがvoidを使う最大の理由です。

実際にvoidを使ってみよう

ボタン風のリンクを作成

JavaScriptでのみ動作するボタン風のリンクを作成する例をご紹介します。

<!DOCTYPE html>
<html>
<head>
    <style>
        .button-link {
            display: inline-block;
            padding: 10px 20px;
            background-color: #007bff;
            color: white;
            text-decoration: none;
            border-radius: 5px;
            cursor: pointer;
        }
        .button-link:hover {
            background-color: #0056b3;
        }
    </style>
</head>
<body>
    <a href="javascript:void(0)" class="button-link" onclick="showMessage()">
        メッセージを表示
    </a>

    <script>
        function showMessage() {
            alert('ボタンがクリックされました！');
        }
    </script>
</body>
</html>

この例では、見た目はボタンのようなリンクを作成しています。 href="javascript:void(0)"でリンクの移動を無効化し、onclickでJavaScript処理を実行します。

CSSでボタンらしいスタイルを適用することで、実用的なボタンが完成します。

条件付きリンク動作

条件に応じてリンクの動作を制御する例をご紹介します。

<a href="javascript:void(0)" onclick="conditionalAction()">
    条件付きリンク
</a>

<script>
function conditionalAction() {
    const userLoggedIn = checkUserStatus();
    
    if (userLoggedIn) {
        // ログイン済みの場合の処理
        window.location.href = '/dashboard';
    } else {
        // 未ログインの場合の処理
        alert('ログインが必要です');
        window.location.href = '/login';
    }
}

function checkUserStatus() {
    // ユーザーのログイン状態をチェック
    return localStorage.getItem('isLoggedIn') === 'true';
}
</script>

この関数では、ユーザーのログイン状態をチェックして、条件に応じて異なる処理を実行しています。ログイン済みならダッシュボードへ、未ログインならログインページへ移動します。

実際のWebアプリケーションでよく使われるパターンです。

動的なリンク生成

JavaScriptで動的にリンクを生成する例をご紹介します。

function createInteractiveLink(text, action) {
    const link = document.createElement('a');
    link.href = 'javascript:void(0)';
    link.textContent = text;
    link.onclick = function() {
        action();
        return false; // デフォルトの動作を防止
    };
    
    return link;
}

// 使用例
const container = document.getElementById('link-container');

// 複数のリンクを動的に作成
const links = [
    { text: 'アラートを表示', action: () => alert('Hello!') },
    { text: 'ログを出力', action: () => console.log('Log message') },
    { text: 'スタイルを変更', action: () => document.body.style.backgroundColor = 'lightblue' }
];

links.forEach(linkData => {
    const link = createInteractiveLink(linkData.text, linkData.action);
    container.appendChild(link);
    container.appendChild(document.createElement('br'));
});

この例では、リンクを動的に生成する汎用的な関数を作成しています。 createInteractiveLink関数で、テキストとアクション（実行する処理）を指定してリンクを作成できます。

配列で複数のリンクデータを定義して、一度に複数のリンクを生成しています。

voidオペレーターのその他の使用例

確実にundefinedを取得

undefinedを確実に取得したい場合に使用します。

// undefinedを確実に取得
function getUndefined() {
    return void(0);
}

// 変数がundefinedかどうかチェック
function isUndefined(value) {
    return value === void(0);
}

// 使用例
let x;
console.log(isUndefined(x));        // true
console.log(isUndefined(null));     // false
console.log(isUndefined(0));        // false
console.log(isUndefined(''));       // false

この例では、voidを使ってundefinedを確実に取得しています。 isUndefined関数では、値がundefinedかどうかを正確にチェックできます。

古いJavaScriptではundefinedが書き換え可能だったため、このような使い方がありました。

式の実行結果を無視

式を実行したいが結果は使いたくない場合に使用します。

// 配列の操作を行うが結果は無視
let numbers = [1, 2, 3, 4, 5];

// pushの戻り値（配列の長さ）を無視
void(numbers.push(6));

console.log(numbers); // [1, 2, 3, 4, 5, 6]

// 関数実行の結果を無視
function processData() {
    console.log('データを処理中...');
    return 'processed';
}

void(processData()); // 実行されるが戻り値は無視

pushメソッドは配列の新しい長さを返しますが、この戻り値が不要な場合にvoidを使います。関数を実行したいが、戻り値は使わない場合にも有効です。

明示的に「戻り値を使わない」という意図を示すことができます。

アロー関数での使用

アロー関数で戻り値を無視したい場合に使用します。

// 通常のアロー関数（戻り値あり）
const numbers = [1, 2, 3, 4, 5];
numbers.forEach(num => console.log(num));

// 戻り値を明示的に無視
const logAndIgnore = (value) => void(console.log(value));

// 使用例
[1, 2, 3].forEach(logAndIgnore);

// 複数の処理を実行して結果を無視
const processAndIgnore = (data) => void(
    console.log('処理開始:', data),
    localStorage.setItem('lastProcessed', data),
    console.log('処理完了')
);

processAndIgnore('sample data');

アロー関数では、式の結果が自動的に返されるため、戻り値を明示的に無視したい場合にvoidが便利です。複数の処理をカンマで区切って実行し、全体の結果を無視することもできます。

モダンな代替手法を知ろう

イベントリスナーの使用

現代のWeb開発では、イベントリスナーを使う方法が推奨されます。

<!-- 従来の方法 -->
<a href="javascript:void(0)" onclick="handleClick()">クリック</a>

<!-- モダンな方法 -->
<a href="#" id="modern-link">クリック</a>

<script>
document.getElementById('modern-link').addEventListener('click', function(e) {
    e.preventDefault(); // デフォルト動作を防止
    handleClick();
});

function handleClick() {
    console.log('リンクがクリックされました');
}
</script>

この方法では、HTMLとJavaScriptを分離できます。 addEventListenerでイベントを登録し、preventDefault()でデフォルト動作を防止します。

コードの保守性が向上し、より現代的な書き方になります。

buttonタグの使用

リンクとしての機能が不要な場合は、buttonタグを使用します。

<!-- voidを使ったリンク -->
<a href="javascript:void(0)" onclick="performAction()">アクション実行</a>

<!-- buttonタグを使った方法（推奨） -->
<button type="button" onclick="performAction()">アクション実行</button>

<style>
/* ボタンをリンク風にスタイリング */
.link-button {
    background: none;
    border: none;
    color: #007bff;
    text-decoration: underline;
    cursor: pointer;
    font-size: inherit;
}
</style>

<button type="button" class="link-button" onclick="performAction()">
    リンク風ボタン
</button>

buttonタグを使うことで、セマンティックに正しいHTMLが書けます。 CSSでリンクのような見た目にスタイリングすることも可能です。

アクセシビリティの観点からも、buttonタグの使用が推奨されます。

実践的なサンプルを作ってみよう

タブ切り替え機能

voidを使ったタブ切り替えの実装例をご紹介します。

<!DOCTYPE html>
<html>
<head>
    <style>
        .tab-container {
            border: 1px solid #ccc;
            width: 400px;
        }
        .tab-header {
            background-color: #f1f1f1;
            overflow: hidden;
        }
        .tab-link {
            float: left;
            display: block;
            color: black;
            text-align: center;
            padding: 14px 16px;
            text-decoration: none;
        }
        .tab-link:hover {
            background-color: #ddd;
        }
        .tab-link.active {
            background-color: #ccc;
        }
        .tab-content {
            display: none;
            padding: 12px;
        }
        .tab-content.active {
            display: block;
        }
    </style>
</head>
<body>
    <div class="tab-container">
        <div class="tab-header">
            <a href="javascript:void(0)" class="tab-link active" onclick="openTab(event, 'tab1')">タブ1</a>
            <a href="javascript:void(0)" class="tab-link" onclick="openTab(event, 'tab2')">タブ2</a>
            <a href="javascript:void(0)" class="tab-link" onclick="openTab(event, 'tab3')">タブ3</a>
        </div>
        
        <div id="tab1" class="tab-content active">
            <h3>タブ1の内容</h3>
            <p>これは最初のタブの内容です。</p>
        </div>
        
        <div id="tab2" class="tab-content">
            <h3>タブ2の内容</h3>
            <p>これは2番目のタブの内容です。</p>
        </div>
        
        <div id="tab3" class="tab-content">
            <h3>タブ3の内容</h3>
            <p>これは3番目のタブの内容です。</p>
        </div>
    </div>

    <script>
        function openTab(evt, tabName) {
            // すべてのタブコンテンツを非表示
            const tabContents = document.querySelectorAll('.tab-content');
            tabContents.forEach(content => {
                content.classList.remove('active');
            });
            
            // すべてのタブリンクからactiveクラスを削除
            const tabLinks = document.querySelectorAll('.tab-link');
            tabLinks.forEach(link => {
                link.classList.remove('active');
            });
            
            // 選択されたタブを表示
            document.getElementById(tabName).classList.add('active');
            evt.currentTarget.classList.add('active');
        }
    </script>
</body>
</html>

この例では、タブ切り替え機能を実装しています。各タブリンクにjavascript:void(0)を使って、ページ移動を防いでいます。

openTab関数で、クリックされたタブに応じてコンテンツを切り替えています。 CSSクラスの切り替えで、見た目と表示内容を制御しています。

モーダルウィンドウ

voidを使ったモーダルウィンドウの実装例をご紹介します。

<!DOCTYPE html>
<html>
<head>
    <style>
        .modal {
            display: none;
            position: fixed;
            z-index: 1000;
            left: 0;
            top: 0;
            width: 100%;
            height: 100%;
            background-color: rgba(0,0,0,0.5);
        }
        .modal-content {
            background-color: white;
            margin: 15% auto;
            padding: 20px;
            border-radius: 5px;
            width: 300px;
            text-align: center;
        }
        .close {
            color: #aaa;
            float: right;
            font-size: 28px;
            font-weight: bold;
            cursor: pointer;
        }
        .close:hover {
            color: black;
        }
        .btn {
            padding: 10px 20px;
            margin: 5px;
            border: none;
            border-radius: 3px;
            cursor: pointer;
        }
        .btn-primary {
            background-color: #007bff;
            color: white;
        }
        .btn-secondary {
            background-color: #6c757d;
            color: white;
        }
    </style>
</head>
<body>
    <h1>モーダルウィンドウのサンプル</h1>
    
    <a href="javascript:void(0)" class="btn btn-primary" onclick="openModal()">
        モーダルを開く
    </a>
    
    <!-- モーダルウィンドウ -->
    <div id="modal" class="modal">
        <div class="modal-content">
            <span class="close" onclick="closeModal()">&times;</span>
            <h2>確認</h2>
            <p>この操作を実行してもよろしいですか？</p>
            <button class="btn btn-primary" onclick="confirmAction()">はい</button>
            <button class="btn btn-secondary" onclick="closeModal()">いいえ</button>
        </div>
    </div>

    <script>
        function openModal() {
            document.getElementById('modal').style.display = 'block';
        }
        
        function closeModal() {
            document.getElementById('modal').style.display = 'none';
        }
        
        function confirmAction() {
            alert('操作が実行されました！');
            closeModal();
        }
        
        // モーダル外をクリックしたら閉じる
        window.onclick = function(event) {
            const modal = document.getElementById('modal');
            if (event.target === modal) {
                closeModal();
            }
        }
    </script>
</body>
</html>

この例では、モーダルウィンドウ（ポップアップ画面）を実装しています。「モーダルを開く」リンクにjavascript:void(0)を使って、ページ移動を防いでいます。

モーダルの表示・非表示は、CSSのdisplayプロパティを切り替えて制御しています。モーダル外をクリックしたときに閉じる機能も実装しています。

よくある使用場面とベストプラクティス

適切な使用場面

voidオペレーターを使うべき場面と避けるべき場面を整理しましょう。

適切な使用例をまとめると以下の通りです。

確実にundefinedを取得したい場合
式の実行結果を明示的に無視したい場合
レガシーコードでのリンク無効化

// 適切な使用例
// 1. 確実にundefinedを取得したい場合
function resetValue() {
    return void(0);
}

// 2. 式の実行結果を明示的に無視したい場合
void(console.log('ログ出力'));

// 3. レガシーコードでのリンク無効化
// <a href="javascript:void(0)">リンク</a>

避けるべき使用例もあります。

単純にundefinedが欲しい場合
関数の戻り値を使わない場合
新しいプロジェクトでのリンク無効化

// 避けるべき使用例
// 1. 単純にundefinedが欲しい場合
let value = undefined; // voidを使う必要なし

// 2. 関数の戻り値を使わない場合
processData(); // voidを使う必要なし

// 3. 新しいプロジェクトでのリンク無効化
// イベントリスナーやbuttonタグを使用

現代のWeb開発では、より適切な代替手法があることを覚えておきましょう。

コードの可読性を考慮しよう

voidを使う場合は、コードの意図を明確にしましょう。

// 意図が不明なコード
void(someFunction());

// 意図が明確なコード
// 関数の戻り値を明示的に無視
void(someFunction()); // 戻り値は使用しない

// または、コメントで説明
someFunction(); // 戻り値は不要

コメントを追加することで、なぜvoidを使っているのかが分かりやすくなります。チームで開発する際には、このような配慮が重要です。

まとめ：voidオペレーターを理解しよう

JavaScriptのvoidオペレーターについて、基本から実践的な応用まで詳しく解説しました。

重要なポイントをまとめると以下の通りです。

voidオペレーターは常にundefinedを返す
主にHTMLリンクの無効化で使用される
式は実行されるが結果は無視される
モダンな開発では代替手法が推奨される場合もある

実践での心がけ：

voidオペレーターを活用する際は、以下を意識しましょう。

使用する理由を明確にする
現代的な代替手法も検討する
コードの可読性を重視する
チームでの開発では意図を共有する

voidオペレーターは特殊なオペレーターですが、適切に理解することで有効活用できます。

レガシーコードの理解や特定の状況での活用が可能になります。ただし、現代のWeb開発では、より適切な代替手法を検討することも重要です。

ぜひ今日から、これらの知識を活用してより効果的なJavaScriptプログラムを作成してみてください！ voidオペレーターの特性を理解して、適切な場面で活用していきましょう。

【初心者向け】JavaScript voidとは？リンク無効化の基本

【初心者向け】JavaScript voidとは？リンク無効化の基本

voidオペレーターって何？

基本的な役割

voidの戻り値を確認してみよう

リンクでの使用方法を理解しよう

従来のリンク無効化

なぜvoid(0)を使うの？

実際にvoidを使ってみよう

ボタン風のリンクを作成

条件付きリンク動作

動的なリンク生成

voidオペレーターのその他の使用例

確実にundefinedを取得

式の実行結果を無視

アロー関数での使用

モダンな代替手法を知ろう

イベントリスナーの使用

buttonタグの使用

実践的なサンプルを作ってみよう

タブ切り替え機能

モーダルウィンドウ

よくある使用場面とベストプラクティス

適切な使用場面

コードの可読性を考慮しよう

まとめ：voidオペレーターを理解しよう

関連記事

JavaScriptの難易度は？文系・未経験でも理解できる学習ステップ

【初心者向け】JavaScriptとは？30分でわかる基本概念と学習の始め方

【2025年版】JavaScriptとは？初心者向けに5分でわかりやすく解説