Webプログラマーのスキルをチェックする資格70-480を受験しました（ 「JavaScript/HTML5/CSS3によるプログラミング」MCP認定試験 ）

先週、Webプログラマの理解度をチェックする試験「HTML5 と JavaScript および CSS3 との組み合わせによるプログラミング」を受験してきました。

試験名の通り、JavaScript、jQuery、HTML、CSSの理解度を問われます。

新人教育で、DBを理解させるためにOracle Masterを受験させることがありますが、Webプログラムを理解するために、この試験は良さそうな感じでした。

試験について

試験種別としてはMCP（Microsoft Certified Professional）というベンダー資格です。ただ、こちらの方も書かれている通り、この試験についてはMicrosoftの専門用語はほとんどでてきませんでした。
試験時間はだいたい120分で40問くらい、1000点満点の700点以上で合格となります。試験会場が空いていればいつでも予約して受験できます。

私は、日曜日も開いている新宿会場で受験してきました。試験結果は、無事合格でした。

70-480の範囲と勉強方法

この試験の受験対象者は以下のとおりです。

受験対象者は、以下のことについて十分に理解している必要があります。

• プログラム フローとイベントの管理
• 非同期プログラミングとスレッド処理
• データの入力規則と JQuery などのデータ コレクションの使用
• エラーと例外の処理
• 配列とコレクション
• 変数、演算子、および式の使用
• プロトタイプとのメソッドの使用
• 条件判断ステートメントと繰り返しステートメント

まず、プログラムの基本的な仕組みについて理解していることが前提となります。

出題される問題の区分（セクション）は以下の4つにわかれています。
サーバーサイドプログラムではなく、クライアントサイドのWebプログラム（とWebサービス利用）が対象範囲となります。

【セクション1】ドキュメントの構造とオブジェクトの実装と操作 (24%)

• ドキュメント構造を作成する。
  • セマンティック マークアップ (Section、Article、Nav、Header、Footer、および Aside)
• UI コントロールを操作するコードを記述する。
  • HTML 要素のプログラムによる追加と変更、メディア コントロールの実装、HTML5 の Canvas と SVG グラフィックの実装
• HTML 要素にスタイル設定をプログラムによって適用する。
  • 要素の位置の変更、変形の適用、要素の表示と非表示
• HTML5 API を実装する。
  • ストレージ API、AppCache API、および Geolocation API の実装
• オブジェクトや変数のスコープを確立する。
  • 変数の有効期間の定義、グローバル名前空間外でのオブジェクトの保持、イベントを発生させたオブジェクトへの "this" キーワードによる参照、ローカルとグローバルでの変数のスコープ設定
• オブジェクトとメソッドを作成し、実装する。
  • ネイティブ オブジェクトの実装、プロトタイプと関数を使用したネイティブ オブジェクトのカスタム オブジェクトとカスタム プロパティの作成、オブジェクトからの継承、ネイティブ メソッドの実装とカスタム メソッドの作成

勉強にあたっては、Webのリソースも参考になりますが、やはり本のほうが体系立てて理解できます。

以下の本はHTMLとCSSの基本が書いてあり、HTML5とCSS3についても触れているので、マークアップの基本を理解することに適しています。

よくわかるHTML5+CSS3の教科書

【セクション2】プログラム フローの実装 (25%)

• プログラム フローを実装する。
  • コレクションや配列項目の反復処理、switch ステートメント、if/then、および演算子によるプログラムの条件判断の管理、式の評価
• イベントを発生させ、処理する。
  • DOM で公開されている一般的なイベントの処理 (OnBlur、OnFocus、OnClick)、バブルされたイベントの宣言と処理、匿名関数を使用したイベントの処理
• 例外処理を実装する。
  • エラー コードの設定と対応、例外のスロー、null チェックの要求、try-catch-finally ブロックの実装
• コールバックを実装する。
  • HTML5 WebSocket API からのメッセージの受信、JQuery を使用した AJAX の呼び出し、イベントの関連付け、匿名関数を使用したコールバックの実装、"this"ポインターの処理
• Web ワーカー プロセスを作成する。
  • Web ワーカーの開始と停止、Web ワーカーへのデータ渡し、Web ワーカーのタイムアウトとインターバルの構成、Web ワーカーのイベント リスナーの登録、Web ワーカーの制限事項

そして、試験のメインとなるJavaScriptを理解する必要があります。以下の本は、それほど分厚くないながらも、JavaScriptの仕組みをひと通り説明してくれている良い本です。

JavaScript本格入門　?モダンスタイルによる基礎からAjax・ｊQueryまで

最新動向や、さらに深く理解したい方は次の2冊もおすすめです。
こちらの本は、最新のJavaScriptについて書いています。既にJavaScriptを理解している人が誤解しがちなポイントを独自の切り口で解説しています。

