LPI-Japan主催

HTML5プロフェッショナル認定試験
レベル2 ポイント解説無料セミナー
2015年7月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.

事業内容
HTML5アプリ開発環境（Monaca）、ネイティブアプリ開発、
サーバーサイド開発、インフラ、教育事業など
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.

生形

可奈子（うぶかた・かなこ）• 講師・Monacaエバンジェリスト• 著書：「スラスラわかる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.

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

• 関数とスコープ• prototype• イベント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.

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.

 特定非営利活動法人LPI-Japanが実施する、HTML5および周辺技術の知識レベルを測る認定制度です。

 試験の難易度を示す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
イベント★★★★★★★★ 8

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

ウィンドウオブジェクト★★★★★★★★ 8グラフィックス
Canvas(2D)7★★★★★★ 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.

 試験方式はコンピュータベーストテスト（CBT）です。試験配信会

社の「ピアソンVUE」を通して受験します。

8

問題数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.

EcmaScript6

9

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は、各ブラウザに独自に実装されており、それぞれ 独自仕様が含まれている場合がある• ActionScriptやJScript等、JavaScript以外の言語も存在する• 上記言語を標準化するために作られた仕様が「EcmaScript」• 言語仕様のみを定義しており、HTML5 APIやDOMは含まれない

最新バージョンは6• 2015年6月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.

JavaScriptのデータ型

11

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.

 代表的なデータ型
型の分類

12

代表的な型

プリミティブ型（１つの値のみを持つ）

数値、文字列、論理値

オブジェクト型（プロパティの集合体）

オブジェクト、関数、配列など

特殊な型

null（値が存在しない）
undefined（値が定義されていない）
Symbol（ユニークな値を持つ）※ES6
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.

オブジェクトの基本

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.

 プロパティとメソッド• オブジェクトの要素には、数値や文字列などの値だけではなく、関数も代入することができる• 値のことを「プロパティ」、関数のことを「メソッド」というオブジェクト値（プロパティ）関数（メソッド）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 list = new Array(1,2,3);① オブジェクトの生成時に、コンストラクタという関数が実行される② コンストラクタは、新しくオブジェクトを生成し、それを戻り値として返却する（このオブジェクトをインスタンスと呼ぶ）

list

Arrayのコンストラクタ
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.

 オブジェクトの作成• newを使用
var オブジェクト名 = new Object();• オブジェクトリテラルを使用

