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

【JavaScript】省略可能なcatchバインディング（Optional Catch Binding）の使い方を解説

省略可能なcatchバインディング（Optional Catch Binding）とは

ES2019（ECMAScript 2019）で導入された「省略可能なcatchバインディング」により、catch句の後ろに続く括弧と変数を省略できるようになりました。従来の構文では、catch (e) のようにエラーオブジェクトを受け取る変数を必ず宣言する必要がありましたが、この機能を使えば、エラー情報が不要なケースでシンプルにエラー処理を記述できます。

特に、発生しうるエラーの内容を事前に把握している場合や、エラーの詳細を確認せずに一律の処理（フォールバック処理など）を実行したい場合に有効です。コードがすっきりし、未使用の変数による警告も防げます。

サンプルコード

以下は、省略可能なcatchバインディングを使用したJavaScriptの実装例です。

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
<style>
    body {
        font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
    }
    .result {
        font-size: 20px;
        font-weight: 500;
    }
</style>
</head>
<body>
<h1>JavaScriptの省略可能なcatchバインディング</h1>
<div style="color: green;" class="result"></div>
<button class="Btn">CLICK HERE</button>
<h3>上のボタンをクリックするとエラーが発生します</h3>
<script>
    let resEle = document.querySelector(".result");
    document.querySelector(".Btn").addEventListener("click", () => {
        try {
            resEle.innerHTML = a;
        }
        catch {
            resEle.innerHTML = "変数aは宣言されていません";
        }
    });
</script>
</body>
</html>

実行結果

上記のコードを実行すると、次のような画面が表示されます。

【JavaScript】省略可能なcatchバインディング（Optional Catch Binding）の使い方を解説

「CLICK HERE」ボタンをクリックすると、未宣言の変数aへのアクセスによりエラーが発生しますが、catchブロックで変数を指定せずにエラーを捕捉し、メッセージが画面に表示されます。

【JavaScript】省略可能なcatchバインディング（Optional Catch Binding）の使い方を解説

まとめ

省略可能なcatchバインディングを使うことで、エラーオブジェクトが不要な場面でのtry...catch文をより簡潔に書けます。対応ブラウザも現在では広く普及しているため、エラーの詳細を扱わないエラーハンドリングでは積極的に活用すると良いでしょう。

  1. JavaScriptの「for...in」ステートメントとは？オブジェクトのプロパティをループ処理する方法を解説

    JavaScriptのfor...in文は、オブジェクトが持つすべてのプロパティ（列挙可能なプロパティ）を順番に取り出して処理するためのループ構文です。オブジェクト内の各キー（プロパティ名）にアクセスしながら、対応する値を取得したい場合に非常に便利です。for...inの基本的な構文for (let 変数名 in オブジェクト) { // 各プロパティに対して実行したい処理 }ループ変数には、各反復ごとにオブジェクトのプロパティ名（キー）が文字列として代入されます。値そのものを取得するには、「オブジェクト[変数名]」のようにブラケット記法を使ってアクセスします。サンプルコード以下は、for

  2. 【図解付き】JavaScriptにおけるオブジェクトの等価性をわかりやすく解説

    JavaScriptでは、文字列・数値・真偽値などのプリミティブ型はその「値」に基づいて比較されます。一方、オブジェクト(ネイティブオブジェクトでも独自に定義したカスタムオブジェクトでも)は「参照」に基づいて比較されます。 「参照による比較」とは、複数のオブジェクトがメモリ上の同じ場所を指しているかどうかを判定するという意味です。つまり、プロパティの中身が完全に一致していても、別々に生成された2つのオブジェクトは等しいとみなされません。 押さえておきたいポイント プリミティブ型: 値が同じであれば == や === の比較で true になる オブジェクト型: 同じインスタンス(同一の参照