HTML5プロフェッショナル認定試験 レベル2「デバイス・パフォーマンス・セキュリティ」の一問一答

HTML5プロフェッショナル認定試験 レベル2のデバイス・パフォーマンス・セキュリティに関する一問一答（全75問）の正解と解説の一覧です。上の一問一答で実際に解いてから、ここで復習・確認できます。

1. 問1．Geolocation APIで現在位置を一度だけ取得するには navigator.geolocation.getCurrentPosition() を使用する。

   正解：○（正しい）

   解説：getCurrentPosition()は現在位置を1回だけ取得する。継続的な監視にはwatchPosition()を使う。

2. 問2．watchPosition()は位置が変化するたびにコールバックを呼び出し、戻り値としてwatch IDを返す。

   正解：○（正しい）

   解説：watchPosition()は監視を開始し識別子（watch ID）を返す。これをclearWatch()に渡して監視を停止する。

3. 問3．getCurrentPosition()の成功コールバックには Position オブジェクトが渡され、position.coords.latitude で緯度を取得できる。

   正解：○（正しい）

   解説：成功時はPositionが渡され、coords.latitude（緯度）coords.longitude（経度）coords.accuracy（精度）を参照できる。

4. 問4．Geolocationのエラーコールバックでユーザーがアクセスをきょひした場合のコードは PERMISSION_DENIED である。

   正解：○（正しい）

   解説：エラー時はPositionErrorが渡され、code=1がPERMISSION_DENIED、2がPOSITION_UNAVAILABLE、3がTIMEOUT。

5. 問5．getCurrentPosition()の第3引数のオプションで enableHighAccuracy:true を指定すると、より高精度な位置取得を要求できる。

   正解：○（正しい）

   解説：オプションには enableHighAccuracy、timeout、maximumAge があり、enableHighAccuracy:true で高精度取得を要求する。

6. 問6．coords.accuracy は位置情報の精度をメートル単位で表す。

   正解：○（正しい）

   解説：accuracyは緯度経度の精度を表す値で単位はメートルである。値が小さいほど高精度。

7. 問7．DeviceOrientationEvent の alpha はデバイスのZ軸回りの回転（コンパス方位に相当）を0〜360度で表す。

   正解：○（正しい）

   解説：alphaはZ軸回り（0〜360度）、betaはX軸回り（前後の傾き）、gammaはY軸回り（左右の傾き）を表す。

8. 問8．DeviceMotionEvent はデバイスの加速度（acceleration）や回転速度（rotationRate）を取得できる。

   正解：○（正しい）

   解説：DeviceMotionEventはacceleration、accelerationIncludingGravity、rotationRate、intervalを提供する。

9. 問9．タッチ操作の開始を検知するタッチイベントは touchstart である。

   正解：○（正しい）

   解説：touchstartは指が画面に触れた時、touchmoveは移動中、touchendは離れた時に発火する。

10. 問10．TouchEvent の touches プロパティは、現在画面に触れている全てのタッチ点のリストを表す。

    正解：○（正しい）

    解説：touchesは画面に触れている全タッチ点、targetTouchesは同一要素上のタッチ点、changedTouchesは変化したタッチ点を表す。

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

    正解：○（正しい）

    解説：Pointer Eventsはマウス/タッチ/ペンを抽象化し、pointerdown/pointermove/pointerupで統一的に扱える。

12. 問12．Battery Status API でデバイスのバッテリー残量（level）や充電中か（charging）を取得できる。

    正解：○（正しい）

    解説：Battery Status APIはnavigator.getBattery()でBatteryManagerを取得し、level、charging等を参照できる。

13. 問13．Notification API でデスクトップ通知を表示するには、事前にユーザーの許可を得る必要がある。

    正解：○（正しい）

    解説：通知表示にはユーザー許可が必要で、requestPermission()でgranted/denied/defaultの状態を要求する。

14. 問14．requestAnimationFrame() はブラウザの再描画タイミングに合わせてコールバックを実行するため、setTimeoutより滑らかなアニメーションに適する。

    正解：○（正しい）

    解説：requestAnimationFrameは画面のリフレッシュに同期して呼ばれ、効率的で滑らかなアニメーションを実現する。

