JavaScript再入門

JavaScript 再入門

2008/05/20
matsukaz [http://d.hatena.ne.jp/matsukaz/]

アジェンダ
1. JavaScript概要
2. JavaScriptのオブジェクト
3. 連想配列
4. プロトタイプ
5. 継承
6. クロージャ
7. 参考サイト

1. JavaScript概要
• JavaScriptとは
• JavaScriptとECMAScript
• ECMAScript実装
• ECMAScript関係図

JavaScript概要
1. JavaScript概要
JavaScriptとは
• プロトタイプベースのオブジェクト指向なス
クリプト言語
• Netscapeによって開発された
• 開発当初はLiveScriptだったが、Javaの話
題性に便乗してJavaScriptという名称に
– 言語仕様は似ているがJavaとは関係ない
• Microsoftの実装はJavaScriptに自社技術
を追加して拡張したJScript

JavaScript概要
1. JavaScript概要
JavaScriptとECMAScript
• Ecma Internationalによって策定
• 互換性の低かったJavaScriptとJScriptの
標準化を目的に作られたスクリプト言語
– 式や構文、基本オブジェクトなどの仕様を決め
ている
– ブラウザ固有の機能は含められていない

JavaScript概要
1. JavaScript概要
ブラウザ別ECMAScript実装
ブラウザ名称説明
IE6-7 JScript 5 ECMAScript 3/Javascript 1.5に等価
IE8 JScript 6 ECMAScript 3/Javascript 1.5に等価
（JScript 5のバグFix）
Firefox 1.0 JavaScript 1.5 ECMAScript 3に等価
Firefox 1.5 JavaScript 1.6 JavaScript 1.5に機能追加
Firefox (次 JavaScript 1.9 JavaScript 1.8に機能追加予定
バージョン)
Opera 9 - ECMAScript 3に機能追加
Safari - ECMAScript 3に機能追加
- JavaScript 2.0 ECMAScript 4に等価

出展元：Versions of Javascript（http://ejohn.org/blog/versions-of-javascript/）
（）
マイコミジャーナルの記事（http://journal.mycom.co.jp/news/2008/04/25/021/）
マイコミジャーナルの記事（）

JavaScript概要
1. JavaScript概要
ECMAScript関係図
ECMAScript関係図

出展元：The World of ECMAScript （http://ejohn.org/blog/the-world-of-ecmascript/）
）

• オブジェクトの構成
• 関数
• 高階関数
• コンストラクタ関数

JavaScriptのオブジェクト
オブジェクトの構成
• JavaScriptのオブジェクトはプロパティのみ
を持つ
• プロパティにセットできる値もオブジェクト
• 各オブジェクトには自由にプロパティを追
加／削除できる
var hogeObj ==new Object();
var hogeObj new Object();
var fugaObj ==new Object();
var fugaObj new Object();

fugaObj.foo =='fooVal';
fugaObj.foo 'fooVal'; ////foo プロパティに 'fooVal' をセット
foo プロパティに 'fooVal' をセット
hogeObj.fuga ==fugaObj;
hogeObj.fuga fugaObj; ////fuga プロパティに fugaObj をセット
fuga プロパティに fugaObj をセット

alert(hogeObj.fuga.foo);
alert(hogeObj.fuga.foo); ////'fooVal' と表示
'fooVal' と表示

関数
• JavaScriptでは関数もオブジェクト
– プロパティに関数をセットしたものがメソッドと
なる
var hogeObj ==new Object();
var hogeObj new Object();

var fugaFunc ==function(val){ ////関数を変数として定義
var fugaFunc function(val){ 関数を変数として定義
alert(val);
alert(val);
}}

hogeObj.fuga ==fugaFunc;
hogeObj.fuga fugaFunc; ////fuga プロパティに関数をセット
fuga プロパティに関数をセット
hogeObj.fuga('fugaVal');
hogeObj.fuga('fugaVal'); ////'fugaVal' と表示
'fugaVal' と表示

高階関数
• 引数に関数を受け取る関数
function hoge(val){
function hoge(val){ ////関数を定義
関数を定義
alert('hello, ' '++val);
alert('hello, val);
}}

function fuga(array, fn) {{
function fuga(array, fn) ////高階関数
高階関数
for (var i i==0;i <<array.length; i++) {{
for (var 0;i array.length; i++)
fn(array[i]);
fn(array[i]);
}}
}}

var array ==['foo', 'bar'];
var array ['foo', 'bar']; ////配列を定義
配列を定義
fuga(array, hoge);
fuga(array, hoge); ////'hello, foo' 、'hello, bar' と表示
'hello, foo' 、'hello, bar' と表示

コンストラクタ関数
• コンストラクタ関数でオブジェクトの種類を
定義
– 全ての関数はコンストラクタ関数となりえる
function Hoge(val){
function Hoge(val){ ////コンストラクタ関数
コンストラクタ関数
this.val ==val;
this.val val; ////this はこれから生成されるオブジェクト
this はこれから生成されるオブジェクト
this.message ==function(){
this.message function(){ ////無名関数
無名関数
alert(this.val);
alert(this.val);
}}
}}

var hogeObj ==new Hoge('fugaVal');
var hogeObj new Hoge('fugaVal'); ////new で Hoge オブジェクトを生成
new で Hoge オブジェクトを生成
hogeObj.message();
hogeObj.message(); ////'fugaVal' と表示
'fugaVal' と表示

3. 連想配列
• 連想配列とは
• オブジェクトと連想配列

3. 連想配列
連想配列とは
• 配列
– 添え字に整数を利用
var array ==['hogeVal', 'fugaVal'];
var array ['hogeVal', 'fugaVal'];
alert(array[0]);
alert(array[0]); ////'hogeVal' と表示
'hogeVal' と表示
alert(array[1]);
alert(array[1]); ////'fugaVal' と表示
'fugaVal' と表示

• 連想配列
– 添え字に文字列を利用
• JavaにおけるHashtableと同じ
var hash =={'hogeKey' : :'hogeVal', 'fugaKey' : :'fugaVal'};
var hash {'hogeKey' 'hogeVal', 'fugaKey' 'fugaVal'};
alert(hash['hogeKey']);
alert(hash['hogeKey']); ////'hogeVal' と表示
'hogeVal' と表示
alert(hash['fugaKey']);
alert(hash['fugaKey']); ////'fugaVal' と表示
'fugaVal' と表示

3. 連想配列
オブジェクトと連想配列
• 全てのオブジェクトは連想配列
– 下記オブジェクトは全て同じプロパティを持つ
var obj1 ==new Object();
var obj1 new Object();
obj1.hogeKey =='hogeVal';
obj1.hogeKey 'hogeVal'; ////空オブジェクトにプロパティを追加
空オブジェクトにプロパティを追加

var obj2 =={'hogeKey' : :'hogeVal'}; ////連想配列を定義
var obj2 {'hogeKey' 'hogeVal'}; 連想配列を定義

var obj3 =={hogeKey : :'hogeVal'};
var obj3 {hogeKey 'hogeVal'}; ////連想配列を定義（キーは ''''で囲まなくても良い）
連想配列を定義（キーはで囲まなくても良い）

var obj4 =={};
var obj4 {};
obj4['hogeKey'] =='hogeVal';
obj4['hogeKey'] 'hogeVal'; ////空の連想配列にキーを追加
空の連想配列にキーを追加

– こんな指定も可能
var val1 ==document.location.protocol;
var val1 document.location.protocol;
var val2 ==document['location']['protocol']; ////プロパティを連想配列のキーで指定
var val2 document['location']['protocol']; プロパティを連想配列のキーで指定

• 呼び出すプロパティを動的変更できるということ

• prototypeオブジェクト
• 暗黙の参照
• プロトタイプチェーン
• 定義済みオブジェクトの拡張

prototypeプロパティ
• 全ての関数オブジェクトは、prototypeプロ
パティを保持している
function Hoge(){}
function Hoge(){}
alert(Hoge.prototype != undefined); ////trueと表示
alert(Hoge.prototype != undefined); trueと表示

• prototypeプロパティのデフォルトの参照先
は空のオブジェクト
Hoge.prototype.fuga =='FugaVal'; ////prototypeプロパティの参照先のオブジェクトに
Hoge.prototype.fuga 'FugaVal'; prototypeプロパティの参照先のオブジェクトに
////プロパティを設定可能
プロパティを設定可能

暗黙の参照
• オブジェクトが指定したプロパティを持たな
い場合、そのオブジェクトは生成元のコン
ストラクタ関数のprototypeプロパティへ暗
黙の参照を持つ function Hoge(){} function Hoge(){}
Hoge Hoge.prototype.fuga =10;
Hoge.prototype.fuga =10;

fuga = 10

hogeObj1 hogeObj2
fuga = 20

var hogeObj1 ==new Hoge();
var hogeObj1 new Hoge(); var hogeObj2 ==new Hoge();
var hogeObj2 new Hoge();
hogeObj1.fuga ==20;
hogeObj1.fuga 20;
alert(hogeObj1.fuga);
alert(hogeObj1.fuga); ////20 と表示
20 と表示
alert(hogeObj2.fuga);
alert(hogeObj2.fuga); ////10 と表示
10 と表示

プロトタイプチェーン
• プロトタイプを連鎖させることもできる
function Hoge(){}
function Hoge(){}
Hoge.prototype.fuga ==10;
Hoge.prototype.fuga 10;
Hoge

fuga = 10
var hogeObj ==new Hoge();
var hogeObj new Hoge();
hogeObj

function Foo(){}
function Foo(){}
Foo Foo.prototype.hoge ==hogeObj;
Foo.prototype.hoge hogeObj;
hoge = hogeObj

fooObj var fooObj ==new Foo();
var fooObj new Foo();

alert(fooObj.hoge.fuga);
alert(fooObj.hoge.fuga); ////10 と表示
10 と表示

定義済みオブジェクトの拡張
• 定義済みオブジェクトを拡張することもでき
る
Object.prototype.hoge =='hogeVal';
Object.prototype.hoge 'hogeVal';
var obj ==new Object();
var obj new Object();
alert(obj.hoge);
alert(obj.hoge); ////'hogeVal' と表示
'hogeVal' と表示

Date.prototype.toJPString ==function(){
Date.prototype.toJPString function(){
return this.getFullYear() ++'年' ++(this.getMonth() ++1)
return this.getFullYear() '年' (this.getMonth() 1)
++'月' ++this.getDate() ++'日';
'月' this.getDate() '日';
}}
var date ==new Date();
var date new Date();
alert(date.toJPString());
alert(date.toJPString()); ////'2008年5月20日' と表示
'2008年5月20日' と表示

5. 継承
• 継承とは
• 継承の実装方法
• constructorプロパティ

5. 継承
継承とは
• 継承元で定義された機能を受け継いで、
自分自身の機能を追加可能とする仕組み
var person ==new Person();
var person new Person();
Person person.getName(); ////Person の関数
person.getName(); Person の関数
getName()

var emp ==new Employee();
var emp new Employee();
Employee emp.getName(); ////Person の関数
emp.getName(); Person の関数
getDept() emp.getDept(); ////Employee の関数
emp.getDept(); Employee の関数

5. 継承
継承の実装方法
• JavaScriptとして継承という機能は提供さ
れていない
– JavaScript 2.0（ECMAScript 4）でサポート予
定
• プロトタイプチェーンを繋いでいくことで継
承らしき実装を実現
– さまざまなパターンの実装方法が存在
• オブジェクトの代入
• プロパティのコピー
• prototypeの代入

5. 継承
継承の実装方法（オブジェクトの代入）
• 継承元のオブジェクトを継承先のprototype
に代入する
function Person(name){this.name ==name;}
function Person(name){this.name name;}
Person Person.prototype.getName ==function(){return this.name;}
Person.prototype.getName function(){return this.name;}
getName()

function Employee(name, dept){
Person.call(this, name); ////親のコンストラクタ関数呼び出し
Person.call(this, name); 親のコンストラクタ関数呼び出し
this.dept ==dept;
this.dept dept;
}}
Employee Employee.prototype ==new Person; ////継承元のオブジェクトを
Employee.prototype new Person; 継承元のオブジェクトを
////prototype プロパティに代入
prototype プロパティに代入
getDept() Employee.prototype.getDept ==function(){return this.dept;}
Employee.prototype.getDept function(){return this.dept;}

Mozillaやオライリーではこの方法を紹介している。
Mozillaやオライリーではこの方法を紹介している。
でもオブジェクトを作る目的以外でnewするってどうなの？引数が必須の場合は何を渡
でもオブジェクトを作る目的以外でnewするってどうなの？引数が必須の場合は何を渡
す？コンストラクタ関数内で何らかの処理をしていたら？
す？コンストラクタ関数内で何らかの処理をしていたら？
いろいろ問題が・・・
いろいろ問題が・・・

5. 継承
継承の実装方法（オブジェクトの代入）
• 概念図

new
Person
無名
prototype オブジェクト
暗黙の参照

参照

new
Employee
emp
prototype
暗黙の参照

5. 継承
継承の実装方法（プロパティのコピー）
• 継承元のprototypeのプロパティを継承先
にコピーする
////継承元の prototype プロパティを継承先にコピーする関数
継承元の prototype プロパティを継承先にコピーする関数
Person Function.prototype.inherit ==function(superClass){
Function.prototype.inherit function(superClass){
getName() for(var prop in superClass.prototype){
for(var prop in superClass.prototype){
this.prototype[prop] ==superClass.prototype[prop];
this.prototype[prop] superClass.prototype[prop];
}}
}}

Employee Person.call(this, name); ////親のコンストラクタ関数呼び出し
getDept() this.dept ==dept;
this.dept dept;
}}
Employee.inherit(Person);
Employee.prototype.getDept ==function(){return this.dept;}

