HTML5プロフェッショナル認定試験
レベル2ポイント解説無料セミナー
株式会社クリーク・アンド・リバー社 認定講師
高井 歩

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

本日の内容• 試験概要• JavaScript基本編• 出題範囲• おやくそく• 学習方法• 変数の基本• JavaScript対策• 関数の基本• JavaScript応用編• 変数のスコープ• オブジェクト
• クロージャ2

The HTML5 Logo is licensed under Creative Commons Attribution 3.0. Unported by the W3C; http://creativecommons.org/licenses/by/3.0/© LPI-Japan 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/© LPI-Japan 2014. All rights reserved.

試験概要
HTML5プロフェッショナル認定試験
レベル２
所要時間：90分（アンケート等の時間を含む）
試験問題数：40〜45問
受験料：\15,000 （税別）
認定条件：HTML5 レベル2試験に合格し、かつ有意なHTML5レベル1認定を保有していること。
認定の有意性の期限：5年間

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

試験概要
認定証

認定カード

認定者ロゴ（名刺用）
認定者ロゴは、認定後すぐに名刺等でご利用していただけます。
認定証・認定カードは、認定されてから2週間程度で5ご登録されたご住所にお届けしています。
The HTML5 Logo is licensed under Creative Commons Attribution 3.0. Unported by the W3C; http://creativecommons.org/licenses/by/3.0/© LPI-Japan 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/© LPI-Japan 2014. All rights reserved.

出題範囲
重要度

知識問題

コードリーティング

記述問題

問題
JavaScript
JavaScript文法

10

○

○

○

イベント

8

○

○

○

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

6

○

○

ウィンドウオブジェクト

8

○

○

Selectors API

4

○

○

テスト・デバッグ

2○

WebブラウザにおけるJavaScript API

7

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

出題範囲
重要度

知識問題

コードリーティング

記述問題

問題
グラフィックス
Canvas(2D)

6

○

○

SVG

1

○

2

○

○

2

○

○

3

○

○

マルチメディア
video要素,audio要素
オフラインアプリケーションAPI

アプリケーションキャッシュの制御
Session History and Navigation
History API

8

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

出題範囲
重要度

知識問題

コードリーティング

記述問題

問題
表示制御
Page Visibility

2○

Timing control for script-based
animations

2

○

○

Web Storage

4

○

○

Indexed Database API

2

○

○

File API

2

○

○

ストレージ

9

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

出題範囲
重要度

知識問題

コードリーティング

記述問題

問題
通信
WebSocket

2○

XMLHttpRequest

4

○

2

○

4

○

Navigation Timing

4○

High Resolution Time

1

○

○

Geolocation API
Geolocation APIの基本と位置情報の取得
Web Workers

並列処理の記述○パフォーマンス

10

The HTML5 Logo is licensed under Creative Commons Attribution 3.0. Unported by the W3C; http://creativecommons.org/licenses/by/3.0/© LPI-Japan 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/© LPI-Japan 2014. All rights reserved.

学習方法 (個人の感想です)• 試験範囲をリストアップ• テキストエディタやアウトラインエディタで1行1用語• 重複や似た項目が分散しているのを整理• 自分の知識、経験を棚卸し• 全ての用語について、簡単な解説が出来るか• あやふやな点については書籍、Webで調査• エディタの項目に追記
12

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

サンプル• JavaScript,Canvas,SVG,Multimedia APIなどについてはWeb
検索などで一通りサンプルを作成してみる。
• JavaScriptは基本的な文法を理解しているだけでは足りない• デベロッパーツール等で動作を解析してみる• JavaScriptの仕組みについての参考書を確認しておく• 重要度が低い項目(マイナーな機能)については、ブラウザ毎の対応状況も違うため、サンプルよりも用語と解説重視?
13

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

用語• JavaScriptはプログラム言語としては、少ない仕組みでいろ
いろな応用が出来るように作られています。
• そのため、実体としては同じ仕組みに対して、用途や使用されるタイミングなどによって説明のために別の名称が付けられていることがあります。
• 混乱しがちですが、仕組みと用途をきちんと整理して覚えるようにしてください。
14

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

参考書籍

15

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

付録:JavaScriptデバッガ
参考サイト
http://news.mynavi.jp/column/wc/011/
Chromehttp://www.buildinsider.net/web/chromedevtools/01#page-5
Firefoxhttps://developer.mozilla.org/ja/docs/Tools/Debugger
IE
http://d.hatena.ne.jp/replication/20130311/1363012914
Safari(英語)https://developer.apple.com/library/safari/documentation/AppleApplications/Conceptual/Safari̲Developer̲Guide/
Debugger/Debugger.html#//apple̲ref/doc/uid/TP40007874-CH5-SW1
16

The HTML5 Logo is licensed under Creative Commons Attribution 3.0. Unported by the W3C; http://creativecommons.org/licenses/by/3.0/© LPI-Japan 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/© LPI-Japan 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/© LPI-Japan 2014. All rights reserved.

scriptタグ<script type="text/javascript"></script>

HTML5では、<script ></script>

