日本語
メニュー

Web技術の基礎

console.log('A');
setTimeout(() => console.log('B'), 0);
Promise.resolve().then(() => console.log('C'));
console.log('D');

上のJavaScriptをブラウザで実行したとき、コンソールに表示される文字の順序として正しいものはどれか。

  1. AA → B → C → D
  2. BA → D → B → C
  3. CA → D → C → B
答えと解説を見る

正解：C. A → D → C → B

ページのJavaScriptは1本のメインスレッドで動き、いま実行しているコードが終わるまで、ほかの処理は割り込みません。まず同期的なコードがすべて実行されて、A と D が表示されます。Promise の then に渡した処理はマイクロタスクとして、いまのコードが終わった直後に実行されるので、次に C が表示されます。setTimeout に0 msを指定しても、その処理はタスクとして順番待ちの列に入り、イベントループがマイクロタスクを片付けた後に取り出すので、B は最後になります。

  • A. setTimeout や then に渡した処理は、その場では実行されず、同期的なコードが終わった後に実行されます。
  • B. Promise の処理(マイクロタスク)は、setTimeout の処理(タスク)より先に実行されます。
  • C. 正しい。同期的なコードの A と D、マイクロタスクの C、タスクの B の順です。
この分野を解く 分野ページへ

Web技術の基礎の参考書を探す PR

Amazonの検索結果へのリンクです。Amazonのアソシエイトとして、半導体教室は適格販売により収入を得ています。

Web技術の基礎のほかの問題

  1. ブラウザの同一オリジンポリシーで、https://www.example.com/app/index.html と同じオリジンとみなされるURLはどれか。
  2. https://app.example.com のページのJavaScriptが、fetch を使って https://api.example.net/orders へ、Content-Type: application/json の本文を付けたPOSTのリクエストを送ろうとしている。このときのCORSの動作として、正しいものはどれか。
  3. Service Workerの説明として、正しいものはどれか。
  4. スマートフォンにも対応するレスポンシブデザインのページで、<head>に <meta name="viewport" content="width=device-width, initial-scale=1"> を書く主な目的はどれか。
  5. 利用者ごとに内容が違うマイページの応答に、Cache-Control: private, max-age=60 を付けた。この指定の効果として正しいものはどれか。