LPI-Japan主催

Javaエンジニアのための
HTML5プロフェッショナル認定試験 レベル2
解説無料セミナー

2016年1月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.

アシアルは、「エンジニアリングでインターネットの成長を牽引する」という事業コンセプトのもと、HTML5・JavaScript等のWeb技術をベースとしたデベロッパー支援事業を行っています。

モバイルアプリ開発環境

2

UI/UX設計

システム構築・コンサル

セミナー・スクール

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エバンジェリスト• Java/C#を中心とした業務・制御系エンジニア出身• 著書：「スラスラわかるJavaScript」「Monacaで学ぶはじめてのプログラミング～モバイルアプリ入門編～」

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.

• 2014年10月正式勧告• リッチクライアント・アプリケーションのプラットフォーム
• マルチデバイス対応・マルチメディア対応• 広義ではCSS3やJavaScriptによる3Dグ
ラフィック、WebSocket、デバイスアク
セス、クライアントストレージ等も含む
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.

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

 試験の難易度を示す2種類のレベルがあり、段階的に受験します。
• Level1
マルチデバイスに対応した静的なWebコンテンツを HTML5を使ってデザイン、作成できるレベル• Level2
システム間連携や最新のマルチメディア術に対応したWebアプリケーションや動的

Webコンテンツの開発・設計ができるレベル

7

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)8★★★★★★ 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」を通して受験します。

9

問題数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について

10

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のはじまり• 当初はMocha、LiveScriptという名前だった• 開発元のNetscape社とSun社（現Oracle）の提携により、JavaScriptに改名される• 初期はWebページに簡単な動きを付けたり、フォーム入力を補助することが目的の簡易的言語だった

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.

JavaScript最新動向• Gmailなどのクラウドサービスの登場により、ブラウザ上で実現できることが増え、JavaScriptが脚光を浴びるようになる• 様々なJavaScript製フレームワークが台頭してきたことにより、大規模
なWebアプリケーションの構築が可能となった• 進化系として、サーバサイドプログラムの構築やスマートフォンアプリ
の制作にも用いられるケースが増えてきた

12

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日に承認
16

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が影響を受けている言語• コードの記述方法はJavaに似ている• 言語仕様として最も影響を受けているのは、SchemeとSelf

JavaとJavaScriptの主な違い

14

言語

型システム

オブジェクト指向分類

Java

静的型付け

クラスベース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.

JavaScriptのデータ型

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.

 JavaScriptは動的型付け言語• データの型は実行時に決定されるため、変数宣言時に型を限定しない
変数宣言の例

var 変数名;
実行時にデータ型が判定される

console.log(1 + 1);
console.log(1 + '1');
16

// 2
// 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.

 データ型一覧
型の分類

17

代表的な型

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

数値、文字列、論理値
null（値が存在しない）
undefined（値が定義されていない）

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

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

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.

 null … 値が存在しないことを意図的に示す値• getElementById()で取得しようとする要素がHTML文書内に存在しない場合などに、メソッドの戻り値として返却される

 undefined … 値がそもそも定義されていないことを示す値• 初期化されていない変数、定義されていないプロパティ、return文のない関数の戻り値などはすべてundefinedで表される

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.

 JavaScriptの等価演算子には二種類ある• 値が等しいかどうかのみを比較する緩やかな等価演算子• データの型まで含めて等しいかどうかを比較する厳密な等価演算子

19

演算子

説明

例

結果

==

緩やかな等価演算子

5 == '5'

true

===

厳密な等価演算子

5 === '5'

false

!=

緩やかな不等価演算子

5 != '5'

false

!==

厳密な不等価演算子

5 !== '5'

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.

 条件式における値の評価• 論理値以外の値をif文などの条件式として指定すると、以下のように
判定される
true

false

0以外の数値0

1文字以上の文字列

空文字（""）

オブジェクト（中身が空でも）

undefinednull

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.

 引数の省略チェックなどに用いられる
function check(x) {// 引数xが空だったらエラーにする
if(!x) {console.log("エラー：値が入っていません");
return;}// 以降、省略}

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.

 0や空文字もfalseとして判定されることに注意
function check(x) {// 引数xが空だったらエラーにする
if(!x) {console.log("エラー：値が入っていません");
return;}// 以降、省略}
check();
check(0);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.

オブジェクトの基本

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.

 プロパティとメソッド• オブジェクトは、複数のデータの集合体である• オブジェクト内のデータには、オブジェクトの属性値を保持する「プロパティ」と、何らかの操作を行う「メソッド」がある
オブジェクト

プロパティ

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.

 Objectオブジェクトはすべてのオブジェクトの親となっている
Object・toString()
・valueOf()
・hasOwnProperty()…

継承

String
（文字列）

25

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.

 オブジェクトの生成方法
var 変数名 = new オブジェクトの型名(引数);•Objectオブジェクトの生成は、オブジェクトリテラル{}で代用することが可能•

Arrayブジェクトの生成は、配列リテラル[]で代用することが可能オブジェクト生成の例
var list = new Array(1,2,3);

26

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

27

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.

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

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

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.

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

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

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.

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

var オブジェクト名 = {};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.

 プロパティへのアクセス• ドットを使用
変数名.プロパティ名• 角かっこを使用

変数名["プロパティ名"]

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.

 オブジェクトの生成とプロパティへのアクセス
var obj = {name: "生形"};// プロパティへのアクセス
console.log(obj.name);// 以下のように記述することも可能
var propertyName = "name"console.log(obj[propertyName]);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.

文字列

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.

文字列リテラルは、以下の二種類• シングルクォート・ダブルクォートのどちらでも可'こんにちは'"こんにちは"
文字列にはプリミティブ型とオブジェクト型の二種類がある• 文字列リテラルはプリミティブ型となる

var str1 = "こんにちは";// プリミティブ型
var str2 = new String("こんにちは"); // オブジェクト型
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.

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

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

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

・length・replace()・substr()…

36

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.

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

37

ラッパーオブジェクト

数値

Number

文字列

String

論理値

Boolean

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);A) 4
B) nullC) undefinedD) エラー38

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".length
ラッパーオブジェクト
プリミティブ型"hoge"

