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

JavaScriptのwithステートメントとは？用途と使い方をわかりやすく解説

JavaScriptのwithステートメントは、特定のプロパティに対してデフォルトのオブジェクトを指定し、冗長になりがちなオブジェクト参照の記述を省略するための構文です。withブロック内で指定したオブジェクトは、スコープチェーンの先頭に追加されるため、そのプロパティ名だけで直接アクセスできるようになります。

基本的な動作

通常、オブジェクトのプロパティにアクセスするには、毎回オブジェクト名を明示する必要があります。しかし、withステートメントを使えば、以下のようにコードを簡潔に書けます。

  • オブジェクト名の繰り返し記述を省略できる
  • 同じオブジェクトの複数のプロパティへ短くアクセスできる
  • 指定したオブジェクトがスコープチェーンの先頭に置かれる

サンプルコード

以下は、JavaScriptでwithステートメントを使用した実際のコード例です。

<!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 withステートメント</h1>
<div style="color: green;" class="result"></div>
<button class="Btn">CLICK HERE</button>
<h3>上のボタンをクリックすると、objのfirstNameとlastNameプロパティが表示されます</h3>
<script>
    let resEle = document.querySelector(".result");
    let BtnEle = document.querySelector(".Btn");
    let obj = {
        firstName: "Rohan",
        lastName: "Sharma",
    };
    BtnEle.addEventListener("click", () => {
        with (obj) {
            resEle.innerHTML = "Welcome " + firstName + " " + lastName;
        }
    });
</script>
</body>
</html>

実行結果

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

JavaScriptのwithステートメントとは？用途と使い方をわかりやすく解説

「CLICK HERE」ボタンをクリックすると、withブロック内でオブジェクト名を書かずに firstName と lastName プロパティへ直接アクセスでき、以下のように表示されます。

JavaScriptのwithステートメントとは？用途と使い方をわかりやすく解説

注意点：strictモードでは使用不可

withステートメントは便利な一方で、変数の参照元が曖昧になりやすく、パフォーマンスや可読性の面で問題が指摘されています。そのため、strictモード（"use strict"）では使用できません。現代のJavaScript開発では、分割代入や一時変数を使う方法が推奨されます。

  1. 【初心者向け】JavaScriptのcontinueステートメントの使い方を解説

    continueステートメントとはJavaScriptのcontinueステートメントは、ループ処理の中で特定の条件が満たされた場合に、その回の処理（イテレーション）をスキップし、次の反復へ処理を移すために使用されます。breakステートメントがループ自体を抜けるのに対し、continueはあくまで「その回だけ」を飛ばしてループを継続する点が特徴です。この仕組みにより、不要なデータを除外しながら効率的に繰り返し処理を行うことができます。continueステートメントの実装例以下は、1から30までの数値の中から偶数のみを出力するサンプルコードです。奇数の場合にcontinueを使って処理をスキッ

  2. JavaScriptのdebuggerステートメントの使い方を徹底解説

    JavaScriptのdebuggerステートメントは、コード内にブレークポイントを設定するための構文です。実行中のコードがdebuggerステートメントに到達すると、その時点で処理が一時停止し、開発者ツールのデバッガーが利用可能であれば自動的にデバッガー機能が呼び出されます。 debuggerステートメントの基本動作 debuggerステートメントは、以下のような場面で特に役立ちます。 コードの特定の箇所で処理を止めて、変数の値を確認したいとき ループ処理の各ステップを詳細に追跡したいとき 複雑なロジックの不具合原因を特定したいとき なお、ブラウザの開発者ツール（DevTools）が開い