場合、<script src=“外部ファイル”>

type=“text/javascript”
を省略できます。

</script><script src=“外部ファイル” />19

JavaScriptを記述する

終了タグの省略はできません

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

document.write
Webブラウザ上のJavaScriptでは、

document.write(‘出力したい文字列’);と記述すると、documnt.writeを含む<script>タグの直後に’出力したい文字列’が書き出されます。
書き出された内容はHTMLの一部として処理されます。
※文字列以外の値は、自動的に文字列に変換されます。
20

The HTML5 Logo is licensed under Creative Commons Attribution 3.0. Unported by the W3C; http://creativecommons.org/licenses/by/3.0/© LPI-Japan 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/© LPI-Japan 2014. All rights reserved.

変数の基本<script type="text/javascript">
var a = 10;
var b = 20;
var c = 'JavaScript';
document.write(a+'<br />');
document.write(b+'<br />');
document.write(c+'<br />');</script>
22

変数名

値

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

変数の基本<script type="text/javascript">
var a = 10;
var b = 20;
var c = 'JavaScript';
document.write(a+'<br />');
document.write(b+'<br />');
document.write(c+'<br />');</script>
23

変数名
a

値
10

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

変数の基本<script type="text/javascript">
var a = 10;
var b = 20;
var c = 'JavaScript';
document.write(a+'<br />');
document.write(b+'<br />');
document.write(c+'<br />');</script>
24

変数名

値

a

10

b

20

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

変数の基本<script type="text/javascript">
var a = 10;
var b = 20;
var c = 'JavaScript';
document.write(a+'<br />');
document.write(b+'<br />');
document.write(c+'<br />');</script>
25

変数名

値

a

10

b

20

c

‘JavaScript’

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

変数の基本<script type="text/javascript">
var a = 10;
var b = 20;
var c = 'JavaScript';
document.write(a+'<br />');
document.write(b+'<br />');
document.write(c+'<br />');</script>
26

変数名

値

a

10

b

20

c

‘JavaScript’

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

変数の基本<script type="text/javascript">
var a = 10;
var b = 20;
var c = 'JavaScript';
document.write(a+'<br />');
document.write(b+'<br />');
document.write(c+'<br />');</script>
27

変数名

値

a

10

b

20

c

‘JavaScript’

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

変数の基本<script type="text/javascript">
var a = 10;
var b = 20;
var c = 'JavaScript';
document.write(a+'<br />');
document.write(b+'<br />');
document.write(c+'<br />');</script>
28

変数名

値

a

10

b

20

c

‘JavaScript’

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

変数の上書き<script type="text/javascript">
var a = 10;
var b = 20;
b = 'JavaScript';
document.write(a+'<br />');
document.write(b+'<br />');</script>
29

変数名

値

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

変数の上書き<script type="text/javascript">
var a = 10;
var b = 20;
b = 'JavaScript';
document.write(a+'<br />');
document.write(b+'<br />');</script>
30

変数名
a

値
10

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

変数の上書き<script type="text/javascript">
var a = 10;
var b = 20;
b = 'JavaScript';
document.write(a+'<br />');
document.write(b+'<br />');</script>
31

変数名

値

a

10

b

20

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

変数の上書き<script type="text/javascript">
var a = 10;
var b = 20;
b = 'JavaScript';
document.write(a+'<br />');
document.write(b+'<br />');</script>
32

変数名

値

a

10

b

‘JavaScript’

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

undefined<script type="text/javascript">
var a;
document.write(a);</script>

33

変数名
a

値
undefined

The HTML5 Logo is licensed under Creative Commons Attribution 3.0. Unported by the W3C; http://creativecommons.org/licenses/by/3.0/© LPI-Japan 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/© LPI-Japan 2014. All rights reserved.

関数の基本<script type="text/javascript">function add (a,b) {var c = a+b;
return c;}var d = add(3,4);
document.write(d+'<br />');
document.write(add(10,20));</script>
35

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

関数の基本<script type="text/javascript">function add (a,b) {関数の定義
var c = a+b;
return c;}関数のvar d = add(3,4);
呼び出し
document.write(d+'<br />');
document.write(add(10,20));</script>
36

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

関数の定義function add (a,b){
var c = a+b;
return c;
}

37

関数名
add
引数リスト
(a,b)
return c; 戻り値

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

関数の呼び出し関数の呼び出しは、関数の戻り値で置き替えられます

var d = add(3,4);

document.write(add(10,20));

var d = 7;

document.write(30);※関数にreturn文が無い場合、戻り値はundefinedになります38

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

問題<script type="text/javascript">function add (a,b) {var c = a+b;
return c;}var d = add(add(1,2),3);
document.write(d);</script>39

このスクリプトを実行した結果、表示されるのは?
A. 1
B. 2
C. 3
D. 6

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

無名関数
function add (a,b) {var c = a+b;
return c;}
var add = function(a,b) {var c = a+b;
return c;
}
40

結果は同じ
変数名

値

add

関数 (a,b){var c = a+b;
return c;}

