コンサルティング事業 2019.09.26

HTML5プロフェッショナル認定試験 レベル2 に一発合格しました!

HTML5プロフェッショナル認定試験 レベル2を受験し、一発合格しました!
どのように勉強を進めてきたのか、どういった書籍やサイトを勉強に利用したのかを書いていきたいと思います!

エンジニアの三宅です。

HTML5プロフェッショナル認定試験 レベル2を受験し、
一発で合格できました!

合格するにあたって

・どのように勉強を進めてきたのか
・どういった書籍やサイトを勉強に利用したのか

を書いていきたいと思います!

 

HTML5プロフェッショナル認定試験とは

特定非営利活動法人エルピーアイジャパン(LPI-Japan)が、HTML5、CSS3、JavaScriptなど最新のマークアップに関する技術力と知識を、公平かつ厳正に、中立的な立場で認定する認定資格です。

マルチデバイスに対応したWebコンテンツ制作の基礎の実力を測るLevel.1と、システム間連携や最新のマルチメディア技術に対応したWebアプリケーションや動的Webコンテンツの開発・設計の能力を認定するLevel.2で構成されています。

HTML5プロフェッショナル認定試験

簡単にいうと、
HTMLJavascriptの知識や技術があることを
証明することができる資格になります。

上にも書いてありますが、レベル1レベル2があります。

それぞれ、以下の知識と技術を認定します。

レベル1

・HTML5を使ってWebコンテンツを制作することができる
・ユーザー体験を考慮したWebコンテンツを設計・制作することができる
・スマートフォンや組み込み機器など、様々なデバイスに対応したコンテンツ制作ができる
・HTML5で何ができるのか、どういった技術を使うべきかの広範囲の基礎知識を有する

HTML5プロフェッショナル認定試験

レベル2

・動的に動作させて高いユーザビリティを実現するリッチユーザインターフェイスアプリケーションを作成することができる
・マルチデバイスに対応し高パフォーマンスで動作する動的コンテンツを作成することができる
・システム間連携を行いリアルタイムな情報を提供するアプリケーションを開発することができる
・スマートフォンなどでネイティブアプリに近い機能を組み込んだ先端のWebアプリケーションを開発することができる
・APIのセキュリティモデルを理解したうえで開発することができる

HTML5プロフェッショナル認定試験

ちなみに私は5年前にレベル1を取得しています。

今の業務には、
この資格で習得した知識がかなり役立っています。

WEBサイトWEBアプリの構築に携わっている方には、
特にオススメしたい資格です。

 

一発合格できた勉強法とは

まずは、
試験範囲を把握することが必要かなと思います。

レベル2の試験範囲は以下になります。

2.1 JavaScript
  2.1.1 JavaScript文法(重要度:10)

2.2 WebブラウザにおけるJavaScript API
  2.2.1 イベント(重要度:8)
  2.2.2 ドキュメントオブジェクト/DOM(重要度:6)
  2.2.3 ウィンドウオブジェクト(重要度:8)
  2.2.4 Selectors API(重要度:7)
  2.2.5 History API(重要度:7)
  2.2.6 テスト・デバッグ(重要度:6)

2.3 グラフィックス・アニメーション
  2.3.1 Canvas(2D)(重要度:8)
  2.3.2 SVG(重要度:2)
  2.3.3 Timing control for script-based animations(重要度:2)

2.4 マルチメディア
  2.4.1 メディア要素のAPI(重要度:5)

2.5 ストレージ
  2.5.1 Web Storage(重要度:7)
  2.5.2 Indexed Database API(重要度:5)
  2.5.3 File API(重要度:5)
  2.5.4 バイナリーデータ(重要度:4)

2.6 通信
  2.6.1 Web Socket(重要度:5)
  2.6.2 XMLHttpRequest(重要度:5)
  2.6.3 Server-Sent Events(重要度:1)

2.7 デバイスアクセス
  2.7.1 Geolocation API(重要度:5)
  2.7.2 DeviceOrientation Event(重要度:1)

2.8 パフォーマンスとオフライン
  2.8.1 Web Wokers(重要度:5)
  2.8.2 High Resolution Time(重要度:2)
  2.8.3 オフラインアプリケーションAPI(重要度:3)
  2.8.4 Page Visibility(重要度:2)
  2.8.5 Navigation Timing(重要度:1)

2.9 セキュリティモデル
  2.9.1 クロスオリジン制約とCORS(重要度:4)
  2.9.2 セキュリティモデルとSSLの関係(重要度:4)

HTML5 Professional Certification Level.2 出題範囲(Ver2.0)

範囲はかなり広いです。

勉強は万遍なくやることが必要ですが、
特に重要度の高いところに関しては、
細かいところまで覚えることを
意識して勉強に取り組みましょう。

 

学習に使用した書籍やWEBサイト

1. HTML教科書 HTML5プロフェッショナル認定試験 レベル2 スピードマスター問題集 Ver2.0対応
2. パーフェクトJavaScript
3. JavaScript Primer
4. 過去のセミナーの参考資料
5. 公式サイトサンプル問題集

 

1. HTML教科書 HTML5プロフェッショナル認定試験 レベル2 スピードマスター問題集 Ver2.0対応

メインで使用していた書籍です。
参考書というものではなく、問題を解いて
どんどん覚えていくタイプの書籍になります。
もちろん、問題の解説はめちゃくちゃ参考になります!

