JavaScript IIFE とは？
JavaScriptの(function() { } )()構文は、即時実行関数(IIFE)と呼ばれる匿名関数を即座に実行するためのものです。IIFEは、コードをモジュール化し、名前空間の衝突を回避し、パフォーマンスを向上させるなど、さまざまな利点があります。
構文
IIFEは、以下の構文で記述されます。
(function() {
// 実行したいコード
})();
functionキーワード：関数を定義します。- 空の丸括弧：引数を受け取りません。
- 関数リテラル：コードブロックを記述します。
- 最後の括弧：関数を呼び出します。
利点
IIFEには、以下の利点があります。
- コードのモジュール化：コードを独立したモジュールに分割することで、コードの読みやすさ、保守性、再利用性を向上させることができます。
- 名前空間の衝突の回避：IIFE内の変数名は、グローバルスコープや他のモジュールと衝突することはありません。
- パフォーマンスの向上：IIFEは、コードを一度だけ実行し、結果をキャッシュすることで、パフォーマンスを向上させることができます。
使用例
IIFEは、さまざまな場面で使用できます。
- プライベート変数の作成：IIFE内で変数を定義することで、その変数をそのIIFE内でのみ使用することができます。
- モジュールの作成：IIFEを使用して、コードを独立したモジュールに分割することができます。
- パフォーマンスの向上：IIFEを使用して、繰り返し実行されるコードをキャッシュすることができます。
注意点
IIFEを使用する際には、以下の点に注意する必要があります。
- IIFE内の変数は、IIFE外からはアクセスできません。
- IIFEは、コードを冗長にする可能性があります。
IIFEは、JavaScriptでコードをモジュール化し、名前空間の衝突を回避し、パフォーマンスを向上させるための便利な構文です。ただし、IIFEは適切に使用しないと、コードを冗長で複雑にする可能性があります。
例1：プライベート変数の作成
(function() {
var count = 0;
function increment() {
count++;
}
increment();
console.log(count); // 1
})();
console.log(count); // エラー: count は定義されていない
このコードでは、IIFEを使用して count という変数を定義しています。count 変数は、IIFE内でのみ使用できます。
例2：モジュールの作成
var myModule = (function() {
var privateVar = "private";
function publicFunction() {
console.log(privateVar);
}
return {
publicFunction: publicFunction
};
})();
myModule.publicFunction(); // "private" が出力される
このコードでは、IIFEを使用して myModule というモジュールを作成しています。myModule モジュールは、publicFunction という公開関数と、privateVar というプライベート変数を持っています。
例3：パフォーマンスの向上
(function() {
var fibonacci = function(n) {
if (n === 0 || n === 1) {
return n;
} else {
return fibonacci(n - 1) + fibonacci(n - 2);
}
};
var result = fibonacci(40);
console.log(result);
})();
このコードでは、IIFEを使用して fibonacci という関数を作成しています。fibonacci 関数は、フィボナッチ数列を計算します。IIFEを使用することで、fibonacci 関数を一度だけ実行し、結果をキャッシュすることができます。
IIFE の代わりに以下の方法を使用することができます。
アロー関数を使用して、匿名関数をより簡潔に記述することができます。
const increment = () => {
count++;
};
increment();
console.log(count); // 1
モジュール
JavaScript モジュールを使用して、コードをモジュール化することができます。
import { increment } from './my-module.js';
increment();
console.log(count); // 1
クラス
class Counter {
constructor() {
this.count = 0;
}
increment() {
this.count++;
}
}
const counter = new Counter();
counter.increment();
console.log(counter.count); // 1
名前空間を使用して、名前空間の衝突を回避することができます。
const myNamespace = {
count: 0,
increment() {
this.count++;
}
};
myNamespace.increment();
console.log(myNamespace.count); // 1
IIFE は便利な構文ですが、必ずしも最適な方法とは限りません。コードの内容に応じて、他の方法を使用することを検討してください。
javascript iife
