はじめに
JavaScript入門講座の第八弾として、JavaScript オブジェクトを初心者向けに解説、追加、削除、コンストラクタ、new演算子などついて紹介します。
この記事を読むと次の疑問について知ることができます。
- オブジェクトとは？
- オブジェクトのプロパティとは？
- オブジェクト内のデータの参照
- プロパティの追加
- プロパティの削除
- オブジェクトのメソッドとは？
- メソッドの参照
- コンストラクタとnew演算子とは？
- for in 文によるオブジェクト内の全要素の参照はどうするの？
JavaScript入門講座（7）では、JavaScriptの関数の書き方、定義、関数名、呼び出し、引数、戻り値、関数の中に関数について解説してきました。
ここでは、JavaScript オブジェクトを初心者向けに解説、追加、削除、コンストラクタ、new演算子などについて深堀していきます。
オブジェクトとは？
オブジェクトとは、JavaScriptで扱えるデータ型の一つで、複数の変数と値のセットを持ったプロパティと関数のようなメソッド（正確には関数とメソッドは異なる部分がある）を持つことができます。
一般的なオブジェクトの書き方は、次のように表現できます。
それでは、オブジェクトの構成要素を紐解いていきましょう。
オブジェクトのプロパティ
プロパティーには、変数と値をセットにしたデータセットを複数持つことができます。
以下の例を挙げます。
// オブジェクトの宣言
let obj = {
// プロパティの定義
name : "鈴木",
age : 58,
"zip-code" : "100-0000"
}
- letでオブジェクト（オブジェクト名：obj）を宣言
- 「name」プロパティーを定義
- 「age」プロパティーを定義
- 「zip-code」プロパティーを定義
（注）プロパティ名にスペース、「-」ハイホンなどを含む場合は、クオーテーション又はダブルクオーテーションで括る必要があります。
オブジェクト内のデータの参照
オブジェクト内のデータを参照するには2つの方法があります。
それでは、実際に先に宣言したオブジェクトobj内のデータを参照してみましょう。
console.log(obj.name); console.log(obj["name"]);
- console.log(obj.name);で「１」の方法でプロパティ名nameを参照して、コンソールに出力、
（結果 鈴木） - console.log(obj["name"]);で「２」の方法でプロパティ名nameを参照して、コンソールに出力、
（結果 鈴木）
プロパティの追加
先に宣言したオブジェクトobjに異なるプロパティを追加することができます。
それでは、実際にプロパティを追加してみましょう。
obj.birthPlace = "東京都"; console.log(obj.birthPlace);
- obj.birthPlace = "東京都";で、出身地のプロパティを追加
- console.log(obj.birthPlace);で出身地の値をコンソールに出力
プロパティの削除
先に宣言したオブジェクト obj の必要のないプロパティを削除することができます。
それでは、実際にプロパティを削除してみましょう。
console.log(obj["zip-code"]); delete obj["zip-code"]; console.log(obj["zip-code"]);
- console.log(obj["zip-code"]);で、オブジェクトobjで定義した"zip-code"を出力
（結果 100－0000） - delete obj["zip-code"];により、delete演算子でプロパティの"zip-code"を削除
- console.log(obj["zip-code"]);で、オブジェクトobjで定義した"zip-code"を出力するが、既に削除されている。
（結果 undefined）
オブジェクトのメソッド
それではここで、簡単なオブジェクトのメソッドを定義してみましょう。
先に宣言したオブジェクトobjにメソッドを追加します。
// オブジェクトの宣言
let obj = {
// プロパティの定義
name : "鈴木",
age : 58,
"zip-code" : "100-0000",
// メソッドの定義（追加）
aiSaTu : function () {
console.log( "こんにちは！" );
}
}
// メソッドの定義（追加）以降に書いた次の構文がメソッドを追加た部分です。
aiSaTu : function () { console.log( "こんにちは！" ); }
メソッドの参照
メソッドを呼び出して参照するには、次のようにします。
console.log(obj.aiSaTu()); console.log(obj);
- console.log(obj.aiSaTu());で、オブジェクトobjのメソッドaiSaTu : function () { console.log( "こんにちは！" ); }を呼び出して、コンソールに出力しています。
（結果 こんにちは！） - console.log(obj);でオブジェクトobjをコンソールに出力しています。オブジェクトの中身を見ることができます。
（結果 {name: '鈴木', age: 58, aiSaTu: ƒ, birthPlace: '東京都'}）
コンストラクタとnew演算子
コンストラクタとは、new演算子で呼び出された関数をコンストラクタと呼びます。
それでは、new演算子とはどのようなのもなのでしょうか？
あるプログラムの対象（オブジェクト）があり、プログラムAとプログラムBの両方から読み書きなどを行おうとすると、お互いに干渉して動作が正常に動かなくなります。
そこで、オブジェクトのコピーをプログラムAとプログラムBの両方に作成し、そのコピー（インスタンスと呼ぶ）を通してそれぞれがアクセスするようにすれば干渉が起きません。
new演算子は、コピーを作成するための役割を持っています。
ここで具体的な例を挙げて見てみましょう。
// 関数の作成（コンストラクタ）
function NinGen ( name){
this.name = name;
// 挨拶メソッド
this.aiSaTu1 = function () {
console.log("こんにちは！わたしの名前は" + this.name +"です。");
}
}
// new演算子でNinGenのオブジェクトを作成（インスタンス）
let obj1 = new NinGen("鈴木");
let obj2 = new NinGen("山田");
// 挨拶メソッドの実行
obj1.aiSaTu1();
obj2.aiSaTu1();
- 引数 name を持った NinGen と言う関数(コンストラクタ）を作成
(注）コンストラクタ名の頭文字は大文字とするのが慣例です。 - 引数の変数にnameを代入（ここで、this は、NinGen の関数そのものと考えてください。）
- 挨拶の関数（メソッド）を定義
- let で オブジェクト obj1 を宣言し、それに new演算子で作成した関数（コンストラクタ）に”鈴木”の値が入ったインスタンスを代入
- let で オブジェクト obj2 を宣言し、それに new演算子で作成した関数（コンストラクタ）に”山田”の値が入ったインスタンスを代入
- obj1.aiSaTu1();で挨拶メソッドを実行、 （結果 こんにちは！わたしの名前は鈴木です。）
- obj2.aiSaTu1();で挨拶メソッドを実行、 （結果 こんにちは！わたしの名前は山田です。）
for in 文によるオブジェクト内の全要素の参照
for in 文を利用すると、配列でも説明したと同様にオブジェクト内の全要素にアクセスすることができます。
for (let index in obj){
console.log(obj[index]);
}
- index にプロパティ名が入り、オブジェクトの全要素をconsole.log(obj[index]);により、コンソールに出力、
（結果）
鈴木 ⇒ オブジェクトobjの nameプロパティ値を出力
58 ⇒ オブジェクトobjの ageプロパティ値を出力
ƒ () { console.log( "こんにちは！" ); ⇒ オブジェクトobjのメソッド（関数）を出力
東京都 ⇒ オブジェクトobjのプロパティ birthPlace 値を出力
おわりに
如何だったでしょうか？
オブジェクトとは？、オブジェクトのプロパティとは？、オブジェクト内のデータの参照、プロパティの追加、プロパティの削除、オブジェクトのメソッドとは？、メソッドの参照、コンストラクタとnew演算子とは？、for in 文によるオブジェクト内の全要素の参照はどうするの？などについて紹介してきました。
この記事があなたにとって少しでもお役に立てればこれほど嬉しいことはありません。
以上です。
コメント