【JavaScript 初心者講座】オブジェクトの定義と利用
[JavaScript 初心者講座]オブジェクトの定義と利用
本講座では、オブジェクトについて少々学習する。 オブジェクトはJavaScriptの本源であり本質である。 オブジェクトは奥が深く、習得には時間がかかるだろう。 オブジェクトを一気に全て学習するのは、お勧めできない。 ゆっくり時間をかけて学習するべきだと考えている。本講座は初心者講座なので あまり深入りせず、オブジェクトの機能の一部分のみ学習する。
オブジェクトに関数を定義する
オブジェクトとは オブジェクトとは、箱である。
オブジェクトは箱である。この箱（オブジェクト）の中に
（今後見ていくが）変数や関数を詰め込む事ができる。
「オブジェクトは、変数や関数を入れておく箱」。
このイメージで良い。
さて、[JavaScript 入門講座]で、整数値の絶対値を求めるプログラムを見た。
Math.abs ( [値] ) ;
このプログラムを例に、オブジェクトを解説する。
まず、Mathについて解説する。
これは、Mathオブジェクトというものである。
オブジェクトは箱である。Mathは便利な関数が入った箱である。
Mathオブジェクトには「数学の計算に用いる様々な関数が入っている」。
解説は以上である。今はこのまま先に進む。
つぎに、abs () について解説する。
これは、Mathオブジェクトに入っている関数である。
abs()は絶対値を求める関数であった。
「絶対値は数学的な関数なので、
Mathという箱（オブジェクト）に入れておこう」という感覚である。
ここで、身近な例を挙げる。
PCには様々なフォルダがあると思う。
「仕事」フォルダ、「写真」フォルダ、「趣味」フォルダなど、
ファイルの内容によりファイルを保存するフォルダを分類していると思う。
その感覚である。abs()関数は数学的な処理をする関数だから、
数学を意味するMathフォルダ（オブジェクト）に入れておこう。
という感覚である。
さて、オブジェクトに入った関数を実行する場合、
オブジェクト.関数名 ( [引数] ) ;
このように実行する。 この知識を元に、オブジェクトを作成しよう。
001<script>
002
003//オブジェクト作成
004var Data = {
005
006 // abs() 関数を定義
007 abs : function ( value ){
008
009 return 0 ;
010 }
011}
012
013//Dataオブジェクトのabs()関数を利用
014var res = Data.abs ( -10 ) ;
015
016//実行結果を表示[0]
017alert ( res );
018
019</script>
002
003//オブジェクト作成
004var Data = {
005
006 // abs() 関数を定義
007 abs : function ( value ){
008
009 return 0 ;
010 }
011}
012
013//Dataオブジェクトのabs()関数を利用
014var res = Data.abs ( -10 ) ;
015
016//実行結果を表示[0]
017alert ( res );
018
019</script>
プログラムを実行すると、「0」と表示する。
解説する。まず4行目で、Dataオブジェクトを定義している。
空のオブジェクトの定義
var オブジェクト名 = {
}
オブジェクトの定義である。var の後ろにオブジェクト名を記述して、 その後中括弧を開き、そして閉じる。これでオブジェクトの完成である。
003//オブジェクト作成
004var Data = {
005
006 // abs() 関数を定義
007 abs : function ( value ){
008
009 return 0 ;
010 }
011}
004var Data = {
005
006 // abs() 関数を定義
007 abs : function ( value ){
008
009 return 0 ;
010 }
011}
サンプルプログラムである。Dataという名前で、オブジェクトを定義している。 今後はDataオブジェクトと呼ぶ。 さて、7行目で関数abs()を定義している。
関数を定義する
関数名 : function ( 引数1 , 引数2 , ... ) {
処理 ;
}
オブジェクトの中に関数を定義する場合、このように記述する。
関数名の後ろに「コロン」を記述して、その後ろにfunctionキーワードを記述する。
引数を受け取るために括弧を記述して、
その後ろに、処理を記述するために中括弧でブロックを作成する。
中括弧で囲われた部分に関数の処理を記述する。
ちなみに、オブジェクトの中に記述された関数を
メソッドと言う。
メソッドは非常に重要な用語である。しかし本講座では、一貫して「関数」という用語を利用する。
003//オブジェクト作成
004var Data = {
005
006 // abs() 関数を定義
007 abs : function ( value ){
008
009 return 0 ;
010 }
011}
004var Data = {
005
006 // abs() 関数を定義
007 abs : function ( value ){
008
009 return 0 ;
010 }
011}
さて、7行目でabs()関数を定義している。引数はvalue。処理は記述されていない。 関数の最後で、
return 0;
このように記述されている。このメソッドは未完成である。単純に
「0」を返す関数である。
では、この関数を利用しよう。
001<script>
002
003//オブジェクト作成
004var Data = {
005
006 // abs() 関数を定義
007 abs : function ( value ){
008
009 return 0 ;
010 }
011}
012
013//Dataオブジェクトのabs()関数を利用
014var res = Data.abs ( -10 ) ;
015
016//実行結果を表示[0]
017alert ( res );
018
019</script>
002
003//オブジェクト作成
004var Data = {
005
006 // abs() 関数を定義
007 abs : function ( value ){
008
009 return 0 ;
010 }
011}
012
013//Dataオブジェクトのabs()関数を利用
014var res = Data.abs ( -10 ) ;
015
016//実行結果を表示[0]
017alert ( res );
018
019</script>
プログラムを実行すると、14行目が実行する。
013//Dataオブジェクトのabs()関数を利用
014var res = Data.abs ( -10 ) ;
014var res = Data.abs ( -10 ) ;
14行目は、引数に「-10」を渡してDataオブジェクトのabs()関数を実行し、戻り値を変数resへ代入している。 オブジェクト内に記述した関数を実行する場合、
オブジェクト.関数名 ( [引数] ) ;
このように実行する。 14行目で、Dataオブジェクトに記述したabs()関数が実行する。 このabs()関数は、「0」を戻す関数なので、14行目の変数resに「0」が入る。 17行目で、変数resの値「0」を表示する。以上である。
メソッドを定義して実行する
Dataオブジェクトのabs()関数を完成させる。 abs()関数を実行すると、引数の値を絶対値にして戻すようにプログラムする。
001<script>
002
003//オブジェクト作成
004var Data = {
005
006 // abs() 関数を定義
007 abs : function ( value ){
008
009 //マイナスの場合は符号を逆にする
010 if ( value < 0 ) {
011 return -value ;
012 } else {
013 return value ;
014 }
015 }
016}
017
018//Dataオブジェクトのabs()関数を利用
019var res = Data.abs ( -10 ) ;
020
021//実行結果を表示[10]
022alert ( res );
023
024//実行結果を表示[5]
025alert ( Data.abs ( 5 ) );
026
027</script>
002
003//オブジェクト作成
004var Data = {
005
006 // abs() 関数を定義
007 abs : function ( value ){
008
009 //マイナスの場合は符号を逆にする
010 if ( value < 0 ) {
011 return -value ;
012 } else {
013 return value ;
014 }
015 }
016}
017
018//Dataオブジェクトのabs()関数を利用
019var res = Data.abs ( -10 ) ;
020
021//実行結果を表示[10]
022alert ( res );
023
024//実行結果を表示[5]
025alert ( Data.abs ( 5 ) );
026
027</script>
プログラムを実行すると「10」「5」と表示する。
Data.abs()関数を実行すると、引数で受け取った値の絶対値を戻すようにプログラムした。
003//オブジェクト作成
004var Data = {
005
006 // abs() 関数を定義
007 abs : function ( value ){
008
009 //マイナスの場合は符号を逆にする
010 if ( value < 0 ) {
011 return -value ;
012 } else {
013 return value ;
014 }
015 }
016}
004var Data = {
005
006 // abs() 関数を定義
007 abs : function ( value ){
008
009 //マイナスの場合は符号を逆にする
010 if ( value < 0 ) {
011 return -value ;
012 } else {
013 return value ;
014 }
015 }
016}
念のため、解説する。7行目でabs()関数を定義する。引数にvalueを受け取る。
10行目からabs()関数の処理が始まる。
10行目のif文で、引数valueの値が「0」未満かどうか確認する。
「0」未満の場合、マイナス符号をつけて戻す。これで
引数が「0」未満の場合、プラスの値が戻る。
10行目のif文で、引数valueの値が「0」以上の場合、
elseブロックが実行する。正の数はそのまま戻すので、
return value ;
このプログラムで良いだろう。解説は以上である。
オブジェクトとプロパティ
オブジェクトの中に関数を定義する事ができる、という事はご理解頂けたと思う。 さて、オブジェクトには関数以外にも「変数」を入れる事ができる。 そのサンプルプログラムを見よう。
001<script>
002
003//オブジェクト作成
004var Player = {
005 name : "" ,
006 point : 0
007}
008//nameプロパティに値を代入
009Player.name = "IORI" ;
010
011//pointプロパティに値を代入
012Player.point = 90 ;
013
014//値を表示[IORI:90]
015alert( Player.name + ":"+ Player.point) ;
016
017</script>
002
003//オブジェクト作成
004var Player = {
005 name : "" ,
006 point : 0
007}
008//nameプロパティに値を代入
009Player.name = "IORI" ;
010
011//pointプロパティに値を代入
012Player.point = 90 ;
013
014//値を表示[IORI:90]
015alert( Player.name + ":"+ Player.point) ;
016
017</script>
プログラムを実行すると、「IORI:90」と表示する。
プログラムを解説する。まず、4行目でPlayerオブジェクトを作成する。 5行目と6行目で、変数（プロパティ）を定義する。
プロパティを定義する プロパティ1 : 値1 , プロパティ2 : 値2 , ...
オブジェクト内に定義した値をプロパティと言う。プロパティという用語は利用し続ける。
さて、プロパティの定義であるが、
プロパティ名を記述した後、「コロン」を記述して、プロパティに代入する値を記述する。
これが、1セットである。プロパティと値のセットを複数定義する場合は、
カンマを記述して、その後別のプロパティ名と値を記述する。
プログラムの5行目で、nameプロパティを作成して、空文字を代入している。
5行目の最後にカンマを記述し、6行目で別のプロパティ「point」を定義している。
このように、カンマ区切りで複数のプロパティを記述する。
| name | "" |
| point | 0 |
4行目でPlayerオブジェクトを定義すると、Playerオブジェクトの状態は、このようになる。
008//nameプロパティに値を代入
009Player.name = "IORI" ;
010
011//pointプロパティに値を代入
012Player.point = 90 ;
013
014//値を表示[IORI:90]
015alert( Player.name + ":"+ Player.point) ;
016
017</script>
009Player.name = "IORI" ;
010
011//pointプロパティに値を代入
012Player.point = 90 ;
013
014//値を表示[IORI:90]
015alert( Player.name + ":"+ Player.point) ;
016
017</script>
さて、Playerオブジェクトを利用しよう。プログラムを実行すると、9行目が実行する。 まず、Playerオブジェクトのnameプロパティに文字列「IORI」を代入する。 12行目で、Playerオブジェクトのpointプロパティに「90」を代入する。
| name | "IORI" |
| point | 90 |
Playerオブジェクトはこのような状態になる。15行目で、Playerオブジェクトの nameプロパティとpointプロパティを文字列結合して表示する。「IORI:90」と表示して、 プログラムは終了する。
オブジェクトの応用
プロパティと関数（メソッド）の連携について学習する。 少々難しいトピックであるthisが登場するが、 thisを理解できなくても問題ない。
001<script>
002
003//オブジェクト作成
004var Player = {
005 name : "no name" ,
006 point : -1 ,
007 info : function ( ) {
008 return this.name + ":"+ this.point ;
009 }
010}
011//nameプロパティに値を代入
012Player.name = "清水" ;
013
014//pointプロパティに値を代入
015Player.point = 80 ;
016
017//info()関数を実行[清水:80]
018alert( Player.info () ) ;
019
020</script>
002
003//オブジェクト作成
004var Player = {
005 name : "no name" ,
006 point : -1 ,
007 info : function ( ) {
008 return this.name + ":"+ this.point ;
009 }
010}
011//nameプロパティに値を代入
012Player.name = "清水" ;
013
014//pointプロパティに値を代入
015Player.point = 80 ;
016
017//info()関数を実行[清水:80]
018alert( Player.info () ) ;
019
020</script>
プログラムを実行すると、「清水:80」と表示する。
解説する。4行目でPlayerオブジェクトを定義する。 プロパティは「name」「point」で、それぞれ初期値として「no name」「-1」が代入されている。 さらに、pointプロパティの行の最後にカンマが記述され、 その下（7行目）に、info()という関数が定義されている。 info()については後ほど解説する。
| name | "no name" |
| point | -1 |
| info() | function () {} |
Playerオブジェクトの初期状態である。
001<script>
002
003//オブジェクト作成
004var Player = {
005 name : "no name" ,
006 point : -1 ,
007 info : function ( ) {
008 return this.name + ":"+ this.point ;
009 }
010}
011//nameプロパティに値を代入
012Player.name = "清水" ;
013
014//pointプロパティに値を代入
015Player.point = 80 ;
016
017//info()関数を実行[清水:80]
018alert( Player.info () ) ;
019
020</script>
002
003//オブジェクト作成
004var Player = {
005 name : "no name" ,
006 point : -1 ,
007 info : function ( ) {
008 return this.name + ":"+ this.point ;
009 }
010}
011//nameプロパティに値を代入
012Player.name = "清水" ;
013
014//pointプロパティに値を代入
015Player.point = 80 ;
016
017//info()関数を実行[清水:80]
018alert( Player.info () ) ;
019
020</script>
プログラムを解説する。プログラムを実行すると、 12行目と15行目で、Playerオブジェクトのプロパティ 「name」「point」に「清水」「80 」が入る。
| 初期値 | 代入後 | |
| name | "no name" | "清水" |
| point | -1 | 80 |
| info() | function () {} | function () {} |
Playerオブジェクトは、このような状態になる。 問題は、18行目である。18行目で、Playerオブジェクトのinfo()関数を実行する。
003//オブジェクト作成
004var Player = {
005 name : "清水" ,
006 point : 80 ,
007 info : function ( ) {
008 return this.name + ":"+ this.point ;
009 }
010}
004var Player = {
005 name : "清水" ,
006 point : 80 ,
007 info : function ( ) {
008 return this.name + ":"+ this.point ;
009 }
010}
この状態で、info()関数が実行する。 info()関数の処理は、
007 info : function ( ) {
008 return this.name + ":"+ this.point ;
009 }
008 return this.name + ":"+ this.point ;
009 }
nameとpointを文字列結合して戻す。
thisとは thisは、オブジェクトを意味する。
thisはオブジェクトを意味する。 この場合、
003//オブジェクト作成
004var Player = {
005 name : "清水" ,
006 point : 80 ,
007 info : function ( ) {
008 return Player.name + ":"+ Player.point ;
009 }
010}
004var Player = {
005 name : "清水" ,
006 point : 80 ,
007 info : function ( ) {
008 return Player.name + ":"+ Player.point ;
009 }
010}
このように書き換える事ができる。 Player.nameは、「清水」で、 Player.pointは、「80」である。
003//オブジェクト作成
004var Player = {
005 name : "清水" ,
006 point : 80 ,
007 info : function ( ) {
008 return 清水+ ":"+ 80 ;
009 }
010}
004var Player = {
005 name : "清水" ,
006 point : 80 ,
007 info : function ( ) {
008 return 清水+ ":"+ 80 ;
009 }
010}
info()関数を実行すると、戻り値として「清水：80」という文字列が戻る。 さて、プログラム実行元では、この値をalert()するのであった。 「清水：80」と表示してプログラムは終了する。
まとめ
オブジェクトとは オブジェクトとは、箱である。
空のオブジェクトの定義
var オブジェクト名 = {
}
関数を定義する
関数名 : function ( 引数1 , 引数2 , ... ) {
}
プロパティを定義する プロパティ1 : 値1 , プロパティ2 : 値2 , ...
thisとは thisは、オブジェクトを意味する。
