QUIZ 30分

クイズの説明

Step 5で学んだ内容の理解度をチェックします。

  • 全8問
  • 合格ライン: 80%（7問正解）
  • 不合格の場合は復習してから再挑戦してください

問題

Q1. LCP（Largest Contentful Paint）の良好な目標値はどれですか？

  • A) 1.0秒以下
  • B) 2.5秒以下
  • C) 4.0秒以下
  • D) 5.0秒以下
答えを見る

正解: B

LCPの目標値は2.5秒以下が「良好」、4.0秒以下が「改善が必要」、4.0秒超が「不良」です。ユーザーがページの主要コンテンツを認識できるまでの時間を測定しています。

Q2. CLS（Cumulative Layout Shift）が発生する最も一般的な原因はどれですか？

  • A) JavaScriptの実行が遅い
  • B) サーバーの応答が遅い
  • C) 画像にwidth/heightが指定されていない
  • D) CSSファイルが大きすぎる
答えを見る

正解: C

画像にwidth/heightが指定されていないと、ブラウザは画像のサイズを事前に知ることができず、画像が読み込まれた時点でレイアウトがずれます。width/heightを指定するか、aspect-ratioを使うことでCLSを防げます。

Q3. Tree-shakingが正しく動作するために必要な条件はどれですか？

  • A) CommonJS（require/module.exports）を使用する
  • B) ES Modules（import/export）を使用する
  • C) TypeScriptを使用する
  • D) Webpackを使用する
答えを見る

正解: B

Tree-shakingは静的解析に基づいて未使用コードを除去します。ES Modules（import/export）は静的な構文であるため解析可能ですが、CommonJS（require）は動的であるため静的解析ができず、Tree-shakingが効きません。

Q4. 以下のうち、ページの初期読み込みを最も改善する施策はどれですか？

  • A) 全ページのコードを1つのバンドルにまとめる
  • B) ルートベースのCode-splittingで必要なページのみ読み込む
  • C) 全てのJavaScriptをインラインで記述する
  • D) JavaScriptファイルの名前を短くする
答えを見る

正解: B

ルートベースのCode-splittingにより、現在表示するページに必要なコードだけを読み込み、他のページのコードは必要になった時に遅延読み込みします。これにより初期バンドルサイズを大幅に削減できます。

Q5. WebPフォーマットの特徴として正しいものはどれですか？

  • A) JPEGよりサイズが大きいが画質が高い
  • B) JPEGより25-35%小さく、透過もサポートする
  • C) SVGの代替として使われる
  • D) 動画専用のフォーマットである
答えを見る

正解: B

WebPはGoogleが開発した画像フォーマットで、JPEGより25-35%小さいサイズで同等の画質を実現します。また、PNGのように透過（アルファチャンネル）もサポートしています。

Q6. CDNを使う最大の利点はどれですか？

  • A) サーバーのセキュリティが向上する
  • B) ユーザーに地理的に近いエッジサーバーからコンテンツを配信できる
  • C) データベースの負荷が軽減される
  • D) SSL証明書が不要になる
答えを見る

正解: B

CDNの最大の利点は、世界中に分散されたエッジサーバーにコンテンツをキャッシュし、ユーザーに最も近い場所から配信できることです。ネットワーク遅延を大幅に削減し、グローバルなユーザー体験を改善します。

  • A) 画像を遅延読み込みする
  • B) 画像をキャッシュに保存する
  • C) ブラウザにリソースの先読みを指示してLCPを改善する
  • D) 画像をWebPフォーマットに変換する
答えを見る

正解: C

rel="preload" はブラウザにリソースの先読みを指示するものです。HTMLのパース中にCSS/JSの読み込みより先に画像のダウンロードを開始するため、LCP要素（Hero画像など）の表示を早めることができます。

Q8. エッジコンピューティングで実行するのに適していない処理はどれですか？

  • A) A/Bテストのバリアント振り分け
  • B) 複雑なデータベーストランザクション
  • C) リクエストヘッダーの追加・変更
  • D) 地域に応じたコンテンツの出し分け
答えを見る

正解: B

エッジコンピューティングは軽量で高速な処理に適しています。複雑なデータベーストランザクションはオリジンサーバーで処理すべきです。エッジの実行環境はメモリや実行時間に制限があるため、DB操作や長時間の処理には向きません。

結果

7問以上正解の場合

合格です。おめでとうございます。

Step 5「フロントエンドパフォーマンス」を完了しました。 次は Step 6「最終試験：パフォーマンスチャレンジ」に進みましょう。

6問以下の場合

もう少し復習しましょう。

問題復習セクション
Q1, Q2step5_1 Core Web Vitals
Q3, Q4step5_2 バンドル最適化
Q5step5_3 画像とアセット最適化
Q6, Q7, Q8step5_4 CDNとエッジコンピューティング

推定所要時間: 30分