個別にプロパティをセットしているので、あとから継承元のprototypeにプロパティを追加
個別にプロパティをセットしているので、あとから継承元のprototypeにプロパティを追加
しても反映されない・・・
しても反映されない・・・

5. 継承
継承の実装方法（プロパティのコピー）
• 概念図

Person

prototype

プロパティのコピー

new
Employee
emp
prototype
暗黙の参照

5. 継承
継承の実装方法（プロトタイプの代入）
• 継承元のprototypeをオブジェクト化して継
承先のprototypeに代入する
////継承元の prototype プロパティを継承先の prototype に代入
継承元の prototype プロパティを継承先の prototype に代入
Person Function.prototype.inherit(superClass){
Function.prototype.inherit(superClass){
getName() function Temp(){}
function Temp(){}
Temp.prototype ==superClass.prototype;
Temp.prototype superClass.prototype;
this.prototype ==new Temp;
this.prototype new Temp;
}}

Employee function Employee(name, dept){
Person.call(this, name); ////親のコンストラクタ関数呼び出し
getDept() this.dept ==dept;
this.dept dept;
}}
Employee.prototype.getDept ==function(){return this.dept;}

一番継承っぽい。
一番継承っぽい。
あとから継承元のprototypeにプロパティを追加しても反映される。
あとから継承元のprototypeにプロパティを追加しても反映される。

