JavaScriptは、オブジェクト指向言語です。
最近の仕様ではクラス（Class）も記述できるようにもなりました。
この記事では、クラスを使う以前に知っておきたいJavaScriptのオブジェクトという概念について簡単なプログラムを使って紹介します。
オブジェクトの基本的な記述方法
オブジェクトを利用するには、以下のようにObjectクラスのインスタンスを生成することで利用できます。
オブジェクトは、生成したオブジェクト変数にプロパティと呼ばれる項目名をつけることで利用できます。
obj.name = “レオンハルト”;
obj.hp = 200;
プロパティ名は、オブジェクト名の後に.（ピリオド）で繋げて表現します。
ただ、実際は以下のようにオブジェクト生成と同時にプロパティを設定した方が簡潔で分かり易いです。
var obj = {
name: "レオンハルト",
hp: 200
};
上記のような設定方法では、:（コロン）を使ってプロパティ名とプロパティ値を分けています。
本記事では、こちらの方法を採用します。
少し細かい話になりますが、オブジェクト宣言と同時にプロパティ値を設定する場合、最後のプロパティに「,」（カンマ）をつけた記述をすることがあります。
例）
var obj = {
name: "レオンハルト",
hp: 200,
};
これでもエラーにはなりません。
最後にカンマをつける理由は、後から追加で別のプロパティ値を加えた時のカンマつけ忘れ防止の為です。
var obj = {
name: "レオンハルト",
hp: 200 ←ここでエラーが出てしまう
mp: 50
};
オブジェクトを利用した基本的なプログラム
簡単なオブジェクトを生成して、コンソールに表示して確認してみます。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>オブジェクト基本1</title>
</head>
<body>
<h1>オブジェクト基本1</h1>
<script>
var dora = {
name : "ドラえもん",
height: 120,
weight: 90,
};
console.log(dora.name);
console.log(dora.height);
console.log(dora.weight);
</script>
</body>
</html>
実行イメージ
ドラえもん
120
90
解説
doraというオブジェクトを生成して、name, height, weightというプロパティにそれぞれ値を設定しています。
nameプロパティのように文字列を格納したい場合は、”（ダブルクォーテーション）か’（シングルクォーテーション）で文字列をくくります。
heightとweightプロパティは、数値データを格納したいので、ダブルクォーテションやシングルクォーテーションでくくる必要はありません。
プロパティは、後から追加もできます。
例えば、
var obj = {
name: "レオンハルト",
hp: 200
};
と宣言した後、
obj.mp = 50;
などのように追加できます。
ちなみに存在しないプロパティを参照しようとするとJavaScriptは、「undefined」を返します。
オブジェクトを更に活用する
オブジェクト指向というのは、全てをオブジェクトとして考えるということです。
変数も関数も配列も…その他もろもろオブジェクトです。
そう考えると先ほど作成したオブジェクトは、変数に毛が生えた程度でした。
例えばオブジェクトには関数も格納できます。
以下のサンプルを見て下さい。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>オブジェクト基本2</title>
</head>
<body>
<h1>オブジェクト基本2</h1>
<script>
var dora = {
name : "ドラえもん",
age: 13,
show: function(){
console.log(this.name + "は、" + this.age + "才です");
}
};
dora.show();
</script>
</body>
</html>
実行イメージ（コンソールに表示）
ドラえもんは、13才です
解説
15行目～17行目でオブジェクト内に関数を宣言しています。
show: function(){
console.log(this.name + "は、" + this.age + "才です");
}
上記の記述では、プロパティ名が関数名となっています。
関数としたい場合、プロパティ値を
funciton(){
// 処理
}
とします。
オブジェクトで宣言した関数を使用する場合は、オブジェクト変数名.関数名()として利用します。
dora.show();
以上、JavaScriptでのオブジェクト利用についてでした。
コメント