関数本体には名前が付いていません。
The HTML5 Logo is licensed under Creative Commons Attribution 3.0. Unported by the W3C; http://creativecommons.org/licenses/by/3.0/© LPI-Japan 2014. All rights reserved.

無名関数• JavaScriptでは、関数も値の一種。
• 文字列や数値と同じように、変数に代入できます。
• 関数そのものには名前は付いていません。
• 変数に代入 関数名を付ける• 変数に代入されていない、名前の無い関数のことを、無名関数または匿名関数と呼びます。
• 代入した変数名と()を使って関数を呼び出せます。
41

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

無名関数
var add = function(a,b) {var c = a+b;
return c;}
var a = add;
document.write(a(5,6));42関数の代入された変数から、他の変数へ代入しても、同じように関数を呼び出せます。

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

無名関数
var d = (function (a,b) {var c = a+b;
return c;})(5,6);
document.write(d);43無名関数は、変数に代入しなくても、(無名関数の定義)(引数)という形で直接実行できます。
関数の名前を変数表に登録せずに関数を実行できるので、JavaScriptプログラムでは良く使用されます。

The HTML5 Logo is licensed under Creative Commons Attribution 3.0. Unported by the W3C; http://creativecommons.org/licenses/by/3.0/© LPI-Japan 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/© LPI-Japan 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/© LPI-Japan 2014. All rights reserved.

変数のスコープ<script type="text/javascript">function add (a,b) {var c = a+b;
return c;}var d = add(3,4);
document.write(d);document.write(add(10,20));</script>
46

変数名

値

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

変数のスコープ<script type="text/javascript">function add (a,b) {var c = a+b;
return c;}var d = add(3,4);
document.write(d);document.write(add(10,20));</script>
47

変数名

値

add

関数 (a,b){var c = a+b;
return c;}

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

変数のスコープ<script type="text/javascript">function add (a,b) {var c = a+b;
return c;}var d = add(3,4);
document.write(d);document.write(add(10,20));</script>
48

変数名

値

add

関数 (a,b){var c = a+b;
return c;}

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

変数のスコープ<script type="text/javascript">function add (a,b) {var c = a+b;関数が呼び出さ
return c;
れると、その関数用の新しい表が用}
var d = add(3,4); 意されます
document.write(d);document.write(add(10,20));</script>
49

変数名
変数名
add
a
b

値
値
関数 (a,b){3
var c = a+b;
4 c;
return}The HTML5 Logo is licensed under Creative Commons Attribution 3.0. Unported by the W3C; http://creativecommons.org/licenses/by/3.0/© LPI-Japan 2014. All rights reserved.

変数のスコープ<script type="text/javascript">function add (a,b) {var c = a+b;
return c;}var d = add(3,4);
document.write(d);document.write(add(10,20));</script>
50

変数名
変数名
add
a
b
c

値
値
関数 (a,b){3
var c = a+b;
4 c;
return}7

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

変数のスコープ<script type="text/javascript">function add (a,b) {var c = a+b;
return c;}var d = add(3,4);
document.write(d);document.write(add(10,20));</script>
51

変数名
変数名
add
a
b
c

値
値
関数 (a,b){3
var c = a+b;
4 c;
return}7

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

変数のスコープ<script type="text/javascript">function add (a,b) {var c = a+b;関数の処理が終わreturn c;
ると、関数用の表}
7 は破棄されます。
var d = add(3,4);
document.write(d);document.write(add(10,20));</script>
52

変数名

値

add

関数 (a,b){var c = a+b;
return c;
}

変数名

値

a

3

b

4

c

7

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

変数のスコープ<script type="text/javascript">function add (a,b) {var c = a+b;関数が呼び出さ
return c;
れると、その関数用の新しい表が用}
var d = add(3,4); 意されます
document.write(d);document.write(add(10,20));</script>
53

変数名
変数名
add
a
b

値
値
関数 (a,b){10
var c = a+b;
20 c;
return}The HTML5 Logo is licensed under Creative Commons Attribution 3.0. Unported by the W3C; http://creativecommons.org/licenses/by/3.0/© LPI-Japan 2014. All rights reserved.

変数のスコープ<script type="text/javascript">function add (a,b) {var c = a+b;
return c;}var d = add(3,4);
document.write(d);document.write(add(10,20));</script>
54

変数名
変数名
add
a
b
c

値
値
関数 (a,b){10
var c = a+b;
20 c;
return}30

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

変数のスコープ<script type="text/javascript">function add (a,b) {var c = a+b;
return c;}var d = add(3,4);
document.write(d);document.write(add(10,20));</script>
55

変数名
変数名
add
a
b
c

値
値
関数 (a,b){10
var c = a+b;
20 c;
return}30

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

変数のスコープ<script type="text/javascript">function add (a,b) {var c = a+b;関数の処理が終わreturn c;
ると、関数用の表は破棄されます。
}
var d = add(3,4);30
document.write(d);document.write(add(10,20));</script>
56

変数名

値

add

関数 (a,b){var c = a+b;
return c;
}

変数名

値

a

10

b

20

c

30

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

