HTML5プロフェッショナル認定試験 レベル2「ストレージと通信」の一問一答

HTML5プロフェッショナル認定試験 レベル2のストレージと通信に関する一問一答（全75問）の正解と解説の一覧です。上の一問一答で実際に解いてから、ここで復習・確認できます。

1. 問1．localStorageに保存したデータは、ブラウザを閉じても明示的に削除するまで永続的に保持される。

   正解：○（正しい）

   解説：localStorageは永続ストレージで、削除しない限りブラウザ再起動後も残り続ける。

2. 問2．sessionStorageに保存したデータは、そのタブ（ブラウジングコンテキスト）を閉じると破棄される。

   正解：○（正しい）

   解説：sessionStorageはタブ単位の生存期間を持ち、タブを閉じると自動的に消去される。

3. 問3．Web Storageに保存できる値は文字列型のみであり、オブジェクトはJSON.stringifyで文字列化して保存する必要がある。

   正解：○（正しい）

   解説：setItemの値は文字列に変換されるため、オブジェクトはJSON.stringifyで文字列化して保存する。

4. 問4．localStorage.getItem()で存在しないキーを指定した場合、nullが返る。

   正解：○（正しい）

   解説：getItemは該当するキーが存在しなければnullを返す（undefinedではない）。

5. 問5．localStorage.removeItem()は引数を省略すると、そのオリジンの全データを削除する。

   正解：×（誤り）

   解説：誤り。正しくは、全削除はclear()であり、removeItemはキー指定で1件のみ削除する。

6. 問6．localStorage.lengthは、現在保存されているキーと値のペアの数を返す。

   正解：○（正しい）

   解説：lengthプロパティはそのオリジンに保存されている項目数を整数で返す。

7. 問7．localStorage.setItem('n', 100)の後、typeof localStorage.getItem('n')は'number'を返す。

   正解：×（誤り）

   解説：誤り。正しくは、数値100は文字列'100'として保存されるため、取り出すと'string'になる。

8. 問8．Web Storageの内容は、Cookieと同様にHTTPリクエストごとにサーバーへ自動送信される。

   正解：×（誤り）

   解説：誤り。正しくは、Web Storageはサーバーへ自動送信されず、自動送信されるのはCookieである。

9. 問9．IndexedDBは大容量の構造化データを保存でき、APIは基本的に非同期で動作する。

   正解：○（正しい）

   解説：IndexedDBは大容量・構造化データ向けで、操作は非同期APIで実行される。

10. 問10．IndexedDBでオブジェクトストアを作成するのはonupgradeneededイベントハンドラの中である。

    正解：○（正しい）

    解説：スキーマ変更（ストア作成）はバージョン更新時のonupgradeneeded内で行う。

11. 問11．IndexedDBのobjectStore.put()は、キーが存在すれば更新、なければ追加を行う。

    正解：○（正しい）

    解説：put()は既存キーなら値を更新し、キーが未存在なら新規に追加する。

12. 問12．IndexedDBで多数のレコードを順に処理するにはカーソル（cursor）を利用できる。

    正解：○（正しい）

    解説：openCursor()で取得したカーソルにより複数レコードを順次走査して処理できる。

13. 問13．IndexedDBのkeyPathは、オブジェクトのどのプロパティを主キーにするかを指定する。

    正解：○（正しい）

    解説：keyPathで指定したプロパティがレコードの主キー（キー）として使われる。

14. 問14．XMLHttpRequestのsend()メソッドはリクエストを実際にサーバーへ送信する。

    正解：○（正しい）

    解説：send()はopenで構成したリクエストを実際にサーバーへ送信するメソッドである。

15. 問15．XMLHttpRequestのreadyStateが4のとき、リクエストは完了しレスポンスを受信済みである。

    正解：○（正しい）

    解説：readyState=4（DONE）はリクエスト完了かつレスポンス受信完了を表す状態である。

16. 問16．XMLHttpRequestのonreadystatechangeは、readyStateが変化するたびに呼び出される。

    正解：○（正しい）

    解説：readyStateの値が変わるたびにonreadystatechangeハンドラが実行される。