5. 継承
継承の実装方法（プロトタイプの代入）
• 概念図

Person Temp
参照
prototype prototype

new 暗黙の参照

Employee
無名
prototype オブジェクト
参照

5. 継承
constructorプロパティ
• オブジェクト名.constructor
– 生成元コンストラクタ関数を参照
function Person(name){this.name ==name;}
function Person(name){this.name name;}
var hoge ==new Person('hoge');
var hoge new Person('hoge');
alert(hoge.constructor);
alert(hoge.constructor); ////Person関数の内容を表示
Person関数の内容を表示
alert(hoge.constructor.name);
alert(hoge.constructor.name); ////Personと表示
Personと表示

※ constructorのnameプロパティにはIEからはアクセスできない

• 継承の実装次第では、生成元コンストラク
タ関数が異なってしまう
– 明示的にconstructorプロパティを設定する
Employee.prototype.constructor ==Employee;
Employee.prototype.constructor Employee;

6. クロージャ
• クロージャとは
• クロージャの特徴
• クロージャの利用例
• クロージャ利用時の注意点

6. クロージャ
クロージャとは
• 関数の中で定義された関数
function Hoge(){
function Hoge(){
this.fuga ==function(msg){
this.fuga function(msg){ ////クロージャ
クロージャ
alert(msg);
alert(msg);
}}
}}
var hogeObj ==new Hoge();
var hogeObj new Hoge();
hogeObj.fuga('hogeVal');
hogeObj.fuga('hogeVal'); ////'hogeVal' と表示
'hogeVal' と表示

