JavaScriptは、オブジェクト指向言語です。
最近の仕様ではクラス（Class）記述もできるようにもなりました。
この記事では、クラスを使う以前に知っておきたいJavaScriptのオブジェクトという概念について簡単なプログラムを作って紹介します。
オブジェクトの基本的な記述方法
オブジェクトを利用するには、以下のようにObjectクラスのインスタンスを生成することで利用できます。
let obj = new Object();
オブジェクトは、生成したオブジェクト変数の後に、. （ピリオド）で区切ってにプロパティと呼ばれる項目名をつけることで利用できます。
以下の例では、name, hp がプロパティ名です。
obj.name = "レオンハルト";
obj.hp = 200;
ちなみにプロパティnameとhpにそれぞれ代入した“レオンハルト”と200は、プロパティ値と呼びます。
objという大枠の中にnameやhpという要素がある、という考え方です。
以下のようにオブジェクト生成と同時にプロパティを設定する方法もよく利用されます。
let person = { name: "レオンハルト", hp: 200 };
オブジェクト生成と同時にプロパティを定義する場合は、全体を｛ ｝でくくり、:（コロン）を使ってプロパティ名とプロパティ値を分けます。
let オブジェクト名= {
プロパティ名: プロパティ値,
プロパティ名: プロパティ値,
:
:
};
プロパティを宣言したオブジェクトは変数のように利用できます。
console.log(person.name); console.log(person.hp);
実行結果
レオンハルト
200
本記事では、オブジェクト生成と同時にプロパティを設定する方法を採用します。
少し細かい話になりますが、オブジェクト宣言と同時にプロパティ値を設定する場合、最後のプロパティに「,」（カンマ）をつけた記述をすることがあります。
例）
let obj = { name: "レオンハルト", hp: 200, };
これでもエラーにはなりません。
この特性を利用して、後から追加で別のプロパティ値を加えた時のカンマつけ忘れ防止の為に利用していることが多いです。
let obj = { name: "レオンハルト", hp: 200 // ←つけ忘れるとここでエラーが出てしまう mp: 50 };
オブジェクトを利用した基本的なプログラム
簡単なオブジェクトを生成して、コンソールに表示して確認してみます。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>オブジェクト基本1</title>
</head>
<body>
<p>コンソールに表示します...</p>
<script>
let 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プロパティは、数値データはそのまま記述します。
プロパティは、後から追加も可能です。
例えば、
let obj = { name: "レオンハルト", hp: 200 };
と宣言した後、
obj.mp = 50;
などのように追加できます。
ちなみに存在しないプロパティを参照しようとするとJavaScriptは、「undefined」を返します。
オブジェクトを更に活用する
オブジェクト指向というのは、あらゆるものをオブジェクトとして考えるということです。
変数も関数も配列も…その他もろもろオブジェクトです。
そう考えると先ほど作成したオブジェクトは、C言語の構造体のような変数に毛が生えた程度でした。
例えばオブジェクトには関数も格納できます。
以下のサンプルを見て下さい。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>オブジェクト基本2</title>
</head>
<body>
<p>コンソールに表示します...</p>
<script>
let 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 + "才です");
}
上記の記述では、プロパティ名（show）が関数名となります。
関数としたい場合、プロパティ値を
funciton(){
// 関数の処理
}
とします。
オブジェクト内部で、プロパティ値を参照するには、プロパティ名の前にthisをつけて. でつなげます。
console.log(this.name + "は、" + this.age + "才です");
オブジェクトで宣言した関数を使用する場合は、オブジェクト変数名.関数名()として利用します。
dora.show();
以上、JavaScriptでのオブジェクト利用についてでした。
コメント