15. 問15．requestAnimationFrame()で予約したコールバックの実行を取り消すには cancelAnimationFrame(id) を使う。

    正解：○（正しい）

    解説：requestAnimationFrameは要求IDを返し、cancelAnimationFrame(id)でそのコールバックを取り消せる。

16. 問16．performance.now() はページ読み込み開始時点を基準とした高精度（小数ミリ秒）な時刻を返す。

    正解：○（正しい）

    解説：performance.now()はナビゲーション開始からの経過時間を高精度（小数ミリ秒）で返し計測に適する。

17. 問17．Navigation Timing API は、DNS解決・接続・応答などページ読み込みの各段階の時刻を提供する。

    正解：○（正しい）

    解説：performance.timing（後継PerformanceNavigationTiming）はnavigationStart、domLoading、loadEventEnd等を提供する。

18. 問18．User Timing API の performance.mark() は任意のタイミングに名前付きの計測ポイントを記録する。

    正解：○（正しい）

    解説：mark()で計測ポイントを記録し、measure()で2点間（mark間）の経過時間を計測できる。

19. 問19．Resource Timing API は、画像やスクリプトなど個々のリソースの読み込みにかかった時間を取得できる。

    正解：○（正しい）

    解説：Resource Timing APIはgetEntriesByType('resource')で各リソースのfetchStart〜responseEnd等の詳細を取得する。

20. 問20．Web Worker を生成するには new Worker('worker.js') のようにスクリプトのURLを指定する。

    正解：○（正しい）

    解説：new Worker(URL)でワーカーを生成する。指定したスクリプトが別スレッドで実行される。

21. 問21．Geolocation APIで位置情報を取得する際、ユーザーの明示的な許可は不要で、スクリプトから無条件に取得できる。

    正解：×（誤り）

    解説：誤り。正しくは、Geolocation APIは機微情報を扱うためユーザーの明示的な許可（パーミッション）が必須である。

22. 問22．watchPosition()で開始した位置監視を停止するには clearPosition() を呼び出す。

    正解：×（誤り）

    解説：誤り。正しくは、監視停止には clearWatch(id) を使う。clearPositionというメソッドは存在しない。

23. 問23．DeviceOrientationEvent の beta はデバイスのY軸回りの回転を表す。

    正解：×（誤り）

    解説：誤り。正しくは、betaはX軸回りの回転（前後の傾き、-180〜180度）を表す。Y軸回りはgamma。

24. 問24．TouchEvent の changedTouches は、現在画面に触れている全てのタッチ点を表す。

    正解：×（誤り）

    解説：誤り。正しくは、changedTouchesはそのイベントで状態が変化したタッチ点のリストを表す。全タッチ点はtouches。

25. 問25．Vibration API の navigator.vibrate(200) はデバイスを200秒間振動させる。

    正解：×（誤り）

    解説：誤り。正しくは、vibrate()の引数はミリ秒単位なので200ミリ秒の振動である。配列でパターン指定も可能。

26. 問26．performance.now() が返す値は、Date.now() と同じくUNIXエポックからの経過ミリ秒である。

    正解：×（誤り）

    解説：誤り。正しくは、performance.now()はナビゲーション開始を基準とした相対時間で、単調増加で巻き戻らない高精度値である。

27. 問27．Web Worker は別スレッドで動作し、DOMに直接アクセスすることができる。

    正解：×（誤り）

    解説：誤り。正しくは、Web Workerは別スレッド動作のためDOM（window/document）に直接アクセスできない。重い処理の分離が目的。

28. 問28．Web Worker からメインスレッドへ送られるデータは参照渡しであり、同じオブジェクトを共有する。

    正解：×（誤り）

    解説：誤り。正しくは、postMessageで渡すデータは構造化複製でコピーされる（Transferable除く）。参照共有しない。

29. 問29．Service Worker は一度登録すると、イベントの有無に関わらず常にバックグラウンドで動き続ける。

    正解：×（誤り）

    解説：誤り。正しくは、Service Workerはイベント駆動でイベントがないとブラウザにより停止され、必要時に再起動される。

