[{"data":1,"prerenderedAt":1629},["ShallowReactive",2],{"content-/iife-immediately-invoked-function-expression":3,"related-/iife-immediately-invoked-function-expression":1582,"all-pages-for-dir":1627,"og-image-/iife-immediately-invoked-function-expression":1628},{"id":4,"title":5,"body":6,"category":1565,"description":1566,"extension":1567,"meta":1568,"navigation":115,"path":1569,"project_name":1570,"published":1571,"publishedAt":1572,"seo":1573,"stem":1574,"tags":1575,"todo":1570,"unpublished":1571,"updatedAt":1570,"__hash__":1581},"pages/2026-06/2026-06-09/iife-immediately-invoked-function-expression.md","IIFE（即時実行関数式）とは何か ― なぜ昔は使われ、今ES Modules時代に減ったのか",{"type":7,"value":8,"toc":1545},"minimark",[9,13,17,34,191,194,197,201,216,264,271,353,360,362,365,368,700,720,743,750,752,756,761,908,918,922,928,1124,1131,1201,1205,1211,1274,1277,1279,1282,1286,1328,1335,1345,1356,1360,1366,1419,1421,1424,1456,1458,1461,1499,1501,1504,1524,1527,1541],[10,11,5],"h1",{"id":12},"iife即時実行関数式とは何か-なぜ昔は使われ今es-modules時代に減ったのか",[14,15,16],"h2",{"id":16},"結論",[18,19,20,24,25,29,30,33],"p",{},[21,22,23],"strong",{},"IIFE（Immediately Invoked Function Expression、即時実行関数式）"," とは、定義した直後にその場で呼び出す関数式のこと。",[26,27,28],"code",{},"(function(){})()"," の形で書く。ES5 以前は ",[21,31,32],{},"モジュールスコープを作るための定番パターン","だったが、ES Modules (ESM) が普及した今は出番が大きく減った。",[35,36,41],"pre",{"className":37,"code":38,"language":39,"meta":40,"style":40},"language-javascript shiki shiki-themes vitesse-light vitesse-light","// 基本形\n(function() {\n  console.log('実行された')\n})()\n// 出力: 実行された\n\n// 引数を渡せる\n(function(name) {\n  console.log(`hello, ${name}`)\n})('world')\n// 出力: hello, world\n","javascript","",[26,42,43,52,69,98,104,110,117,123,140,170,185],{"__ignoreMap":40},[44,45,48],"span",{"class":46,"line":47},"line",1,[44,49,51],{"class":50},"sxvE3","// 基本形\n",[44,53,55,59,63,66],{"class":46,"line":54},2,[44,56,58],{"class":57},"shFtX","(",[44,60,62],{"class":61},"stQ0i","function",[44,64,65],{"class":57},"()",[44,67,68],{"class":57}," {\n",[44,70,72,76,79,83,85,89,93,95],{"class":46,"line":71},3,[44,73,75],{"class":74},"s4oTP","  console",[44,77,78],{"class":57},".",[44,80,82],{"class":81},"senZ8","log",[44,84,58],{"class":57},[44,86,88],{"class":87},"sMJiu","'",[44,90,92],{"class":91},"sdGka","実行された",[44,94,88],{"class":87},[44,96,97],{"class":57},")\n",[44,99,101],{"class":46,"line":100},4,[44,102,103],{"class":57},"})()\n",[44,105,107],{"class":46,"line":106},5,[44,108,109],{"class":50},"// 出力: 実行された\n",[44,111,113],{"class":46,"line":112},6,[44,114,116],{"emptyLinePlaceholder":115},true,"\n",[44,118,120],{"class":46,"line":119},7,[44,121,122],{"class":50},"// 引数を渡せる\n",[44,124,126,128,130,132,135,138],{"class":46,"line":125},8,[44,127,58],{"class":57},[44,129,62],{"class":61},[44,131,58],{"class":57},[44,133,134],{"class":74},"name",[44,136,137],{"class":57},")",[44,139,68],{"class":57},[44,141,143,145,147,149,151,154,157,161,163,166,168],{"class":46,"line":142},9,[44,144,75],{"class":74},[44,146,78],{"class":57},[44,148,82],{"class":81},[44,150,58],{"class":57},[44,152,153],{"class":87},"`",[44,155,156],{"class":91},"hello, ",[44,158,160],{"class":159},"sHkkW","${",[44,162,134],{"class":91},[44,164,165],{"class":159},"}",[44,167,153],{"class":87},[44,169,97],{"class":57},[44,171,173,176,178,181,183],{"class":46,"line":172},10,[44,174,175],{"class":57},"})(",[44,177,88],{"class":87},[44,179,180],{"class":91},"world",[44,182,88],{"class":87},[44,184,97],{"class":57},[44,186,188],{"class":46,"line":187},11,[44,189,190],{"class":50},"// 出力: hello, world\n",[18,192,193],{},"レガシーコードや jQuery プラグイン、CDN 配布の JavaScript ライブラリで今でも見かける。",[195,196],"hr",{},[14,198,200],{"id":199},"なぜ昔は-iife-が必要だったのか","なぜ昔は IIFE が必要だったのか",[18,202,203,204,207,208,211,212,215],{},"ES5 以前の JavaScript には ",[21,205,206],{},"モジュールシステムがなかった","。",[26,209,210],{},"\u003Cscript>"," タグで読み込んだファイルはすべて ",[21,213,214],{},"同じグローバルスコープ","を共有する。",[35,217,219],{"className":37,"code":218,"language":39,"meta":40,"style":40},"// foo.js\nvar counter = 0\n\n// bar.js\nvar counter = 100  // foo.js の counter を上書き！\n",[26,220,221,226,241,245,250],{"__ignoreMap":40},[44,222,223],{"class":46,"line":47},[44,224,225],{"class":50},"// foo.js\n",[44,227,228,231,234,237],{"class":46,"line":54},[44,229,230],{"class":61},"var",[44,232,233],{"class":74}," counter",[44,235,236],{"class":57}," =",[44,238,240],{"class":239},"sM54T"," 0\n",[44,242,243],{"class":46,"line":71},[44,244,116],{"emptyLinePlaceholder":115},[44,246,247],{"class":46,"line":100},[44,248,249],{"class":50},"// bar.js\n",[44,251,252,254,256,258,261],{"class":46,"line":106},[44,253,230],{"class":61},[44,255,233],{"class":74},[44,257,236],{"class":57},[44,259,260],{"class":239}," 100",[44,262,263],{"class":50},"  // foo.js の counter を上書き！\n",[18,265,266,267,270],{},"別々の作者が書いた js ファイルが同じ名前の変数を使うと衝突する。これを避けるために、",[21,268,269],{},"1つのファイル全体を関数で囲んで、ローカル変数として閉じ込める","のが IIFE。",[35,272,274],{"className":37,"code":273,"language":39,"meta":40,"style":40},"// foo.js\n(function() {\n  var counter = 0  // IIFE の中だけのローカル変数\n  // ...\n})()\n\n// bar.js\n(function() {\n  var counter = 100  // 別の IIFE のローカル変数。衝突しない\n  // ...\n})()\n",[26,275,276,280,290,305,310,314,318,322,332,345,349],{"__ignoreMap":40},[44,277,278],{"class":46,"line":47},[44,279,225],{"class":50},[44,281,282,284,286,288],{"class":46,"line":54},[44,283,58],{"class":57},[44,285,62],{"class":61},[44,287,65],{"class":57},[44,289,68],{"class":57},[44,291,292,295,297,299,302],{"class":46,"line":71},[44,293,294],{"class":61},"  var",[44,296,233],{"class":74},[44,298,236],{"class":57},[44,300,301],{"class":239}," 0",[44,303,304],{"class":50},"  // IIFE の中だけのローカル変数\n",[44,306,307],{"class":46,"line":100},[44,308,309],{"class":50},"  // ...\n",[44,311,312],{"class":46,"line":106},[44,313,103],{"class":57},[44,315,316],{"class":46,"line":112},[44,317,116],{"emptyLinePlaceholder":115},[44,319,320],{"class":46,"line":119},[44,321,249],{"class":50},[44,323,324,326,328,330],{"class":46,"line":125},[44,325,58],{"class":57},[44,327,62],{"class":61},[44,329,65],{"class":57},[44,331,68],{"class":57},[44,333,334,336,338,340,342],{"class":46,"line":142},[44,335,294],{"class":61},[44,337,233],{"class":74},[44,339,236],{"class":57},[44,341,260],{"class":239},[44,343,344],{"class":50},"  // 別の IIFE のローカル変数。衝突しない\n",[44,346,347],{"class":46,"line":172},[44,348,309],{"class":50},[44,350,351],{"class":46,"line":187},[44,352,103],{"class":57},[18,354,355,356,359],{},"これが「",[21,357,358],{},"IIFE はモジュールの代用品","」と言われる理由。",[195,361],{},[14,363,364],{"id":364},"構文のバリエーション",[18,366,367],{},"IIFE には複数の書き方がある。どれも同じ意味だが、好みやコーディング規約で変わる。",[35,369,371],{"className":37,"code":370,"language":39,"meta":40,"style":40},"// 1. 関数式を括弧で囲む（最も一般的）\n(function() {\n  console.log('A')\n})()\n\n// 2. 関数式全体を括弧で囲む\n(function() {\n  console.log('B')\n}())\n\n// 3. 単項演算子で関数式扱いにする\n!function() {\n  console.log('C')\n}()\n+function() {\n  console.log('D')\n}()\n~function() {\n  console.log('E')\n}()\n\n// 6. アロー関数 IIFE（ES6+）\n(() => {\n  console.log('F')\n})()\n\n// 7. async IIFE（ES2017+、トップレベル await が使えない環境向け）\n;(async () => {\n  const data = await fetch('/api/data')\n  console.log(await data.json())\n})()\n",[26,372,373,378,388,407,411,415,420,430,449,454,458,463,473,493,499,509,529,534,544,564,569,574,580,591,611,616,621,627,643,671,695],{"__ignoreMap":40},[44,374,375],{"class":46,"line":47},[44,376,377],{"class":50},"// 1. 関数式を括弧で囲む（最も一般的）\n",[44,379,380,382,384,386],{"class":46,"line":54},[44,381,58],{"class":57},[44,383,62],{"class":61},[44,385,65],{"class":57},[44,387,68],{"class":57},[44,389,390,392,394,396,398,400,403,405],{"class":46,"line":71},[44,391,75],{"class":74},[44,393,78],{"class":57},[44,395,82],{"class":81},[44,397,58],{"class":57},[44,399,88],{"class":87},[44,401,402],{"class":91},"A",[44,404,88],{"class":87},[44,406,97],{"class":57},[44,408,409],{"class":46,"line":100},[44,410,103],{"class":57},[44,412,413],{"class":46,"line":106},[44,414,116],{"emptyLinePlaceholder":115},[44,416,417],{"class":46,"line":112},[44,418,419],{"class":50},"// 2. 関数式全体を括弧で囲む\n",[44,421,422,424,426,428],{"class":46,"line":119},[44,423,58],{"class":57},[44,425,62],{"class":61},[44,427,65],{"class":57},[44,429,68],{"class":57},[44,431,432,434,436,438,440,442,445,447],{"class":46,"line":125},[44,433,75],{"class":74},[44,435,78],{"class":57},[44,437,82],{"class":81},[44,439,58],{"class":57},[44,441,88],{"class":87},[44,443,444],{"class":91},"B",[44,446,88],{"class":87},[44,448,97],{"class":57},[44,450,451],{"class":46,"line":142},[44,452,453],{"class":57},"}())\n",[44,455,456],{"class":46,"line":172},[44,457,116],{"emptyLinePlaceholder":115},[44,459,460],{"class":46,"line":187},[44,461,462],{"class":50},"// 3. 単項演算子で関数式扱いにする\n",[44,464,466,469,471],{"class":46,"line":465},12,[44,467,468],{"class":61},"!function",[44,470,65],{"class":57},[44,472,68],{"class":57},[44,474,476,478,480,482,484,486,489,491],{"class":46,"line":475},13,[44,477,75],{"class":74},[44,479,78],{"class":57},[44,481,82],{"class":81},[44,483,58],{"class":57},[44,485,88],{"class":87},[44,487,488],{"class":91},"C",[44,490,88],{"class":87},[44,492,97],{"class":57},[44,494,496],{"class":46,"line":495},14,[44,497,498],{"class":57},"}()\n",[44,500,502,505,507],{"class":46,"line":501},15,[44,503,504],{"class":61},"+function",[44,506,65],{"class":57},[44,508,68],{"class":57},[44,510,512,514,516,518,520,522,525,527],{"class":46,"line":511},16,[44,513,75],{"class":74},[44,515,78],{"class":57},[44,517,82],{"class":81},[44,519,58],{"class":57},[44,521,88],{"class":87},[44,523,524],{"class":91},"D",[44,526,88],{"class":87},[44,528,97],{"class":57},[44,530,532],{"class":46,"line":531},17,[44,533,498],{"class":57},[44,535,537,540,542],{"class":46,"line":536},18,[44,538,539],{"class":61},"~function",[44,541,65],{"class":57},[44,543,68],{"class":57},[44,545,547,549,551,553,555,557,560,562],{"class":46,"line":546},19,[44,548,75],{"class":74},[44,550,78],{"class":57},[44,552,82],{"class":81},[44,554,58],{"class":57},[44,556,88],{"class":87},[44,558,559],{"class":91},"E",[44,561,88],{"class":87},[44,563,97],{"class":57},[44,565,567],{"class":46,"line":566},20,[44,568,498],{"class":57},[44,570,572],{"class":46,"line":571},21,[44,573,116],{"emptyLinePlaceholder":115},[44,575,577],{"class":46,"line":576},22,[44,578,579],{"class":50},"// 6. アロー関数 IIFE（ES6+）\n",[44,581,583,586,589],{"class":46,"line":582},23,[44,584,585],{"class":57},"(()",[44,587,588],{"class":57}," =>",[44,590,68],{"class":57},[44,592,594,596,598,600,602,604,607,609],{"class":46,"line":593},24,[44,595,75],{"class":74},[44,597,78],{"class":57},[44,599,82],{"class":81},[44,601,58],{"class":57},[44,603,88],{"class":87},[44,605,606],{"class":91},"F",[44,608,88],{"class":87},[44,610,97],{"class":57},[44,612,614],{"class":46,"line":613},25,[44,615,103],{"class":57},[44,617,619],{"class":46,"line":618},26,[44,620,116],{"emptyLinePlaceholder":115},[44,622,624],{"class":46,"line":623},27,[44,625,626],{"class":50},"// 7. async IIFE（ES2017+、トップレベル await が使えない環境向け）\n",[44,628,630,633,636,639,641],{"class":46,"line":629},28,[44,631,632],{"class":57},";(",[44,634,635],{"class":61},"async",[44,637,638],{"class":57}," ()",[44,640,588],{"class":57},[44,642,68],{"class":57},[44,644,646,649,652,654,657,660,662,664,667,669],{"class":46,"line":645},29,[44,647,648],{"class":61},"  const",[44,650,651],{"class":74}," data",[44,653,236],{"class":57},[44,655,656],{"class":159}," await",[44,658,659],{"class":81}," fetch",[44,661,58],{"class":57},[44,663,88],{"class":87},[44,665,666],{"class":91},"/api/data",[44,668,88],{"class":87},[44,670,97],{"class":57},[44,672,674,676,678,680,682,685,687,689,692],{"class":46,"line":673},30,[44,675,75],{"class":74},[44,677,78],{"class":57},[44,679,82],{"class":81},[44,681,58],{"class":57},[44,683,684],{"class":159},"await",[44,686,651],{"class":74},[44,688,78],{"class":57},[44,690,691],{"class":81},"json",[44,693,694],{"class":57},"())\n",[44,696,698],{"class":46,"line":697},31,[44,699,103],{"class":57},[18,701,702,704,705,707,708,711,712,715,716,719],{},[26,703,468],{}," ",[26,706,504],{}," 系は、ファイル先頭で ",[21,709,710],{},"直前のステートメントとの繋がりを断つ","ために使われた歴史がある。たとえば前のファイルの末尾がセミコロンなしだった場合、",[26,713,714],{},"(function(){...})()"," がリテラル呼び出しと誤認されないように、行頭に ",[26,717,718],{},";"," を付ける慣習もある。",[35,721,723],{"className":37,"code":722,"language":39,"meta":40,"style":40},";(function() {\n  // ...\n})()\n",[26,724,725,735,739],{"__ignoreMap":40},[44,726,727,729,731,733],{"class":46,"line":47},[44,728,632],{"class":57},[44,730,62],{"class":61},[44,732,65],{"class":57},[44,734,68],{"class":57},[44,736,737],{"class":46,"line":54},[44,738,309],{"class":50},[44,740,741],{"class":46,"line":71},[44,742,103],{"class":57},[18,744,745,746,749],{},"これは「",[21,747,748],{},"defensive semicolon","」と呼ばれる安全策。Minification で改行が消えても安全に動く。",[195,751],{},[14,753,755],{"id":754},"iife-の典型的な用途","IIFE の典型的な用途",[757,758,760],"h3",{"id":759},"_1-プライベートスコープを作るクラシック","1. プライベートスコープを作る（クラシック）",[35,762,764],{"className":37,"code":763,"language":39,"meta":40,"style":40},"var myModule = (function() {\n  // ここはローカルスコープ\n  var privateCounter = 0\n\n  return {\n    increment: function() { privateCounter++ },\n    getCount: function() { return privateCounter }\n  }\n})()\n\nmyModule.increment()\nmyModule.getCount()  // 1\nmyModule.privateCounter  // undefined（アクセス不可）\n",[26,765,766,784,789,800,804,811,835,856,861,865,869,882,896],{"__ignoreMap":40},[44,767,768,770,773,775,778,780,782],{"class":46,"line":47},[44,769,230],{"class":61},[44,771,772],{"class":74}," myModule",[44,774,236],{"class":57},[44,776,777],{"class":57}," (",[44,779,62],{"class":61},[44,781,65],{"class":57},[44,783,68],{"class":57},[44,785,786],{"class":46,"line":54},[44,787,788],{"class":50},"  // ここはローカルスコープ\n",[44,790,791,793,796,798],{"class":46,"line":71},[44,792,294],{"class":61},[44,794,795],{"class":74}," privateCounter",[44,797,236],{"class":57},[44,799,240],{"class":239},[44,801,802],{"class":46,"line":100},[44,803,116],{"emptyLinePlaceholder":115},[44,805,806,809],{"class":46,"line":106},[44,807,808],{"class":159},"  return",[44,810,68],{"class":57},[44,812,813,816,819,822,824,827,829,832],{"class":46,"line":112},[44,814,815],{"class":81},"    increment",[44,817,818],{"class":57},":",[44,820,821],{"class":61}," function",[44,823,65],{"class":57},[44,825,826],{"class":57}," {",[44,828,795],{"class":74},[44,830,831],{"class":61},"++",[44,833,834],{"class":57}," },\n",[44,836,837,840,842,844,846,848,851,853],{"class":46,"line":119},[44,838,839],{"class":81},"    getCount",[44,841,818],{"class":57},[44,843,821],{"class":61},[44,845,65],{"class":57},[44,847,826],{"class":57},[44,849,850],{"class":159}," return",[44,852,795],{"class":74},[44,854,855],{"class":57}," }\n",[44,857,858],{"class":46,"line":125},[44,859,860],{"class":57},"  }\n",[44,862,863],{"class":46,"line":142},[44,864,103],{"class":57},[44,866,867],{"class":46,"line":172},[44,868,116],{"emptyLinePlaceholder":115},[44,870,871,874,876,879],{"class":46,"line":187},[44,872,873],{"class":74},"myModule",[44,875,78],{"class":57},[44,877,878],{"class":81},"increment",[44,880,881],{"class":57},"()\n",[44,883,884,886,888,891,893],{"class":46,"line":465},[44,885,873],{"class":74},[44,887,78],{"class":57},[44,889,890],{"class":81},"getCount",[44,892,65],{"class":57},[44,894,895],{"class":50},"  // 1\n",[44,897,898,900,902,905],{"class":46,"line":475},[44,899,873],{"class":74},[44,901,78],{"class":57},[44,903,904],{"class":74},"privateCounter",[44,906,907],{"class":50},"  // undefined（アクセス不可）\n",[18,909,355,910,913,914,917],{},[21,911,912],{},"revealing module pattern","」と呼ばれる古いモジュール構成の基本形。今は ES Modules の ",[26,915,916],{},"export"," で同じことができる。",[757,919,921],{"id":920},"_2-ループ変数のキャプチャ問題を回避","2. ループ変数のキャプチャ問題を回避",[18,923,924,925,927],{},"ES5 までは ",[26,926,230],{}," のホイスティングによってループ内のクロージャが意図せず共有された。",[35,929,931],{"className":37,"code":930,"language":39,"meta":40,"style":40},"// ES5: 全部 3 が出力される\nfor (var i = 0; i \u003C 3; i++) {\n  setTimeout(function() { console.log(i) }, 0)\n}\n// 3, 3, 3\n\n// ES5 + IIFE: 0, 1, 2 が出力される\nfor (var i = 0; i \u003C 3; i++) {\n  (function(j) {\n    setTimeout(function() { console.log(j) }, 0)\n  })(i)\n}\n// 0, 1, 2\n",[26,932,933,938,974,1008,1013,1018,1022,1027,1059,1075,1106,1115,1119],{"__ignoreMap":40},[44,934,935],{"class":46,"line":47},[44,936,937],{"class":50},"// ES5: 全部 3 が出力される\n",[44,939,940,943,945,947,950,952,954,956,958,961,964,966,968,970,972],{"class":46,"line":54},[44,941,942],{"class":159},"for",[44,944,777],{"class":57},[44,946,230],{"class":61},[44,948,949],{"class":74}," i",[44,951,236],{"class":57},[44,953,301],{"class":239},[44,955,718],{"class":57},[44,957,949],{"class":74},[44,959,960],{"class":57}," \u003C",[44,962,963],{"class":239}," 3",[44,965,718],{"class":57},[44,967,949],{"class":74},[44,969,831],{"class":61},[44,971,137],{"class":57},[44,973,68],{"class":57},[44,975,976,979,981,983,985,987,990,992,994,996,999,1001,1004,1006],{"class":46,"line":71},[44,977,978],{"class":81},"  setTimeout",[44,980,58],{"class":57},[44,982,62],{"class":61},[44,984,65],{"class":57},[44,986,826],{"class":57},[44,988,989],{"class":74}," console",[44,991,78],{"class":57},[44,993,82],{"class":81},[44,995,58],{"class":57},[44,997,998],{"class":74},"i",[44,1000,137],{"class":57},[44,1002,1003],{"class":57}," },",[44,1005,301],{"class":239},[44,1007,97],{"class":57},[44,1009,1010],{"class":46,"line":100},[44,1011,1012],{"class":57},"}\n",[44,1014,1015],{"class":46,"line":106},[44,1016,1017],{"class":50},"// 3, 3, 3\n",[44,1019,1020],{"class":46,"line":112},[44,1021,116],{"emptyLinePlaceholder":115},[44,1023,1024],{"class":46,"line":119},[44,1025,1026],{"class":50},"// ES5 + IIFE: 0, 1, 2 が出力される\n",[44,1028,1029,1031,1033,1035,1037,1039,1041,1043,1045,1047,1049,1051,1053,1055,1057],{"class":46,"line":125},[44,1030,942],{"class":159},[44,1032,777],{"class":57},[44,1034,230],{"class":61},[44,1036,949],{"class":74},[44,1038,236],{"class":57},[44,1040,301],{"class":239},[44,1042,718],{"class":57},[44,1044,949],{"class":74},[44,1046,960],{"class":57},[44,1048,963],{"class":239},[44,1050,718],{"class":57},[44,1052,949],{"class":74},[44,1054,831],{"class":61},[44,1056,137],{"class":57},[44,1058,68],{"class":57},[44,1060,1061,1064,1066,1068,1071,1073],{"class":46,"line":142},[44,1062,1063],{"class":57},"  (",[44,1065,62],{"class":61},[44,1067,58],{"class":57},[44,1069,1070],{"class":74},"j",[44,1072,137],{"class":57},[44,1074,68],{"class":57},[44,1076,1077,1080,1082,1084,1086,1088,1090,1092,1094,1096,1098,1100,1102,1104],{"class":46,"line":172},[44,1078,1079],{"class":81},"    setTimeout",[44,1081,58],{"class":57},[44,1083,62],{"class":61},[44,1085,65],{"class":57},[44,1087,826],{"class":57},[44,1089,989],{"class":74},[44,1091,78],{"class":57},[44,1093,82],{"class":81},[44,1095,58],{"class":57},[44,1097,1070],{"class":74},[44,1099,137],{"class":57},[44,1101,1003],{"class":57},[44,1103,301],{"class":239},[44,1105,97],{"class":57},[44,1107,1108,1111,1113],{"class":46,"line":187},[44,1109,1110],{"class":57},"  })(",[44,1112,998],{"class":74},[44,1114,97],{"class":57},[44,1116,1117],{"class":46,"line":465},[44,1118,1012],{"class":57},[44,1120,1121],{"class":46,"line":475},[44,1122,1123],{"class":50},"// 0, 1, 2\n",[18,1125,1126,1127,1130],{},"ES6 以降は ",[26,1128,1129],{},"let"," を使えば同じことができる：",[35,1132,1134],{"className":37,"code":1133,"language":39,"meta":40,"style":40},"for (let i = 0; i \u003C 3; i++) {\n  setTimeout(() => console.log(i), 0)\n}\n// 0, 1, 2\n",[26,1135,1136,1168,1193,1197],{"__ignoreMap":40},[44,1137,1138,1140,1142,1144,1146,1148,1150,1152,1154,1156,1158,1160,1162,1164,1166],{"class":46,"line":47},[44,1139,942],{"class":159},[44,1141,777],{"class":57},[44,1143,1129],{"class":61},[44,1145,949],{"class":74},[44,1147,236],{"class":57},[44,1149,301],{"class":239},[44,1151,718],{"class":57},[44,1153,949],{"class":74},[44,1155,960],{"class":57},[44,1157,963],{"class":239},[44,1159,718],{"class":57},[44,1161,949],{"class":74},[44,1163,831],{"class":61},[44,1165,137],{"class":57},[44,1167,68],{"class":57},[44,1169,1170,1172,1174,1176,1178,1180,1182,1184,1186,1189,1191],{"class":46,"line":54},[44,1171,978],{"class":81},[44,1173,585],{"class":57},[44,1175,588],{"class":57},[44,1177,989],{"class":74},[44,1179,78],{"class":57},[44,1181,82],{"class":81},[44,1183,58],{"class":57},[44,1185,998],{"class":74},[44,1187,1188],{"class":57},"),",[44,1190,301],{"class":239},[44,1192,97],{"class":57},[44,1194,1195],{"class":46,"line":71},[44,1196,1012],{"class":57},[44,1198,1199],{"class":46,"line":100},[44,1200,1123],{"class":50},[757,1202,1204],{"id":1203},"_3-async-iife-でトップレベル-await-を回避","3. async IIFE でトップレベル await を回避",[18,1206,1207,1208,1210],{},"ES2022 以降、ES Modules ではトップレベル ",[26,1209,684],{}," が使える。だが CommonJS や古い環境では使えないので、async IIFE で代用する。",[35,1212,1214],{"className":37,"code":1213,"language":39,"meta":40,"style":40},";(async () => {\n  const data = await fetch('/api/data')\n  console.log(await data.json())\n})()\n",[26,1215,1216,1228,1250,1270],{"__ignoreMap":40},[44,1217,1218,1220,1222,1224,1226],{"class":46,"line":47},[44,1219,632],{"class":57},[44,1221,635],{"class":61},[44,1223,638],{"class":57},[44,1225,588],{"class":57},[44,1227,68],{"class":57},[44,1229,1230,1232,1234,1236,1238,1240,1242,1244,1246,1248],{"class":46,"line":54},[44,1231,648],{"class":61},[44,1233,651],{"class":74},[44,1235,236],{"class":57},[44,1237,656],{"class":159},[44,1239,659],{"class":81},[44,1241,58],{"class":57},[44,1243,88],{"class":87},[44,1245,666],{"class":91},[44,1247,88],{"class":87},[44,1249,97],{"class":57},[44,1251,1252,1254,1256,1258,1260,1262,1264,1266,1268],{"class":46,"line":71},[44,1253,75],{"class":74},[44,1255,78],{"class":57},[44,1257,82],{"class":81},[44,1259,58],{"class":57},[44,1261,684],{"class":159},[44,1263,651],{"class":74},[44,1265,78],{"class":57},[44,1267,691],{"class":81},[44,1269,694],{"class":57},[44,1271,1272],{"class":46,"line":100},[44,1273,103],{"class":57},[18,1275,1276],{},"CLI スクリプトの先頭でよく使う。",[195,1278],{},[14,1280,1281],{"id":1281},"なぜ今は使われなくなったのか",[757,1283,1285],{"id":1284},"理由1-es-modules-が普及した","理由1: ES Modules が普及した",[35,1287,1289],{"className":37,"code":1288,"language":39,"meta":40,"style":40},"// modern.mjs\nconst counter = 0  // モジュールスコープに閉じている\nexport function increment() { /* ... */ }\n",[26,1290,1291,1296,1310],{"__ignoreMap":40},[44,1292,1293],{"class":46,"line":47},[44,1294,1295],{"class":50},"// modern.mjs\n",[44,1297,1298,1301,1303,1305,1307],{"class":46,"line":54},[44,1299,1300],{"class":61},"const",[44,1302,233],{"class":74},[44,1304,236],{"class":57},[44,1306,301],{"class":239},[44,1308,1309],{"class":50},"  // モジュールスコープに閉じている\n",[44,1311,1312,1314,1316,1319,1321,1323,1326],{"class":46,"line":71},[44,1313,916],{"class":159},[44,1315,821],{"class":61},[44,1317,1318],{"class":81}," increment",[44,1320,65],{"class":57},[44,1322,826],{"class":57},[44,1324,1325],{"class":50}," /* ... */",[44,1327,855],{"class":57},[18,1329,1330,1331,1334],{},"ES Modules のファイルは ",[21,1332,1333],{},"デフォルトでスコープが閉じる","。IIFE でラップする必要がない。",[757,1336,1338,1339,1341,1342,1344],{"id":1337},"理由2-let-const-がブロックスコープを提供する","理由2: ",[26,1340,1129],{}," / ",[26,1343,1300],{}," がブロックスコープを提供する",[18,1346,1347,1349,1350,1352,1353,1355],{},[26,1348,230],{}," のホイスティング問題が ",[26,1351,1129],{},"/",[26,1354,1300],{}," で解消したので、ループ内クロージャ回避の IIFE は不要。",[757,1357,1359],{"id":1358},"理由3-トップレベル-await-の登場","理由3: トップレベル await の登場",[18,1361,1362,1363,1365],{},"ES Modules では ",[26,1364,684],{}," をトップレベルで書ける（Node.js 14.8+、最新ブラウザ）。",[35,1367,1369],{"className":37,"code":1368,"language":39,"meta":40,"style":40},"// index.mjs\nconst data = await fetch('/api/data')\nconsole.log(await data.json())\n",[26,1370,1371,1376,1398],{"__ignoreMap":40},[44,1372,1373],{"class":46,"line":47},[44,1374,1375],{"class":50},"// index.mjs\n",[44,1377,1378,1380,1382,1384,1386,1388,1390,1392,1394,1396],{"class":46,"line":54},[44,1379,1300],{"class":61},[44,1381,651],{"class":74},[44,1383,236],{"class":57},[44,1385,656],{"class":159},[44,1387,659],{"class":81},[44,1389,58],{"class":57},[44,1391,88],{"class":87},[44,1393,666],{"class":91},[44,1395,88],{"class":87},[44,1397,97],{"class":57},[44,1399,1400,1403,1405,1407,1409,1411,1413,1415,1417],{"class":46,"line":71},[44,1401,1402],{"class":74},"console",[44,1404,78],{"class":57},[44,1406,82],{"class":81},[44,1408,58],{"class":57},[44,1410,684],{"class":159},[44,1412,651],{"class":74},[44,1414,78],{"class":57},[44,1416,691],{"class":81},[44,1418,694],{"class":57},[195,1420],{},[14,1422,1423],{"id":1423},"いまだに見かける場面",[1425,1426,1427,1434,1444,1450],"ul",{},[1428,1429,1430,1433],"li",{},[21,1431,1432],{},"CDN 配布の UMD ライブラリ","（jQuery プラグイン、d3.js のサンプル等）: ブラウザ・Node 両対応のために IIFE で囲む",[1428,1435,1436,1439,1440,1443],{},[21,1437,1438],{},"bookmarklet",": ",[26,1441,1442],{},"javascript:(function(){...})()"," でブラウザのアドレスバーから実行",[1428,1445,1446,1449],{},[21,1447,1448],{},"古い CMS のテンプレートに直接書く JS",": モジュールシステムが使えない環境",[1428,1451,1452,1455],{},[21,1453,1454],{},"ESM 非対応の古い CommonJS パッケージ","で async 処理を即実行したいとき",[195,1457],{},[14,1459,1460],{"id":1460},"まとめ",[1425,1462,1463,1472,1479,1490,1493],{},[1428,1464,1465,1466,1468,1469],{},"IIFE = 定義した直後にその場で呼ぶ関数式。",[26,1467,28],{}," または ",[26,1470,1471],{},"(()=>{})()",[1428,1473,1474,1475,1478],{},"ES5 以前の ",[21,1476,1477],{},"モジュールスコープの代用品","として広く使われた",[1428,1480,1481,1482,1352,1484,1486,1487,1489],{},"ES Modules + ",[26,1483,1129],{},[26,1485,1300],{}," + トップレベル ",[26,1488,684],{}," の登場で、新規コードではほぼ不要",[1428,1491,1492],{},"レガシーコード読解・CDN ライブラリの理解には今でも必要な知識",[1428,1494,1495,1498],{},[26,1496,1497],{},";(function(){})()"," の先頭セミコロンは defensive semicolon と呼ばれる安全策",[195,1500],{},[14,1502,1503],{"id":1503},"関連リンク",[1425,1505,1506,1517],{},[1428,1507,1508],{},[1509,1510,1516],"a",{"href":1511,"target":1512,"rel":1513},"https://developer.mozilla.org/ja/docs/Glossary/IIFE","_blank",[1514,1515],"noopener","noreferrer","MDN: IIFE 用語集",[1428,1518,1519],{},[1509,1520,1523],{"href":1521,"target":1512,"rel":1522},"https://tc39.es/ecma262/#sec-function-definitions",[1514,1515],"ECMAScript 仕様: Function Definitions",[14,1525,1526],{"id":1526},"関連記事",[1425,1528,1529,1535],{},[1428,1530,1531],{},[1509,1532,1534],{"href":1533},"/number-isfinite-explained","Number.isFinite と isFinite の違い",[1428,1536,1537],{},[1509,1538,1540],{"href":1539},"/strict-equality-vs-loose-equality","厳密等価演算子（===）と等価演算子（==）の違い",[1542,1543,1544],"style",{},"html pre.shiki code .sxvE3, html code.shiki .sxvE3{--shiki-default:#A0ADA0;--shiki-dark:#A0ADA0}html pre.shiki code .shFtX, html code.shiki .shFtX{--shiki-default:#999999;--shiki-dark:#999999}html pre.shiki code .stQ0i, html code.shiki .stQ0i{--shiki-default:#AB5959;--shiki-dark:#AB5959}html pre.shiki code .s4oTP, html code.shiki .s4oTP{--shiki-default:#B07D48;--shiki-dark:#B07D48}html pre.shiki code .senZ8, html code.shiki .senZ8{--shiki-default:#59873A;--shiki-dark:#59873A}html pre.shiki code .sMJiu, html code.shiki .sMJiu{--shiki-default:#B5695977;--shiki-dark:#B5695977}html pre.shiki code .sdGka, html code.shiki .sdGka{--shiki-default:#B56959;--shiki-dark:#B56959}html pre.shiki code .sHkkW, html code.shiki .sHkkW{--shiki-default:#1E754F;--shiki-dark:#1E754F}html .default .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .dark .shiki span {color: var(--shiki-dark);background: var(--shiki-dark-bg);font-style: var(--shiki-dark-font-style);font-weight: var(--shiki-dark-font-weight);text-decoration: var(--shiki-dark-text-decoration);}html.dark .shiki span {color: var(--shiki-dark);background: var(--shiki-dark-bg);font-style: var(--shiki-dark-font-style);font-weight: var(--shiki-dark-font-weight);text-decoration: var(--shiki-dark-text-decoration);}html pre.shiki code .sM54T, html code.shiki .sM54T{--shiki-default:#2F798A;--shiki-dark:#2F798A}",{"title":40,"searchDepth":54,"depth":54,"links":1546},[1547,1548,1549,1550,1555,1561,1562,1563,1564],{"id":16,"depth":54,"text":16},{"id":199,"depth":54,"text":200},{"id":364,"depth":54,"text":364},{"id":754,"depth":54,"text":755,"children":1551},[1552,1553,1554],{"id":759,"depth":71,"text":760},{"id":920,"depth":71,"text":921},{"id":1203,"depth":71,"text":1204},{"id":1281,"depth":54,"text":1281,"children":1556},[1557,1558,1560],{"id":1284,"depth":71,"text":1285},{"id":1337,"depth":71,"text":1559},"理由2: let / const がブロックスコープを提供する",{"id":1358,"depth":71,"text":1359},{"id":1423,"depth":54,"text":1423},{"id":1460,"depth":54,"text":1460},{"id":1503,"depth":54,"text":1503},{"id":1526,"depth":54,"text":1526},"dev","Immediately Invoked Function Expression（IIFE、即時実行関数式）の構文・歴史的背景・使われなくなった理由を整理する。jQuery プラグインやレガシーコードで頻出する `(function(){})()` の意味と、ES Modules 時代の代替パターン。","md",{},"/iife-immediately-invoked-function-expression",null,false,"2026-06-09T00:00:00.000Z",{"title":5,"description":1566},"2026-06/2026-06-09/iife-immediately-invoked-function-expression",[1576,1577,1578,1579,1580],"JavaScript","IIFE","スコープ","ES Modules","レガシーコード","t4UnkW68kmHfj6siQ8ixwC092CfjowvqeB-fOPdpf3E",[1583,1591,1598,1609,1619],{"title":1584,"description":1585,"path":1533,"tags":1586,"publishedAt":1572,"updatedAt":1570},"Number.isFinite と isFinite の違い ― JavaScript で「有限の数か」を判定する正しい書き方","JavaScript の Number.isFinite と global の isFinite は名前が似ているが挙動が全く違う。isFinite('123') が true になるのに対し Number.isFinite('123') が false になる理由を、型強制の挙動と実用例で整理する。",[1576,1587,1588,1589,1590],"Number","isFinite","型判定","TypeScript",{"title":1592,"description":1593,"path":1539,"tags":1594,"publishedAt":1572,"updatedAt":1570},"厳密等価演算子（===）と等価演算子（==）の違い ― JavaScript で == を使わない方がいい理由","JavaScript の === と == の挙動の違いを、型強制テーブルと実コード例で整理する。null と undefined の比較、空文字と 0 の比較、配列との比較など、== が落とし穴になる典型パターンを網羅。",[1576,1595,1596,1590,1597],"厳密等価演算子","型強制","ESLint",{"title":1599,"description":1600,"path":1601,"tags":1602,"publishedAt":1608,"updatedAt":1570},"Leaflet.jsで東京再開発フィールドワークマップを構築した","Excelの再開発タイムライン・ルート計画・木密地域データをLeaflet.jsで可視化。カード配置、SVGピン問題、優先度フィルタ、自動ズーム、Wikimedia Commons画像への差し替えなど、インタラクティブ地図の実装を一通り記録する。","/fieldwork-map-leaflet-2026-02-15",[1603,1604,1605,1606,39,1607],"leaflet","地図","データ可視化","tokyo-soundscape","excel","2026-02-15T00:00:00.000Z",{"title":1610,"description":1611,"path":1612,"tags":1613,"publishedAt":1618,"updatedAt":1570},"Nuxt Contentブログカレンダーで月末日の記事が表示されないバグの原因と修正","publishedAtのISO文字列比較が原因で月末日の記事がカレンダーに表示されないバグを発見・修正した記録","/blog-calendar-month-end-bug-fix-2026-01-30",[1614,1615,1616,1617,1576],"Nuxt Content","バグ修正","カレンダー","日付比較","2026-01-30T00:00:00.000Z",{"title":1620,"description":1621,"path":1622,"tags":1623,"publishedAt":1626,"updatedAt":1570},"Chrome拡張機能のchrome.downloads APIでファイル名が無視される問題とプロファイル設定の関係","chrome.downloads.download APIでfilenameやサブフォルダ指定が無視され「ダウンロード.csv」になる問題を調査。Chromeのプロファイル設定が原因の可能性が判明。","/chrome-downloads-api-profile-issue",[1624,39,1625],"chrome-extension","troubleshooting","2026-01-22T00:00:00.000Z",[],"https://log.eurekapu.com/og/blog/iife-immediately-invoked-function-expression.png?v=2026-06-09T00%3A00%3A00.000Z&title=IIFE%EF%BC%88%E5%8D%B3%E6%99%82%E5%AE%9F%E8%A1%8C%E9%96%A2%E6%95%B0%E5%BC%8F%EF%BC%89%E3%81%A8%E3%81%AF%E4%BD%95%E3%81%8B%20%E2%80%95%20%E3%81%AA%E3%81%9C%E6%98%94%E3%81%AF%E4%BD%BF%E3%82%8F%E3%82%8C%E3%80%81%E4%BB%8AES%20Modules%E6%99%82%E4%BB%A3%E3%81%AB%E6%B8%9B%E3%81%A3%E3%81%9F%E3%81%AE%E3%81%8B&author=Kei%20Komatsu&sig=a6bc1f170e8444f2",1781076213677]