JavaScriptのクロージャとは？具体例でわかりやすく解説
JavaScriptのクロージャ（Closure）とは、外側の関数が実行を終えて値を返した後でも、内側の関数から外側の関数のスコープにある変数へアクセスできる仕組みのことです。つまり、内側の関数は、外側の関数で定義された変数を常に参照し続けることができます。
クロージャは「関数を返す関数」のパターンでよく利用され、状態の保持やデータの隠蔽（カプセル化）など、実用的な場面で活躍します。
以下は、JavaScriptでクロージャを使った具体的なコード例です。
コード例
<!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: 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>
Click on the above button to add two numbers using closure
</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>実行結果
上記のコードを実行すると、次のような画面が表示されます。
「CLICK HERE」ボタンをクリックすると、クロージャに保持された値を使って2つの数値の合計が計算され、結果が画面に表示されます。
コードの解説
この例では、add関数が内側の関数add1を返しています。add(99)を呼び出すと、引数numに「99」が記憶された状態の関数が返されます。その後、storeadd(44)を呼び出すと、内側の関数が外側の変数numにアクセスし、計算結果を画面に出力します。外側の関数の実行はすでに終わっていますが、内側の関数はその変数を参照し続けられる——これがクロージャの基本的な動作です。
このようにクロージャを理解すると、コールバック関数やイベント処理、プライベートな状態を持つ関数の作成など、JavaScriptのより高度なテクニックにも応用できます。
-
JavaScriptの正規表現修飾子(g・i・m)をサンプルコード付きで解説
JavaScriptの正規表現修飾子とは JavaScriptの正規表現における修飾子(フラグ)とは、パターンリテラルの末尾に付加することで検索の挙動を変更できる、省略可能な指定のことです。これを使うことで、大文字と小文字を区別しない検索や文字列全体を対象としたグローバル検索などが簡単に実現できます。さらに、複数の修飾子を組み合わせて指定することも可能です。 主な修飾子の一覧 修飾子説明 gグローバルマッチングを有効にします。最初の一致で処理を止めず、マッチしたすべての結果を返します。 i大文字と小文字を区別しない(ignore case)マッチングを有効にします。 m複数行(mul
-
【初心者向け】JavaScriptのfinallyステートメントをサンプルコード付きでわかりやすく解説
finallyステートメントは、エラーが発生したかどうかにかかわらず、tryブロックとcatchブロックの処理が完了した後に必ず実行されるブロックです。ファイルのクローズやデータベース接続の切断など、処理の成功・失敗に関係なく必ず実行したい後処理（クリーンアップ処理）を記述する際に非常に便利です。finallyの基本構文try { // エラーが発生する可能性のある処理 } catch (err) { // エラー発生時に実行される処理 } finally { // エラーの有無にかかわらず必ず実行される処理 }サンプルコード以下は、JavaScriptにおけるfinallyステー