HTML5プロフェッショナル認定 レベル2合格までの学習方法と参考書、全部教えます

解説するのは、もちろん合格者

念のためエビデンスとして合格証をお見せします。

デザインを見て「まさか」とは思っていましたが案の定、レベル1の合格証と合体させられるようになっています。

もともとJavaScriptは分からなくもないのですが、それがかえって「ハンパな知識で分かった風になってる」ところもあると感じていました。
今回の試験勉強でベースの部分はだいぶアップデートできたと実感できました。

使用書籍は入門書1冊と参考書2冊

HTML5プロフェッショナル認定 レベル2試験の勉強を進めるにあたり、全く予備知識がない場合は入門書を1冊終わらせてからにしましょう。
そこで「初心者以前」の方向けに入門書の紹介から入りますので、予備知識のある方はスキップして参考書のトピックからお読みください。

【スキップ可】全くの初心者であれば入門書を終わらせてからがオススメ

初級レベルでない方は参考書の解説までスキップ

今までJavaScriptを読み書きした経験が一度もない方に教本や問題集は相当ハードルが高いです。
その前に自分である程度コードを書きながら仕組みを覚えた方が結果的に近道なのかも知れません。

全くの初心者向けに作られた本なので、そうそう行き詰まる事もないでしょう。
どんな記述があって、どんな事が出来るのか、過不足なく教えてくれる一冊です。

ただしこの本の記述は試験範囲より新しいため少しだけ文法の違いがあります。
たとえば変数宣言。

letやconstといった宣言方法は少なくともVer2.0試験では使われません。
Ver2.0試験向けテキストでは変数はvarです。

試験対策では若干古い記述で覚えておきつつ、「イマドキはこっちで書くのね」と理解しておきましょう。

参考書は「マイナビ本」「翔泳社本」の実質2冊しかない

2021年時点でHTML5プロフェッショナル認定試験はVer2.0です。

HTML5プロフェッショナル認定試験は、HTML5、CSS3、JavaScriptなどに関するスキルと知識を証明する認定資格です。
2014年開始以降のHTML5を取り巻く環境の変化に対応するため、2017年3月1日に、新出題範囲「Ver2.0」がリリースされました。

出典：HTML5プロフェッショナル認定試験公式サイトより

参考書はVer2.0に適合したものでないと知識の抜け漏れにつながります。
Ver2.0にアップデートされてからもう3年経つわけですが、Ver2.0のカリキュラムに対応している書籍は2冊だけです。

マイナビ出版「HTML5プロフェッショナル認定試験 レベル2 対策テキスト&問題集 Ver2.0対応版」
（以下、「マイナビ本」）

翔泳社「HTML教科書 HTML5プロフェッショナル認定試験 レベル2 スピードマスター問題集 Ver2.0対応」
（以下、「翔泳社本」）

公式サイトで掲載されている書籍も、amazonで検索して出てくる書籍も上記2冊。
どうやら他はなさそうです（2021年時点）。

簡単に両者の概要を解説します。
大丈夫、私両方買いましたから。

【教本タイプ】マイナビ出版「HTML5プロフェッショナル認定試験 レベル2 対策テキスト&問題集 Ver2.0対応版」

レベル1と同様、マイナビ本は教本タイプです。
前半は文法の基礎から教えてくれているので、ある程度知識のある人はDOMあたりまで飛ばせるかも知れません。

前半は例文が豊富でなかなか分かりやすいと思っていたのですが、後半のAPIの話になると例文がグッと減ります。
さらに「詳しい仕様はW3Cを参照するように」と丸投げです。

というのも各APIはそれだけで本が一冊書けるぐらいボリュームのあるものですから、細かく触れていたらキリがありません。
たとえば私が持っているわりとガチめのCanvas APIの本は全600ページ超。
たった1つのAPIで今回紹介している2冊の参考書より分厚いです。

参考書で触れない部分は試験範囲外としてキレイさっぱり割り切りましょう。
あくまで試験合格できるレベルの知識を身に付ける本であって、プロの知識を身に付ける本ではありません。

【問題集タイプ】翔泳社「HTML教科書 HTML5プロフェッショナル認定試験 レベル2 スピードマスター問題集 Ver2.0対応」

レベル1同様、翔泳社本は問題集タイプです。
一問一答形式で、「問題⇒答え＆解説」といった流れで自身の理解度を試すことができます。

私はマイナビ本を一通り読み終えてから着手しました。
テンポよく学習を進めていける反面、横断的に学習する観点ではマイナビ本の方が見晴らし良く感じました。

