JavaScriptのオブジェクトという考え方について

JavaScriptで扱えるデータ型には文字列（strings)、数値（numbers）、真偽値（true or false）、undefined、null、配列（Array）など色々ありますが、オブジェクト（Objects）もそのデータ型の1つです。

オブジェクトというとちょっと分かりにくいですが、要するに「物」です。ドットインストールでは田口さんが「JavaScriptがあらかじめ用意してくれているよく使う便利な命令群、材料」だと言ってました。オブジェクトの後ろにあらかじめJavaScriptさんが用意してあるプロパティやメソッドをくっつければ色々便利なことがゴニョゴニョ出来るわけです。

JavaScriptに出てくる代表的なオブジェクトといえば・・・

　　　
• 日付オブジェクト
• 文字列オブジェクト
• 数値オブジェクト

などがありますね。
しかし、こういった出来合いのオブジェクトだけじゃなく、オブジェクトというのは自分で好きなように作れちゃいます。オブジェクトに作用するメソッドなんかも自分で好きなように作れちゃいます。

それじゃあオブジェクトとは一体何なの？と思いますよね。
オブジェクトというのは要するに全ての関連情報を一つの場所にまとめたもの。

[js]
var i = 1; //数値を変数iに保存した
var e = "taccuma" //"taccuma"という文字列を変数eに保存した
[/js]

通常変数に数値や文字列を保存する場合、1つの変数につき1つの数値や文字列しか保存できません。

[js highlight=”1″]
var me = [20, "taccuma", "イケメン"];
// var me = new Array(20, "taccuma", "イケメン");と書いても良い
console.log(me[0]); //20と表示される
console.log(me[1]); //taccumaと表示される
[/js]

この不便な点を解消したのが配列という考え方で、1つの変数名で複数のデータを保存できます。各データには0から始まるインデックス（添字）がそれぞれ割り振られていて・・・

こんな風に配列名の後ろに大括弧をつけて、その中にインデックス数値をいれれば・・・各データにアクセスできます。

[js highlight=”1-5,”]
var me = {
name: "taccuma",
sex: "male",
country: "Japan"
};
console.log(me["sex"]); //maleとコンソールに表示される
[/js]

配列という考え方をより発展させたのが連想配列という考え方で、配列の前にラベルをくっつけて、そのラベル名で各データにアクセスできます。

ここまでの文章を読んだ人で「あれ、配列とオブジェクトって何が違うの？」と思った方も多いと思います。僕もイマイチよく分かってないのですが（苦笑）…

こんな感じのイメージでほぼ間違いないかと思います（；^ω^）

オブジェクトの作り方

1.literal notation-1

[js]
var me = {
name: "taccuma",
sex: "male",
country: "Japan"
}
[/js]

オブジェクトを作るときの最も簡単な作り方がこのliteral notationです。添字に文字列を使うことが出来る連想配列と全く同じです。

2.literal notation-2

[js highlight=”4″]
var me = {};
me.name = "taccuma";
me.sex = "male";
me["country"] = "Japan";
[/js]

1行目で空のオブジェクトを定義しておきます。その後で中身を指定していく方法です。2行目、3行目のようなオブジェクト名にドットでプロパティ名をつなげて値を指定する方法をdot notationと言います。

4行目のような書き方(bracket notation)は連想配列を勉強したことがあれば、おなじみだと思います。注意していただきたいのは、大括弧の中に文字列が入る場合は必ずクォーテーションが必要だということです。シングルクォーテーションでもダブルクォーテーションでもどっちでもかまいませんが、必ず必要なので忘れないでください。

3.Constructor – Object constructor

[js highlight=”1″]
var me = new Object();
me.name = "taccuma";
me.sex = "male";
me["country"] = "Japan";
[/js]

