IIFEの解説と使い方
JavaScriptにおける(function() { })()構文の解説
JavaScriptにおける(function() { })()構文は、Immediately Invoked Function Expression (IIFE) と呼ばれます。これは、関数定義と同時にその関数を呼び出すための特別な構文です。
構文
(function() {
// 関数の本体
})();
解説
- 関数定義
function() { }の部分は、通常の関数定義と同じです。 - 括弧で囲む
関数を括弧で囲むことで、JavaScriptパーサーにこれを関数式として解釈させることができます。 - すぐに呼び出す
()を付けて関数をすぐに呼び出します。
目的
IIFEの主な目的は、次のとおりです。
- クリーンアップ
IIFEは、一時的な変数や関数を定義して、使用後にスコープから削除することができます。これにより、メモリリークを防ぐことができます。 - モジュールパターン
IIFEは、JavaScriptのモジュールパターンの実装に利用されます。モジュールパターンは、コードの再利用性や保守性を向上させるための設計パターンです。 - スコープの分離
IIFEは、その内部で定義された変数や関数を外部のスコープから隠すことができます。これにより、コードのモジュール化や名前空間の管理が容易になります。
例
(function() {
var name = "John Doe";
function greet() {
console.log("Hello, " + name);
}
greet();
})();
// 外部からnameやgreetにアクセスすることはできません
注意
- IIFEは、他の関数や式と組み合わせて使用することができます。
- IIFEは、通常、匿名関数として使用されますが、名前付き関数としても定義できます。
IIFEの解説と使い方の例
IIFE (Immediately Invoked Function Expression) の基本的な例
(function() {
console.log("IIFEが実行されました");
})();
このコードは、関数定義と同時にその関数を呼び出します。関数内のコードは、外部のスコープから隔離されます。
スコープの分離
var name = "John Doe";
(function() {
var name = "Jane Smith";
console.log("内部のスコープ:", name);
})();
console.log("外部のスコープ:", name);
この例では、IIFE内部で定義された name 変数は、外部のスコープの name 変数とは異なるスコープを持ちます。そのため、外部のスコープから name にアクセスすると、"John Doe" が出力されます。
モジュールパターン
var myModule = (function() {
var privateVariable = "秘密の値";
function privateFunction() {
console.log("秘密の関数");
}
return {
publicMethod: function() {
console.log("公開メソッド");
privateFunction();
}
};
})();
myModule.publicMethod(); // 公開メソッドを呼び出す
// privateVariableやprivateFunctionには外部からアクセスできません
この例では、IIFEを使用してモジュールパターンを実装しています。モジュール内部の変数や関数はプライベートであり、外部からアクセスできません。公開するメソッドやプロパティは、モジュールを返すオブジェクトに含まれます。
クリーンアップ
(function() {
var temporaryVariable = "一時的な変数";
// 処理
// 変数を削除
})();
IIFEと他の関数や式との組み合わせ
var result = (function() {
return 10 + 5;
})();
console.log(result); // 15
IIFEの代替方法
IIFEは、JavaScriptのコードをモジュール化し、スコープを分離するための便利な構文です。しかし、IIFE以外の方法でも同様の目的を達成することができます。
ES6モジュール
ES6モジュールは、JavaScriptのモジュールシステムであり、ファイル単位でコードをモジュール化することができます。モジュールは、exportキーワードを使用して公開され、importキーワードを使用して他のモジュールからインポートされます。
// module.js
export const PI = 3.14159;
export function greet(name) {
console.log("Hello, " + name);
}
// main.js
import { PI, greet } from './module.js';
console.log(PI);
greet("John Doe");
クラス
JavaScriptのクラスは、オブジェクト指向プログラミングの概念をサポートします。クラスは、プロパティとメソッドをカプセル化し、スコープを分離することができます。
class Calculator {
constructor() {
this.result = 0;
}
add(value) {
this.result += value;
}
subtract(value) {
this.result -= value;
}
getResult() {
return this.result;
}
}
const calculator = new Calculator();
calculator.add(5);
calculator.subtract(2);
console.log(calculator.getResult());
名前付き関数
名前付き関数は、関数に名前を付けることで、再利用が可能になります。名前付き関数を直接呼び出すことで、スコープを分離することができます。
function myModule() {
const privateVariable = "秘密の値";
function privateFunction() {
console.log("秘密の関数");
}
return {
publicMethod: function() {
console.log("公開メソッド");
privateFunction();
}
};
}
const moduleInstance = myModule();
moduleInstance.publicMethod();
クロージャ
クロージャは、関数とその関数が定義されたスコープへの参照を組み合わせたものです。クロージャを使用することで、外部のスコープから変数や関数を隠すことができます。
function createCounter() {
let count = 0;
return function() {
count++;
return count;
};
}
const counter = createCounter();
console.log(counter()); // 1
console.l og(counter()); // 2
javascript iife