17. 問17．XMLHttpRequestのopen()で第3引数にfalseを指定すると、同期リクエストになる。

    正解：○（正しい）

    解説：open(method,url,false)は同期通信となり、応答が返るまで処理がブロックされる。

18. 問18．fetch()はコールバック関数ではなくPromiseを返す。

    正解：○（正しい）

    解説：fetch()はResponseオブジェクトに解決されるPromiseを返すAPIである。

19. 問19．fetchのResponseオブジェクトでは、ステータスが404でもokプロパティはtrueになる。

    正解：×（誤り）

    解説：誤り。正しくは、response.okは200番台のときだけtrueで、404などではfalseになる。

20. 問20．fetchはネットワーク障害などでリクエスト自体が失敗した場合はPromiseがrejectされる。

    正解：○（正しい）

    解説：ネットワークエラーなど通信そのものが失敗した場合はfetchのPromiseがrejectされる。

21. 問21．WebSocketはクライアントとサーバー間の双方向・全二重通信を可能にする。

    正解：○（正しい）

    解説：WebSocketは接続確立後、双方向（全二重）でメッセージを送受信できる仕組みである。

22. 問22．WebSocketで接続が確立されるとonopenイベントが発火する。

    正解：○（正しい）

    解説：WebSocketの接続が成功して確立されるとonopenイベントハンドラが呼ばれる。

23. 問23．Server-Sent EventsはEventSourceオブジェクトを使って実装する。

    正解：○（正しい）

    解説：SSEはnew EventSource(url)でEventSourceを生成して接続を確立する。

24. 問24．Server-Sent Eventsは接続が切れると再接続せず、開発者が手動で再接続を実装する必要がある。

    正解：×（誤り）

    解説：誤り。正しくは、SSEは接続断時にブラウザが自動で再接続を試みる仕組みを標準で備えている。

25. 問25．同一オリジンとは、スキーム（プロトコル）・ホスト・ポートがすべて一致することを指す。

    正解：○（正しい）

    解説：オリジンはスキーム・ホスト・ポートの3要素で定義され、すべて一致で同一オリジン。

26. 問26．localStorageは異なるオリジン間でもデータを共有できる。

    正解：×（誤り）

    解説：誤り。正しくは、Web Storageは同一オリジンポリシーに従い、オリジンが異なると共有できない。

27. 問27．localStorage.setItem('key','value')は値を保存し、戻り値として保存した値を返す。

    正解：×（誤り）

    解説：誤り。正しくは、setItemは値の保存を行うが戻り値はundefinedである。

28. 問28．localStorage.clear()は、指定した1つのキーのみを削除する。

    正解：×（誤り）

    解説：誤り。正しくは、clear()はそのオリジンの全データを削除し、1件削除はremoveItem()である。

29. 問29．localStorageの値が変更されると、変更を行ったそのタブ自身でstorageイベントが発火する。

    正解：×（誤り）

    解説：誤り。正しくは、storageイベントは変更を起こしたページ自身では発火せず、同一オリジンの他タブで発火する。

30. 問30．sessionStorageの変更は、同一オリジンの別タブにstorageイベントとして伝播する。

    正解：×（誤り）

    解説：誤り。正しくは、sessionStorageはタブ単位で隔離されており、他タブへは伝播しない。

31. 問31．IndexedDBのトランザクションでデータを書き込むにはモードをreadonlyにする必要がある。

    正解：×（誤り）

    解説：誤り。正しくは、書き込み（add/put/delete）にはreadwriteモードのトランザクションが必要である。

32. 問32．IndexedDBのobjectStore.add()は、同じキーが既に存在しても上書き保存に成功する。

    正解：×（誤り）

    解説：誤り。正しくは、add()は既存キーがあるとエラーになり、上書きはput()を用いる。

33. 問33．IndexedDBはキーと値のペアを保存できるが、値にJavaScriptオブジェクトを直接格納することはできない。

    正解：×（誤り）

    解説：誤り。正しくは、IndexedDBは構造化複製によりJavaScriptオブジェクトを直接格納できる。

34. 問34．XMLHttpRequestのreadyStateの初期値（open前）は4である。

    正解：×（誤り）

    解説：誤り。正しくは、openを呼ぶ前の初期状態はreadyState=0（UNSENT）である。

