HTML5プロフェッショナル レベル2 から学んだこと

はじめに

フロントの勉強を踏まえてHTML5プロフェッショナル レベル2を受験しました。
結果は合格することができました。
ただ資格を取るのではなく、対象の資格を受験または問題集を解くことで
自分がフロントの知識として学んだことを共有しようと思い記事にします。

資格について

HTML5プロフェッショナル認定試験には以下があります。
・HTML5プロフェッショナル レベル1
・HTML5プロフェッショナル レベル2

レベル1の出題範囲はHTML・CSSが50%、残りの50%がjavascript
レベル2の出題範囲は**javascript100%**になります

「レベル2、HTML関係ないやんけぇ！！！」って思うかもしれないですが
javascriptはhtml5と切っても切れない関係です。

ちなみにレベル1、レベル2両方取得して初めて有効になります。
自分はレベル2から受験しました。順番は特に決まりがありません。
そのかわりレベル1を取得しないと有効にならない為、レベル1の受験が必要になります。

レベル2の内容について

出題内容は以下になります。

・javascript文法
・javascriptAPI
・グラフィック・アニメーション
・マルチメディア
・ストレージ
・通信
・デバイスアクセス
・パフォーマンスとオンライン
・セキュリティモデル

全部大事なことなんですが、全て説明してると肥大化する為、特に学んでよかったなと思う以下3つを紹介していこうと思います。
・javascript文法
・javascriptAPI
・ストレージ

javascript文法

実はjavascript文法を蔑ろにしながら開発をしていた為、今回の勉強で学ぶ事が多かったです。主に勉強になった点は以下の内容です。
・プリミティブ型と、オブジェクト型
・変数の巻き上げ
・URLエンコード

ここでは「変数の巻き上げ」について、公式の過去問から1問だけ抜粋して紹介します。

変数の巻き上げ

以下のスクリプトを実行した出力結果として正しいものを選択しなさい。
function fn() {
　{
　　var x = 'a';
　}
　console.log(x);
}
fn();

A.エラーになり、何も出力されない
B.undefined
C.NULL
D.a

答えはD
var変数を使うと変数の巻き上げが発生します。
宣言部分から最も近い関数スコープ、もしくはグローバルスコープから対象の変数を探します。
var変数を使ってはいけないと言われる理由の1つかもしれないですね。
ちなみにlet変数に置き換えるとエラーになります。

javascriptAPI

自分が最もやってよかったと思う箇所はここです。
今後絶対使える知識が多いのでオススメです。例えば以下の内容が対象です。
・documentオブジェクト
・Elementイベント
・History
・イベントハンドラ・イベントクエリ

documentオブジェクトのプロパティとElementのイベント処理の量はとんでもないくらい多いです。
全部は覚えなくてもいいとは思いますが
documentはquerySelector()の使い方、Elementは入力項目のイベント(select、input、change、blurなど)を学べます。
どのイベントで何ができるかを知っていると開発の選択肢が増えると思います。

他にも以下の内容をはじめとして、終わりが見えないくらいイベント処理の用意がされています。
・MouseEvent
・TouchEvent
・キーボードイベント

ストレージ

sessionStorage、localStorageが対象となる内容です。
ある現場で「データが更新されない！」って報告されていたことがありました。
調べてみたらlocalStorageに値をセットしていました。
localStorageは1度セットするとデータを消さない限り永久に保持し続けます。
ブラウザを閉じても保持します。

sessionStorageはタブ毎にsession情報を持つので、対象のタブを消すと破棄されます。
別タブに遷移した際にデータを保持するときとかに優れています。

なので認証情報とかをsessionで持つ場合などwebStorageを知ってるだけで、誤った設計などは少なくなるのではと思います。

現場で使えるのか

思ってる以上に使えました。
資格勉強だと、「いつ使うんや・・・」みたいな問題が多かったりするので、低めに見積もってたのですがかなり使えました。

今のプロジェクトで使えた箇所として以下です。

・javascript文法
=>使用言語はtypescriptだが、エンコード処理、各インスタンスプロパティなど幅広く使えた。

・javascriptAPI
=>入力イベントからの拡張、history操作による画面遷移などで使用できます。

・グラフィックス・アニメーション
=>SVGを使用している為、SVGを理解する良い機会になった。
またSVGのメリット・デメリットなども知れた為、なぜ利用されているかなど学ぶ事ができた。

・ストレージ
=>タブ分けをする画面が多く、sessionStorageを管理する為に使用。
また、ごく一部だが永続的な情報を持たせるために、localStorageでデータを保持する画面があったのでなぜ使用しているか理解できた。

・通信
=>webSocketを使用している。
使うための記述方法などで使用。
ws、wssプロトコルの違いなど。

・パフォーマンスとオフライン
=>非同期処理で使用。
webサービスを作るにあたって非同期処理は当たり前になってきてる為、使える場面が多かった。

・セキュリティモデル
=>同一オリジン制約を行っている。
クロスオリジン対策で画像読み込み時、異なるオリジンのデータがある場合などエラー処理を行うよう設定されている。
なぜエラーになるのかが読み取れるように理解できた。

おまけ

ここからはレベル2資格受験するにあたっての話になるのですが、個人的にはjavascript未経験者にはキツイかなと思います。
理由はコードリーディングが多いからです。
なので慣れたらレベル2を受けてみることをオススメします。

合格はしたんですが、実は結構ギリギリでした。
自分の勉強方法は参考書と公式過去問、模試テスト2回を4週くらいしました。
問題の「～～全て選べ」タイプがかなり多く、「え、こんな仕様あったっけ」とか、ひっかけとかでボコボコにされてるので、何週もするのではなく、参考書の説明欄一字一句まで覚える勢いでやった方がいいのかなって思いました。