LPI-Japan主催

HTML5プロフェッショナル認定試験
レベル2 　ポイント解説無料料セミナー
2014年年11⽉月15⽇日

アシアル株式会社 　⽣生形可奈奈⼦子

The HTML5 Logo is licensed under Creative Commons Attribution 3.0. 　Unported by the W3C; http://creativecommons.org/licenses/by/3.0/© Asial Corporation 2014. All rights reserved.

2	

事業内容
HTML5アプリ開発環境（Monaca）、ネイティブアプリ開発、サーバーサイド開発、インフラ、教育事業など
The HTML5 Logo is licensed under Creative Commons Attribution 3.0. 　Unported by the W3C; http://creativecommons.org/licenses/by/3.0/© Asial Corporation 2014. All rights reserved.

⽣生形 　可奈奈⼦子（うぶかた・かなこ）• 講師・エバンジェリスト• 元エンジニア• 著書：「スラスラわかるJavaScript」（翔泳社）

3	The HTML5 Logo is licensed under Creative Commons Attribution 3.0. 　Unported by the W3C; http://creativecommons.org/licenses/by/3.0/© Asial Corporation 2014. All rights reserved.

n HTML5プロフェッショナル認定試験とは• 概要• 試験範囲n 頻出ポイント解説• JavaScriptのデータ型• オブジェクト
• 関数とスコープ• prototype4	

The HTML5 Logo is licensed under Creative Commons Attribution 3.0. 　Unported by the W3C; http://creativecommons.org/licenses/by/3.0/© Asial Corporation 2014. All rights reserved.

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

5	

The HTML5 Logo is licensed under Creative Commons Attribution 3.0. 　Unported by the W3C; http://creativecommons.org/licenses/by/3.0/© Asial Corporation 2014. All rights reserved.

n 特定⾮非営利利活動法⼈人LPI-‐‑‒Japanが実施する、HTML5および周辺技術の知識識レベルを測る認定制度度です。
n 試験の難易易度度を⽰示す2種類のレベルがあり、段階的に受験します。
• Level1  マルチデバイスに対応した静的なWebコンテンツを  HTML5を使ってデザイン、作成できるレベル• Level2
システム間連携や最新のマルチメディア術に対応したWebアプリケーションや動的Webコンテンツの開発・設計ができるレベル

6	

The HTML5 Logo is licensed under Creative Commons Attribution 3.0. 　Unported by the W3C; http://creativecommons.org/licenses/by/3.0/© Asial Corporation 2014. All rights reserved.

出題範囲

重要度度

JavaScript
JavaScript⽂文法★★★★★★★★★★  10

WebブラウザにおけるJavaScript  API

7	

イベント★★★★★★★★  8ドキュメントオブジェクト／DOM★★★★★★  6

ウィンドウオブジェクト★★★★★★★★  8Selectors  API★★★★  4

テスト・デバッグ★★  2

The HTML5 Logo is licensed under Creative Commons Attribution 3.0. 　Unported by the W3C; http://creativecommons.org/licenses/by/3.0/© Asial Corporation 2014. All rights reserved.

出題範囲

重要度度

グラフィックス
Canvas(2D)★★★★★★  6SVG

★  1

マルチメディア
video要素,audio要素★★  2

オフラインアプリケーションAPI
アプリケーションキャッシュの制御★★  2

Session  History  and  Navigation

8	History 　API★★★  3
The HTML5 Logo is licensed under Creative Commons Attribution 3.0. 　Unported by the W3C; http://creativecommons.org/licenses/by/3.0/© Asial Corporation 2014. All rights reserved.

出題範囲

重要度度

表⽰示制御Page  Visibility★★  2

Timing  control  for  script-‐‑‒based  animations★★  2ストレージ

9	Web  Storage★★★★  4Indexed  Database  API

★★  2

File  API★★  2

The HTML5 Logo is licensed under Creative Commons Attribution 3.0. 　Unported by the W3C; http://creativecommons.org/licenses/by/3.0/© Asial Corporation 2014. All rights reserved.

出題範囲

重要度度

通信WebSocket★★  2

XMLHttpRequest★★★★  4

Geolocation  APIGeolocation  APIの基本と位置情報の取得★★  2Web  Workers
並列列処理理の記述10	★★★★  4

The HTML5 Logo is licensed under Creative Commons Attribution 3.0. 　Unported by the W3C; http://creativecommons.org/licenses/by/3.0/© Asial Corporation 2014. All rights reserved.