35. 問35．fetch()はサーバーが404や500などのHTTPエラーステータスを返すと、Promiseがrejectされる。

    正解：×（誤り）

    解説：誤り。正しくは、fetchはHTTPエラーステータスでもrejectせずresolveし、response.okで判定する。

36. 問36．WebSocketの接続URLにはhttp://またはhttps://スキームを使用する。

    正解：×（誤り）

    解説：誤り。正しくは、WebSocketはws://（非暗号）またはwss://（暗号）スキームを使用する。

37. 問37．WebSocketのsend()は送信専用で、サーバーからの受信にはonsendイベントを用いる。

    正解：×（誤り）

    解説：誤り。正しくは、受信時に発火するのはonmessageイベントであり、onsendは存在しない。

38. 問38．Server-Sent Events（SSE）は、クライアントからサーバーへの一方向通信を行う仕組みである。

    正解：×（誤り）

    解説：誤り。正しくは、SSEはサーバーからクライアントへの一方向プッシュ通信である。

39. 問39．CORSのプリフライトリクエストはGETメソッドで送信される。

    正解：×（誤り）

    解説：誤り。正しくは、プリフライトリクエストはOPTIONSメソッドで事前送信される。

40. 問40．XMLHttpRequestのresponseTextは、レスポンス本文をJSONオブジェクトとして返す。

    正解：×（誤り）

    解説：誤り。正しくは、responseTextはレスポンス本文を文字列として返す。

41. 問41．次のコードで完了時にconsoleへ出力されるreadyStateの値はいくつか。 var xhr = new XMLHttpRequest(); xhr.open('GET','/data'); xhr.onreadystatechange = function(){ if(xhr.readyState===4){ console.log(xhr.readyState); } }; xhr.send();

    • ア．4
    • イ．3
    • ウ．2
    • エ．1

    正解：ア．4

    解説：readyState=4はDONE（リクエスト完了）を表す状態である。

42. 問42．Web Storageで「現在保存されている項目数」を取得するプロパティはどれか。

    • ア．length
    • イ．size
    • ウ．count
    • エ．items

    正解：ア．length

    解説：lengthプロパティが保存済みの項目数を返す。

43. 問43．fetch()が返すものはどれか。

    • ア．Promise
    • イ．Responseオブジェクト（同期）
    • ウ．XMLHttpRequest
    • エ．コールバックID

    正解：ア．Promise

    解説：fetchはResponseに解決されるPromiseを返す。

44. 問44．WebSocketの暗号化された接続に用いるURLスキームはどれか。

    • ア．wss://
    • イ．ws://
    • ウ．https://
    • エ．sock://

    正解：ア．wss://

    解説：wss://が暗号化WebSocket。ws://は非暗号化である。

45. 問45．CORSのプリフライトリクエストで使用されるHTTPメソッドはどれか。

    • ア．OPTIONS
    • イ．GET
    • ウ．POST
    • エ．HEAD

    正解：ア．OPTIONS

    解説：プリフライトはOPTIONSメソッドで送信される。

46. 問46．IndexedDBでスキーマ（オブジェクトストア）を作成・変更するために利用するイベントはどれか。

    • ア．onupgradeneeded
    • イ．onsuccess
    • ウ．onload
    • エ．oncomplete

    正解：ア．onupgradeneeded

    解説：onupgradeneededはバージョン更新時に発火し、ストア作成を行う場所である。

47. 問47．Responseオブジェクトのメソッドで、本文をJSONとして解析するものはどれか。

    • ア．json()
    • イ．parse()
    • ウ．toJSON()
    • エ．data()

    正解：ア．json()

    解説：json()が本文をJSONにパースしPromiseを返す。

48. 問48．XMLHttpRequestのreadyStateで「リクエスト未初期化（open未実行）」を表す値はどれか。

    • ア．0
    • イ．1
    • ウ．3
    • エ．4

    正解：ア．0

    解説：readyState=0がUNSENT（未初期化）を表す。