変換"hoge"

・length・replace()・substr()…
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.

問題：プリミティブ型とラッパーオブジェクトの比較
 以下の実行結果は？（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);
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.

問題：値の比較、参照の比較
 以下の実行結果は？（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);
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.

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

配列

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.

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

var 配列名 = [1, 2, 3];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 list = [];list[0] = "AAA";list[1] = "BBB";
list[2] = "CCC";

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.

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

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を返す

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.

関数

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.

関数もオブジェクトの一種• 関数はFunctionという名前のオブジェクトである• オブジェクトの一種なので、変数の値として代入することが可能。
オブジェクトのメソッドは、Fuctionオブジェクトをプロパティに代入することで実現している

var obj = {method1: function (message) {alert(message);}};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.

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

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.

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

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.

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

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.

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

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.

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

55

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);
• 引数の数を動的に変更することができる
56

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キーワードを省略できる
57

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.

変数のスコープ

58

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のスコープ}}• スコープは関数単位で作られる
59

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;}}
func1();
console.log(a); // 10
console.log(b); // ReferenceError
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.

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

varを付け忘れているので、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.

 use strict（厳格モード）を宣言すると、varの付け忘れなどの、推奨されない記述に対して警告が表示される
function func() {"use strict";b = 20; // エラー}

62

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>

63

グローバルオブジェクト
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オブジェクト

64

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>

65

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

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 x = 10; // グローバルスコープ
function func1() {var x = 20; // ローカルスコープ
console.log(x); // 20}• 上記の場合、グローバルスコープとローカルスコープに同名の変数が宣言されている。こういった場合はローカルスコープの変数が優先される
67

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);A) エラーB) undefinedC) nullD) "hoge"
68

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にはブロックスコープがない• スコープが発生するのは関数内のみ• ただし、ES6ではブロックスコープを有効にするletキーワードが追加されている

if(true) {let a = "hoge";}
console.log(a); // a is not defined69

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();

70A) エラーB) undefinedC) "global"
D) "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();
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.

prototype

72

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

73

プロトタイプベース

オブジェクトオブジェクト(インスタンス)(インスタンス)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 list1 = new Array(10, 20, 30);
var list2 = new Array('A', 'B', 'C');

10
[0]

20

30

[1]

[2]
インスタンス

Array
プロトタイプオブジェクト

74

'A'
[0]

'B'

'C'

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

 プロトタイプオブジェクト＝関数• 基礎となるオブジェクト（クラスベース言語におけるクラスの役割）は、
関数オブジェクトである

var Dog = function() { };• プロトタイプオブジェクトを元にインスタンスを生成するには、new
演算子を使うvar dog1 = new Dog();
75

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("ポチ");
76

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.

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

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

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

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

78

暗黙的処理
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
プロパティ

79

オブジェクト(インスタンス)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("シロ");
80

Dog
name

dog1
name: ポチshow()

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("シロ");
81

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 = ['a', 'b', 'c'];var str = list.join('+');

console.log(str); //a+b+c[0]: a[1]: bjoinメソッド[2]: cpopメソッド

sortメソッド…

__proto__参照

prototype82

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.

継承

83

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

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.

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

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

86

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.

親オブジェクト

87

子オブジェクト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() { alert(this.x); };// 子
var Child = function() {this.y = 20;
};
88

// 継承
Child.prototype = new Parent();// メソッドのオーバーライド
Child.prototype.show =function() {alert(this.x + this.y);};var child = new Child();
child.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.

ParentChild

xプロパティ

newChildインスタンス

newyプロパティ

yプロパティ

①__proto__showメソッド

Parentインスタンス③

prototype➁でshowメソッドがみつかったので、③まで見ない89xプロパティ

参照

showメソッド__proto__➁参照
オーバーライドしたshowメソッドが先にみつかる

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.

 for/in文• すべてのユーザ定義プロパティを走査する• プロトタイプチェーンを遡って走査される

var child = new Child();for(var key in child){
console.log(key + ':' + child[key]);}90

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.

 hasOwnProperty• 自身が持つプロパティかどうかを調べ、論理値を返す

var child = new Child();for(var key in child){if(child.hasOwnProperty(key)) {console.log(key + ':' + child[key]);}}91

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内に定義される

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

参照も容易

92

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.

受験対策

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.

レベル２対策本
HTML5プロフェッショナル
認定試験レベル2攻略テキスト

94

コア・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/

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.

Open the Future with HTML5.

96

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.