JavaScript
 Computer >> コンピューター >  >> プログラミング >> JavaScript

JavaScriptのvoidキーワードとは？使い方と実例をわかりやすく解説

JavaScriptにおけるvoidは重要なキーワードの一つで、単項演算子として機能します。voidは単一のオペランド（任意の型の式）を前に置いて評価しますが、その結果として常にundefinedを返すという特徴を持っています。つまり、「式を実行するが、その戻り値は不要」という場面で活用される演算子です。

void演算子の基本構文

voidの構文には、以下の2つの書き方があります。

<head>
    <script>
        // 演算子形式
        void func()
        javascript:void func()

        // または括弧を使った形式
        void(func())
        javascript:void(func())
    </script>
</head>

どちらの形式でも動作は同じですが、一般的には可読性の観点から void 式 の形式がよく使われます。

voidの主な用途：javascript: URLでの副作用の実行

この演算子の最も代表的な使い方は、クライアントサイドの javascript: URL内です。javascript: URLでは、評価された式の結果がブラウザ上に表示されてしまうことがありますが、voidを使うことで式の副作用だけを実行し、戻り値を表示させないようにできます。

例えば、次のコードでは alert('Warning!!!') という式が評価され警告ダイアログが表示されますが、その評価結果が現在のドキュメントに読み込まれることはありません。

サンプルコード

<html>
    <head>
        <script>
            /* スクリプト本体 */
        </script>
    </head>
    <body>
        <p>下のリンクをクリックしてください。ページには何も変化が起きません…</p>
        <a href="javascript:void(alert('Warning!!!'))">クリック！</a>
    </body>
</html>

この例では、リンクをクリックすると警告ダイアログが表示されますが、voidによって戻り値がundefinedになるため、ブラウザが新しいページや値を読み込むことはありません。

補足：現代のJavaScriptでのvoidの使われ方

javascript: URLはセキュリティ上の観点から現在では推奨されておらず、代わりにイベントリスナー（addEventListener）を使うのがベストプラクティスとされています。ただし、void演算子自体は今でも有用で、特に即時実行関数（IIFE）を void function(){...}() のように記述して戻り値を確実にundefinedにしたい場合や、アロー関数が意図せず値を返してしまうのを防ぐ場合などに使われています。

  1. JavaScriptでHTMLページをリダイレクトする方法をわかりやすく解説

    ページリダイレクトとは？あるURLをクリックしてページXにアクセスしたはずなのに、実際には別のページYに移動された——そんな経験はありませんか？これは「ページリダイレクト」と呼ばれる仕組みによるものです。Web開発では、サイト移転時や古いURLから新しいURLへの誘導など、さまざまな場面で活用されています。JavaScriptでリダイレクトを実装するJavaScriptを使えば、クライアント側（ブラウザ側）で非常にシンプルにページリダイレクトを実現できます。特別なライブラリやサーバー側の設定は不要で、window.location.assign()メソッドを呼び出すだけでOKです。訪問者を新し

  2. JavaScript関数で名前付き引数を使う方法｜分割代入で簡単に実現するテクニック

    JavaScriptにおける名前付き引数とは？ Pythonなどの言語には「名前付き引数（キーワード引数）」という機能が標準で備わっていますが、JavaScriptにはこの機能が組み込まれていません。しかし、オブジェクトの分割代入（Destructuring）を活用することで、名前付き引数と同じ挙動を簡単に実現できます。 基本的な仕組み 関数の引数としてオブジェクトを1つ受け取り、その中から必要なプロパティを分割代入で取り出します。各プロパティにはデフォルト値も同時に指定できるため、引数が省略された場合でもエラーにならず安全に処理できます。 サンプルコード 以下は、オブジェクトを引数として渡し