変数のスコープ

ブラウザで確認57

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

変数のスコープ<script type="text/javascript">
var b = 10;
function add_b (a) {var c = a+b;
return c;}
document.write(add_b(5));</script>
58

変数名

値

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

変数のスコープ<script type="text/javascript">
var b = 10;
function add_b (a) {var c = a+b;
return c;}
document.write(add_b(5));</script>
59

変数名

値

b

10

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

変数のスコープ<script type="text/javascript">
var b = 10;
function add_b (a) {var c = a+b;
return c;}
document.write(add_b(5));</script>
60

変数名

値

b

10

add_b

関数 (a){
var c = a+b;
return c;}

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

変数のスコープ<script type="text/javascript">
var b = 10;
function add_b (a) {var c = a+b;
return c;}
document.write(add_b(5));</script>
61

変数名

値

b

10

add_b

関数 (a){
var c = a+b;
return c;}

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

変数のスコープ<script type="text/javascript">
var b = 10;
function add_b (a) {var c = a+b;
return c;}
document.write(add_b(5));</script>
62

変数名

値

b

10

add
変数名 関数 (a,b){値
var c = a+b;a5
return c;}

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

変数のスコープ<script type="text/javascript">
var b = 10;
function add_b (a) {var c = a+b;
return c;}
document.write(add_b(5));</script>
63

変数名

値

b

10

add
変数名 関数 (a,b){値
var c = a+b;a5
return c;c }15

自分の表に変数が無ければ、親の表を探します

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

変数のスコープ<script type="text/javascript">
var b = 10;
function add_b (a) {var c = a+b;
return c;}
document.write(add_b(5));</script>64

変数bが使える範囲

変数a,cが使える
範囲

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

スコープチェーン
全体
変数名

値
変数名
10

b
add

関数 (a,b){avar c = a+b;b
return c;
}

関数1
値
変数名
5
c
15
d

関数2
値
変数名
5
e
15
f

関数3
値
5

…….

15

関数の中から関数を呼び出すと、鎖のように変数の表がつながっていきます。変数を参照すると、子から親へ順に変数名を検索していき、もしも最後まで見つからなければエラーになります。
65

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

変数の宣言<script type="text/javascript">function add_b (a) {b = 20;var c = a+b;
return c;}
document.write(add_b(5)+'<br />');
document.write(b);</script>
66

全体
変数名
add_b

値
関数 (a){
b = 20;var c = a+b;
return c;}

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

変数の宣言<script type="text/javascript">function add_b (a) {b = 20;var c = a+b;
return c;}
document.write(add_b(5)+'<br />');
document.write(b);</script>
67

変数名
add_b

値
関数 (a){
b = 20;var c = a+b;
return c;
}

変数名

値

a

5

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

変数の宣言<script type="text/javascript">function add_b (a) {b = 20;var c = a+b;
return c;}
document.write(add_b(5)+'<br />');
document.write(b);</script>
68

変数名
add_b

値
関数 (a){
b = 20;var c = a+b;
return c;
}

b

20

変数名

値

a

5

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

変数の宣言<script type="text/javascript">function add_b (a) {b = 20;var c = a+b;
return c;}
document.write(add_b(5)+'<br />');
document.write(b);</script>
69

変数名
add_b

値
関数 (a){
b = 20;var c = a+b;
return c;
}

b

20

変数名

値

a

5

c

25

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

変数の宣言var 付きの変数宣言は実行した箇所のローカル変数表に登録var が付かない変数宣言は全体(グローバル)な変数表に登録※グローバルな変数名表を乱用すると、別のプログラムの変数を上書きする可能性があるため推奨できません。

70

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

問題<script type=“text/javascript">
var b = 10;
function set_b (a) {b = a;}
set_b(5);document.write(b);</script>71

このスクリプトを実行した結果、表示されるのは?
A. 5
B. 10
C. undefined
D. null

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

変数のスコープ

ブラウザで確認72

The HTML5 Logo is licensed under Creative Commons Attribution 3.0. Unported by the W3C; http://creativecommons.org/licenses/by/3.0/© LPI-Japan 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/© LPI-Japan 2014. All rights reserved.

オブジェクト指向プログラム• JavaScriptはオブジェクト指向プログラム言語のひとつです。
• オブジェクト指向プログラミングとは、プログラムで扱う対象を”物(オブジェクト)”に見立ててプログラムを作成する手法です。
• プログラムで扱う対象とは、必ずしも実体を共なうものである必要性はありません。時間や数値など概念的なものも、オブジェクトとして扱います。
• JavaScriptでは全ての値がオブジェクトとして扱えるようになっています。
• これにはちょっとしたトリックがありますが、後で解説します。

74

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

オブジェクト
プログラム
変数

変数

関数

関数
関数
関数

変数
変数

プログラム
関連性の強いものをグループにする

オブジェクト
プロパティ

オブジェクト

メソッド

プロパティ

メソッド

プロパティ
メソッド

オブジェクト
メソッド
プロパティ

オブジェクトとは、変数と関数をグループにしてプログラムの構造をわかりやすくする仕組み
75

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