var オブジェクト名 = {};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 obj = {name: "hoge"
show: function() {console.log(this.name); // hoge}};// メソッドの呼び出し
obj.show();
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.

 delete演算子により、定義済みのプロパティをオブジェクトから削除することができる
var obj = {name: "hoge"};
delete obj.name;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.

 以下の実行結果は？
var obj = {name: "hoge"};
delete obj.name;console.log(obj.name);• null• undefined
• 空文字
• エラー

19

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.

プリミティブ型とオブジェクト型

20

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.

 プリミティブ型は１つの値だけ、オブジェクト型は複数のメソッド

やプロパティを持つ
プリミティブ型（文字列）"hoge"

オブジェクト型（String）"hoge"

・length・replace()・substr()…

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.

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

22

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.

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

ラッパーオブジェクト

数値

Number

文字列

String

論理値

Boolean"hoge".length
上記のように記述すると、プリミティブ型の文字列がラッパーオブジェクトであるString型に暗黙的に変換される
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.

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

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.

問題：値の比較、参照の比較
 以下の実行結果は？（true / false）
var a = "hoge";var b = "hoge";
console.log(a == b); 以下の実行結果は？（true / false）
var a = new String("hoge");var b = new String("hoge");console.log(a == b);
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.

 プリミティブ型は値そのものを比較する
 オブジェクト型は参照しているオブジェクトが同じものかどうかを比較する"hoge""hoge"a26b
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"a27

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.

特殊数値

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.

 特殊数値

種類

29

代表的な型

Number.MAX_VALUE
Number.MIN_VALUE

正の最大値
正の最小値（負の最大値ではない）

Infinity

無限大（ゼロ除算、オーバーフロー）NaN

数値ではない値（計算失敗など）
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.

問題：isNaN関数
 isNaN関数は、数値として解釈できない値の場合にtrueを返す。以下のうち、trueを返すのはどれか？
• isNaN(null)• isNaN(undefined)• isNaN("10")• isNaN(true)• isNaN(Infinity)• isNaN(Number.MAX_VALUE)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.

様々なオブジェクト

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.

 Objectオブジェクトはすべてのオブジェクトのベースとなっている
ObjectString
（文字列）

Array
（配列）

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.

 typeof演算子• データの型を調べる演算子なので、StringやArrayなどのオブジェクト
はほぼすべて「object」と判定される※ 関数は「function」と判定される

var list = new Array(1,2,3);
console.log(typeof list); // object

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.

 instanceof演算子• どのコンストラクタによって生成されたインスタンスなのかを判定する
ので、オブジェクトの種類を調べることができる

var list = new Array(1,2,3);
console.log(list instanceof Array); // true

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.

配列

35

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.

 配列の作成• newを使用
var 配列名 = new Array(1, 2, 3);• 配列リテラルを使用

var 配列名 = [1, 2, 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.

 以下の実行結果は？
var array = [10, 20, 30];
array[9] = 99;
console.log(array.length);
• 3
• 4
• 10
• undefined37

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.

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

10

20

30

99

0

1

2

9

 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.

関数

39

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.

 function命令文
func("hello");function func(message) {alert(message);}• 関数にfuncという名前をつけている• 関数は静的に作成される（スクリプト実行前に評価される）

40

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 func = function(message) {alert(message);};func("hello");• funcという変数に関数を代入している• この場合、関数名は省略できる（無名関数や匿名関数と呼ばれる）

41

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.

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

42

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.

 デフォルト引数
 可変長引数 アロー記法

43

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.

デフォルト引数
function f(x, y=20){
console.log(x); // 10
console.log(y); // 20}
f(10);• 引数に値が渡されなかった場合に代入する値を指定することができる

44

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.

可変長引数
function f(...args) {for(var i=0; i<args.length; i++) {console.log(args[i]);}}f(10, 20);f(10, 20, 30, 40);
• 引数の数を動的に変更することができる

45

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 f = function(x) { return x * 2; };アロー記法var f = x => x * 2;
• functionキーワードを省略できる• 引数が１つの場合は、()を省略できる• 処理がreturn文のみの場合は、{}とreturnキーワードを省略できる

46

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.

変数のスコープ

47

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 = 10; // aはグローバル変数なのでどこからでも参照可function func1() {var b = 20;
function func2() {bのスコープvar c = 30;cのスコープ}}• スコープは関数内でのみ作られる

48

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.

 スコープ外で変数を参照した場合、ReferenceErrorが発生する
var a = 10;
function func1() {var b = 20;
function func2() {var c = 30;}}
console.log(a); // 10
console.log(b); // ReferenceError
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.

 varをつけていない場合、その変数はグローバルスコープとなる
var a = 10;
function func1() {varを付け忘れているので、
b = 20;aと同じグローバル変数になる
function func2() {var c = 30;}}
console.log(a); // 10
console.log(b); // ReferenceError（？）
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.

 varをつけていない場合、その変数はグローバルスコープとなる
var a = 10;
function func1() {b = 20;function func2() {var c = 30;}}
func1(); // 関数の実行
console.log(b); // 20
51

func1関数が実行されると、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.

 use strict（厳格モード）を宣言すると、varの付け忘れなどの、推奨されない記述に対して警告が表示される
function func() {"use strict";b = 20; // エラー}• 厳格モードはスクリプト全体に適用することもできるが、関数内でのみの適用が推奨される

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.

 以下の実行結果は？
for(var i = 0; i < 3; i++) {var a = "hoge";}
console.log(a);• エラー• undefined• null• "hoge"53

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にはブロックスコープがない
if(true) {let a = "hoge";}
console.log(a); // a is not defined• スコープが発生するのは関数内のみ• ただし、ES6のletキーワードを使えばブロックスコープが利用できる

54

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.

 スクリプト内の値やオブジェクトは全て、暗黙的に一番外側に存在しているグローバルオブジェクトに含まれている<script>
var a = 10;
var obj = {prop: "hoge"};</script>

グローバルオブジェクト
obja

The HTML5 Logo is licensed under Creative Commons Attribution 3.0.

propUnported by the W3C; http://creativecommons.org/licenses/by/3.0/© Asial Corporation 2014. All rights reserved.

 ブラウザ環境におけるグローバルオブジェクトは、「Windowオ
ブジェクト」である

Windowオブジェクト
alert()

document

open()

locationsetInterval()

history

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.

 グローバル変数＝グローバルオブジェクトのプロパティ<script>
var a = 10;
console.log(a);// 10console.log(window.a); // 10</script>

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.

 複数のJSファイルを読み込んでいる場合に、グローバル変数が競合してしまう場合があるので利用は必要最小限に
var x = 10;…
<script src="lib1.js"><script src="lib2.js">…

lib1.jsxが競合

var x = 20;

index.html
lib2.js
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 = "global";function func() {console.log(a);var a = "func";}
func();

59• エラー• undefined• "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.

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

var a = "global";function func() {var a;
console.log(a);a = "func";}
func();
60

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.

prototype

61

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はプロトタイプベースのオブジェクト指向言語• あるオブジェクトを基礎として、新しいオブジェクトを生成する仕組み• 新しく作られたオブジェクトは、「インスタンス」と呼ばれるクラスベースプロトタイプベース

オブジェクトオブジェクト(インスタンス)(インスタンス)
プロトタイプオブジェクトクラス

オブジェクトオブジェクト(インスタンス)(インスタンス)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 Dog = function() { };• 上記のオブジェクトを元にインスタンスを生成するには、new演算子を使う

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.

 コンストラクタ＝関数の処理• 関数内の処理はインスタンスを生成（new）した時に、コンストラクタとして実行される
var Dog = function(_name) {this.name = _name;this.show = function() {alert(this.name);};};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.

 インスタンス＝Objectオブジェクト• プロトタイプオブジェクトはFunction型だが、インスタンスは
Object型となる

var Dog = function(_name) {// 省略};
var dog1 = new Dog("ポチ");

console.log(typeof Dog); // function
console.log(typeof dog1); // object
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.

 コンストラクタの暗黙的処理• インスタンスがObject型になるのは、コンストラクタが暗黙的に新しい
Objectを生成しているためである。
ソースコードvar Dog = function(_name) {this.name = _name;this.show = function() {alert(this.name);
};
};

暗黙的処理
var Dog = function(_name) {var this = {};this.name = _name;this.show = function() {alert(this.name);};
return this;};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.

 オブジェクトのコア• プロトタイプオブジェクトが持つプロパティ• 各インスタンスは、プロトタイプオブジェクトのprototypeを参照する• prototypeプロパティには、各インスタンスで共通の機能を格納する

オブジェクト(インスタンス)
プロトタイプオブジェクトprototype
プロパティ

オブジェクト(インスタンス)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 Dog = function(_name) {this.name = _name;this.show = function() {alert(this.name);};};var dog1 = new Dog("ポチ");
var dog2 = new Dog("シロ");

Dog
nameプロパティ
showメソッド

dog1
nameプロパティ

showメソッド

dog2
コピー

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.

 各インスタンスが内部的に持つ__proto__プロパティから元のオブジェクトのprototypeプロパティを参照する
var Dog = function(_name) {this.name = _name;};
Dog.prototype.show =function() {alert(this.name);};var dog1 = new Dog("ポチ");
var dog2 = new Dog("シロ");

dog1
Dog

nameプロパティ

nameプロパティ__proto__showメソッド

dog2

prototype

nameプロパティ

参照

The HTML5 Logo is licensed under Creative Commons Attribution 3.0.

__proto__Unported by the W3C; http://creativecommons.org/licenses/by/3.0/© Asial Corporation 2014. All rights reserved.

 以下は、Arrayのインスタンスからprototypeに定義されているjoinメソッ
ドを呼び出している例
Array

list

var list =new Array('a', 'b', 'c');[0]: avar str = list.join('+');

joinメソッド

console.log(str);

popメソッド//a+b+c

sortメソッド…

[1]: b[2]: c__proto__参照

prototype
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.

継承

71

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.

 継承とは• あるオブジェクトを拡張して、別のオブジェクトを作る仕組み
子オブジェクト
親オブジェクト・機能A
・機能B

親オブジェクト
継承

・機能A
・機能B
・機能C

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.

最も単純な継承関係• 子のprototypeプロパティに、親のインスタンスを代入する// 親
var Parent = function() {this.x = 10;};
Parent.prototype.show =function() {console.log(this.x);};// 子
var Child = function() {this.y = 20;};// 継承
Child.prototype = new Parent();// インスタンス化
var child = new Child();
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.

 プロパティを探索する順序① 自身のインスタンス内に該当プロパティがあるかどうかを調べる② プロトタイプオブジェクトのprototype内を調べる③ 親オブジェクトのprototype内を調べる

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.

 class構文により、クラスベース言語のように扱うことができる
class Parent {show(text) {console.log(text);}};
class Child extends Parent {show() {super.show("child");}};
親オブジェクトのメソッドはprototype内に定義される

キーワード１つで継承関係を実現

参照も容易
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.

this

76

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.

 thisとは、所属しているオブジェクトを指すキーワード
var obj1 = {name: "hoge",
func: function() {console.log(this.name); // hoge}};
this = obj1
obj1.func();77

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.

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

78

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.

1. 関数呼び出し
2. メソッド呼び出し

3. コールバック関数内のthis79

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.

 関数を呼び出した場合はWindowオブジェクトになる
function func() {console.log(this);}func();
this = Windowオブジェクト

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 myObj = {show: function() {console.log(this);}};
myObj.show();
this = myObj

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.

 以下のようにメソッドをコールバック関数として渡した場合は、
thisはコールバック関数を実行するオブジェクトに依存する
var myObj = {show: function() {console.log(this);
this = Windowオブジェクト}};
window.setInterval(myObj.show, 1000);
setIntervalのコールバック関数
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.

 以下のthisは、イベント発生元のHTML要素を指す<button id="btn">ボタン</button><script>function func() {console.log( this );}var btn = document.getElementById("btn");
btn.addEventListener("click", func);</script>
clickイベントのコールバック関数
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.

 thisが指すオブジェクトは、文脈によって異なる「どこに記述されているか」ではなく、「誰が実行しているか」がポイント

84

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.

 call/applyによって、thisが指すオブジェクトを変更できる
var obj1 = {name: "わたし",
show: function() {console.log(this.name); // ぼく}};
var obj2 = {name: "ぼく"};obj1.show.call(obj2); // obj2をthisとして実行
85

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.

 call()はカンマ区切り、apply()は配列でメソッドの引数を渡す
var obj1 = {name: "わたし",
showName: function(msg1, msg2) {console.log(this.name + msg1 + msg2);}};
var obj2 = {name: "ぼく"};obj1.showName.call(obj2, "こんにちは", "よろしくね");obj1.showName.apply(obj2, ["こんにちは", "よろしくね"]);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.

配列のような構造だがArrayオブジェクトではないオブジェクトから、Arrayオブジェクトが持つjoinメソッドを利用する例
var obj = {"0": "aaa","1": "bbb","2": "ccc",
length: 3};// Arrayオブジェクトのjoinメソッドを借りる
var str = Array.prototype.join.call(obj, "+");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.

イベント

88

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.

イベント

89

発生タイミング

input

文字が入力されたとき

keydown

キーが押されたとき

keypress

キーが押されたのち、離れたとき

keyup

キーが離れたとき

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.

イベント

90

発生タイミング

mousedown

ポインティングデバイスのボタンを押したとき

mouseup

ポインティングデバイスのボタンを離したとき

mousemove

カーソルが移動したとき

mouseover

カーソルが要素の上に乗ったとき

mouseout

カーソルが要素から外れたとき

mousewheel

マウスホイールを回転させたとき

scroll

ページがスクロールしたとき
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.

イベント

91

発生タイミングdrag

ドラッグしている間

dragstart

ドラッグが開始されたとき

dragend

ドラッグが終了したとき

dragenter

ドラッグ中の要素がドロップ可能領域に入ったとき

dragleave

ドラッグ中の要素がドロップ可能領域から外れたとき

dragover

ドラッグ中の要素がドロップ可能領域上にいるとき

drop

ドロップしたとき
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.

イベント

92

発生タイミング

touchstart

画面に指が触れたとき

touchmove

画面上で指を動かしている間

touchend

画面から指が離れたとき

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.

 <input>要素に付与すると、 submit時にチェックを行ってくれる
•
•
•
•
•

requiredpatternminmaxmaxlength

必須
正規表現
最小値
最大値
最長文字数

名前：<input type="text" required>

郵便番号：<input type="text" pattern="^[0-9]{3}-[0-9]{4}$">
年齢：<input type="number" min="18" max="99">
ID：<input type="text" maxlength="6">93

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.

invalidイベント
 バリデーション属性とinvalidイベントの組み合わせ<form>
郵便番号：<input id="zipcode" type="text" pattern="^[0-9]{3}-[0-9]{4}$"><input type="submit" value="送信"></form><script>
var zipcode = document.getElementById("zipcode");zipcode.addEventListener("invalid", changeStyle);function changeStyle(e) {e.target.style.color = "red";}</script>
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.

受験対策

95

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プロフェッショナル
認定試験レベル2攻略テキスト

96

コア・JavaScript
JavaScript

開眼！JavaScript

HTML5 API
HTML5 Web標準API バイブル

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.

https://babeljs.io/

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.

98

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.