49. 問49．XMLHttpRequestで非同期通信を行う場合、open()の第3引数に指定する値はどれか。

    • ア．true
    • イ．false
    • ウ．'async'
    • エ．0

    正解：ア．true

    解説：第3引数trueで非同期、falseで同期となる（既定はtrue）。

50. 問50．localStorage.setItem('count', 5); の後、localStorage.getItem('count') + 1 の結果はどれか。

    • ア．6
    • イ．'51'
    • ウ．51（数値）
    • エ．エラー

    正解：イ．'51'

    解説：保存値は文字列'5'になり、'5'+1は文字列連結で'51'となる。

51. 問51．localStorageから1件のキーだけを削除するメソッドはどれか。

    • ア．clear()
    • イ．removeItem()
    • ウ．delete()
    • エ．unset()

    正解：イ．removeItem()

    解説：removeItem(key)が指定キーを削除する。clearは全件削除。

52. 問52．WebSocketでサーバーからメッセージを受信したときに発火するイベントハンドラはどれか。

    • ア．onreceive
    • イ．onmessage
    • ウ．onopen
    • エ．ondata

    正解：イ．onmessage

    解説：onmessageが受信イベントのハンドラである。

53. 問53．クロスオリジンアクセスを許可するためサーバーが返すレスポンスヘッダーはどれか。

    • ア．X-Frame-Options
    • イ．Access-Control-Allow-Origin
    • ウ．Content-Security-Policy
    • エ．Origin

    正解：イ．Access-Control-Allow-Origin

    解説：Access-Control-Allow-Originが許可オリジンを示す。

54. 問54．Server-Sent Eventsの通信方向として正しいものはどれか。

    • ア．双方向
    • イ．サーバー→クライアントのみ
    • ウ．クライアント→サーバーのみ
    • エ．通信しない

    正解：イ．サーバー→クライアントのみ

    解説：SSEはサーバーからクライアントへの単方向プッシュである。

55. 問55．Web Storageのオリジンあたりの保存容量の目安として一般的なものはどれか。

    • ア．約4KB
    • イ．約5MB
    • ウ．約500MB
    • エ．無制限

    正解：イ．約5MB

    解説：多くのブラウザで約5MBが目安とされる。

56. 問56．次のコードで出力される内容として正しいものはどれか。 localStorage.setItem('x','hello'); console.log(localStorage.getItem('y'));

    • ア．''（空文字）
    • イ．null
    • ウ．undefined
    • エ．エラー

    正解：イ．null

    解説：存在しないキーyの取得はnullを返す。

57. 問57．Server-Sent Eventsを開始するために生成するオブジェクトはどれか。

    • ア．WebSocket
    • イ．EventSource
    • ウ．XMLHttpRequest
    • エ．ServerEvent

    正解：イ．EventSource

    解説：new EventSource(url)でSSE接続を開始する。

58. 問58．IndexedDBで書き込み（追加・更新）を行うトランザクションのモードはどれか。

    • ア．readonly
    • イ．versionchange
    • ウ．readwrite
    • エ．writeonly

    正解：ウ．readwrite

    解説：書き込みにはreadwriteモードが必要。readonlyは読み取り専用。

59. 問59．fetchで取得したResponseが成功（HTTP 200番台）かどうかを判定する適切な方法はどれか。

    • ア．catchで捕捉される
    • イ．response.errorを見る
    • ウ．response.okを確認する
    • エ．fetchがfalseを返す

    正解：ウ．response.okを確認する

    解説：response.okで200番台かを判定できる。fetchはエラーステータスでrejectしない。

60. 問60．サーバーからクライアントへの単方向プッシュを行い、自動再接続機能を持つAPIはどれか。

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

    正解：ウ．Server-Sent Events

    解説：Server-Sent Events（EventSource）が単方向プッシュと自動再接続を提供する。

61. 問61．XMLHttpRequestでリクエストを送信するメソッドはどれか。

    • ア．open()
    • イ．start()
    • ウ．send()
    • エ．fetch()

    正解：ウ．send()

    解説：send()が実際の送信を行う。openは初期化のみ。

62. 問62．IndexedDBで既存キーがあれば更新、なければ追加するメソッドはどれか。

    • ア．add()
    • イ．insert()
    • ウ．put()
    • エ．set()

    正解：ウ．put()

    解説：put()は更新も追加も行う。add()は既存キーでエラーになる。