function hoge(){
function hoge(){
function fuga(msg){
function fuga(msg){ ////クロージャ
クロージャ
alert(msg);
alert(msg);
}}
return fuga;
return fuga;
}}
var fugaFunc ==hoge();
var fugaFunc hoge();
fugaFunc('fugaVal');
fugaFunc('fugaVal'); ////'fugaVal' と表示
'fugaVal' と表示

6. クロージャ
クロージャの特徴
• 関数と、その関数が作られた環境が一体
となった特殊なオブジェクト
• 関数の外側で宣言された変数に対する参
照を持つ
function Hoge(msg){
function Hoge(msg){
var count ==1;
var count 1;
this.fuga ==function(){
this.fuga function(){ ////クロージャ
クロージャ
alert(count ++',',' '++msg);
alert(count msg); ////count や msg に対する参照を持つ
count や msg に対する参照を持つ
count++;
count++;
}}
}}
var hogeObj ==new Hoge('hogeVal');
var hogeObj new Hoge('hogeVal');
hogeObj.fuga();
hogeObj.fuga(); ////'1, hogeVal' と表示
'1, hogeVal' と表示
hogeObj.fuga();
hogeObj.fuga(); ////'2, hogeVal' と表示
'2, hogeVal' と表示

6. クロージャ
クロージャの利用例①
• プライベート関数
– 特定のスコープのみで実行可能な関数
• オブジェクト毎に関数オブジェクトが生成されるの
で、リソースには注意が必要
function Hoge(){
function Hoge(){
this.fuga ==function(){
this.fuga function(){
foo();
foo();
}}
function foo(){
function foo(){ ////クロージャ（プライベート関数）
クロージャ（プライベート関数）
alert('foo');
alert('foo');
}}
}}
var hoge ==new Hoge();
var hoge new Hoge();
hoge.fuga();
hoge.fuga(); ////'foo' と表示
'foo' と表示