最大の魅力は何と言っても模擬試験問題。
本の中で1回分、ダウンロード特典で1回分の計2回分収録されています。

テキストは2冊とも購入できればベストですが、どうしても1冊分しか予算がないとしたら翔泳社本でしょうね。
マイナビ本には模擬試験問題が収録されていませんし。（レベル1試験のマイナビ本には収録されてたんですけど）

試験合格のための効率的学習方法

エアプで何が悪い！割り切りが大事

APIは詳細突き詰めるとキリがないでしょう。
私はテキスト学習2か月程度で合格できましたけど、それぞれのAPIをマジメに勉強していたらそんなものでは済まないはず。

先に紹介した2冊のテキストでもAPIは主要なプロパティとメソッド、イベントの紹介と簡単な使用例文ぐらいしか書かれていません。
実際の試験問題も結局その程度の踏み込み度合いでした。

浅く広くで勉強している以上、エアプ要素が入ってしまうのは仕方ないこと。
手段として知っておいて、実践で必要になった部分だけ深めていけばいいのではないでしょうか。
私はそう納得して学習を続けました。

プロパティもメソッドも名前でふんわり分かる

学習テキストではプロパティとメソッド、イベントの名前が猛烈に羅列されて慌ててしまうかも知れません。
でも試験対策するうえで一字一句正確に覚えておく必要はありません。
プロパティにしたってメソッドにしたって、「名は体を表す」とばかりに名称と処理内容が直感的に結びつくような名前がついているものです。

たとえば翔泳社本から例題としてざっくり引用します。

例）IDBDatabaseオブジェクトのオブジェクトストア名を取得するためのプロパティは？

１．name
２．objectStoreNames
３．version
４．objectStore

出典：HTML教科書 HTML5プロフェッショナル認定試験 レベル2 スピードマスター問題集 Ver2.0対応より簡易的に引用

ことによるとJavaScript知らない人でも正解できそうです。
オブジェクトストアの名前なんだから、そりゃ正解は2のobjectStoreNamesです。
※1つのデータベースに複数のオブジェクトストアを持てるので複数形なのです

そもそも処理内容を類推できないプロパティ名／メソッド名なんてついているはずがないって気が付くとAPIをだいぶ大らかに理解できるのではないでしょうか。

ソースコード読解問題はアウトラインで捉える

JavaScriptの試験であるため、ソースコードを読み解く問題はかなりたくさん出題されます。
あまりに長いコードは読む前から「うわっ」と思ってしまうものです（少なくとも私はそうでした）。

ソースコードはある程度問題数をこなしているうちに読み解きのコツが分かったので解説します。
ズバリ「アウトラインで捉える」。ただコレだけです。

JavaScriptはコードを書いた順に実行されるとも限りません。
大抵最初に関数やイベントの定義をして、核となる処理は最後に実行するパターンが大半です。
だったら最初にアウトラインだけ理解して、処理の詳細はその都度読むようにすれば処理順に準じた読み解きができます。

読み解く際、私は頭の中でこんな感じで考えています。

• ○○って関数があるのね、内容知らんけど
• ××イベントを追加してるのね、内容知らんけど
• あぁ、最後のここで○○関数も××イベントも出番が来るんだね。じゃ詳細読もう

ソースコードがスラスラ読めるかで学習時間も相当変わってくるはず。
アウトラインでソースを捉えて、ガッツリ時短してください。

相変わらず公式サイトのサンプル問題はアテにならない

レベル1試験の時と同様、公式サイトのサンプル問題はマニアックなものが多く、試験勉強には若干不向きに感じました。

問題を一般募集しているため、知識がすごい一般人が意識の高い問題を寄せた結果でしょう。
実際解いてみてボロボロでしたけど、アテにならない事はレベル1試験の勉強で理解していたので全く気にしませんでした。
結果、それでも本番試験で90点（100点満点中）取れていたし。

さいごに：自宅から受験も可能に！（私しなかったけど）

コロナの影響かどうかは分からないけど、いつの間にか自宅から受験が可能となっていました。
私は会場まで定期使えたし、都内の会場まで行くのも別段苦ではなかったので会場受験を選びましたが、お住まいによっては嬉しい選択肢が増えたと言えます。

【次回予告】さーて、次回の愚者小路さんは

↑いつもランキング向上にご協力ありがとうございます！

この記事を読んだ人はこんな記事も読んでいます

・・・なんて機能はないけれど、本件と関連が深い記事です。
もう1ページ、いかがですか？