1行目で「meという新しいオブジェクトを作りますよ」と宣言してから、その中身をあとから指定していきます。Object()と呼ばれる既にJavaScriptによって定義された組み込み式の（built-in)コンストラクタを使ってプロパティもメソッドも無い空のオブジェクトを生成しています。

4.Constructor – Custom constructor

[js highlight=”1-5,”]
function About (name, sex, country) {
this.name = name;
this.sex = sex;
this.country = country;
}

var me = new About("taccuma", "male", "Japan");
[/js]

基本的に自分でオブジェクトを作る場合は、こちらのカスタムコンストラクタを使う場合が多いです。さっきから｢コンストラクタ｣といっていますが、そもそもコンストラクタとは何でしょうか？

まず自分でオブジェクトを作る場合は、どのケースでも共通して使えるひな形となるconstructorを作ります。その後で、各ケースに応じたオブジェクトをひな形を参考にしながら定義していきます。

1～5行目までがコンストラクタと呼ばれるひな形部分です。これを元に7行目で自分についてのオブジェクトを定義しています。

1～5行目のコンストラクタ部分を見ていただけるとお分かりですが、ほぼ関数ですね。中身の部分で、いったん仮のオブジェクト名thisを置いて、そのthisに対する各property（プロパティ、属性）とそのvalue（値）を指定してます。

7行目ではmeというオブジェクトを、Aboutというコンストラクタを元に新しく定義しますよ！と言ってるわけです。こうやって先にコンストラクタというひな形を作っておけば、後でtaroさんのオブジェクトでも、hanacoさんのオブジェクトでも…いくつだって簡単に定義できるということ。

いちいち一人ずつ別々にオブジェクトを定義するよりも、この方法だと時間とコードの行数の節約になります。

[js highlight=”3-5,”]
function constructorName (parameter) {
this.propertyName = value;
this.methodName = function() {
//何らかの処理
};
}
[/js]

コンストラクタを公式っぽくまとめてみました。ハイライトしてる部分をみてお分かりの通り、コンストラクタの中にメソッド（method:処理）を入れることも出来ます。

[js highlight=”5-7,”]
function About (name, sex, country) {
this.name = name;
this.sex = sex;
this.country = country;
this.hello = function() {
console.log("Hello, " + this.name + " !")
};
}

var me = new About("taccuma", "male", "Japan");
me.hello();
[/js]

ちょっと例は悪いかもしれないですが、こんな感じのメソッドを作ってみました。
最後の行でメソッドを呼び出してます。試しにChromeのJavaScriptコンソールで表示させてみると・・・

ちゃんと表示されてますね！！

オブジェクトにおけるプロパティとメソッド

オブジェクトにおけるプロパティとは、例えば上のAboutコンストラクタで考えると、nameやsexやcountryなんかがプロパティです。Aboutコンストラクタで作られる人オブジェクトの名前や性別、出身などがプロパティ。英語で考えると難しいですが、要するに性質、特性、属性って感じ。

コンストラクタにメソッドが定義されていれば、そのコンストラクタから作られたインスタンス＝オブジェクトは自動的にメソッドを持つことになります。オブジェクトにおいて、メソッドはとても重要な働きをします。

• メソッドは、オブジェクトのプロパティ値を変更するために使われる
• メソッドは、オブジェクトのプロパティ値を元に計算をするために使われる

[js]
function Person(name, age) {
this.name = name;
this.age = age;
this.setAge = function(newAge) {
this.age = newAge;
};
}

var taro = new Person("Taro", 30);
//誕生日が来て一つ年をとった
taro.setAge(31);
console.log(taro.age); //31
[/js]

ためしにPersonというコンストラクタを作ってそれを元にtaro君を作ってみました。
名前はTaro、年は30歳です。

Taro君は誕生日が来たので、一つ年をとって31歳に。
Personコンストラクタで定義したsetAge()メソッドで年齢を３０から３１に変更します。
念のためにconsole.logでtaro.ageを確認したらちゃんと31に年齢が変更されているはずです。