QUIZ 15分

Q1. LCP(Largest Contentful Paint)の「良好」な閾値は?

A. 1.0秒以内 B. 2.5秒以内 C. 4.0秒以内 D. 5.0秒以内

答えを見る

正解: B

Core Web VitalsではLCPが2.5秒以内を「良好」、2.5〜4.0秒を「改善が必要」、4.0秒超を「不良」と評価する。

Q2. LCP対象の画像にloading="lazy"を設定すべきでない理由は?

A. lazy loadingはLCP画像に対応していないから B. 遅延読み込みにより画像の取得開始が遅れ、LCPが悪化するから C. lazy loadingはSEOに悪影響があるから D. ブラウザが自動的にLCP画像をeagerにするから

答えを見る

正解: B

LCP対象の画像にlazy loadingを設定すると、ビューポートに入るまで画像のフェッチが開始されず、LCPが大幅に悪化する。LCP画像にはloading=“eager”とfetchpriority=“high”を設定すべき。

Q3. Tree Shakingが正しく機能するための前提条件は?

A. CommonJSモジュール形式を使用すること B. ESModules(import/export)形式でsideEffects: falseが設定されていること C. TypeScriptで型定義があること D. webpackのproductionモードを使用すること

答えを見る

正解: B

Tree ShakingはESModulesの静的構造を利用して不要なエクスポートを除去する。CommonJSのrequire()は動的なため解析できない。package.jsonのsideEffects: falseの設定も必要。

Q4. ISR(Incremental Static Regeneration)の特徴は?

A. リクエストごとにサーバーサイドでHTMLを生成する B. ビルド時に全ページを静的生成し、以降更新しない C. 静的に生成したページを指定間隔でバックグラウンド再生成する D. クライアント側でJavaScriptにより描画する

答えを見る

正解: C

ISRはSSGの利点(高速な配信)を持ちつつ、revalidate間隔で古くなったページをバックグラウンドで再生成する。ユーザーには常にキャッシュされた高速なレスポンスを返しつつ、コンテンツの鮮度も保てる。

Q5. CLSを悪化させる最も一般的な原因は?

A. JavaScriptの実行が遅い B. 画像やiframeにwidth/height属性が未指定で、ロード後にレイアウトがずれる C. CSSファイルが大きい D. HTTPリクエスト数が多い

答えを見る

正解: B

CLSの最も一般的な原因は、画像・動画・iframe等のメディア要素にサイズが明示されていないこと。読み込み完了時にサイズが確定し、周囲の要素が押し出されてレイアウトシフトが発生する。

Q6. React.memoの主な目的は?

A. メモリ使用量を削減する B. propsが変化していない場合に再レンダリングをスキップする C. コンポーネントの初回レンダリングを高速化する D. サーバーサイドレンダリングを最適化する

答えを見る

正解: B

React.memoは高階コンポーネントで、前回のpropsと今回のpropsを浅い比較し、変化がなければ再レンダリングをスキップする。リストの各アイテムなど、親の再レンダリングで不要に再描画されるコンポーネントに有効。

Q7. font-display: swapの挙動は?

A. フォントがロードされるまでテキストを非表示にする B. フォールバックフォントで即座に表示し、カスタムフォントのロード後に切り替える C. カスタムフォントが利用できない場合はフォールバックのまま表示する D. フォントのロードをブロックして待機する

答えを見る

正解: B

font-display: swapは、まずフォールバックフォントでテキストを表示し(FOUT: Flash of Unstyled Text)、カスタムフォントのロードが完了したら切り替える。テキストが常に表示されるためFCP/LCPに良い。

Q8. Web Workerの主な用途と制約は?

A. DOMの操作を別スレッドで高速化する B. 重い計算処理をメインスレッドから分離してINPを改善するが、DOM操作はできない C. ネットワークリクエストを並列化する D. CSSアニメーションを別スレッドで実行する

答えを見る

正解: B

Web Workerは別スレッドで重い計算処理を実行することでメインスレッドの応答性を維持する。ただし、DOM APIやwindowオブジェクトへのアクセスはできない。メインスレッドとはpostMessage()でデータをやり取りする。