6. クロージャ
クロージャの利用例②
• イベント登録
– 各ボタン用のイベントを生成
<form name=quot;form1quot;>
<form name=quot;form1quot;>
<input type=quot;textquot; name=quot;text1quot;>
<input type=quot;buttonquot; name=quot;button1quot; value=quot;button1quot;><br>
<input type=quot;buttonquot; name=quot;button1quot; value=quot;button1quot;><br>
<input type=quot;buttonquot; name=quot;button2quot; value=quot;button2quot;>
<input type=quot;buttonquot; name=quot;button2quot; value=quot;button2quot;>
</form>
</form>
選択した値：<span id=quot;dispquot;></span>
選択した値：<span id=quot;dispquot;></span>

document.form1.button1.onclick ==dispValue('text1');
document.form1.button1.onclick dispValue('text1');
document.form1.button2.onclick ==dispValue('text2');
document.form1.button2.onclick dispValue('text2');

function dispValue(target){
return function(){
return function(){ ////各ボタン用のクロージャを作成
各ボタン用のクロージャを作成
disp.innerHTML ==document.form1[target].value;
disp.innerHTML document.form1[target].value;
}}
}}

6. クロージャ
クロージャ利用時の注意点
• ループ内でクロージャを作成
– ループ内のクロージャは、関数としては異なる
が同じ環境を共有しているため、keyは同じ値
になってしまう。
var map =={{
var map
'button1' : :'text1',
'button1' 'text1',
'button2' : :'text2'
'button2' 'text2'
};
};
for(var key in map){
document.form1[key].onclick ==function(){
document.form1[key].onclick function(){ ////ループ内のクロージャ
ループ内のクロージャ
disp.innerHTML ==document.form1[map[key]].value; ////keyの値に注意が必要
disp.innerHTML document.form1[map[key]].value; keyの値に注意が必要
}}
}}

ポイントはどうやって共有する環境を切り離すか

6. クロージャ
• 解決策①（イベント登録を関数で切り離す）
(function(n){
(function(n){ ////無名関数内でイベント登録を行う
無名関数内でイベント登録を行う
document.form1[key].onclick ==function(){
document.form1[key].onclick function(){
disp.innerHTML ==document.form1[n].value;
disp.innerHTML document.form1[n].value;
};
};
})(map[key]);
})(map[key]);
}}

• 解決策②（イベント処理を関数で切り離す）
document.form1[key].onclick ==(function(n){ ////無名関数内でイベント処理を行う
document.form1[key].onclick (function(n){ 無名関数内でイベント処理を行う
return function(){
return function(){
disp.innerHTML ==document.form1[n].value;
disp.innerHTML document.form1[n].value;
}}
})(map[key]);
})(map[key]);
}}

6. クロージャ
• 解決策③（外部関数化する）
document.form1[key].onclick ==dispValue(map[key]);
document.form1[key].onclick dispValue(map[key]);
}}

////外部関数で生成した無名関数内でイベント処理を行う
外部関数で生成した無名関数内でイベント処理を行う
return function(){
return function(){ ////各ボタン用のクロージャを作成
各ボタン用のクロージャを作成
disp.innerHTML ==document.form1[target].value;
disp.innerHTML document.form1[target].value;
}}
}}

7. 参考サイト
• Mozilla Developer Center
– http://developer.mozilla.org/ja/docs/JavaScr
ipt
• ECMAScript
– http://www.ecmascript.org/
• JavaScript Shell 1.4
– http://www.squarefree.com/shell/shell.html
• CodeZineの記事
– http://codezine.jp/a/article/aid/220.aspx
• 檜山正幸のキマイラ飼育記
– http://d.hatena.ne.jp/m-hiyama/

べつやくメソッド的に言うと・・・

べつやくメソッド用円グラフ作成君（http://818nc.jp/circle/）
円グラフ作成君（）

JavaScript再入門

Recommended

Recommended

More Related Content

What's hot

What's hot (17)

Viewers also liked

Viewers also liked (20)

More from Masakazu Matsushita

More from Masakazu Matsushita (20)

JavaScript再入門