30. 問30．Application Cache（AppCache）は現在も推奨される最新のオフライン技術である。

    正解：×（誤り）

    解説：誤り。正しくは、Application Cacheは非推奨・廃止されており、後継としてService Worker＋Cache APIが推奨される。

31. 問31．http://example.com と https://example.com は、ホスト名が同じなので同一オリジンである。

    正解：×（誤り）

    解説：誤り。正しくは、スキームがhttpとhttpsで異なるため別オリジンである。

32. 問32．Cookie の Secure 属性を付けると、HTTP（非暗号化）通信でもCookieが送信される。

    正解：×（誤り）

    解説：誤り。正しくは、Secure属性を付けるとHTTPS通信時のみCookieが送信され、HTTPでは送られない。

33. 問33．Web Worker のスクリプトファイルは、生成元のページと異なるオリジンに置いても同一オリジンポリシーの制約を受けない。

    正解：×（誤り）

    解説：誤り。正しくは、Web Workerのスクリプトは原則として同一オリジンに置く必要があり、同一オリジンポリシーの制約を受ける。

34. 問34．Cache API の caches オブジェクトは Service Worker 専用であり、ウィンドウからは利用できない。

    正解：×（誤り）

    解説：誤り。正しくは、Cache API（caches）はService Workerだけでなくウィンドウコンテキストからも利用できる。

35. 問35．Shared Worker は、生成したひとつのタブからのみアクセスできる専用ワーカーである。

    正解：×（誤り）

    解説：誤り。正しくは、Shared Workerは同一オリジンの複数のタブやウィンドウから共有してアクセスできる。

36. 問36．requestAnimationFrame() のコールバックには、引数として現在時刻（DOMHighResTimeStamp）が渡される。

    正解：○（正しい）

    解説：requestAnimationFrameのコールバックには高精度な現在時刻が渡され、これを用いて経過時間を計算できる。

37. 問37．CORS は、クライアント側のJavaScriptだけで設定でき、サーバ側の対応は一切不要である。

    正解：×（誤り）

    解説：誤り。正しくは、CORSはサーバがAccess-Control-Allow-Origin等の応答ヘッダを返すことで成立し、サーバ側の対応が必須である。

38. 問38．Notification API の許可状態は granted（許可）、denied（拒否）、default（未選択）のいずれかで表される。

    正解：○（正しい）

    解説：Notification.permissionはgranted/denied/defaultのいずれかを返す。defaultは未だ選択されていない状態。

39. 問39．Content Security Policy では、デフォルトでインラインスクリプト（onclick属性や<script>内記述）が許可される。

    正解：×（誤り）

    解説：誤り。正しくは、CSPを有効にするとデフォルトでインラインスクリプトは禁止され、XSSのリスクを下げる。

40. 問40．Service Worker はHTTP（非HTTPS）の通常のページでも問題なく登録できる。

    正解：×（誤り）

    解説：誤り。正しくは、Service WorkerはHTTPS（localhostを除く）でのみ登録でき、HTTPでは利用できない。

41. 問41．DeviceOrientationEventで、デバイスのZ軸回りの回転（コンパス方位に相当）を表すプロパティはどれか。

    • ア．alpha
    • イ．beta
    • ウ．gamma
    • エ．theta

    正解：ア．alpha

    解説：Z軸回りはalpha（0〜360度）。betaはX軸、gammaはY軸。

42. 問42．PointerEventで入力デバイスの種類（mouse/touch/pen）を判別できるプロパティはどれか。

    • ア．pointerType
    • イ．pointerId
    • ウ．deviceType
    • エ．inputKind

    正解：ア．pointerType

    解説：pointerTypeが入力種別を示す。pressureは筆圧、pointerIdはポインタ識別子。

43. 問43．requestAnimationFrameで予約したコールバックを取り消す関数はどれか。

    • ア．cancelAnimationFrame(id)
    • イ．clearAnimationFrame(id)
    • ウ．clearTimeout(id)
    • エ．stopAnimationFrame(id)

    正解：ア．cancelAnimationFrame(id)

    解説：cancelAnimationFrame(id)で取り消す。clearAnimationFrameは存在しない。