出題範囲

重要度度

パフォーマンス

11	Navigation  Timing★★★★  4High  Resolution  Time★  1

The HTML5 Logo is licensed under Creative Commons Attribution 3.0. 　Unported by the W3C; http://creativecommons.org/licenses/by/3.0/© Asial Corporation 2014. All rights reserved.

n 試験⽅方式はコンピュータベーストテスト（CBT）です。試験配信会
社の「ピアソンVUE」を通して受験します。

12	

問題数

40〜～45問

試験時間90分

合格ライン

約7割

回答⽅方式

殆どが選択式（複数回答あり）
記述式も１問程度度
コードリーディング問題が多い

受験料料\15,000（税抜）

The HTML5 Logo is licensed under Creative Commons Attribution 3.0. 　Unported by the W3C; http://creativecommons.org/licenses/by/3.0/© Asial Corporation 2014. All rights reserved.

JavaScriptのデータ型

13	

The HTML5 Logo is licensed under Creative Commons Attribution 3.0. 　Unported by the W3C; http://creativecommons.org/licenses/by/3.0/© Asial Corporation 2014. All rights reserved.

n 代表的なデータ型
型の分類
プリミティブ型（１つの値のみを持つ）
オブジェクト型（プロパティの集合体）
特殊な型

14	

代表的な型
数値、⽂文字列列、論論理理値
オブジェクト、関数、配列列など
null（値が存在しない）
undeﬁned（値が定義されていない）

The HTML5 Logo is licensed under Creative Commons Attribution 3.0. 　Unported by the W3C; http://creativecommons.org/licenses/by/3.0/© Asial Corporation 2014. All rights reserved.

問題：プリミティブ型に対してプロパティを指定
n 以下の実⾏行行結果は？
console.log("hoge".length);• 4• null• undeﬁned
• エラー

15	

The HTML5 Logo is licensed under Creative Commons Attribution 3.0. 　Unported by the W3C; http://creativecommons.org/licenses/by/3.0/© Asial Corporation 2014. All rights reserved.

n ラッパーオブジェクト  …  プリミティブ型に対応するオブジェクト
プリミティブ型

ラッパーオブジェクト

数値

Number

⽂文字列列

String論論理理値

Boolean"hoge".length16	

上記のように記述すると、プリミティブ型の⽂文字列列がラッパーオブジェクトであるString型に暗黙的に変換される
The HTML5 Logo is licensed under Creative Commons Attribution 3.0. 　Unported by the W3C; http://creativecommons.org/licenses/by/3.0/© Asial Corporation 2014. All rights reserved.

問題：プリミティブ型とラッパーオブジェクトの⽐比較n 以下の実⾏行行結果は？（true  /  false）
var a = "hoge";var b = new String("hoge");console.log(a == b);n 以下の実⾏行行結果は？（true  /  false）
var a = "hoge";var b = new String("hoge");console.log(a === b);
17	

The HTML5 Logo is licensed under Creative Commons Attribution 3.0. 　Unported by the W3C; http://creativecommons.org/licenses/by/3.0/© Asial Corporation 2014. All rights reserved.

問題：値の⽐比較、参照の⽐比較n 以下の実⾏行行結果は？（true  /  false）
var a = "hoge";var b = "hoge";
console.log(a == b);n 以下の実⾏行行結果は？（true  /  false）
var a = new String("hoge");var b = new String("hoge");console.log(a == b);18	

The HTML5 Logo is licensed under Creative Commons Attribution 3.0. 　Unported by the W3C; http://creativecommons.org/licenses/by/3.0/© Asial Corporation 2014. All rights reserved.

n プリミティブ型は値そのものを⽐比較する
n オブジェクト型は参照しているオブジェクトが同じものかどうかを⽐比較する"hoge"a19	"hoge"b
The HTML5 Logo is licensed under Creative Commons Attribution 3.0. 　Unported by the W3C; http://creativecommons.org/licenses/by/3.0/© Asial Corporation 2014. All rights reserved.

var a = new String("hoge");var b = a;console.log(a == b);

この場合は同じオブジェクトを参照しているのでtrue"hoge"a20	b
The HTML5 Logo is licensed under Creative Commons Attribution 3.0. 　Unported by the W3C; http://creativecommons.org/licenses/by/3.0/© Asial Corporation 2014. All rights reserved.

