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．XMLHttpRequestのstatusプロパティには、レスポンスのHTTPステータスコード（200や404など）が数値で格納される。

    正解：○（正しい）

    解説：XMLHttpRequest の status プロパティは、サーバーが返したHTTPステータスコードを数値で表します。ステータスの説明文（OK や Not Found など）は statusText プロパティで取得します。

19. 問19．XMLHttpRequestでサーバーが404を返した場合、onloadではなくonerrorのイベントハンドラが呼び出される。

    正解：×（誤り）

    解説：サーバーから404や500などのレスポンスが返った場合も、HTTPとしての通信は完了しているため onload が呼び出されます。onerror が呼び出されるのは、ネットワーク障害などでリクエスト自体が失敗した場合です。成否は onload の中で status を調べて判断します。

20. 問20．XMLHttpRequestのonloadendは、リクエストが成功・失敗・中断のいずれで終わった場合にも最後に呼び出される。

    正解：○（正しい）

    解説：loadend イベントは、load・error・abort・timeout のいずれかのイベントの後に必ず発生します。成否にかかわらず実行したい後始末（読み込み中表示の解除など）を書くのに適しています。

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．Server-Sent Eventsでサーバーが返すレスポンスのMIMEタイプは application/json である。

    正解：×（誤り）

    解説：Server-Sent Events のレスポンスは text/event-stream というMIMEタイプで返します。本文は data: などのフィールドを行単位で並べた形式で、JSONの形式ではありません。

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．XMLHttpRequestのresponseTypeに'json'を指定して受信したとき、解析済みのデータを取得するプロパティはどれか。

    • ア．responseText
    • イ．responseXML
    • ウ．response
    • エ．statusText

    正解：ウ．response

    解説：responseType を 'json' にすると、受信したデータは解析済みのオブジェクトとして response プロパティに格納されます。responseText は responseType が空文字または 'text' のときにしか参照できません。responseXML はXML文書、statusText はステータスの説明文です。

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．XMLHttpRequestで、受信したすべてのレスポンスヘッダーを1つの文字列として取得するメソッドはどれか。

    • ア．getResponseHeader()
    • イ．getAllResponseHeaders()
    • ウ．getHeaders()
    • エ．headers()

    正解：イ．getAllResponseHeaders()

    解説：getAllResponseHeaders() は、受信したすべてのレスポンスヘッダーを改行区切りの1つの文字列で返します。特定のヘッダーの値だけが必要な場合は、ヘッダー名を指定して getResponseHeader() を使います。

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．クロスオリジンアクセスを許可するためサーバーが返すレスポンスヘッダーはどれか。

    • ア．Access-Control-Request-Method
    • イ．Access-Control-Allow-Origin
    • ウ．Access-Control-Request-Headers
    • エ．Origin

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

    解説：サーバーは Access-Control-Allow-Origin ヘッダーでアクセスを許可するオリジンを示します。Origin・Access-Control-Request-Method・Access-Control-Request-Headers は、ブラウザがサーバーへ送るリクエストヘッダーです。

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．WebSocketで、send()で送信を依頼したがまだネットワークへ送り出されていないデータ量（バイト数）を表すプロパティはどれか。

    • ア．readyState
    • イ．pendingBytes
    • ウ．queueSize
    • エ．bufferedAmount

    正解：エ．bufferedAmount

    解説：bufferedAmount は、send() でキューに積まれたもののまだ送信されていないデータのバイト数を表します。大量のデータを送るときに、この値を見て送信の間隔を調整できます。readyState は接続の状態を表すプロパティです。

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

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

    正解：ウ．Server-Sent Events

    解説：Server-Sent Events は EventSource オブジェクトを使い、サーバーからクライアントへの一方向でデータを送り続けます。接続が切れるとブラウザが自動で再接続します。WebSocket は双方向通信、Web Workers はバックグラウンドで処理を行う仕組みです。

61. 問61．XMLHttpRequestのGETリクエストで、ブラウザのキャッシュにある古いレスポンスが使われるのを防ぐためによく使われる方法はどれか。

    • ア．URLの末尾に、現在時刻など毎回変わるクエリ文字列を付ける
    • イ．open()の第3引数にfalseを指定する
    • ウ．responseTypeに'text'を指定する
    • エ．send()を2回続けて呼び出す

    正解：ア．URLの末尾に、現在時刻など毎回変わるクエリ文字列を付ける

    解説：GETのレスポンスはURLをもとにキャッシュから選ばれるため、'?t=' + Date.now() のように毎回変わるクエリ文字列を付けると別のURLとして扱われ、古いレスポンスが使われずにサーバーから取り直される。open()の第3引数のfalseは通信を同期にする指定で、キャッシュの使い方は変わらない。responseTypeに'text'を指定するのは受け取ったデータをどの型で扱うかの指定で、キャッシュとは関係しない。send()を続けて呼ぶと2回目はInvalidStateErrorの例外になり、取り直しにもならない。

    根拠： WHATWG「XMLHttpRequest Standard」 3.5.1 open()（async 引数＝同期・非同期の指定）／3.5.6 send()（send() invoked が true なら InvalidStateError）／3.6.8 responseType（応答の型の指定） ／ RFC 9111 HTTP Caching Section 2 Overview of Cache Operation：cache key は少なくとも要求メソッドと対象URIから成り、GET だけをキャッシュする多くのキャッシュはURIをキーに使う

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

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

    正解：ウ．put()

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

63. 問63．input要素（type="file"）で選択したShift_JISのファイルの中身を、文字コードを第2引数で指定して文字列として読み込むFileReaderのメソッドはどれか。

    • ア．readAsDataURL()
    • イ．readAsArrayBuffer()
    • ウ．readAsText()
    • エ．readAsString()

    正解：ウ．readAsText()

    解説：FileReaderの readAsText(blob, encoding) は、第2引数で文字コードを指定してファイルの内容を文字列として読み込む（省略時はUTF-8）。readAsDataURL() はdata: URL、readAsArrayBuffer() はバイナリとして読み込み、readAsString() というメソッドは無い。

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

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

    正解：ウ．storageイベント

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

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

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

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

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

66. 問66．DataViewの getUint16(byteOffset) を、第2引数 littleEndian を省略して呼び出したときに用いられるバイトオーダーはどれか。

    • ア．リトルエンディアン
    • イ．ビッグエンディアン
    • ウ．直前の書き込みと同じバイトオーダー
    • エ．ArrayBuffer生成時に決めたバイトオーダー

    正解：イ．ビッグエンディアン

    解説：DataViewの読み書きメソッドは、littleEndian 引数が false または省略（undefined）のときビッグエンディアンで値を扱う。リトルエンディアンで読むには第2引数に true を渡す。ArrayBuffer自体はバイトオーダーを持たない。

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．XMLHttpRequestで、送信中のリクエストを中止するメソッドはどれか。

    • ア．cancel()
    • イ．stop()
    • ウ．abort()
    • エ．close()

    正解：ウ．abort()

    解説：XMLHttpRequest の abort() は送信中のリクエストを中止し、abort イベントを発生させます。close() は WebSocket の接続を閉じるメソッドで、XMLHttpRequest にはありません。

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)でデータベースを開く。