オブジェクトリテラル<script type="text/javascript">
var obj = { a : 1 , ‘b’ : 2 , 3 : ‘A’ };document.write(obj.a+’<br />’);
document.write(obj.b+’<br />’);
document.write(obj[3]);</script>

76

変数名

値

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

オブジェクトリテラル<script type="text/javascript">
var obj = { a : 1 , ‘b’ : 2 , 3 : ‘A’ };document.write(obj.a+’<br />’);
document.write(obj.b+’<br />’);
document.write(obj[3]);</script>

77

変数名

値

obj

オブジェクト
プロパティ名

値

a

1

‘b’

2

3

‘A’

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

プロパティアクセス
<script type="text/javascript">
var obj = { a : 1 , ‘b’ : 2 , 3 : ‘A’ };document.write(obj.a+’<br />’);
document.write(obj.b+’<br />’);
document.write(obj[3]);</script>

78

変数名

値

obj

オブジェクト
プロパティ名

値

a

1

‘b’

2

3

‘A’

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

プロパティアクセス
<script type="text/javascript">
var obj = { a : 1 , ‘b’ : 2 , 3 : ‘A’ };document.write(obj.a+’<br />’);
document.write(obj.b+’<br />’);
document.write(obj[3]);</script>

79

変数名

値

obj

オブジェクト
プロパティ名

値

a

1

‘b’

2

3

‘A’

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

プロパティアクセス
<script type="text/javascript">
var obj = { a : 1 , ‘b’ : 2 , 3 : ‘A’ };document.write(obj.a+’<br />’);
document.write(obj.b+’<br />’);
document.write(obj[3]);</script>

80

変数名

値

obj

オブジェクト
プロパティ名

値

a

1

‘b’

2

3

‘A’

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

プロパティアクセス
<script type="text/javascript">
var obj = { a : 1 , ‘b’ : 2 , 3 : ‘A’ };document.write(obj.a+’<br />’);
document.write(obj.b+’<br />’);
document.write(obj[3]);</script>

81

変数名

値

obj

オブジェクト
プロパティ名

値

a

1

‘b’

2

3

‘A’

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

プロパティアクセス
<script type="text/javascript">
var obj = { };obj.a = 1;
obj[‘b’] = 2;
obj[3] = ‘A’;</script>

82

変数名

値

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

プロパティアクセス
<script type="text/javascript">
var obj = { };obj.a = 1;
obj[‘b’] = 2;
obj[3] = ‘A’;</script>

83

変数名

値

obj

オブジェクト
プロパティ名

値

a

1

‘b’

2

3

‘A’

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

メソッド<script type="text/javascript">
var obj = { add : function (a,b) {return a+b;
} };document.write( obj.add(3,4) );</script>

84

変数名

値

obj

オブジェクト
プロパ
ティ名

値

add

function (a,b){
return a+b;}

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

this<script type=“text/javascript">function showThis () {document.write(this+’<br />’);}
showThis();var obj = { ‘showThis’:showThis}
obj.showThis();</script>
85

JavaScriptには、thisという読取りしかできない(代入できない)変数のようなものがあります。thisは厳
密には変数やプロパティ
ではありません。

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

this<script type=“text/javascript">function showThis () {document.write(this+’<br />’);}
showThis();var obj = { ‘showThis’:showThis}
obj.showThis();</script>86

オブジェクトが指定されていない場合はthisはwindowを指します

オブジェクトが指定された場合はthisはオブジェク
トを指しますThe HTML5 Logo is licensed under Creative Commons Attribution 3.0. Unported by the W3C; http://creativecommons.org/licenses/by/3.0/© LPI-Japan 2014. All rights reserved.

グローバル オブジェクトの例
オブジェクト名

87

用途/機能

Array

配列を管理する。要素の追加、削除や要素数の取得など

Boolean

論理値(true,false)のラッパーオブジェクト

Date

日付、日時の管理。現在時刻の取得、表示用の整形など

Error

プログラムでエラーが発生すると生成。エラーの内容。

JSON

JSON形式データの管理。

Math

四則演算など基礎的な計算以外の演算。三角関数など

Number

数値のラッパーオブジェクト

Object

全てのオブジェクトの元になるオブジェクト

String

文字列のラッパーオブジェクト
The HTML5 Logo is licensed under Creative Commons Attribution 3.0. Unported by the W3C; http://creativecommons.org/licenses/by/3.0/© LPI-Japan 2014. All rights reserved.

Arrayオブジェクト<script type="text/javascript">
var array = new Array('HTML5');
document.write( array.length+'<br />' );array.push('JavaScript');
document.write( array.length+'<br />' );</script>
88

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

Arrayオブジェクト<script type="text/javascript">
var array = new Array('HTML5');
document.write( array.length+'<br />' );array.push('JavaScript');
グローバルオブジェクトから新しいオブジェクトを
document.write( array.length+'<br/>' );
作る場合はnewを付けます</script>
89

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

