HTML5レベル2はJavaScriptを中心に、DOM、イベント、非同期処理、Web API、グラフィックスやマルチメディアなど、ブラウザで動くアプリの振る舞いを読み解く試験です。

更新日 2026-10-05

HTML5プロフェッショナル認定 レベル2 攻略ガイド

HTML5レベル2では、API名を知っているだけではコードの動きを読めません。変数が見える範囲、イベントの経路、非同期処理が再開する時点、保存や通信の制約を追い、ブラウザの中で何が起きるか説明する力を育てます。

題材には、入力したメモを一覧へ追加し、保存し、再表示する小さなアプリを使います。完成品の見栄えより、「二回押したら」「通信が失敗したら」「別のページへ移動したら」という条件の変化へ注目してください。JavaScriptだけでなく、描画・メディア・通信・デバイスAPIも別の練習で補います。

このページ内のミニケース、コード、計算例は、学習方法を説明するために資格合格.webが独自に作成したものです。実際のHTML5プロフェッショナル認定 レベル2の非公開試験問題を転載・再現したものではありません。

変数は値と、見える範囲を分けて追う

letとconstはブロックの範囲、varは関数の範囲を意識し、同名の変数があれば宣言位置へ戻ります。constは束縛を再代入できないという意味であり、配列やオブジェクトの内部がすべて変更不能になるわけではありません。

JSスコープ

外側の変数への参照、varの関数スコープ、letとconstのブロックスコープを比較。constは再代入不可だが配列内部の変更は可能。

  1. 外側と内側の参照関数は外側の変数へアクセスできる。同名なら内側の宣言が隠していないか確認する。
  2. var：関数の範囲関数内のvarはその関数に属する。ifなどのブロックだけでは範囲を区切らない。
  3. let・const：ブロックブロック内の宣言はその範囲に属する。参照する名前を宣言位置まで追う。
  4. const：束縛は固定別の配列への再代入は不可。配列のpushなど、内部の変更とは区別する。
宣言位置による参照範囲と、constの束縛を比較する独自図。変数が見える範囲と値の変更可否は別の確認点。

独自のミニケースとして、constで宣言したメモ配列へpushで一件追加する場合と、配列変数へ別の配列を代入する場合を比較します。前者は内部の変更、後者は束縛の再代入です。実行できるかを予想してからコンソールで確かめます。

クロージャは、関数が外側の変数へアクセスできることとして追います。通常の関数のthisは呼び出し方、アロー関数のthisは外側の環境を確認します。メソッドを変数へ取り出して呼んだときの違いも練習してください。クラス、スプレッド構文、残余引数、型変換、例外処理も、短いコードで値の変化を記録します。

メモの追加を、DOMの木の変化として描く

一覧のul、各メモのli、削除ボタンを紙へ描き、追加前後の親子関係を比較します。querySelectorは一致する最初の要素を返し、見つからなければnullになります。「取得できるはず」を前提にせず、コードが実行される時点で対象があるか確認します。

DOM

DOMの親子関係はulの下にli、その下にbutton。既存ノードのappendChildは移動で、複製ではない。

  1. ul：一覧の親メモ一覧のulの下に、メモごとのliを子として配置する。
  2. li：メモの子要素ulの子で、削除ボタンの親。追加前後でliの個数と親子関係を比べる。
  3. button：liの子各liの中に削除ボタンを置く。入力メモはtextContentで文字として扱う。
  4. 追加と移動を区別appendChildで既存ノードを付け直すと移動する。複製にはcloneNodeなどが必要。
メモ一覧のulを親、liを子、buttonをその子として読む独自図。追加後の木と、同じノードを移動した結果を区別する。

createElementで作ったノードをappendChildで別の場所へ付ける場合、同じノードは移動します。複製したいならcloneNodeなど別の操作が必要です。文字列を組み立てる処理と、既存ノードを操作する処理を混同しないようにします。

入力したメモを表示するときは、文字として扱うtextContentと、HTMLとして解釈するinnerHTMLの差を説明します。ユーザー入力を無条件にHTMLへ入れると、見た目だけの問題では済みません。デバッグではDOMの実際の状態と、コードが参照している要素を合わせて見ます。

削除ボタンのクリックは、発生元と処理する要素が違う

一覧側へ一つのクリックハンドラを置き、後から追加された削除ボタンにも対応する例を考えます。event.targetは発生元、event.currentTargetはそのハンドラを処理中の要素です。ボタンの中のアイコンを押した場合、targetがボタン自身とは限らない点を確認します。