通勤の電車内で読んだ後、
わからないところ、細かいところは
帰宅後に家でノートに書くなどして覚えました。

 

2. パーフェクトJavaScript

1.の書籍でわからないところは
下記の書籍で重点的に勉強するようにしていました。
辞書のように使用していましたね。

 

3. JavaScript Primer

JavaScript Primer

こちらはWEBサイトです。
JavaScriptの基本文法実践的
サンプルコード、ユースケースなどが記載されています。
こちらも自身の理解が足りない箇所を
ポイントで学習するために利用しました。
(最終的には全て読みました)

 

4. 過去のセミナーの参考資料

セミナー資料

公式サイトに過去に開催されたセミナーの資料があります。
セミナーで取り上げられるということは
重要な学習ポイントかなと思ったので、
重要ポイントを把握するために利用しました。

 

5. 公式サイトサンプル問題集

サンプル問題集/例題解説

公式サイトでサンプル問題集が公開されています。
こちらも大体9割ぐらい
正解できるようになるまで繰り返し勉強しました。

 

試験について

試験ではかなり細かいところまで問われます。

例えば、下記のような問題。

例題5.14「2.5.3 File API」
  以下のinput要素でファイルを選択したあと、JavaScriptを実行した。
  ファイルの読み込みが完了する前にreader.abort()が実行されたとき、出力される結果を選択しなさい。



[HTML]
<input id=”fileItem” type=”file”>


[JavaScript]
var fileItem = document.getElementById(‘fileItem’);
var item = fileItem.files.item(0);
var reader = new FileReader();
reader.readAsText(item);
reader.abort();
console.log( reader.readyState );



 A. 1

 B. 2

 C. EMPTY

 D. ABORTED

2.5 ストレージ に関する問題|サンプル問題/例題解説

ファイルを操作した際の
今の状態を表す値を問われています。

Javascriptでは、ファイルの操作以外にも
位置情報の取得や動画の再生・操作、ストレージの操作など
様々なことができます。

こういった操作の今の状態を表す値は、
動画の再生・操作、ストレージの操作では
それぞれ内容が異なったりするので
細かいところまでしっかり把握しておく必要があります。

上記の問題の正解は「B」になります。

 

また、プログラムの動作に関しても
細かく把握しておく必要があります。

例えば、下記の問題、
ちゃんとプログラムの仕様を把握してないと間違えると思います。

例題2.12「2.2.4 Selectors API」
  レベル2の出題範囲「2.2.4 Selectors API」からの出題です。
  以下のコードを実行した結果として正しいものを選びなさい。



<!DOCTYPE html>
<html>
  <head>
    <meta charset=”UTF-8″>
  </head>
  <body>
    <div>
      <p class=”currencymark”> 200</p>
      <p class=”currencymark”> 200</p>
      <p class=”currencymark”> 200</p>
    </div>
    <style>
      p::before{
        content: “JPY”;
        font-size: 1.0em
      }
    </style>
    <script>
      var price = document.querySelector(‘p.::before’);
      for(var i=0;i<price.length;i++){
        price[i].innerHTML=”USD”;
      }
    </script>
  </body>
</html>



 A. USD 200
   JPY 200
   JPY 200

 B. USD 200
   USD 200
   USD 200

 C. JPY 200
   JPY 200
   JPY 200

 D. 何も表示されない

2.2 WebブラウザにおけるJavaScript API に関する問題|サンプル問題/例題解説

querySelectorの動作について問われています。

querySelectorを使用すれば、
セレクタを利用して要素を取得することができます。

querySelectorAllだとセレクタに合致した
全ての要素を取得することができるのですが、
querySelectorの場合は複数の要素がセレクタに合致しても
一番上の要素しか取得することができません。

今回は、querySelectorのセレクタが
「’p.::before’」となっています。

該当するpの要素は、

ですが、querySelectorでは
”疑似要素”(この場合、::before)は取得することができません。

つまり、プログラムを動かしても
このプログラムは空振りするため、表示内容は何もかわりません。
よって答えは「C」になります。

「A」はquerySelectorの指定したセレクタに
複数の要素が合致していた場合、
一番上の要素が取得できるという知識を
持っている人に対するひっかけの解答ですね。

 

こんな感じでどういった動作をするのか
細かく把握しないと解けない問題も多いです。

実際にプログラムを動かしてみて
どうなるかと見てみるのが良いかと思います。

 

試験に合格したら

証書カードシールなどが届きます。

レベル1とレベル2を2つ揃えると、こんな感じ。
オシャレ!自慢できそう!w

 

まとめ

HTML5プロフェッショナル認定試験
レベル1レベル2があることを紹介し、
今回取得したレベル2の勉強法
勉強に使った書籍についてお話ししました。

業務で活躍すること間違いなしの資格だと思います。

これまでなんとなくで使っていたHTMLやCSS、JS
ちゃんとした知識を習得したうえで使うのとは
効率が全く違ってくるのではないかなと思います。

弊社では、資格の取得を奨励しています。
今回取得した資格も推奨資格となっており、
合格したことが証明できれば
手当てがいただけるものになっています。

この記事をシェアする
事業について詳しく知る

コンサルティング事業について詳しく知りたい方はこちら

RECOMMEND

おすすめ記事