44. 問44．Web Workerについて正しい説明はどれか。

    • ア．別スレッドで動作しDOMに直接アクセスできない
    • イ．UIスレッドと同じスレッドで動作する
    • ウ．DOMに直接アクセスできる
    • エ．localStorageのみ禁止でDOMは操作できる

    正解：ア．別スレッドで動作しDOMに直接アクセスできない

    解説：Web Workerは別スレッドで動作しDOMに直接アクセスできない。重い処理の分離が目的。

45. 問45．http://example.com:80 に対して別オリジンとなるものはどれか。

    • ア．https://example.com
    • イ．http://example.com/path
    • ウ．http://example.com:80/index.html
    • エ．http://example.com

    正解：ア．https://example.com

    解説：https://example.comはスキームが異なるため別オリジン。http://example.com/pathはパス違いのみで同一。

46. 問46．CORSで任意のオリジンからのアクセスを許可するサーバ応答ヘッダはどれか。

    • ア．Access-Control-Allow-Origin: *
    • イ．Access-Control-Allow-All: true
    • ウ．Allow-Cross-Origin: *
    • エ．Access-Control-Origin: any

    正解：ア．Access-Control-Allow-Origin: *

    解説：Access-Control-Allow-Origin: * が任意オリジンを許可する。特定許可はそのオリジンを指定。

47. 問47．次のWeb Workerのコードで、ワーカーが受け取ったメッセージへ応答する正しい記述はどれか（ワーカー側スクリプト）。

    • ア．self.onmessage = e => self.postMessage(e.data)
    • イ．document.onmessage = e => document.postMessage(e.data)
    • ウ．window.onmessage = e => window.terminate()
    • エ．worker.onmessage = e => worker.send(e.data)

    正解：ア．self.onmessage = e => self.postMessage(e.data)

    解説：ワーカー側ではself.onmessageで受信し、self.postMessage()で応答する。DOMには触れない。

48. 問48．次のうち、Geolocation APIで継続的に位置の変化を監視するメソッドはどれか。

    • ア．getCurrentPosition()
    • イ．watchPosition()
    • ウ．observePosition()
    • エ．trackPosition()

    正解：イ．watchPosition()

    解説：watchPosition()は位置変化を継続監視する。getCurrentPositionは1回のみ。

49. 問49．タッチイベントで、そのイベントによって状態が変化したタッチ点だけを取得するプロパティはどれか。

    • ア．touches
    • イ．changedTouches
    • ウ．targetTouches
    • エ．activeTouches

    正解：イ．changedTouches

    解説：changedTouchesはそのイベントで変化したタッチ点。touchesは全点、targetTouchesは同一要素上の点。

50. 問50．User Timing APIで任意の計測ポイントに名前を付けて記録するメソッドはどれか。

    • ア．performance.measure()
    • イ．performance.mark()
    • ウ．performance.now()
    • エ．performance.record()

    正解：イ．performance.mark()

    解説：performance.mark(name)で計測ポイントを記録する。measureは2点間の計測。

51. 問51．メインスレッドからWeb Workerへデータを送るメソッドはどれか。

    • ア．sendMessage()
    • イ．postMessage()
    • ウ．emit()
    • エ．dispatchData()

    正解：イ．postMessage()

    解説：postMessage()でデータを送り、相手はonmessageで受け取る。データは構造化複製される。

52. 問52．複数のタブやウィンドウから共有して利用できるワーカーはどれか。

    • ア．Dedicated Worker
    • イ．Shared Worker
    • ウ．Service Worker
    • エ．Inline Worker

    正解：イ．Shared Worker

    解説：Shared Workerは同一オリジンの複数コンテキストで共有できる。Dedicated Workerは専用。

53. 問53．Service Workerがネットワークリクエストを横取りしてキャッシュ応答などを返せるイベントはどれか。

    • ア．install
    • イ．fetch
    • ウ．activate
    • エ．message

    正解：イ．fetch

    解説：fetchイベントでリクエストを横取りし、Cacheからの応答返却などプロキシ動作ができる。