63. 問63．オリジンの構成要素として正しい組み合わせはどれか。

    • ア．パス・クエリ・フラグメント
    • イ．ドメイン・Cookie・パス
    • ウ．スキーム・ホスト・ポート
    • エ．ユーザー・パスワード・ホスト

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

    解説：オリジンはスキーム・ホスト・ポートで構成される。

64. 問64．複数のタブ間でlocalStorageの変更を検知するために利用するイベントはどれか。

    • ア．changeイベント
    • イ．updateイベント
    • ウ．storageイベント
    • エ．syncイベント

    正解：ウ．storageイベント

    解説：storageイベントが他タブでの変更検知に使われる。

65. 問65．sessionStorageの特徴として正しいものはどれか。

    • ア．全タブで共有され永続
    • イ．サーバーに自動送信される
    • ウ．タブを閉じると破棄される
    • エ．容量無制限

    正解：ウ．タブを閉じると破棄される

    解説：sessionStorageはタブ単位で、タブを閉じると消える。

66. 問66．オブジェクトをlocalStorageに保存する際に必要な処理はどれか。

    • ア．JSON.parse()
    • イ．そのまま保存できる
    • ウ．toStringは不要
    • エ．JSON.stringify()

    正解：エ．JSON.stringify()

    解説：値は文字列のみ保存可能なのでJSON.stringifyで文字列化する。

67. 問67．localStorageに数値を保存し取り出したときの型として正しいものはどれか。

    • ア．number
    • イ．object
    • ウ．boolean
    • エ．string

    正解：エ．string

    解説：値は文字列に変換されるため取り出すとstring型になる。

68. 問68．WebSocketで接続を閉じるメソッドはどれか。

    • ア．disconnect()
    • イ．end()
    • ウ．abort()
    • エ．close()

    正解：エ．close()

    解説：close()メソッドがWebSocket接続を終了させる。

69. 問69．IndexedDBで主キー以外のプロパティで検索できるようにする仕組みはどれか。

    • ア．keyPath
    • イ．cursor
    • ウ．transaction
    • エ．index

    正解：エ．index

    解説：createIndexで作るindexにより主キー以外で検索できる。

70. 問70．fetchのレスポンスからHTTPステータスコードを取得するプロパティはどれか。

    • ア．response.code
    • イ．response.httpStatus
    • ウ．response.state
    • エ．response.status

    正解：エ．response.status

    解説：response.statusがHTTPステータスコードを返す。

71. 問71．XMLHttpRequestでリクエストヘッダーを追加するメソッドはどれか。

    • ア．setHeader()
    • イ．addHeader()
    • ウ．header()
    • エ．setRequestHeader()

    正解：エ．setRequestHeader()

    解説：setRequestHeader()がリクエストヘッダーを設定する。

72. 問72．次のコードの結果として正しいものはどれか。 localStorage.setItem('a','1'); localStorage.setItem('b','2'); localStorage.removeItem('a'); console.log(localStorage.length);

    • ア．0
    • イ．2
    • ウ．undefined
    • エ．1

    正解：エ．1

    解説：2件保存後にaを削除するため残りは1件、length=1。

73. 問73．XMLHttpRequestでタイムアウト発生時に呼ばれるイベントハンドラはどれか。

    • ア．onerror
    • イ．onabort
    • ウ．onload
    • エ．ontimeout

    正解：エ．ontimeout

    解説：ontimeoutがtimeout超過時に呼ばれる。

74. 問74．IndexedDBで複数レコードを順に走査するために用いるものはどれか。

    • ア．index
    • イ．keyPath
    • ウ．transaction
    • エ．cursor

    正解：エ．cursor

    解説：openCursorで取得するカーソルで順次走査する。

75. 問75．IndexedDBのデータベースを開くために使うメソッドはどれか。

    • ア．indexedDB.create()
    • イ．indexedDB.connect()
    • ウ．indexedDB.new()
    • エ．indexedDB.open()

    正解：エ．indexedDB.open()

    解説：indexedDB.open(name, version)でデータベースを開く。