HTML教科書 HTML5プロフェッショナル認定試験 レベル2 スピードマスター問題集 Ver2.0対応
【【最新!】 独学HTMLとCSSの勉強できる書籍 -入門•基礎から- 】をTech Here!で確認する
はじめに
本書は、特定非営利活動法人エルピーアイジャパン(以下、LPI-Japan)が実施する「HTML5プロフェッショナル認定試験レベル2」(以下、HTML5レベル2試験)に対応する試験対策問題集です。HTML5レベル2試験は、主にJavaScriptのスキルを問う内容になっており、合格することでHTML5による動的aなWebコンテンツ作成能力があることを証明できます。
–
JavaScriptは、1995年に誕生したプログラミング言語で、クライアントサイドで動的なコンテンツを作成するために用いられています。近年では、Node.jsなどの普及によって、JavaScriptによるサーバサイドアプリケーションの作成も可能になっています。そのため、クライアントサイドからサーバサイドまで、JavaScriptだけで実装できるようになりました。また、Electronを用いてクロスプラットフォームで動作するデスクトップアプリケーションを構築することもできます。
作成できるアプリケーションの種類が増えただけではなく、JavaScriptの文法やAPIも進化しています。ECMAScript2015から多くの新文法が追加され、プログラムを記述しやすくなりました。その後も1年ごとに新バージョンが策定されており、2018年現在ではECMAScript2018が勧告されています。
さらに、WebSocketなどの通信系APIやGeolocationAPIをはじめとするデバイスアクセス系APIなど、多くのAPIも策定されています。これらを活用することで、より高度なWebアプリケーションを構築できるようになりました。
HTML5レベル2試験の範囲には、JavaScriptの基本文法とブラウザで動作するAPIが含まれます。試験範囲に沿って学習することで、最新のJavaScriptの基礎知識を身に付けられます。本書では、効率的に試験のポイントを把握できるように問題を作成しています。本書がみなさまの学習に役立てば幸いです。
最後となりましたが、本書の執筆にあたって株式会社翔泳社のみなさまによるご助言・ご指導をいただきました。また、多くの弊社メンバーにもご支援いただきました。この場を借りて御礼申し上げます。
2018年10月
株式会社 富士通ラーニングメディア
抜山雄一 七條恰子 結城陽平
LPI-Japan認定教材制度について
ロゴの商標について
LPI-JAPAN認定教材ロゴ(LATMロゴ)とHTML5プロフェッショナル認定試験ロゴは一般社団法人エデュコの商標権です。本商標に関する全ての権利は一般社団法人エデュコに留保されています。
LPI-JAPAN認定教材ロゴの意味するもの
本教材が、2018年10月時点において、一定の基準を満たすかを特定非営利活動法人エルピーアイジャパン(LPI-Japan)が審査し合格したことを示すものです。本教材で学習することにより合格を保証するものではありません。
LPI-JAPAN認定教材(LATM)制度とは
特定非営利活動法人エルピーアイジャパン(LPI-Japan)が実施する認定資格の取得を目指す受験者に高品質の教材を提供するための制度です。
本書記載内容に関する制約について
本書は「HTML5プロフェッショナル認定試験レベル2」に対応した問題集です。
「HTML5プロフェッショナル認定試験レベル2」は特定非営利活動法人エルピーアイジャパン(LPI-Japan。以下、主催者)が運営する資格制度に基づく試験であり、一般に「ベンダー資格試験」と呼ばれているものです。「ベンダー資格試験」には、下記のような特徴があります。
①出題範囲および出題傾向は主催者によって予告なく変更される場合がある。
②試験問題は原則、非公開である。
本書の内容は、その作成に携わった著者をはじめとするすべての関係者の協力(実際の受験を通じた各種情報収集、分析など)により、可能な限り実際の試験内容に則すよう努めていますが、上記①・②の制約上、その内容が試験の出題範囲および試験の出題傾向を常時正確に反映していることを保障するものではありませんので、あらかじめご了承ください。
HTML5プロフェッショナル認定資格試験の概要
HTML5プロフェッショナル認定資格は、特定非営利活動法人エルピーアイジャパン(以下、LPI-Japan)が中立的な立場から、HTML5やCSS3、JavaScriptなどによるWebページなどのデザインから構築までのスキルを保有することを認定する資格制度です。HTML5認定資格はHTMLとCSSのスキルを中心としたレベル1と、JavaScriptのスキルを中心としたレベル2の2つの試験で構成されています。なお、レベル2に認定されるためには、レベル1の認定を受けている必要があります。
HTML5プロフェッショナル認定資格試験の概要を以下に示します。
| 認定正式名 | 概要 |
| HTML5プロフェッショナル認定資格 レベル1(Markup Professional) |
マルチデバイスに対応したWebコンテンツをHTML5を使って企画・作成できる |
| HTML5プロフェッショナル認定資格 レベル2(Application Development Professional) |
システム間連携や最新のマルチメディア技術に対応したWebアプリケーションや動的Webコンテンツの開発・設計ができる |
2つの試験のうち、本書が対象とするのは「HTML5プロフェッショナル認定試験レベル2」(以下、HTML5レベル2試験)です。HTML5レベル2試験は、主にJavaScriptのスキルを中心にした認定試験です。HTML5レベル2試験に合格すると、「HTML5プロフェッショナル認定資格レベル2 (Application Development Professional)」(以下、HTML5レベル2)として認定され、以下のスキルがあることを証明できます。
●動的に動作し高いユーザビリティを実現するリッチユーザインターフェースアプリケーションを作成できる
● マルチデバイスに対応し高パフォーマンスで動作する動的コンテンツを作成できる
● システム間連携を行いリアルタイムな情報を提供するアプリケーションを開発できる
● スマートフォンなどでネイティブアプリに近い機能を組み込んだ先端のWebアプリケーションを開発できる
●API のセキュリティモデルを理解したうえで開発できる
また、HTML5レベル2は、経済産業省が定めるITSSと認定試験をマッピングした「ITSSキャリアフレームワークと認定試験・資格の関係」において、【アプリケーションスペシャリスト】と【ソフトウェアディベロップメント】の2分野で、【レベル3】に位置付けられています。
なお、ここで掲載している概要は本書執筆時点のものです。試験や認定についての最新情報は、公式サイトで確認してください。
【HTML5プロフェッショナル認定試験公式サイト】https://html5exam.jp/
HTML5レベル2の試験概要と出題範囲
HTML5レベル2に認定されるためには、HTML5レベル1試験とHTML5レベル2試験、両方に合格する必要があります。
HTML5レベル2試験は、最新技術に対応するために出題範囲や問題が適宜見直されています。2017年の3月に、Ver2.0に試験が改定されました。
HTML5レベル2Ver2.0の試験概要と出題範囲を以下に示します。
| 試験名 | 試験正式名(和名)：HTML5プロフェッショナル認定試験 レベル2 試験正式名(英名)：HTML5 Professional Certification Level.2 Exam 試験名の略称(和名)：HTML5 レベル2試験 試験名の略称(英名)：HTML5 Level.2 Exam |
| 所要時間 | 90分 |
| 試験問題数 | 40～45問 |
| 受験料 | ￥15,000(税別) |
| 試験実施方式 | コンピュータベーストテスト(CBT) |
| 合否結果 | 合否結果は試験終了時に表示 |
| 優位性の期限 | 5年間 |
| 項目 | 重要度 | 説明 |
| 2.1JavaScript | ||
| 2.1.1JavaScript文法 | 10 | JavaScriptの構文を使う技能に加え、他の言語との違いを知り、JavaScrtiptが取り入れているさまざまな概念を理解したうえで、効率的なコーディングができる。 |
| 2.2WebブラウザにおけるJavaScript API | ||
| 2.2.1イベント | 8 | JavaScriptのページ読み込みや、ユーザ操作によって発生するイベントの発生タイミングを理解しており、イベント処理を行うコードを記述することができる。 |
| 2.2.2ドキュメントオブジェクト/DOM | 6 | イベント発生時などにDOMを利用して、HTMLの内容を読み込む、書き換える処理を行うコードの記述方法について理解している。 |
| 2.2.3ウィンドウオブジェクト | 8 | Windowオブジェクトが持つプロパティについて理解しており、イベント発生時におけるウィンドウの移動などの表示制御を行うコードの記述方法を理解している。 |
| 2.2.4Selectors API | 7 | Selectors APIを使ったHTML要素への操作方法についてコードの記述方法を理解している。 |
| 2.2.5History API | 7 | HistoryオブジェクトやLocationオブジェクトが持つプロパティや関数を理解しており、それぞれ要件を実現するためにどれを利用すべきかを理解できている。 |
| 2.2.6テスト・デバッグ | 6 | コンソールを使って、変数の内容を出力する方法について理解している。 |
| 2.3グラフィックス・アニメーション | ||
| 2.3.1Canvas(2D) | 8 | Canvasの特徴について説明ができ、Canvasを使って描画を行うコードを読み、その結果ブラウザ上でどのような動きを行うかを理解することができる。 |
| 2.3.2SVG | 2 | SVGの概要とCanvasとの違いについて理解している。 |
| 2.3.3Timing control for script-based animations | 2 | 高速な描画処理をブラウザ上で実現するために必要な知識を持ち、処理落ちやちらつきを防ぐための記述方法を理解している。 |
| 2.4マルチメディア | ||
| 2.4.1メディア要素のAPI | 5 | 動画や音声を再生するコードを読んで、そのコードの問題点やブラウザ上での動きを理解することができる。 |
| 2.5ストレージ | ||
| 2.5.1Web Storage | 7 | Web Storageの特徴や仕様を理解し、読み込み・書き込みを行うコードを理解することができる。 |
| 2.5.2Indexed Database API | 5 | Indexed Database APIの特徴を理解し、簡単な読み込み・書き込みを行うコードを理解することができる。 |
| 2.5.3File API | 5 | File APIの特徴を理解し、簡単なファイル読み込みのコードを理解することができる。 |
| 2.6通信 | ||
| 2.6.1WebSocket | 5 | WebSocketの特徴を理解し、通信を行うにあたって必要な知識を理解している。 |
| 2.6.2XMLHtttpRequest | 5 | XMLHttpRequestの特徴を理解し、通信を行い結果を適切に処理できるプログラムを読むことができる。 |
| 2.6.3Server-Sent Events | 1 | 標準化されたサーバプッシュの仕組みを理解し、実践に役立てることができる。 |
| 2.7デバイスアクセス | ||
| 2.7.1Geolocation API | 5 | Geolocation APIの概要と利用時の注意点について理解している。 |
| 2.7.2DeviceOrientationEvent | 1 | スマートフォンに搭載された加速度センサーやコンパスの情報をJavaScriptからリアルタイムに取得でき、それらの値の意味を理解して、Webアプリケーション開発に役立てられる。 |
| 2.8パフォーマンスとオフライン | ||
| 2.8.1Web Workers | 5 | Web Workersの特徴を理解し、並列処理やエラーの検出を行うコードを読み、どのように動作するかを理解することができる。 |
| 2.8.2High Resolution Time | 2 | High Resolution time APIを使って、高い精度の時間を取得するために必要な知識について理解している。 |
| 2.8.3オフラインアプリケーションAPI | 3 | オフラインでも動作可能なアプリケーションを設計するにあたって知っておくべき、状況の確認方法とキャッシュの操作方法について理解している。 |
| 2.8.4Page Visiblity | 2 | スマートフォンなどでの使用も含めて想定されるHTML5の画面表示制御方法について理解している。 |
| 2.8.5Navigation Timing | 1 | Navigation Timing APIを使って、発生している性能に関する問題を解決するための知識について理解している。 |
| 2.9セキュリティモデル | ||
| 2.9.1クロスオリジン制約とCORS | 4 | ブラウザのセキュリティ機構の1つとして用意されたクロスオリジン制約について理解し、どういう条件でクロスオリジン制約が課せられるのか、そしてその制約とは何科を理解している。 JavaScriptからクロスオリジンでHTTP通信を行うために必要なCORSの基礎知識を持ち、HTTPサーバーにどのような設定が必要になるのかを理解している。 |
| 2.9.2セキュリティモデルとSSLの関係 | 4 | ブラウザのセキュリティモデルとSSLの関係性を理解している。 |
受験申込みから結果確認まで
ここでは、受験申込みから試験結果の確認までの流れを説明します。実際に受験の申込みをする際は、必ず公式サイトの下記ページで最新情報を確認してください。
【受験のお申込み】 https://html5exam.jp/register/
(1)EDUCO-IDの取得
HTML5レベル2試験の申込みにあたっては、事前にEDUCO-IDを取得する必要があります。すでにEDUCO-IDを持っている方は、新規登録する必要はありません。
【EDUCO-ID 新規登録】 https://ca.educo-j.or.jp/caf/Xamman/ register
(2)試験配信会社で受験予約
HTML5レベル2試験はピアソンVUEのテストセンターで受験します。予約にはピアソンVUEのアカウントが必要です。
アカウント作成後、ピアソンVUEのサイトで受験場所や日時などを決めて、予約を行います。
【ピアソンVUEHTML5プロフェッショナル認定資格】
https://www.pearsonvue.co.jp/Clients/ HTML5.aspx
(3)受験当日
受験には本人確認書類が1点、または2点必要となります。顔写真つきの政府が発行する本人確認書類(運転免許証やパスポート、マイナンバーカードなど)であれば、1点のみの提示で大丈夫です。
政府が発行する本人確認書類をお持ちでない場合は、特定の組み合わせの本人確認書類が2点必要となります(社員証+健康保険証、学生証+年金手帳など)。
(4)試験後
試験終了後、受験結果は直ちに画面に表示されます。
終了後に「受験者様マイページ」で合否やスコアなどを確認することもできます。また、合格した場合は2週間程度で「受験者様マイページ」に登録した住所に認定証と認定カードが届きます。
【受験者様マイページ】https://ca.educo-j.or.jp/caf/Xamman/candidatearea
リテークポリシーと優位性の期限
不合格の場合は、再受験する際のリテークポリシーに注意してください。
リテークポリシー
HTML5レベル2試験を再受験するには、最終受験日の翌日から起算して5日目以降(土日含む)から可能となります。3回目以降の再受験の場合も同様です。
優位性の期限
HTML5レベル1、レベル2は認定日から5年間の優位性の期限が設定されています。これは、HTML5認定資格が最新技術の理解を認定基準の一部として取り入れているためです。常に最新技術を身に付けることは重要ですが、優位性の期限が切れたとしても認定された事実が無効になることはありません。優位性の期限は「受験者マイページ」で確認できます。
優位性の期限を延長するには、同一資格の再取得、または上位資格の取得が求められます。
本書の対象読者
本書は、HTML5レベル2の合格を目指されている方を対象とした問題集です。初学者の方にも学びやすい構成を心掛けていますが、JavaScriptによるWebページの作成方法を一から順を追って説明しているわけではありません。
そのため、初めてJavaScriptを学習するという方は、入門者向けの『JavaScriptの絵本第2版 Webプログラミングを始める新しい9つの扉』(株式会社アンク著/ISBN:978-4-7981-5163-2)や『JavaScript 1年生 体験してわかる! 会話でまなべる! プログラミングのしくみ』(リブロ ワークス 著/ ISBN:978-4-7981-53261)などの書籍で前提知識を取得されることをお勧めします。
また、講習会形式で学習したい方は、以下の講座をご受講ください。
【株式会社富士通ラーニングメディア:JavaScript プログラミング基礎】
https://www.kcc.knowledgewing.com/icm/srv/course-application/init-detail?cd=FLM&cscd=UJS36L&pcd=FLMC
本書の使い方
本書は、本番試験に近い形式の練習問題で構成されています。1章から9章まで試験範囲に沿って、その分野に関する問題を掲載しています。
①試験における重要度を★で表示しています。★の数が多いほど重要度が高くなります。じっくり学習したい方はすべての問題を、試験傾向を素早く把握したい方、直前対策に利用したい方は、★★★から見ていくことをお勧めします。
②問題文です。各章に関連する問題を、本番試験に近い形式で掲載しています。選択式の問題と記述の問題、2種類があります。
③問題に対する解説です。解説には、その分野に関する重要用語や関連事項なども記載されています。解説にも試験に関わる重要な項目が掲載されているため、問題に正解した場合でも、必ず一読することをお勧めします。
④問題に対する答えです。
10章、11章は本番試験に近い形の模擬試験です。学習の総仕上げとして、また試験直前の力試しとして、時間を測って解くとよいでしょう。なお、11章はWebからダウンロードしてください(ダウンロードについては、後述「読者特典:ダウンロード版模擬試験について」参照)。
なお、本書記載の解説、画像等は本書執筆時点の情報やツール(Google ChromeやFirefox)をもとに作成しています。古いブラウザでは正しく動作しない場合があるので注意してください。そのため、ブラウザの実装状況は「Can I Use」などで適宜確認してください。
【Can I Use】 https://caniuse.com/
また、HTML5レベル2試験の出題範囲に含まれている要素のうち、最新仕様では廃止された要素もあります。出題範囲に準拠するため、それらについての問題も含まれていますが、あらかじめご了承ください。
デベロッパーツール
Google ChromeやFirefox、Microsoft Edgeなどのモダンブラウザには、開発者向けのデベロッパーツールが搭載されています。各ブラウザでF12キーを押下すると表示されます。デベロッパーツールを使用すれば、効率的に開発、学習できます。
Google Chromeのデベロッパーツールの主な機能を以下に示します。
(Console】
エラーや警告、Consoleオブジェクトの出力などを確認できる画面です。最終行にJavaScriptを入力して実行することもでき
ます。
【Sources】
JavaScriptをデバッグできます。
【Network】
ブラウザとサーバ間の通信をキャプチャできます。XMLHttpRequestなどの通信系処理のデバッグに役立ちます。
【Application】
Web Storage p Indexed Database APIなどで保存しているデータを閲覧できます。
【Elements】
HTMLの構造や適用されているCSS、イベントハンドラなどを確認できます。
目次
HTML5プロフェッショナル認定資格試験の概要
HTML5レベル2の試験概要と出題範囲
試験申込みから結果確認まで
リテークポリシーと優位性の期限
本書の対象読者
本書の使い方
デベロッパーツール
読者特典:ダウンロード版模擬試験について
1章 JavaScript
2章 WebブラウザにおけるJavaScript API
3章 グラフィックス・アニメーション
4章 マルチメディア
5章 ストレージ
6章 通信
7章 デバイスアクセス
8章 パフォーマンスとオフライン
9章 セキュリティモデル
10章 模擬試験1
11章 模擬試験2
索引