Arrayオブジェクト<script type="text/javascript">
var array = new Array('HTML5');
document.write( array.length+'<br />' );array.push('JavaScript');
document.write( array.length+'<br />' );</script>

90

変数名

値

array

オブジェクト
プロパティ

値0‘HTML5’length1__proto__Array

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

Arrayオブジェクト<script type="text/javascript">
var array = new Array('HTML5');
document.write( array.length+'<br />' );array.push('JavaScript');
document.write( array.length+'<br />' );</script>

91

変数名

値

array

オブジェクト
プロパティ

値0‘HTML5’length1__proto__Array

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

Arrayオブジェクト
pushメソッドは配変数名

値

列の末尾に要素をarray

オブジェクト<script type="text/javascript">
追加しますvar array = new Array('HTML5');
document.write( array.length+'<br />' );array.push('JavaScript');
document.write( array.length+'<br />' );</script>

92

プロパティ

値

0

‘HTML5’

1‘JavaScript’length2__proto__Array

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

Arrayオブジェクト<script type="text/javascript">
var array = new Array('HTML5');
document.write( array.length+'<br />' );array.push('JavaScript');
document.write( array.length+'<br />' );</script>

93

変数名

値

array

オブジェクト
プロパティ

値0‘HTML5’

1‘JavaScript’length2__proto__Array

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

コンストラクタ関数<script type="text/javascript">function Item(name,price) {this.name = name;this.price = price;this.getTaxIncluded = function() {return this.price * 1.08;}}
var item = new Item(‘apple’,100);
document.write( item.name);
document.write(’/price:¥’+item.getTaxIncluded());</script>
94

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

new
new
thisに空のオブジェクトをセットする
コンストラクタ関数を呼び出す
コンストラクタ関数
thisに対してプロパティ、メソッドをセットする

thisが参照しているオブジェクトを戻り値にする

95

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

コンストラクタ関数<script type="text/javascript">function Item(name,price) {this.name = name;this.price = price;}
var item = new Item(‘apple’,100);</script>

変数名

値

this
windowオブジェクト

96

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

コンストラクタ関数<script type="text/javascript">function Item(name,price) {this.name = name;this.price = price;}
var item = new Item(‘apple’,100);</script>

変数名

値

Item

function Item(name,price) {this.name = name;this.price = price;}

thiswindowオブジェクト

97

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

コンストラクタ関数<script type="text/javascript">function Item(name,price) {this.name = name;this.price = price;}
var item = new Item(‘apple’,100);</script>

this

98

プロパティ

値

変数名

値

Item

function Item(name,price) {this.name = name;this.price = price;}

新しい空のオブジェクト

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

コンストラクタ関数<script type="text/javascript">function Item(name,price) {this.name = name;this.price = price;}
var item = new Item(‘apple’,100);</script>

this

99

プロパティ

値

name

‘apple’

変数名

値

Item

function Item(name,price) {this.name = name;this.price = price;}

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

コンストラクタ関数<script type="text/javascript">function Item(name,price) {this.name = name;this.price = price;}
var item = new Item(‘apple’,100);</script>

this

100

プロパティ

値

name

‘apple’

price

100

変数名

値

Item

function Item(name,price) {this.name = name;this.price = price;}

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

コンストラクタ関数<script type="text/javascript">function Item(name,price) {this.name = name;this.price = price;}
var item = new Item(‘apple’,100);</script>

this
windowオブジェクト

101

変数名

値

Item

function Item(name,price) {this.name = name;this.price = price;}item
コンストラクタ関数から出ると元に戻る

プロパティ

値

name

‘apple’

price

100

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

関数オブジェクト• Numberコンストラクタ関数のリフ<script type=“text/javascript”>
ァレンスを見ると、
document.write(Number.MAX_VALUE);
MAX_VALUE,MIN_VALUEというdocument.write(‘<br />’);
document.write(Number.MIN_VALUE);
プロパティがあります。
</script>• 実は、JavaScriptでは関数もオブジェクトなのです。つまり、

308

最大値(MAX_VALUE) 約1.79×10

Numberという変数の値は、関数

最小の絶対値(MIN_VALUE) 約5×10-324であり、かつオブジェクトでもあ
ります

102

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

JavaScriptの値
文字列
プリミティブ値

数値
論理値
null

値

undefined
Function
オブジェクト型

Date
Stringなどなど….

103

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

オブジェクト型とプリミティブ型• プリミティブ型(基本データ型)• 数値(number)、文字列(string)、真偽値(boolean)、null、undefined• オブジェクト(object)型• 上記プリミティブ型以外• プリミティブ型には、対応するオブジェクト(ラッパーオブジェクト)がある• Number,String,Boolean,null,undefined• 実際にプログラムで使用されるのは、NumberとStringぐらい。
• Boolean,null,undefinedは「全ての値をオブジェクトとして扱える」という仕組みの整合性のために用意されている
104

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

オブジェクト型とプリミティブ型• オブジェクトはメモリも(比較的)必要だし、処理が(比較的)遅い• 頻繁につかうものは特別扱いしよう• プリミティブ型• プリミティブ型の処理は軽量で高速な分、基本的なことしかできない• でも色々な機能を追加したい• 必要な時だけオブジェクト化(ラッピング)
105

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

