資格道場
学習状況 お問い合わせ ログイン 無料登録
トップ / HTML5プロフェッショナル認定試験 レベル1 / API基礎知識

HTML5プロフェッショナル認定試験 レベル1「API基礎知識」の一問一答

1 / -- 正解: 0
📖 HTML5プロフェッショナル認定試験 レベル1「API基礎知識」の全75問と解説（一覧）

HTML5プロフェッショナル認定試験 レベル1のAPI基礎知識に関する一問一答（全75問）の正解と解説の一覧です。上の一問一答で実際に解いてから、ここで復習・確認できます。

  1. 問1．Canvas APIはピクセル単位のビットマップ画像を動的に描画するためのAPIである。

    正解：○（正しい）

    解説：Canvasは2Dコンテキストでビットマップ（ラスター）描画を行うAPIである。

  2. 問2．SVGは拡大・縮小しても画質が劣化しないベクター形式のグラフィックスを扱う。

    正解：○（正しい）

    解説：SVGは図形を座標や数式としてXMLで記述するベクター形式なので、どれだけ拡大しても輪郭が計算し直されて滑らかなまま保たれる。ピクセルの集合として保持するビットマップ（ラスター）形式は拡大すると粗さが目立つ点と対照的で、ロゴやアイコン、図表に向く。

  3. 問3．Canvasで描画した図形は、描画後もそれぞれが個別のDOM要素として保持される。

    正解：×（誤り）

    解説：誤り。正しくは、Canvasはピクセルへ直接描画するため個々の図形はDOM要素として保持されない。要素単位で扱えるのはSVG。

  4. 問4．SVGはピクセルへ直接描画する方式のため、描画した図形はDOM要素として保持されず個別に操作できない。

    正解：×（誤り）

    解説：誤り。正しくは、SVGはXMLベースでDOMツリーに含まれ、要素単位でCSSやJavaScriptから個別操作できる。ピクセルへ直接描画しDOM要素を保持しないのはCanvas。

  5. 問5．多数の図形を頻繁に再描画するゲームなどではCanvasが、図形数が少なく拡大縮小を伴う図表ではSVGが適している。

    正解：○（正しい）

    解説：Canvasは1枚のビットマップに直接描くだけで個々の図形を保持しないため、大量の要素を毎フレーム描き直すゲームなどで負荷が小さい。SVGは図形をDOM要素として保持するので数が増えるほど重くなる反面、拡大しても劣化せず個別にスタイルやイベントを付けられる。

  6. 問6．Canvasはベクター形式のため、拡大しても画像が荒くならない。

    正解：×（誤り）

    解説：誤り。正しくは、Canvasはビットマップ（ラスター）形式のため拡大すると荒くなる。ベクター形式はSVG。

  7. 問7．video要素やaudio要素はプラグインなしでメディアを再生できる。

    正解：○（正しい）

    解説：HTML5でvideo要素・audio要素が標準化され、Flashのようなプラグインなしでブラウザ自身がメディアを再生できるようになった。controls属性で標準の再生UIを出せるほか、JavaScriptから再生位置や音量を制御することもできる。対応コーデックはブラウザによって異なるため、source要素で複数形式を用意することがある。

  8. 問8．HLSやMPEG-DASHは、ネットワーク状況に応じて画質を切り替えるアダプティブストリーミングの技術である。

    正解：○（正しい）

    解説：HLS/MPEG-DASHは回線状況に応じ画質を切り替えるアダプティブビットレート配信技術。

  9. 問9．Media Source Extensions(MSE)は、DRMで保護された暗号化メディアの復号と再生制御を担うAPIである。

    正解：×（誤り）

    解説：誤り。正しくは、MSEはJavaScriptで生成したメディアセグメントをvideo要素へ供給する仕組みである。DRM保護メディアの復号・再生制御を担うのはEncrypted Media Extensions(EME)。

  10. 問10．Encrypted Media Extensions(EME)は、DRMで保護された暗号化メディアの再生を可能にするAPIである。

    正解：○（正しい）

    解説：EMEは、DRMで保護された暗号化コンテンツを再生するために、ブラウザとコンテンツ復号モジュール（CDM）およびライセンスサーバーとのやり取りを標準化したAPI。ブラウザ自身が復号鍵を扱うのではなく、鍵の取得と受け渡しの手順を定める点が要点で、動画配信サービスで使われている。

  11. 問11．MPEG-DASHは特定のコーデックにのみ対応する規格であり、コーデックに依存しない設計ではない。

    正解：×（誤り）

    解説：誤り。正しくは、MPEG-DASHはコーデックに依存しない（コーデック非依存の）国際標準のアダプティブストリーミング規格である。

  12. 問12．Geolocation APIはユーザーの現在の地理的位置（緯度・経度）を取得するためのAPIである。

    正解：○（正しい）

    解説：Geolocation APIはGPSのほかWi-Fiアクセスポイントや基地局、IPアドレスなどを組み合わせて現在位置（緯度・経度と精度）を取得する。プライバシーに関わるため利用者の許可が必須で、原則としてHTTPSなどのセキュアコンテキストでしか使えない。

  13. 問13．Geolocation APIは、ユーザーの許可を得なくても無条件に位置情報を取得できる。

    正解：×（誤り）

    解説：誤り。正しくは、Geolocation APIは位置情報取得にユーザーの許可（同意）が必要である。

  14. 問14．DeviceOrientation Eventは、端末の現在の地理的位置（緯度・経度）を取得するためのイベントである。

    正解：×（誤り）

    解説：誤り。正しくは、DeviceOrientation Eventは端末の物理的な傾き・向きを取得する。緯度・経度など地理的位置を取得するのはGeolocation API。

  15. 問15．Touch Eventsはタッチスクリーン上の指の接触に関するイベントを扱う。

    正解：○（正しい）

    解説：Touch Eventsはtouchstart・touchmove・touchendなど、タッチスクリーン上の指の接触に特化したイベントを扱う。複数の指の座標をリストで受け取れるためピンチなどのマルチタッチ操作を実装できる。マウスやペンも含めて統一的に扱いたい場合はPointer Eventsを使う。

  16. 問16．Pointer Eventsは、マウス・タッチ・ペンなど複数の入力デバイスを統一的に扱えるイベントモデルである。

    正解：○（正しい）

    解説：Pointer Eventsは、マウス・タッチ・ペンといった入力手段の違いをポインタという抽象に統一し、pointerdown・pointermoveなど共通のイベントで扱えるようにしたモデル。pointerTypeプロパティで元の入力手段を判別でき、デバイスごとに別々の処理を書き分ける必要がなくなる。

  17. 問17．Generic Sensor APIは、マウス・タッチ・ペンなど複数の入力デバイスを統一的に扱うためのイベントモデルである。

    正解：×（誤り）

    解説：誤り。正しくは、Generic Sensor APIは加速度センサーやジャイロスコープなど各種センサーへ共通アクセスする枠組みである。複数の入力デバイスを統一的に扱うのはPointer Events。

  18. 問18．DOM3 Events（UI Events）は、キーボードやマウスなどのUI操作に関するイベントモデルを規定する。

    正解：○（正しい）

    解説：DOM3 Events（現在のUI Events仕様）は、click・keydown・focusといったUI操作に伴うイベントの種類と、キャプチャからターゲット、バブリングへと進むイベント伝播の仕組みを規定する。addEventListenerの第3引数でどの段階で捕捉するかを選べるのもこのモデルに基づく。

  19. 問19．localStorageに保存したデータは、ブラウザを閉じると自動的に消去される。

    正解：×（誤り）

    解説：誤り。正しくは、localStorageは明示的に削除しない限りブラウザを閉じても永続的に保持される。閉じると消えるのはsessionStorage。

  20. 問20．sessionStorageに保存したデータは、そのタブ（セッション）が閉じられると破棄される。

    正解：○（正しい）

    解説：sessionStorageはタブ（ブラウジングコンテキスト）ごとに独立した領域を持ち、そのタブを閉じるとデータが破棄される。同じサイトを別タブで開いても内容は共有されない。ブラウザを閉じても残り続けるlocalStorageと使い分ける。

  21. 問21．Web Storageは同一オリジンの範囲でデータが共有・参照される。

    正解：○（正しい）

    解説：Web Storageのデータはスキーム・ホスト・ポートの組（オリジン）単位で管理され、異なるオリジンからは読み書きできない。これが不正なサイトからのデータ窃取を防ぐ基本的な仕組みで、cookieと違いリクエストごとにサーバーへ自動送信されない点も特徴。

  22. 問22．Web Storage（localStorage/sessionStorage）は、インデックスによる検索やトランザクションに対応した構造化データベースである。

    正解：×（誤り）

    解説：誤り。正しくは、Web Storageはキーと値のペアで文字列を保存する単純なストレージである。インデックス検索やトランザクションに対応した構造化DBはIndexedDB。

  23. 問23．Web Storageはサーバーへのリクエストごとに自動送信される点でCookieと同じである。

    正解：×（誤り）

    解説：誤り。正しくは、Web Storageはリクエストに自動送信されない。リクエストへ自動付与されるのはCookie。

  24. 問24．Indexed Database API(IndexedDB)は構造化データを大容量に保存できるクライアント側データベースである。

    正解：○（正しい）

    解説：IndexedDBはキーと値の組でオブジェクトを保存できるブラウザ内蔵のデータベースで、数MBが上限のWeb Storageと違い大容量のデータを扱える。値には文字列だけでなくオブジェクトやファイル（Blob）もそのまま格納でき、非同期APIとして提供される。

  25. 問25．IndexedDBはキー・バリューだけでなくインデックスによる検索が可能なトランザクション型のデータベースである。

    正解：○（正しい）

    解説：IndexedDBは任意のプロパティにインデックスを張って検索や範囲指定ができ、複数の操作をトランザクションとしてまとめ、途中で失敗すれば一括して取り消せる。単純なキー・バリューしか持たないWeb Storageより本格的なデータ管理に向く。

  26. 問26．Web Workersは、メインスレッドとは別のスレッドでJavaScriptをバックグラウンド実行できる。

    正解：○（正しい）

    解説：JavaScriptは基本的に1つのスレッドで動くため、重い処理を書くと画面が固まる。Web Workersは別スレッドでスクリプトを走らせ、メインスレッドとはpostMessageによるメッセージのやり取りで連携する。ただしDOMには直接アクセスできない。

  27. 問27．Web WorkersはDOMへ直接アクセスして画面要素を操作できる。

    正解：×（誤り）

    解説：誤り。正しくは、Web WorkersはDOMへ直接アクセスできない。UI操作はメインスレッドへメッセージで委譲する。

  28. 問28．Service Workerはネットワークリクエストを横取り（プロキシ）し、キャッシュを使ったオフライン動作を実現できる。

    正解：○（正しい）

    解説：Service Workerはリクエストを仲介しキャッシュでオフライン対応を可能にする。

  29. 問29．Service Workerは常にメインスレッド上でWebページと同一のライフサイクルで動作し、ページが閉じられると必ず終了する。

    正解：×（誤り）

    解説：誤り。正しくは、Service Workerはページとは独立したライフサイクルを持ち、ページが閉じられてもバックグラウンドで動作し続けることがある。

  30. 問30．Push APIは、構造化データを大容量にクライアント側へ保存するためのデータベースを提供する仕組みである。

    正解：×（誤り）

    解説：誤り。正しくは、Push APIはService Workerを介してサーバーからのプッシュ通知を受け取る仕組みである。大容量の構造化データ保存を担うのはIndexedDB。

  31. 問31．Service WorkerはHTTP（非暗号化）でも、どのページでも自由に登録できる。

    正解：×（誤り）

    解説：誤り。正しくは、Service Workerは原則HTTPS（またはlocalhost）が必要で、セキュアコンテキストでのみ登録できる。

  32. 問32．XMLHttpRequest(XHR)は、ブラウザ同士がP2Pで音声・映像をリアルタイムにやり取りするためのAPIである。

    正解：×（誤り）

    解説：誤り。正しくは、XHRはページ遷移なしの非同期通信（Ajax）を実現する仕組みである。ブラウザ間P2Pのリアルタイム通信を担うのはWebRTC。

  33. 問33．Fetch APIはPromiseベースで設計された、HTTPリクエストを行うための新しいAPIである。

    正解：○（正しい）

    解説：Fetch APIはPromiseを返すため、then/catchやasync/awaitで非同期処理を素直に書ける。コールバックを入れ子にしがちだったXMLHttpRequestの後継にあたり、リクエストとレスポンスをオブジェクトとして扱えるので、ヘッダ操作やストリーム処理も扱いやすい。

  34. 問34．WebSocketは、一度確立した接続上でサーバーとクライアントが双方向に通信できる。

    正解：○（正しい）

    解説：WebSocketは最初にHTTPでハンドシェイクした後、専用のプロトコルへ切り替えて1本の接続を維持し、サーバーとクライアントが好きなタイミングで送信できる全二重通信を実現する。都度リクエストを送るHTTPポーリングより遅延もオーバーヘッドも小さく、チャットや対戦ゲームに向く。

  35. 問35．WebSocketの通信はリクエストごとに毎回新しいコネクションを張り直す方式である。

    正解：×（誤り）

    解説：誤り。正しくは、WebSocketは一度確立した接続を維持して双方向通信を行う（毎回張り直さない）。

  36. 問36．Server-Sent Events(SSE)は、確立した接続上でサーバーとクライアントが双方向（全二重）に通信する仕組みである。

    正解：×（誤り）

    解説：誤り。正しくは、SSEはサーバーからクライアントへの単方向プッシュを行う仕組みである。双方向（全二重）通信を担うのはWebSocket。

  37. 問37．Server-Sent Eventsはクライアントからサーバーへ任意のデータを送信するための双方向通信技術である。

    正解：×（誤り）

    解説：誤り。正しくは、SSEはサーバーからクライアントへの単方向通信であり、双方向はWebSocketが担う。

  38. 問38．WebRTCは、ブラウザ同士がP2Pで音声・映像・データをリアルタイムにやり取りできるAPIである。

    正解：○（正しい）

    解説：WebRTCはブラウザ同士が直接（P2P）つながって音声・映像・任意のデータをやり取りする仕組み。相手を見つけて接続情報を交換するシグナリングは別途サーバーが必要だが、通信本体はサーバーを経由しないため遅延が小さい。ビデオ通話や画面共有に使われる。

  39. 問39．WebRTCはサーバーを必ず経由してすべての音声・映像データを中継する設計である。

    正解：×（誤り）

    解説：誤り。正しくは、WebRTCは原則ブラウザ間のP2Pでメディアをやり取りする（接続確立にシグナリングは使うが、メディアは直接交換が基本）。

  40. 問40．Fetch APIで取得したレスポンスのbodyをJSONとして読み取るには、Promiseを返すメソッドを用いる。

    正解：○（正しい）

    解説：Fetchのレスポンスはjson()などPromiseを返すメソッドでボディを読み取る。

  41. 問41．WebSocketで使用するURLスキームはhttpまたはhttpsである。

    正解：×（誤り）

    解説：誤り。正しくは、WebSocketはws://（暗号化はwss://）スキームを用いる。http/httpsはHTTP通信用のスキーム。

  42. 問42．Web Workersは画像処理や大量計算などの重い処理を、UIをブロックせずに実行するのに役立つ。

    正解：○（正しい）

    解説：画像処理や暗号計算のような重い処理をメインスレッドで実行すると、その間は描画も入力受付も止まって画面が固まる。Web Workersで別スレッドに逃がせばUIは応答し続けられる。結果はメッセージで受け取るため、処理の分割と受け渡しの設計が要点になる。

  43. 問43．IndexedDBはWeb Storageに比べて保存できるデータ量が一般に小さい。

    正解：×（誤り）

    解説：誤り。正しくは、IndexedDBはWeb Storageより大容量のデータ保存に適している。

  44. 問44．Geolocation APIでは、位置情報の変化を継続的に監視する機能も利用できる。

    正解：○（正しい）

    解説：1回だけ取得するgetCurrentPosition()のほか、位置が変わるたびにコールバックが呼ばれるwatchPosition()があり、移動に追従する地図やナビゲーションを実装できる。監視を止めるにはclearWatch()を呼ぶ必要があり、放置すると電池を消費し続ける。

  45. 問45．Canvasに描画した内容は画像データとして書き出すことが一切できない。

    正解：×（誤り）

    解説：誤り。正しくは、Canvasは描画内容をtoDataURLなどで画像データ（データURL等）として書き出すことができる。

  46. 問46．ベクター形式で図形を記述し、拡大縮小しても劣化しないグラフィックスAPIはどれか。

    • ア．Canvas API
    • イ．SVG
    • ウ．WebGL
    • エ．Media Source Extensions

    正解：イ．SVG

    解説：SVGは図形を座標や数式としてXMLで記述するベクター形式なので、拡大しても輪郭が再計算されて劣化しない。CanvasとWebGLはピクセルの集合として描くビットマップ方式、MSEはメディアの供給を扱うAPIで、いずれもベクター描画のためのものではない。

  47. 問47．ピクセル単位のビットマップ描画を行うために用いられるAPIはどれか。

    • ア．Canvas API
    • イ．SVG
    • ウ．Geolocation API
    • エ．WebSocket

    正解：ア．Canvas API

    解説：Canvas APIは2次元のビットマップ領域にJavaScriptで直接ピクセルを描くAPI。描いた後は個々の図形の情報が残らないため、変更したいときは描き直す必要がある。SVGはベクター形式、Geolocationは位置情報、WebSocketは通信のAPIで用途が異なる。

  48. 問48．ネットワーク状況に応じて画質を切り替えるアダプティブストリーミングの技術はどれか。

    • ア．Web Storage
    • イ．IndexedDB
    • ウ．Pointer Events
    • エ．MPEG-DASH

    正解：エ．MPEG-DASH

    解説：MPEG-DASHやHLSは、動画をあらかじめ複数の画質で細かいセグメントに分割しておき、再生中の回線速度に応じて次に取得するセグメントの画質を切り替えるアダプティブストリーミング方式。Web StorageやIndexedDBは保存、Pointer Eventsは入力のAPIで、配信技術ではない。

  49. 問49．DRMで保護された暗号化メディアの再生を扱うAPIはどれか。

    • ア．Media Source Extensions
    • イ．WebRTC
    • ウ．Encrypted Media Extensions
    • エ．Fetch API

    正解：ウ．Encrypted Media Extensions

    解説：Encrypted Media Extensions（EME）は、暗号化されたメディアの再生に必要な鍵のやり取りを、ブラウザ・コンテンツ復号モジュール・ライセンスサーバーの間で標準化したAPI。MSEはメディアデータの供給、WebRTCはP2P通信、Fetchは汎用のHTTP通信を担う別のAPI。

  50. 問50．JavaScriptで生成したメディアセグメントをvideo要素へ供給する仕組みを提供するAPIはどれか。

    • ア．Media Source Extensions
    • イ．Encrypted Media Extensions
    • ウ．Geolocation API
    • エ．Push API

    正解：ア．Media Source Extensions

    解説：Media Source Extensions（MSE）は、JavaScriptが用意したメディアのセグメントをvideo要素に供給できるようにするAPI。これによりアダプティブストリーミングのように、再生しながら画質の異なるセグメントへ切り替える制御をスクリプト側で実装できる。

  51. 問51．端末の現在の地理的位置（緯度・経度）を取得するAPIはどれか。

    • ア．DeviceOrientation Event
    • イ．Generic Sensor API
    • ウ．Touch Events
    • エ．Geolocation API

    正解：エ．Geolocation API

    解説：Geolocation APIが緯度・経度と精度を取得する。DeviceOrientation Eventは端末の傾き、Generic Sensor APIは加速度計などのセンサー、Touch Eventsはタッチ操作を扱うもので、位置情報の取得は担当しない。利用には利用者の許可とセキュアコンテキストが必要。

  52. 問52．端末の物理的な傾き・向きの情報を取得するAPIはどれか。

    • ア．Geolocation API
    • イ．Pointer Events
    • ウ．DeviceOrientation Event
    • エ．WebSocket

    正解：ウ．DeviceOrientation Event

    解説：DeviceOrientation Eventは、端末がどの向きにどれだけ傾いているかをalpha・beta・gammaという3つの角度で通知する。地磁気と加速度センサーの情報をもとにしており、簡易的なARや傾き操作のゲームなどに使われる。位置そのものはGeolocation APIが扱う。

  53. 問53．マウス・タッチ・ペンなど複数の入力デバイスを統一的に扱えるイベントモデルはどれか。

    • ア．Pointer Events
    • イ．Touch Events
    • ウ．DOM3 Events
    • エ．DeviceOrientation Event

    正解：ア．Pointer Events

    解説：Pointer Eventsはマウス・タッチ・ペンをポインタとして統一的に扱い、pointerTypeで元の入力手段も判別できる。Touch Eventsはタッチ専用、DOM3 Events（UI Events）はイベントモデル全般の規定、DeviceOrientation Eventは端末の傾きを扱うもので、統一的な入力抽象ではない。

  54. 問54．加速度センサーやジャイロスコープなど各種センサーへ共通の方法でアクセスする枠組みはどれか。

    • ア．Touch Events
    • イ．Geolocation API
    • ウ．Generic Sensor API
    • エ．Push API

    正解：ウ．Generic Sensor API

    解説：Generic Sensor APIは、加速度センサー・ジャイロスコープ・磁力計・環境光センサーなどに共通のインタフェースでアクセスできる枠組み。センサーごとに異なるAPIを覚える必要がなく、権限管理も統一的に扱える。Touch Eventsは入力、Geolocationは位置、Push APIは通知のAPI。

  55. 問55．ブラウザを閉じても明示的に削除するまでデータが永続的に保持されるストレージはどれか。

    • ア．sessionStorage
    • イ．Cookie(セッション)
    • ウ．メモリキャッシュ
    • エ．localStorage

    正解：エ．localStorage

    解説：localStorageはブラウザを閉じても、明示的に削除するまでデータが残り続ける永続的なストレージ。sessionStorageはタブを閉じると破棄され、セッションCookieもブラウザ終了時に消え、メモリキャッシュは一時的なものなので、いずれも永続保存には該当しない。

  56. 問56．タブ（セッション）が閉じられるとデータが破棄されるストレージはどれか。

    • ア．localStorage
    • イ．IndexedDB
    • ウ．sessionStorage
    • エ．Cache Storage

    正解：ウ．sessionStorage

    解説：sessionStorageはタブ（ブラウジングコンテキスト）ごとに独立し、そのタブを閉じるとデータが破棄される。localStorageは明示的に削除するまで残り、IndexedDBとCache Storageも永続的な保存領域なので、いずれもセッション終了で消えるわけではない。

  57. 問57．構造化データを大容量にクライアント側へ保存できるデータベースAPIはどれか。

    • ア．Web Storage
    • イ．Web Workers
    • ウ．Server-Sent Events
    • エ．Indexed Database API

    正解：エ．Indexed Database API

    解説：Indexed Database API（IndexedDB）は、構造化データを大容量に保存でき、インデックス検索やトランザクションにも対応するクライアント側のデータベース。Web Storageは単純なキー・バリューで容量も小さく、Web Workersは並行処理、Server-Sent Eventsはサーバーからの一方向通信のAPI。

  58. 問58．メインスレッドとは別のスレッドでJavaScriptをバックグラウンド実行する仕組みはどれか。

    • ア．Service Workers
    • イ．Push API
    • ウ．Fetch API
    • エ．Web Workers

    正解：エ．Web Workers

    解説：Web Workersがメインスレッドとは別のスレッドでスクリプトを実行し、重い処理でUIが固まるのを防ぐ。Service Workersはネットワークを仲介する常駐型で用途が異なり、Push APIは通知の受信、Fetch APIはHTTP通信を担う。

  59. 問59．ネットワークリクエストを横取りしキャッシュを使ったオフライン動作を実現するのはどれか。

    • ア．Web Workers
    • イ．XMLHttpRequest
    • ウ．Service Workers
    • エ．WebSocket

    正解：ウ．Service Workers

    解説：Service Workerはページとネットワークの間に常駐し、fetchイベントでリクエストを横取りしてキャッシュから応答を返せる。これによりオフラインでも動作するWebアプリ（PWA）が実現する。Web Workersは計算処理の並行実行が目的で、ネットワークの仲介は行わない。

  60. 問60．サーバーからのプッシュ通知をService Worker経由で受信する仕組みを提供するAPIはどれか。

    • ア．Push API
    • イ．Notifications API
    • ウ．Fetch API
    • エ．Web Storage

    正解：ア．Push API

    解説：Push APIはサーバーから送られた通知をService Worker経由で受け取る仕組みで、ページが開かれていなくても受信できる点が特徴。受け取った内容を実際に画面へ表示するのはNotifications APIの役割で、両者は組み合わせて使われる。

  61. 問61．ページ全体を再読み込みせずにサーバーと非同期通信を行う、古くからあるAPIはどれか。

    • ア．Fetch API
    • イ．WebSocket
    • ウ．XMLHttpRequest
    • エ．Server-Sent Events

    正解：ウ．XMLHttpRequest

    解説：XMLHttpRequestはAjaxの基盤として古くから使われてきた非同期通信のAPI。コールバックとイベントで結果を受け取る設計のため処理が入れ子になりやすく、現在はPromiseベースのFetch APIが後継として推奨されている。WebSocketとServer-Sent Eventsは常時接続型で用途が異なる。

  62. 問62．Promiseベースで設計された、HTTPリクエストを行う新しいAPIはどれか。

    • ア．XMLHttpRequest
    • イ．WebSocket
    • ウ．WebRTC
    • エ．Fetch API

    正解：エ．Fetch API

    解説：Fetch APIはPromiseを返すため、async/awaitと組み合わせて同期的な見た目で非同期処理を書ける。リクエストとレスポンスをオブジェクトとして扱えるのでヘッダ操作も明快。XMLHttpRequestはコールバック方式の旧API、WebSocketとWebRTCは通信の性質そのものが異なる。

  63. 問63．確立した接続上でサーバーとクライアントが双方向（全二重）に通信できるAPIはどれか。

    • ア．Server-Sent Events
    • イ．Fetch API
    • ウ．WebSocket
    • エ．XMLHttpRequest

    正解：ウ．WebSocket

    解説：WebSocketは1本の接続を維持したまま、サーバーとクライアントの双方が任意のタイミングで送信できる全二重通信を実現する。Server-Sent Eventsはサーバーからクライアントへの一方向、Fetch APIとXMLHttpRequestはリクエストに対する応答という往復型で、双方向の常時通信には向かない。

  64. 問64．サーバーからクライアントへの単方向データ送信を継続的に行う仕組みはどれか。

    • ア．Server-Sent Events
    • イ．WebSocket
    • ウ．WebRTC
    • エ．Fetch API

    正解：ア．Server-Sent Events

    解説：Server-Sent Eventsはサーバー→クライアント単方向のプッシュを行う。

  65. 問65．ブラウザ同士がP2Pで音声・映像・データをリアルタイムにやり取りできるAPIはどれか。

    • ア．WebSocket
    • イ．Server-Sent Events
    • ウ．Push API
    • エ．WebRTC

    正解：エ．WebRTC

    解説：WebRTCはブラウザ同士が直接つながって音声・映像・データをやり取りするAPI。サーバーを介さないため遅延が小さい。WebSocketとServer-Sent Eventsはサーバーとの通信、Push APIは通知受信の仕組みで、いずれもブラウザ間のP2P通信ではない。

  66. 問66．次のうち、双方向のリアルタイム通信に適したAPIはどれか。

    • ア．Server-Sent Events
    • イ．WebSocket
    • ウ．Geolocation API
    • エ．Web Storage

    正解：イ．WebSocket

    解説：WebSocketは接続を維持したまま双方が自由に送信できる全二重通信に対応する。Server-Sent Eventsはサーバーからクライアントへの一方向専用、Geolocationは位置取得、Web Storageは保存のAPIで、双方向のリアルタイム通信には使えない。

  67. 問67．オフライン時にもアプリを動作させるためのキャッシュ・プロキシの中心となる技術はどれか。

    • ア．Service Workers
    • イ．Web Workers
    • ウ．Web Storage
    • エ．Fetch API

    正解：ア．Service Workers

    解説：Service Workerはページとネットワークの間に常駐し、リクエストを横取りしてキャッシュから応答を返すプロキシとして働くため、オフライン動作の中心技術になる。Web Workersは計算の並行実行、Web Storageは保存、Fetch APIは通信の手段で、いずれも仲介役は担わない。

  68. 問68．DOM要素として図形を保持し、CSSやスクリプトで個別操作しやすいのはどれか。

    • ア．Canvas
    • イ．SVG
    • ウ．WebGL
    • エ．MSE

    正解：イ．SVG

    解説：SVGの図形はそれぞれがDOM要素として存在するので、CSSでスタイルを当てたり、個別にクリックイベントを付けたりできる。Canvasは描いた時点でただのピクセルになり図形の情報が残らないため、個別操作にはあたりの判定を自前で実装する必要がある。

  69. 問69．高頻度に大量の図形を再描画するゲーム描画に適しているのはどれか。

    • ア．SVG
    • イ．Canvas
    • ウ．DOM3 Events
    • エ．Push API

    正解：イ．Canvas

    解説：Canvasは1枚のビットマップに描くだけで個々の図形を保持しないため、大量の要素を毎フレーム描き直すゲームでも負荷が小さい。SVGは図形の数だけDOM要素が増えるので高頻度の再描画には不利。DOM3 EventsとPush APIは描画のAPIではない。

  70. 問70．キーボードやマウスなどのUI操作イベントモデルを規定する仕様はどれか。

    • ア．Touch Events
    • イ．DOM3 Events
    • ウ．Generic Sensor API
    • エ．Pointer Events

    正解：イ．DOM3 Events

    解説：DOM3 Events（現在のUI Events仕様）が、click・keydownなどのイベントの種類と、キャプチャ→ターゲット→バブリングというイベント伝播の仕組みを規定する。Touch Eventsはタッチ、Pointer Eventsは統合入力、Generic Sensor APIはセンサーに特化した別仕様。

  71. 問71．タッチスクリーン上の指の接触に特化したイベントを扱うのはどれか。

    • ア．Pointer Events
    • イ．Touch Events
    • ウ．DeviceOrientation Event
    • エ．DOM3 Events

    正解：イ．Touch Events

    解説：Touch Eventsはtouchstart・touchmove・touchendなど、タッチスクリーン上の指の接触に特化したイベントを扱い、複数の指の座標をまとめて取得できる。Pointer Eventsはマウスやペンも含めて統一的に扱う点で対象が広く、DOM3 EventsはUIイベント全般の枠組みにあたる。

  72. 問72．Web Storageに関する説明として正しいものはどれか。

    • ア．リクエストごとにサーバーへ自動送信される
    • イ．同一オリジン単位でキーと値を保存する
    • ウ．構造化データのインデックス検索ができる
    • エ．別スレッドでスクリプトを実行する

    正解：イ．同一オリジン単位でキーと値を保存する

    解説：Web Storage（localStorage・sessionStorage）は、スキーム・ホスト・ポートの組であるオリジン単位で文字列のキーと値を保存する。cookieと違いリクエストごとに自動送信されず、インデックス検索ができるのはIndexedDB、別スレッド実行はWeb Workersの役割である。

  73. 問73．Service Workerの登録に関する説明として正しいものはどれか。

    • ア．どのHTTPページでも自由に登録できる
    • イ．原則HTTPS等のセキュアコンテキストが必要
    • ウ．DOMを直接操作するために使う
    • エ．Cookieの代替として自動送信される

    正解：イ．原則HTTPS等のセキュアコンテキストが必要

    解説：Service Workerは通信を横取りして応答を差し替えられるため、悪用されると通信内容を改ざんされうる。そこで登録は原則としてHTTPSなどのセキュアコンテキストに限られる（開発用のlocalhostは例外）。またDOMには直接アクセスできず、cookieのように自動送信されるものでもない。

  74. 問74．Fetch APIの説明として誤っているものはどれか。

    • ア．Promiseベースで設計されている
    • イ．レスポンスのbodyを非同期に読み取る
    • ウ．JSON形式のレスポンスしか扱えない
    • エ．HTTPリクエストを発行できる

    正解：ウ．JSON形式のレスポンスしか扱えない

    解説：Fetch APIはJSONに限らず、text()・blob()・arrayBuffer()・formData()などでテキスト・画像・バイナリなど多様な形式のレスポンスを読み取れる。Promiseベースで設計され、bodyを非同期に読み取り、HTTPリクエストを発行できるという他の3つの記述はいずれも正しい。

  75. 問75．Web Workersの説明として誤っているものはどれか。

    • ア．バックグラウンドスレッドで実行される
    • イ．DOMへ直接アクセスできる
    • ウ．重い計算でUIをブロックしにくい
    • エ．メインスレッドとメッセージでやり取りする

    正解：イ．DOMへ直接アクセスできる

    解説：Web Workersは別スレッドで動くためDOMには直接アクセスできず、画面を更新したい場合はpostMessageでメインスレッドに依頼する必要がある。バックグラウンドスレッドで実行される、重い計算でもUIをブロックしにくい、メッセージでやり取りするという他の3つは正しい説明。