event伝播

祖先からアイコンへキャプチャ、アイコンがtarget、buttonとliを経てulへバブリング。ulのハンドラではcurrentTargetはul。伝播停止と既定動作取消しは別。

  1. キャプチャ：外から内クリックしたアイコンへ向けて、祖先の要素から順に経路を下る。
  2. ターゲット：発生元アイコン上のクリックならevent.targetはそのアイコン。ボタン自身とは限らない。
  3. バブリング：一覧へbutton、liを経てulへ上がる。ulのハンドラ中のcurrentTargetはulになる。
  4. さらに外側へ伝播伝播を止めなければ外側の祖先へ進む。stopPropagationと既定動作の取消しは別。
アイコンを含む削除ボタンのクリック経路を追う独自図。キャプチャ→ターゲット→バブリングの順。preventDefaultは取消し可能な既定動作を抑える。

キャプチャ、ターゲット、バブリングの順序を木の上へ書きます。preventDefaultは既定の動作を抑え、stopPropagationは伝播を止めます。リンクの移動を止めたいのに伝播だけを止める、といった取り違えを避けてください。

フォーム送信、キー入力、ページ読み込みも、いつ処理が必要かでイベントを選びます。イベント登録を同じ処理内で何度も行うと、一回の操作で処理が重複する場合があります。「表示が二件増える」なら、データ更新だけでなく登録回数も調べます。

非同期コードは、上から順に読んだ順では終わらない

独自の実行順の例です。同じスクリプト内で、順に同期ログA、setTimeoutのログB、解決済みPromiseのthenによるログC、同期ログDを登録・実行したとします。通常、この条件でログはA、D、C、Bの順になります。

同期処理を終えた後にPromiseの反応がマイクロタスクとして処理され、タイマーのコールバックは後のタスクとして処理されるためです。setTimeoutの待ち時間を0にしても、その場で割り込む意味にはなりません。

非同期キュー

同期A、タイマーB予約、解決済みPromiseのC予約、同期Dというコードは、A、D、マイクロタスクC、後のタスクBの順で出力する。

  1. A：同期ログAを出力。その後setTimeoutでB、解決済みPromiseのthenでCを予約する。
  2. D：同期処理の続き予約したB・Cはここでは実行せず、同じスクリプトの同期ログDを出力する。
  3. C：マイクロタスク同期処理が終わった後、解決済みPromiseのthenがCを出力する。
  4. B：後のタスクタイマーのコールバックがBを出力。待ち時間0でも同期処理へ割り込まない。
本文の条件でA→D→C→Bとなる独自の実行順図。同じスクリプト内の予約順と、コールバックの実行順を区別する。

async関数はPromiseを返し、awaitはその関数の続きを待たせます。ブラウザ全体の処理を停止させるわけではありません。メモの読込みで「完了前に一覧を表示する」不具合を作り、続きの処理をどこへ置くかを考えます。

成功だけでなく拒否されたPromise、try/catch、finallyも追います。二回の検索で先に出した要求が後から完了する例では、表示が古い結果で上書きされる可能性があります。通信順と操作順が一致するとは限らないことを、時系列で整理します。

保存は、残る期間と操作方式から選ぶ

localStorageは通常の再読込み後も残り、sessionStorageはタブのページセッションに結び付きます。どちらも文字列のキーと値を扱うため、配列を保存するならJSONへの変換と読込み時の復元を考えます。保存容量やブラウザ設定による失敗もあり、無条件に永続する前提にはしません。

Storage/Cookie

localStorageは通常再読込み後も残り、sessionStorageはタブのセッション単位。両者は文字列の同期操作で自動送信なし。Cookieは条件に応じて送信、IndexedDBは非同期。

  1. localStorage文字列のキーと値を同期操作。通常は再読込み後も残り、通信へ自動送信されない。
  2. sessionStorage文字列を同期操作。タブのページセッションに結び付き、通信へ自動送信されない。
  3. Cookie期限などの条件で寿命が決まる。送信条件を満たすリクエストには自動で付く。
  4. IndexedDBオブジェクトストアに保存。非同期の要求とトランザクションで結果を扱う。
保存方式を寿命・操作方式・送信の有無で比較する独自図。Web Storageの配列はJSON変換が必要で、容量や設定による保存失敗も考慮する。