54. 問54．CSPで同一オリジンのスクリプトのみ許可する指定はどれか。

    • ア．script-src 'none'
    • イ．script-src 'self'
    • ウ．script-src '*'
    • エ．script-src 'unsafe-inline'

    正解：イ．script-src 'self'

    解説：script-src 'self' は自オリジンのスクリプトのみ許可する。'none'は全禁止。

55. 問55．ユーザー入力をHTMLに出力する際のエスケープ漏れが原因で起こる代表的な攻撃はどれか。

    • ア．CSRF
    • イ．XSS
    • ウ．SQLインジェクション
    • エ．クリックジャッキング

    正解：イ．XSS

    解説：XSSは出力エスケープ漏れで任意スクリプトが実行される攻撃。

56. 問56．HTTPSページ内でHTTPの非暗号化リソースを読み込む状態を指す用語はどれか。

    • ア．Cross Content
    • イ．Mixed Content
    • ウ．Insecure Origin
    • エ．Hybrid Content

    正解：イ．Mixed Content

    解説：Mixed Contentと呼び、ブラウザがブロックまたは警告する。

57. 問57．Geolocationの成功コールバックに渡されるPositionオブジェクトから経度を取得するプロパティはどれか。

    • ア．position.longitude
    • イ．position.coords.lng
    • ウ．position.coords.longitude
    • エ．position.geo.longitude

    正解：ウ．position.coords.longitude

    解説：経度はposition.coords.longitudeで取得する。latitudeは緯度。

58. 問58．DeviceOrientationEventで、デバイスのX軸回りの回転（前後の傾き）を表すプロパティはどれか。

    • ア．gamma
    • イ．alpha
    • ウ．beta
    • エ．delta

    正解：ウ．beta

    解説：X軸回りはbeta（-180〜180度）。alphaはZ軸、gammaはY軸。

59. 問59．マウス・タッチ・ペンを統一的に扱えるイベントモデルはどれか。

    • ア．Touch Events
    • イ．Mouse Events
    • ウ．Pointer Events
    • エ．Gesture Events

    正解：ウ．Pointer Events

    解説：Pointer Eventsが複数入力デバイスを統一的に扱う。pointerdown等で受ける。

60. 問60．ブラウザの再描画に同期してアニメーション用コールバックを実行する関数はどれか。

    • ア．setInterval()
    • イ．setTimeout()
    • ウ．requestAnimationFrame()
    • エ．requestIdleCallback()

    正解：ウ．requestAnimationFrame()

    解説：requestAnimationFrameは再描画タイミングに同期して呼ばれ滑らかなアニメーションに適する。

61. 問61．User Timing APIで2つのmark間の経過時間を計測するメソッドはどれか。

    • ア．performance.mark()
    • イ．performance.diff()
    • ウ．performance.measure()
    • エ．performance.span()

    正解：ウ．performance.measure()

    解説：performance.measure(name,start,end)が2点間を計測する。mark()は単一ポイント記録。

62. 問62．Service Workerの動作に必須となる条件はどれか。

    • ア．HTTP接続であること
    • イ．Cookieが有効であること
    • ウ．HTTPS（またはlocalhost）であること
    • エ．WebSocket接続があること

    正解：ウ．HTTPS（またはlocalhost）であること

    解説：Service WorkerはHTTPS（セキュアコンテキスト、localhostは例外）が必須。

63. 問63．Service Workerのライフサイクルで、登録直後にリソースのキャッシュなどを行うイベントはどれか。

    • ア．fetch
    • イ．sync
    • ウ．install
    • エ．push

    正解：ウ．install

    解説：installイベントで初期リソースのキャッシュを行い、続くactivateで制御を開始する。

64. 問64．リクエストとレスポンスのペアを保存し、オフライン対応に利用するAPIはどれか。

    • ア．LocalStorage
    • イ．IndexedDB
    • ウ．Cache API
    • エ．Cookie

    正解：ウ．Cache API

    解説：Cache APIがrequest/responseを保存する。LocalStorageは文字列のkey-valueのみ。

