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

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

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

   正解：○（正しい）

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

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

   正解：○（正しい）

   解説：SVGはベクター形式のため拡大縮小しても劣化しない。

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

   正解：×（誤り）

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

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

   正解：×（誤り）

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

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

   正解：○（正しい）

   解説：高頻度描画はCanvas、ベクター図表はSVGが適する。

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

   正解：×（誤り）

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

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

   正解：○（正しい）

   解説：HTML5のvideo/audio要素はプラグイン不要でメディア再生が可能。

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保護コンテンツの復号・再生制御を扱うAPI。

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

    正解：×（誤り）

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

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

    正解：○（正しい）

    解説：Geolocation APIは緯度経度など位置情報を取得する。

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

    正解：×（誤り）

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

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

    正解：×（誤り）

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

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

    正解：○（正しい）

    解説：Touch Eventsはタッチ操作に関するイベントを扱う。

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

    正解：○（正しい）

    解説：Pointer Eventsはマウス・タッチ・ペンを統一的に扱える。

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

    正解：×（誤り）

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

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

    正解：○（正しい）

    解説：DOM3 Events（UI Events）はUI操作イベントを規定する。

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

    正解：×（誤り）

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

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

    正解：○（正しい）

    解説：sessionStorageはセッション（タブ）終了時に破棄される。

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

    正解：○（正しい）

    解説：Web Storageは同一オリジン単位でデータが管理される。

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は構造化データの大容量保存に対応するクライアントDB。

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

    正解：○（正しい）

    解説：IndexedDBはインデックス検索やトランザクションをサポートする。

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

    正解：○（正しい）

    解説：Web Workersはバックグラウンドスレッドで処理を実行する。

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ベースのHTTP通信API。

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

    正解：○（正しい）

    解説：WebSocketは双方向（全二重）通信を可能にする。

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では、位置情報の変化を継続的に監視する機能も利用できる。

    正解：○（正しい）

    解説：Geolocation APIは位置の継続監視（watch）機能も提供する。

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

    正解：×（誤り）

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

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

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

    正解：イ．SVG

    解説：SVGはXMLベースのベクター形式で拡大縮小に強い。

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

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

    正解：ア．Canvas API

    解説：Canvasはビットマップ（ラスター）描画を行う。

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

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

    正解：エ．MPEG-DASH

    解説：HLSやMPEG-DASHは回線状況で画質を切り替える配信技術。

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

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

    正解：ウ．Encrypted Media Extensions

    解説：EMEは暗号化（DRM保護）メディアの再生制御を担う。

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

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

    正解：ア．Media Source Extensions

    解説：MSEはJSからメディアストリームをvideo要素に供給する。

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

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

    正解：エ．Geolocation API

    解説：Geolocation APIは位置情報（緯度経度）を取得する。

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

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

    正解：ウ．DeviceOrientation Event

    解説：DeviceOrientation Eventは端末の傾き・向きを取得する。

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

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

    正解：ア．Pointer Events

    解説：Pointer Eventsは多様な入力を統一的に扱える。

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

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

    正解：ウ．Generic Sensor API

    解説：Generic Sensor APIはセンサーへの共通アクセス基盤を提供する。

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

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

    正解：エ．localStorage

    解説：localStorageは永続的にデータを保持する。

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

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

    正解：ウ．sessionStorage

    解説：sessionStorageはセッション終了時にデータが破棄される。

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

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

    正解：エ．Indexed Database API

    解説：IndexedDBは大容量の構造化データを保存できる。

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

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

    正解：エ．Web Workers

    解説：Web Workersは別スレッドでスクリプトを実行する。

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

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

    正解：ウ．Service Workers

    解説：Service Workerはリクエストを仲介しオフライン対応を行う。

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

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

    正解：ア．Push API

    解説：Push APIはService Workerを介して通知を受信する。

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

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

    正解：ウ．XMLHttpRequest

    解説：XMLHttpRequestはAjaxの基盤となる非同期通信API。

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

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

    正解：エ．Fetch API

    解説：Fetch APIはPromiseベースのHTTP通信API。

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

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

    正解：ウ．WebSocket

    解説：WebSocketは双方向・全二重通信を実現する。

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はブラウザ間P2Pのリアルタイム通信を実現する。

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

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

    正解：イ．WebSocket

    解説：WebSocketは双方向のリアルタイム通信に適する。SSEは単方向。

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

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

    正解：ア．Service Workers

    解説：Service Workerがオフライン対応のキャッシュ・プロキシを担う。

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

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

    正解：イ．SVG

    解説：SVGの図形はDOMに含まれ個別操作しやすい。

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

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

    正解：イ．Canvas

    解説：高頻度・大量描画はビットマップのCanvasが有利。

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

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

    正解：イ．DOM3 Events

    解説：DOM3 Events（UI Events）はUI操作イベントを規定する。

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

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

    正解：イ．Touch Events

    解説：Touch Eventsはタッチ操作に特化したイベントを扱う。

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

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

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

    解説：Web Storageは同一オリジン単位でキー・バリューを保存する。

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

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

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

    解説：Service Workerは原則HTTPS等のセキュアコンテキストが必要。

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

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

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

    解説：FetchはJSON以外にテキストやBlobなど多様な形式を扱える。

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

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

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

    解説：Web WorkersはDOMへ直接アクセスできない。