1. はじめに
JavaScript を学習していると、以下のようなコードを見かけることがあります。
(async () => {
console.log("実行された");
})();
この (async () => {})() は「即時実行関数（IIFE: Immediately Invoked Function Expression）」の一種です。
しかし「非同期関数（async function）」と組み合わせた場合、いつ実行されるのか？ という疑問を持つ方が多いでしょう。
本記事では、(async () => {})() が どのタイミングで実行されるのか を解説
2. 即時実行関数（IIFE）とは？
通常の関数は定義しただけでは実行されません。
function test() {
console.log("Hello");
}
test(); // ← 呼び出しが必要
一方、即時実行関数は「定義と同時に実行される」特殊な書き方です。
(() => {
console.log("Hello");
})(); // ← 定義と同時に呼び出し
これにより グローバル変数の汚染を避けつつ、すぐに処理を開始 できます。
3. 非同期版即時実行関数 (async () => {})()
非同期処理を使いたい場合、以下のように async を付けて書きます。
(async () => {
const data = await fetch("https://example.com/data.json");
console.log(await data.json());
})();
ポイントは以下の通りです：
asyncをつけることでawaitが使える- 戻り値は Promiseオブジェクト になる
- 定義した瞬間に即実行される
4. 実行タイミングはいつ？
結論から言うと、スクリプトが実行された瞬間に即時実行される という点は通常の IIFE と変わりません。
ただし、HTML 内のどこにスクリプトを書いたかで挙動が変わります。
(1) <head> 内に記述した場合
<head>
<script>
(async () => {
console.log("head内で実行される");
})();
</script>
</head>
➡ ページの DOM 構築前に実行されます。
(2) <body> の末尾に記述した場合
<body>
<p>本文</p>
<script>
(async () => {
console.log("DOM構築後に実行される");
})();
</script>
</body>
➡ DOM が構築された後に実行されるため、要素操作に便利です。
(3) <script defer> を使った場合
<script defer>
(async () => {
console.log("defer後に実行される");
})();
</script>
➡ DOM の構築完了後に実行されます。
5. await の処理タイミング
関数自体は スクリプト読み込み時に即実行 されますが、await を使った部分は 非同期処理の完了を待って再開 します。
つまり：
(async () => {
console.log("開始");
await new Promise(r => setTimeout(r, 1000));
console.log("1秒後に実行");
})();
実行結果は次のようになります。
開始
（1秒待機）
1秒後に実行
6. まとめ
(async () => {})()は 非同期即時実行関数- 実行タイミングは スクリプトが読み込まれた瞬間
- HTML のどこに書くか、
defer/asyncを使うかでタイミングが変わる await部分は 非同期処理の完了後に続きが実行される