オブジェクト21	The HTML5 Logo is licensed under Creative Commons Attribution 3.0. 　Unported by the W3C; http://creativecommons.org/licenses/by/3.0/© Asial Corporation 2014. All rights reserved.

n プロパティとメソッド• オブジェクトの要素には、数値や⽂文字列列などの値だけではなく、関数も代⼊入することができる• 値のことを「プロパティ」、関数のことを「メソッド」というオブジェクト値（プロパティ）関数（メソッド）The HTML5 Logo is licensed under Creative Commons Attribution 3.0. 　Unported by the W3C; http://creativecommons.org/licenses/by/3.0/© Asial Corporation 2014. All rights reserved.

n 以下の実⾏行行結果は？
var obj = {name: "hoge"};delete obj.name;console.log(obj.name);• null• undeﬁned• 空⽂文字• エラー
23	

The HTML5 Logo is licensed under Creative Commons Attribution 3.0. 　Unported by the W3C; http://creativecommons.org/licenses/by/3.0/© Asial Corporation 2014. All rights reserved.

n Objectオブジェクトはすべてのオブジェクトのベースとなっている
ObjectStringArray

Function

The HTML5 Logo is licensed under Creative Commons Attribution 3.0. 　Unported by the W3C; http://creativecommons.org/licenses/by/3.0/© Asial Corporation 2014. All rights reserved.

n 以下の実⾏行行結果は？
var array = [10, 20, 30];
array[9] = 99;
console.log(array.length);• 3• 4• 10• undeﬁned
25	

The HTML5 Logo is licensed under Creative Commons Attribution 3.0. 　Unported by the W3C; http://creativecommons.org/licenses/by/3.0/© Asial Corporation 2014. All rights reserved.

n インデックスは連番でなくても割り振ることができる

1020 30 990

129n lengthプロパティは最⼤大インデックス+1を返す

The HTML5 Logo is licensed under Creative Commons Attribution 3.0. 　Unported by the W3C; http://creativecommons.org/licenses/by/3.0/© Asial Corporation 2014. All rights reserved.

n thisとは、⾃自分⾃自⾝身のオブジェクトを指す
var obj1 = {name: "hoge",
func: function() {console.log(this.name);}};obj1.func();27	

// hoge

The HTML5 Logo is licensed under Creative Commons Attribution 3.0. 　Unported by the W3C; http://creativecommons.org/licenses/by/3.0/© Asial Corporation 2014. All rights reserved.