65. 問65．現在では非推奨・廃止とされ、Service Workerに置き換えられたオフライン技術はどれか。

    • ア．IndexedDB
    • イ．Web Storage
    • ウ．Application Cache
    • エ．Cache API

    正解：ウ．Application Cache

    解説：Application Cache（AppCache）が非推奨・廃止され、Service Worker＋Cache APIが後継。

66. 問66．クロスオリジンのリソースアクセスをサーバの許可ヘッダで安全に可能にする仕組みはどれか。

    • ア．CSP
    • イ．SRI
    • ウ．CORS
    • エ．JSONP

    正解：ウ．CORS

    解説：CORSが応答ヘッダ（Access-Control-Allow-Origin等）でクロスオリジンアクセスを許可する。

67. 問67．ユーザーが位置情報の取得を拒否した場合、PositionErrorのcodeに対応する定数はどれか。

    • ア．TIMEOUT
    • イ．POSITION_UNAVAILABLE
    • ウ．ACCESS_DENIED
    • エ．PERMISSION_DENIED

    正解：エ．PERMISSION_DENIED

    解説：拒否時はPERMISSION_DENIED（code=1）。POSITION_UNAVAILABLEは取得不能、TIMEOUTは時間切れ。

68. 問68．ページのナビゲーション開始からの高精度な経過時間（小数ミリ秒）を返すメソッドはどれか。

    • ア．Date.now()
    • イ．new Date().getTime()
    • ウ．performance.timing.now()
    • エ．performance.now()

    正解：エ．performance.now()

    解説：performance.now()が高精度な相対時刻を返す。Date.now()はエポックからの整数ミリ秒。

69. 問69．個々のリソース（画像・CSS・JS）の読み込み時間を取得できるAPIはどれか。

    • ア．Navigation Timing API
    • イ．User Timing API
    • ウ．High Resolution Time API
    • エ．Resource Timing API

    正解：エ．Resource Timing API

    解説：Resource Timing APIがリソース単位の詳細タイミングを提供する。Navigation Timingはページ全体。

70. 問70．メインスレッドからWeb Workerを即座に終了させるメソッドはどれか。

    • ア．worker.stop()
    • イ．worker.close()
    • ウ．worker.kill()
    • エ．worker.terminate()

    正解：エ．worker.terminate()

    解説：メイン側はworker.terminate()で終了。ワーカー自身はself.close()で終了する。

71. 問71．同一オリジンとみなされるために一致が必要な要素の組み合わせはどれか。

    • ア．ホストのみ
    • イ．スキームとホスト
    • ウ．ホストとパス
    • エ．スキーム・ホスト・ポート

    正解：エ．スキーム・ホスト・ポート

    解説：オリジンはスキーム・ホスト・ポートの三要素で決まり、全て一致が必要。

72. 問72．読み込み可能なスクリプトやリソースの出所を制限してXSSを軽減するセキュリティ機構はどれか。

    • ア．CORS
    • イ．SRI
    • ウ．SOP
    • エ．CSP（Content Security Policy）

    正解：エ．CSP（Content Security Policy）

    解説：CSP（Content Security Policy）が許可ソースを宣言しXSSを緩和する。

73. 問73．クロスサイトリクエスト時のCookie送信を制御してCSRFを緩和するCookie属性はどれか。

    • ア．HttpOnly
    • イ．Secure
    • ウ．Domain
    • エ．SameSite

    正解：エ．SameSite

    解説：SameSite属性（Strict/Lax）でクロスサイト送信を制限しCSRFを緩和する。

74. 問74．Web Worker内から外部スクリプトを同期的に読み込むメソッドはどれか。

    • ア．require()
    • イ．import()
    • ウ．loadScript()
    • エ．importScripts()

    正解：エ．importScripts()

    解説：importScripts(url)でワーカー内に外部スクリプトを読み込む。複数指定可。

75. 問75．Cache APIで新しいキャッシュ領域を開く（取得する）メソッドはどれか。

    • ア．caches.create(name)
    • イ．caches.new(name)
    • ウ．cache.init(name)
    • エ．caches.open(name)

    正解：エ．caches.open(name)

    解説：caches.open(name)でCacheオブジェクトを取得する。返り値はPromise。