Cookieには条件に応じてリクエストへ送信される性質がありますが、Web Storageは同じ仕組みで自動送信されません。保存期間と送信の有無を別々の軸で比べます。機密情報を保存してよいかは、便利さだけで決めないようにします。

IndexedDBは非同期の要求とトランザクション、オブジェクトストアの役割を確認します。Web StorageのsetItemと同じ感覚で直後に読込み結果が得られると考えないことが大切です。File APIではユーザーが選択したファイルの読込み、BlobやArrayBufferではバイナリーデータの表現を小さい例で練習します。

描画・通信・権限は、一つのアプリに詰め込まず個別に試す

Canvasでは座標、描画状態、変形、saveとrestoreを追います。独自の課題として、一つの矩形だけを回転させ、その後の文字は回転させずに描きます。状態の復元を忘れたときに何が変わるかを確認すると、メソッド一覧の暗記から抜け出せます。SVGは要素として保持する描画、Canvasは描画面へ描く方式という違いから比較します。

requestAnimationFrameは描画の更新に合わせた処理の予約であり、固定した回数や時間間隔の保証と混同しません。メディア要素では再生・停止だけでなく、読込み状態とエラー時の処理も確認します。

通信は、XMLHttpRequestの要求と結果、WebSocketの双方向のやり取り、Server-Sent Eventsのサーバからの通知を比較します。CORSの許可と認証は別です。許可ヘッダをフロント側へ追加すれば自由に読める、という誤解を避け、許可するサーバ側の応答を確認します。

位置情報は利用者の許可、失敗時の処理、取得値の扱いをセットで学びます。Web Workerはメインの画面処理から仕事を分けられますが、DOMを直接操作できません。postMessageによる結果の受渡しまで追いましょう。

学習サイクル

小さなAPI課題を選び、実行前に予想、デバッガで最初のずれを追い、原因を復習して条件を変えた課題へ戻る。

  1. 小さな課題を選ぶCanvasの回転、通信失敗、Workerの受渡しなど、APIごとに条件を一つ決める。
  2. 実行前に予想値・DOM・完了順・権限を確認し、どの時点で何が変わるか書く。
  3. 動かして差を追うデバッガで停止位置と値を見る。最初に予想からずれた行を特定する。
  4. 原因を復習し再試行スコープ・イベント・非同期・API制約へ戻り、条件を変えた小課題を選び直す。
個別のAPI課題からコード読解の復習へつなぐ独自の学習サイクル。完成品を大きくするより、最初にずれた原因を次の課題へ反映する。

履歴とオフラインまで、操作後の状態を確かめる

History APIのpushStateは履歴へ状態を追加しますが、それだけでページ内容を自動的に描き直すわけではありません。「戻る」を押したときに表示をどう復元するかまで考えます。Locationによる移動との違いも、URLと文書の状態を記録して比較します。

Page Visibilityでは、ページが表示されていないときの処理方針を考えます。オフライン関連は公式範囲に挙がる機能と、現在のブラウザで実際に利用できる機能を区別してください。古いAPIの学習上の理解と、新規アプリへ採用する判断を混ぜないようにします。

コード読解の復習ノートには、最初にずれた行を残す

学習の初期はスコープと値、DOMとイベントをメモアプリで確認します。続いて非同期と保存を加え、描画・通信・デバイス・履歴は個別の小課題で補います。すべてを巨大な作品へまとめる必要はありません。

問題演習では実行前に予想を書き、間違えたら最初にずれた行へ戻ります。スコープの取り違え、targetの取り違え、完了前の参照、APIの制約の見落としでは、復習する教材が違います。デバッガの停止位置と変数の値を使い、出力だけで原因を決めないようにしてください。

自力で読めるようになったかの確認

学習教材でAPIの役割を確認し、問題演習で短いコードを読みます。弱点分析には「JavaScriptが苦手」でなく、最初に判断がずれた原因を残します。模擬試験で、実行結果を見ずに追えるか、長いコードへ時間を使いすぎないかを確かめます。

レベル2の範囲と認定条件を確認する

公式のレベル2出題範囲と試験概要を2026-10-05に確認しています。受験と認定の条件、バージョン、実施時間は資格情報ページから公式の最新案内へ進んで確認してください。

このガイドのメモアプリと比較課題は資格合格.web独自の学習提案です。Promiseが読めたところで終えず、公式範囲へ戻り、描画・メディア・保存・通信など未着手のAPIも埋めて仕上げます。