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

JavaScriptのクロージャとは？仕組みと実装例をわかりやすく解説

クロージャとは

JavaScriptにおけるクロージャ（Closure）とは、外側の関数の実行が完了して値を返した後であっても、内側の関数から外側の関数のスコープ（変数）にアクセスできる仕組みのことです。言い換えれば、内側の関数は、外側の関数の変数に対して常にアクセスできるということです。

この性質を活用することで、データを外部から直接操作されないように隠蔽したり、関数の呼び出し間で状態を保持する処理を実現したりすることが可能になります。

クロージャのサンプルコード

以下は、JavaScriptでクロージャを使用した具体的なコード例です。ボタンをクリックすると、クロージャによって保持された値を使って2つの数値の足し算を行います。

コード例

<!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 Closures</h1>
<div style="color: green;" class="result"></div>
<button class="Btn">CLICK HERE</button>
<h3>上のボタンをクリックすると、クロージャを使って2つの数値を加算します</h3>
<script>
    let sampleEle = document.querySelector(".sample");
    let resEle = document.querySelector(".result");
    function add(num) {
        return function add1(num1) {
            resEle.innerHTML += `${num}+${num1} = ${num + num1}`;
        };
    }
    document.querySelector(".Btn").addEventListener("click", () => {
        let storeadd = add(99);
        storeadd(44);
    });
</script>
</body>
</html>

コードの解説

このコードでは、add(num) 関数が内側の関数 add1(num1) を返しています。add(99) を実行すると、引数 num = 99 の値が記憶された状態の関数が返されます。これがクロージャの働きです。

その後、返された関数に 44 を引数として渡して呼び出すことで、クロージャによって保持された num の値と合算した計算結果が画面に表示されます。外側の関数である add はすでに実行を終えていますが、その変数 num はメモリ上に保持され続けている点がポイントです。

実行結果

JavaScriptのクロージャとは？仕組みと実装例をわかりやすく解説

「CLICK HERE」ボタンをクリックすると、次のように計算結果が表示されます。

JavaScriptのクロージャとは？仕組みと実装例をわかりやすく解説

まとめ

クロージャは、関数型プログラミングにおいて非常に重要な概念です。プライベートな変数の実現や、コールバック関数での状態管理、部分適用などのテクニックに広く応用されるため、JavaScriptを扱う上で必ず理解しておきたい仕組みといえます。

  1. JavaScriptの関数式（Function Expression）とは？特徴と使い方を解説

    JavaScriptにおける関数式（Function Expression）とは、関数を変数に代入して定義する方法のことです。代入された関数は、その変数名を使って後から呼び出すことができます。 関数式の主な特徴 関数を変数に格納し、変数名を指定して呼び出せる 通常の関数宣言（function declaration）と異なり、ホイスティング（巻き上げ）が行われないため、定義よりも前に呼び出すことはできない 多くの場合、名前を持たない「無名関数（匿名関数）」として定義される コールバック関数や即時実行関数（IIFE）など、さまざまな場面で活用できる この「ホイスティングされない」という点が重

  2. JavaScriptの部分関数（Partial Function）とは？仕組みと実装例をわかりやすく解説

    部分関数（Partial Function）とは、既存の関数を引数として受け取り、それに加えて別の型の引数も同時に受け取れるようにする仕組みです。まず渡された引数の一部を使い、残りの引数を受け取る新しい関数を返します。そして、返された関数が呼び出されるときに、あらかじめ固定しておいた引数とそのときに渡された引数をすべて組み合わせて、元の親関数が実行されます。 この手法は「部分適用（Partial Application）」とも呼ばれ、関数型プログラミングの基本的なテクニックのひとつです。共通する引数を先に束縛しておくことで、処理の再利用性やコードの可読性を高めることができます。 コード例 以下