プロになるためのJavaScript入門 ~node.js、Backbone.js、HTML5、jQuery-Mobile (Software Design plus)

サイ本と呼ばれる名著の最新版です。とても丁寧に解説をしているので、悩んだ時に手元にあるとありがたいです。ただ、とても分厚いので、持って読み続けるのは大変かもしれません。

JavaScript 第6版

また、jQueryについても理解しておく必要があります。
簡単な例を使ってデザインに反映させることを理解するには以下の本がわかりやすいです。

Web制作の現場で使う jQueryデザイン入門 (WEB PROFESSIONAL)

さらにプログラム的に掘り下げたい方は、以下の本もおすすめです。

10日でおぼえる jQuery入門教室

【セクション3】データのアクセスとセキュリティ保護 (26%)

• HTML5 要素を使用してユーザー入力を検証する。
• 要件に基づいた適切なコントロールの選択、ユーザー入力を収集するための HTML の入力タイプ 、コンテンツ属性 (required など) の実装
• JavaScript を使用してユーザー入力を検証する。
  • 入力形式を検証するための正規表現の評価、適切なデータ型が取得されているかどうかの組み込み関数による検証、コード インジェクションの防止
• データを使用する。
  • JSON と XML のデータの使用、Web サービスを使用したデータの取得、XMLHTTPRequest を使用した他のソースからのデータの読み込みやデータの取得
• データのシリアル化、逆シリアル化、および転送を行う。
  • バイナリ データ、テキスト データ (JSON、XML)、JQuery の serialize メソッドの実装、Form.Submit、データの解析、XMLHTTPRequest を使用したデータの送信、URI/フォーム エンコーディングを使用した入力の不要部分の削除

HTML5固有のタグと新しい機能を理解するには、コードサンプルが多い次の本が便利です。

HTML5 開発ポケットリファレンス

HTML5の背景やAPIを理解するには以下の本もおすすめです。少し古いですが、エンジニアの気持ちで読める面白い本でした。

Google API Expertが解説するHTML5ガイドブック

【セクション4】アプリケーションでの CSS3 の使用 (25%)

• HTML テキスト プロパティのスタイルを設定する。
  • テキストの外観へのスタイルの適用 (色、太字、斜体)、テキストのフォントへのスタイルの適用 (WOOF と @font-face、サイズ、代替フォント)、テキストの配置、間隔、およびインデントへのスタイルの適用、テキストのハイフネーションへのスタイルの適用、テキストのドロップ シャドウのスタイルの適用
• HTML ボックス プロパティのスタイルを設定する。
  • 外観属性を変更するためのスタイルの適用 (サイズ、枠線および枠線の丸角、アウトライン、パディング、マージン)、グラフィック効果を変更するためのスタイルの適用 (透明度、不透明度、背景画像、グラデーション、影、クリッピング)、要素の位置の設定および変更のためのスタイルの適用 (static、relative、absolute、fixed)
• 柔軟なコンテンツ レイアウトを作成する。
  • フレキシブル ボックス モデルを使用したレイアウトの実装、複数列を使用したレイアウトの実装、位置のフローティングと除外を使用したレイアウトの実装、グリッド揃えを使用したレイアウトの実装、領域、グループ化、入れ子を使用したレイアウトの実装
• アニメーション UI と適応型 UI を作成する。
  • CSS トランジションの適用によるオブジェクトのアニメーション化、2-D 変換と 3-D 変換の適用、メディア クエリに基づく UI の調整 (出力形式、表示、および表現のデバイスへの適応)、コントロールの非表示と無効化
• CSS セレクター と JQuery を使用して要素を検索する。
  • 要素を参照するのに適切なセレクターの選択、要素セレクター、スタイル セレクター、および属性セレクターの定義、擬似要素と擬似クラスによる要素の検索 (:before、:first-line、:first-letter、:target、:lang、:checked、:first-child など)
• CSS セレクターを使用して CSS ファイルを構造化する。
  • 要素の適切な参照、継承の実装、!important による継承のオーバーライド、擬似要素と擬似クラスに基づく要素のスタイル設定 (:before、:first-line、:first-letter、:target、:lang、:checked、:first-child など)

CSS3に関しては、なぜこのスタイルが追加されたのか。何が嬉しいのかを理解すると、勉強が楽しくなります。その点では、以下のMdNの書籍がおすすめです。フルカラーで、ボックス、テキストのエフェクトなどを説明してくれています。

すべての人に知っておいてほしい HTML5 & CSS3 の基本原則

この試験の難易度は標準的な難しさです。簡単とも言えませんが勉強したら受かりますので、興味を持たれた方、力試しをしたい方はこちらから申し込んでみてはいかがでしょうか。