オブジェクト型とプリミティブ型• ‘Text’はプリミティブ型• new String(‘Text’)は• オブジェクト型• String(‘Text’)は• プリミティブ型• new String(‘Text’).slice(2)というメソッドの戻り値は…
• ‘xt’• プリミティブ型

106

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

コンストラクタ関数の戻り値• new String(‘Text’)とString(‘Text’)、同じ関数なのに、newの有無で戻り値が違うのはどのような仕組みによるものでしょうか。
• JavaScriptには、newを使って関数を呼び出すと、その関数の戻り値によって結果が変わるというルールがあります。

107

関数の戻り値

newの結果undefined (関数にreturnが無い)

this

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

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

問題
正しいデータ型は?
<script type=“text/javascript">A)
var a = Number(‘10’);
変数名
値
var b = new Number(20);
プリミティブa</script>
オブジェクト
b
B)

108

C)

変数名

変数名

値

a

プリミティブa

オブジェクトb

プリミティブb

プリミティブThe HTML5 Logo is licensed under Creative Commons Attribution 3.0. Unported by the W3C; http://creativecommons.org/licenses/by/3.0/© LPI-Japan 2014. All rights reserved.

typeof演算子<script type=“text/javascript">
var a = Number(10);var b = new Number(20);document.write(typeof a+’<br />’);
document.write(typeof b+’<br />’);</script>

109

The HTML5 Logo is licensed under Creative Commons Attribution 3.0. Unported by the W3C; http://creativecommons.org/licenses/by/3.0/© LPI-Japan 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/© LPI-Japan 2014. All rights reserved.

クロージャ
function adder(num) {return function ( a ) {return num + a;};}
var add_2 = adder(2);document.write( add_2(5)+'<br />' );var add_10 = adder(10);document.write( add_10(5) );
111

変数名

値

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

クロージャ
function adder(num) {return function ( a ) {return num + a;};}
var add_2 = adder(2);document.write( add_2(5)+'<br />' );var add_10 = adder(10);document.write( add_10(5) );
112

変数名

値

adder

function adder(num) {return function ( a ) {return num + a;}}

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

クロージャ
変数名
function adder(num) {変数名
値
return function ( a ) {
adder
num
return num + a;
2};}
var add_2 = adder(2);document.write( add_2(5)+'<br />' );var add_10 = adder(10);document.write( add_10(5) );113

値function adder(num) {return function ( a ) {return num + a;}}

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

クロージャ
変数名
function adder(num) {adder
return function ( a ) {return num + a;
};
}
add_2
var add_2 = adder(2);document.write( add_2(5)+'<br />' );var add_10 = adder(10);document.write( add_10(5) );

114

値
変数名

function adder(num) {
num
…省略…

値

2

}
function ( a ) {return num + a;}

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

クロージャ
変数名
値
function adder(num) {変数名
関数の中で変数
adder
function adder(num) {return function ( a ) {num
return num + a;
numが参照されてい…省略…
};
るので表を削除でき}}
add_2 function ( a ) {var add_2 = adder(2); ません
return num + a;
document.write( add_2(5)+'<br />' );}var add_10 = adder(10);document.write( add_10(5) );

115

値

2

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

クロージャ
変数名
function adder(num) {adder
return function ( a ) {return num + a;
};
}
add_2
var add_2 = adder(2);document.write( add_2(5)+'<br />' );var add_10 = adder(10);document.write( add_10(5) );

116

値
変数名

function adder(num) {
num
…省略…

値

2

}
function ( a ) {return num + a;
}

変数名

値

a

5

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

クロージャ
変数名
function adder(num) {adder
return function ( a ) {return num + a;
};
}
add_2
var add_2 = adder(2);document.write( add_2(5)+'<br />' );var add_10 = adder(10);document.write( add_10(5) );

117

値
変数名

function adder(num) {
num
…省略…

値

2

}
function ( a ) {return num + a;
}

変数名

値

a

5

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

クロージャ
変数名
function adder(num) {adder
return function ( a ) {変数名
値
return num + a;
num
10
};
}
add_2
var add_2 = adder(2);document.write( add_2(5)+'<br />' );var add_10 = adder(10);document.write( add_10(5) );

118

値
変数名

function adder(num) {
num
…省略…

値

2

}
function ( a ) {return num + a;}

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

クロージャ
function adder(num) {return function ( a ) {return num + a;};}
var add_2 = adder(2);document.write( add_2(5)+'<br />' );var add_10 = adder(10);document.write( add_10(5) );
119

変数名

値

adder

変数名
function adder(num)
{ 値
num
2
…省略… }

add_2

function ( a ) { 変数名
return num + num
a;
}

値

10

add_10 function ( a ) {return num + a;}

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

クロージャ
function adder(num) {return function ( a ) {return num + a;};}
var add_2 = adder(2);document.write( add_2(5)+'<br />' );var add_10 = adder(10);document.write( add_10(5) );
120

変数名

値

