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

JavaScriptのクロージャでプライバシー（変数の隠蔽）を実現する方法

はじめに：クロージャとは何か

JavaScriptにはクラスベース言語のような「private」修飾子が存在しないため、変数を外部から直接アクセスできないようにしたい場合、クロージャ（Closure）を活用するのが定番のテクニックです。

クロージャとは、「関数が定義されたときのスコープ（外側の変数）への参照を保持し続ける仕組み」のことです。この性質を利用すると、関数の内部に閉じ込めた変数は外部から直接参照・書き換えできなくなり、いわばプライベートな状態として扱うことができます。

以下に、クロージャを使ってプライバシー（変数の隠蔽）を実現するサンプルコードを示します。

サンプルコード

<!DOCTYPE html>
<html lang="en">
<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: 18px;
        font-weight: 500;
        color: blueviolet;
    }
</style>
</head>
<body>
<h1>Using closures to achieve privacy</h1>
<div class="result"></div>
<br />
<button class="Btn">Increment</button>
<button class="Btn">Access</button>
<h3>Click on the above button to increment or try to access the variable</h3>
<script>
    let resEle = document.querySelector(".result");
    let BtnEle = document.querySelectorAll(".Btn");
    function increment() {
        let a = 0;
        return function () {
            a++;
            return a;
        };
    }
    let inc;
    inc = increment();
    BtnEle[0].addEventListener("click", () => {
        resEle.innerHTML = inc();
    });
    BtnEle[1].addEventListener("click", () => {
        try {
            resEle.innerHTML = a;
        } catch (err) {
            resEle.innerHTML = err;
        }
    });
</script>
</body>
</html>

コードのポイント

  • increment()関数内のローカル変数「a」 … この変数は関数の外からは一切アクセスできません。
  • returnされた無名関数 … increment()が呼び出された後も「a」への参照を保持するため、inc()を呼び出すたびに値が加算され続けます。
  • 「Access」ボタンの処理 … 変数「a」へ直接アクセスを試みますが、スコープ外のためエラー（ReferenceError）が発生します。これにより変数が隠蔽されていることが確認できます。

実行結果

JavaScriptのクロージャでプライバシー（変数の隠蔽）を実現する方法

「Increment」ボタンを4回クリックした場合：

JavaScriptのクロージャでプライバシー（変数の隠蔽）を実現する方法

「Access」ボタンをクリックして変数に直接アクセスしようとした場合：

JavaScriptのクロージャでプライバシー（変数の隠蔽）を実現する方法

「Access」ボタンではReferenceErrorが発生し、変数「a」が外部からアクセス不可能であること（＝プライバシーが保たれていること）が分かります。

まとめ

クロージャを利用することで、JavaScriptでも簡単に変数のカプセル化とプライバシーの保護を実現できます。モジュールパターンやカウンタ処理など、状態を安全に管理したい場面で非常に有用なテクニックなので、ぜひ覚えておきましょう。

  1. JavaScriptのimportで波括弧「{}」を使う理由とは？名前付きエクスポートの基本をわかりやすく解説

    JavaScript（ESモジュール）でモジュールを読み込む際、import 文に波括弧 { } を付けるかどうか迷ったことはありませんか？実はこの波括弧は、名前付きエクスポート（named export）を読み込むために必要な記法です。本記事では、実際のコード例を使いながら、{ } の役割と使い方を詳しく解説します。 importで { } を使う場面とは JavaScriptのESモジュールでは、エクスポート方法によって読み込み側の書き方が変わります。 名前付きエクスポート：export { 関数名 } のようにエクスポートされたものを読み込む場合は、import { 名前 } fro

  2. JavaScriptのオブジェクト配列に配列メソッドを適用する方法

    JavaScriptでは、オブジェクトが格納された配列に対しても、通常の配列と同じようにpop()、push()、splice()などの標準的な配列メソッドをそのまま使用できます。オブジェクト配列はあくまで「配列」であるため、要素としてオブジェクトが入っていても配列操作のAPIは共通で動作します。 コード例 以下は、JavaScriptオブジェクトの配列に対して配列メソッドを使用するサンプルコードです。 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8