n call/applyによって、thisが指すオブジェクトを変更更できるvar obj1 = {name: "hoge",
func: function() {console.log(this.name);// fuga}};var obj2 = {name: "fuga"};obj1.func.call(obj2);//obj1.func()を、obj2をthisとして実行
28	

The HTML5 Logo is licensed under Creative Commons Attribution 3.0. 　Unported by the W3C; http://creativecommons.org/licenses/by/3.0/© Asial Corporation 2014. All rights reserved.

n 以下のthisは何を指す？
<script>
console.log(this);</script>• null• undeﬁned• Functionオブジェクト• Windowオブジェクト
29	

The HTML5 Logo is licensed under Creative Commons Attribution 3.0. 　Unported by the W3C; http://creativecommons.org/licenses/by/3.0/© Asial Corporation 2014. All rights reserved.

関数とスコープ

30	

The HTML5 Logo is licensed under Creative Commons Attribution 3.0. 　Unported by the W3C; http://creativecommons.org/licenses/by/3.0/© Asial Corporation 2014. All rights reserved.

n function命令令⽂文
function func(message) {alert(message);}func("hello");• 関数にfuncという名前をつけている

31	

The HTML5 Logo is licensed under Creative Commons Attribution 3.0. 　Unported by the W3C; http://creativecommons.org/licenses/by/3.0/© Asial Corporation 2014. All rights reserved.

n 関数リテラル
var func = function(message) {alert(message);}func("hello");• funcという変数に関数を代⼊入している• この場合、関数名は省省略略できる（無名関数や匿匿名関数と呼ばれる）

32	

The HTML5 Logo is licensed under Creative Commons Attribution 3.0. 　Unported by the W3C; http://creativecommons.org/licenses/by/3.0/© Asial Corporation 2014. All rights reserved.

n 即時関数(function(message) {alert(message);})("hello");• (関数の定義)(引数);  とすることで定義と呼び出しを同時に⾏行行う• 主にスコープを限定する⽤用途などで利利⽤用される

33	

The HTML5 Logo is licensed under Creative Commons Attribution 3.0. 　Unported by the W3C; http://creativecommons.org/licenses/by/3.0/© Asial Corporation 2014. All rights reserved.

n 以下の実⾏行行結果は？
for(var i = 0; i < 3; i++) {var a = "hoge";}
console.log(a);• エラー• undeﬁned• null• "hoge"34	

The HTML5 Logo is licensed under Creative Commons Attribution 3.0. 　Unported by the W3C; http://creativecommons.org/licenses/by/3.0/© Asial Corporation 2014. All rights reserved.

n JavaScriptにはブロックスコープがない
var a = 10; // aはグローバル変数なのでどこからでも参照可function func1() {var b = 20;
function func2() {bのスコープ
var c = 30;cのスコープ}}35	

• スコープが作られるのは関数内のみ• スコープの範囲外で変数を参照した場合、ReferenceErrorが発⽣生する
The HTML5 Logo is licensed under Creative Commons Attribution 3.0. 　Unported by the W3C; http://creativecommons.org/licenses/by/3.0/© Asial Corporation 2014. All rights reserved.

n 以下の実⾏行行結果は？
var a = "global";function func() {console.log(a);var a = "func";}
func();36	

• エラー• undeﬁned• "global"• "func"
The HTML5 Logo is licensed under Creative Commons Attribution 3.0. 　Unported by the W3C; http://creativecommons.org/licenses/by/3.0/© Asial Corporation 2014. All rights reserved.

n ホイスティング（変数の巻き上げ）とは• 関数の途中で宣⾔言された変数は、関数の先頭に巻き上げて宣⾔言される• ただし、初期値として代⼊入されている値は巻き上げない• 先ほどのコードは以下のように解釈される

37	

var a = "global";function func() {var a;
console.log(a);a = "func";}
func();The HTML5 Logo is licensed under Creative Commons Attribution 3.0. 　Unported by the W3C; http://creativecommons.org/licenses/by/3.0/© Asial Corporation 2014. All rights reserved.

n ガベージコレクションとは、もう参照されなくなったメモリ領領域を⾃自動的に解放する機能のこと
var func = function() {var a = 0;
console.log(++a);};
func();
func();
38	// 1// 1

The HTML5 Logo is licensed under Creative Commons Attribution 3.0. 　Unported by the W3C; http://creativecommons.org/licenses/by/3.0/© Asial Corporation 2014. All rights reserved.

n ガベージコレクションとは、もう参照されなくなったメモリ領領域を⾃自動的に解放する機能のこと
var func = function() {var a = 0;
console.log(++a);};
func();
func();
39	

aのスコープ// 1// 1

The HTML5 Logo is licensed under Creative Commons Attribution 3.0. 　Unported by the W3C; http://creativecommons.org/licenses/by/3.0/© Asial Corporation 2014. All rights reserved.

n ガベージコレクションとは、もう参照されなくなったメモリ領領域を⾃自動的に解放する機能のこと
var func = function() {var a = 0;
console.log(++a);};
func();
func();
40	

関数が最後まで実⾏行行し終わったら、関数内のローカル変数は不不要になって消去される// 新しくaが作られ、消去される// 新しくaが作られ、消去されるThe HTML5 Logo is licensed under Creative Commons Attribution 3.0. 　Unported by the W3C; http://creativecommons.org/licenses/by/3.0/© Asial Corporation 2014. All rights reserved.

n クロージャは、変数を参照し続けることで、状態を保持する仕組み
var func = (function() {var a = 0;
return function() {console.log(++a);};})();func();func();41	// 1// 2
The HTML5 Logo is licensed under Creative Commons Attribution 3.0. 　Unported by the W3C; http://creativecommons.org/licenses/by/3.0/© Asial Corporation 2014. All rights reserved.

n クロージャは、変数を参照し続けることで、状態を保持する仕組みvar func = (function() {var a = 0;
return function() {console.log(++a);};})();
func();
func();
42	

aのスコープ（外側の関数）

// 1
// 2
The HTML5 Logo is licensed under Creative Commons Attribution 3.0. 　Unported by the W3C; http://creativecommons.org/licenses/by/3.0/© Asial Corporation 2014. All rights reserved.

n クロージャは、変数を参照し続けることで、状態を保持する仕組み
var func = (function() {var a = 0;
return function() {console.log(++a);};})();
func();
func();① 即時関数になっている
外側の関数が実⾏行行される② 内側の関数が戻り値として返却される// 1// 2
The HTML5 Logo is licensed under Creative Commons Attribution 3.0. 　Unported by the W3C; http://creativecommons.org/licenses/by/3.0/© Asial Corporation 2014. All rights reserved.

n クロージャは、変数を参照し続けることで、状態を保持する仕組み
var func = function() {console.log(++a);};func();func();44	

③ 外側の関数は終了了したが、aはまだ参照されているので消去されない！

// 1// 2
The HTML5 Logo is licensed under Creative Commons Attribution 3.0. 　Unported by the W3C; http://creativecommons.org/licenses/by/3.0/© Asial Corporation 2014. All rights reserved.

prototype45	The HTML5 Logo is licensed under Creative Commons Attribution 3.0. 　Unported by the W3C; http://creativecommons.org/licenses/by/3.0/© Asial Corporation 2014. All rights reserved.

n JavaScriptはプロトタイプベースのオブジェクト指向⾔言語• 別のオブジェクトを基礎として、新しいオブジェクトを作成する
クラスベースプロトタイプベース

Dogのインスタンス
Dogクラス
クラス

オブジェ
クト

Dogのインスタンス
オブジェ
クト

46	

Dogのインスタンス
Dogオブジェクト
オブジェ
クト

prototype

オブジェ
クト

Dogのインスタンス
オブジェ
クト

The HTML5 Logo is licensed under Creative Commons Attribution 3.0. 　Unported by the W3C; http://creativecommons.org/licenses/by/3.0/© Asial Corporation 2014. All rights reserved.

n プロトタイプとなるオブジェクト＝関数オブジェクト• 関数内の処理理はインスタンス化した時にコンストラクタとして実⾏行行される

var Dog = function(_name) {this.name = _name;this.show = function() {alert(this.name);};};• 上記のオブジェクトをプロトタイプとしてインスタンスを⽣生成
47	

var dog1 = new Dog("ポチ");
The HTML5 Logo is licensed under Creative Commons Attribution 3.0. 　Unported by the W3C; http://creativecommons.org/licenses/by/3.0/© Asial Corporation 2014. All rights reserved.

n オブジェクトをインスタンス化すると、元のオブジェクトで定義されたプロパティとメソッドが、各インスタンスにコピーされるn 関数オブジェクトが持つprototypeプロパティに定義したプロパティとメソッドは、コピーされずに各インスタンスから参照される
Dogオブジェクト
nameプロパティ
showメソッド

コピーDogのインスタンス
nameプロパティ
showメソッド
Dogのインスタンス
nameプロパティ
showメソッド

48	Dogのインスタンス

Dogオブジェクト

nameプロパティ

nameプロパティ

showメソッド

showメソッド
prototype
プロパティ

Dogのインスタンス

参照

nameプロパティ
showメソッド

The HTML5 Logo is licensed under Creative Commons Attribution 3.0. 　Unported by the W3C; http://creativecommons.org/licenses/by/3.0/© Asial Corporation 2014. All rights reserved.

n 各インスタンスで共通のメソッドはprototypeプロパティに登録する

var Dog = function(_name) {this.name = _name;this.show = function() {alert(this.name);};};
Dog.prototype.show = function() {alert(this.name);};49	

The HTML5 Logo is licensed under Creative Commons Attribution 3.0. 　Unported by the W3C; http://creativecommons.org/licenses/by/3.0/© Asial Corporation 2014. All rights reserved.

受験対策

50	

The HTML5 Logo is licensed under Creative Commons Attribution 3.0. 　Unported by the W3C; http://creativecommons.org/licenses/by/3.0/© Asial Corporation 2014. All rights reserved.

コア・JavaScript

HTML5  APIHTML5  Web標準API  バイブル

51	The HTML5 Logo is licensed under Creative Commons Attribution 3.0. 　Unported by the W3C; http://creativecommons.org/licenses/by/3.0/© Asial Corporation 2014. All rights reserved.

Open the Future with HTML5.

52	

The HTML5 Logo is licensed under Creative Commons Attribution 3.0. 　Unported by the W3C; http://creativecommons.org/licenses/by/3.0/© Asial Corporation 2014. All rights reserved.