adder

変数名
function adder(num)
{ 値
num
2
…省略… }

add_2

function ( a ) { 変数名
return num + num
a;
}

値

10

add_10 function ( a ) {return num + a;}

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

クロージャの見分けかた
1. 関数の中で新しい関数(または関数リテラル)が作られている
2. 新しい関数定義に祖先の関数のローカル変数(引数も含む)が含まれている

function adder(num) {return function ( a ) {return num + a;
}
}

121

1.新しい関数リテラル

2.祖先の関数のローカル変数

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

クロージャのメリット• グローバルな変数を作らずに関数の動作を変えられる• 実行するときに余分な引数を必要としない関数を作ることができる• クロージャを作成したときの情報を持ち続けられる• オブジェクトと用途的には似ている(状態を持つ)• プロパティ 祖先の変数、メソッド クロージャ本体
122

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

Callオブジェクト
Callオブジェクト
プロパティ
ローカル変数/引数

いままで変数表という名前で説明してきたものは、正しくはCallオブ

値
変数名

値

ジェクトと言うオブジェクトです。
関数が呼び出されると、新しいCall
オブジェクトが作られ、引数や関

123

this

数内のローカル変数、this等がプロ親のパティとして登録されます。

Callオブジェクト

CallオブジェクトはJavaScriptのプなどなど

ログラムからは直接操作できません。
The HTML5 Logo is licensed under Creative Commons Attribution 3.0. Unported by the W3C; http://creativecommons.org/licenses/by/3.0/© LPI-Japan 2014. All rights reserved.

ガーベージコレクション• 不要になった値は、メモリを空けるために破棄されます。
• このしくみをがガーベージコレクション(ごみ集め)、略してGCと呼びます。
• GCでは、他の値から参照されている値は破棄されません。
• 参照されなくなると値は破棄されます。

124

変数名

値

プロパティ

a

Objectb

10c

Object

値

プロパティ
c

値

30

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

ガーベージコレクション• 不要になった値は、メモリを空けるために破棄されます。
• このしくみをがガーベージコレクション(ごみ集め)、略してGCと呼びます。
• GCでは、他の値から参照されている値は破棄されません。
参照されなくなった• 参照されなくなると値は破棄されます。
変数名

値

プロパティ

a

10

b

10

c

Object

値

プロパティ
c

値

30

上書きされた125

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

ガーベージコレクション• 不要になった値は、メモリを空けるために破棄されます。
• このしくみをがガーベージコレクション(ごみ集め)、略してGCと呼びます。
• GCでは、他の値から参照されている値は破棄されません。
参照されなくなった• 参照されなくなると値は破棄されます。
変数名

値

プロパティ

a

10

b

10

c

Object

値

プロパティ
c

値

30

破棄された
126

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

ガーベージコレクション• 不要になった値は、メモリを空けるために破棄されます。
• このしくみをがガーベージコレクション(ごみ集め)、略してGCと呼びます。
• GCでは、他の値から参照されている値は破棄されません。
• 参照されなくなると値は破棄されます。
変数名

値

プロパティ

a

10

b

10

c

Object

値

破棄された
127

プロパティ
c

値

30

破棄された

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

ガーベージコレクション• 関数の実行が終わると、Callオブジェクト(変数表)もGCの対象になります。
• しかし、クロージャという形で変数表の中の変数への参照が残ったままだと、GCによる破棄がおこなわれません。(破棄されるとクロージャを実行できない)• 場合によっては不要な値が残りメモリを圧迫することがありますので、クロージャへの参照を破棄する必要があります。

128

The HTML5 Logo is licensed under Creative Commons Attribution 3.0. Unported by the W3C; http://creativecommons.org/licenses/by/3.0/© LPI-Japan 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/© LPI-Japan 2014. All rights reserved.

Arrayオブジェクトの要素数<script type=“text/javascript”>
var array = new Array();array[0] = ‘HTML5’;
array[9] = ‘JavaScript’;
document.write(array.length);</script><script type=“text/javascript”>
var array = new Array(‘a’,’b’,’c’,’d’);
array.length = 1;
document.write(array);</script>
130

array.lengthはインデックスのうち最大の数値+1を返す

array.lengthに数値を代入すると数値以上のインデックスの要素が削除される

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

strictモード(function () {"use strict”;
b = 1; // 暗黙のグローバル変数は禁止
NaN = 1; // NaNは書き込み禁止“use strict”;とプログラ
ム先頭、または関数先頭に記述するとstrict
モードになります。

Infinity = 1; // Infinityは書き込み禁止
undefined = 1; // undefiendは書き込み禁止
var obj = {a:1,a:2}; // 同名プロパティ禁止

strictモードでは、気付きにくい落とし穴をエラーにしてくれます。

function f(a,a) { return a;} // 同名仮引数禁止})( );
131

The HTML5 Logo is licensed under Creative Commons Attribution 3.0. Unported by the W3C; http://creativecommons.org/licenses/by/3.0/© LPI-Japan 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/© LPI-Japan 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/© LPI-Japan 2014. All rights reserved.