こんにちは 、コーダーの Shige です。
今回は、JavaScriptのオブジェクトの使い方と基本を解説します。

この記事では、

1.JavaScriptのオブジェクトとは
2.オブジェクトの生成と初期化
2.プロパティにアクセスする方法
3.プロパティの操作
4.メソッドにアクセスする方法
5.まとめ

JavaScriptのオブジェクトを詳しく解説していきますので、参考にしてみてください.

JavaScriptのオブジェクトとは

オブジェクトでは、データを名前(キー)と値のペアで管理します。

上記の表のように、これらのペア一組を名前と値で表される表データのことをプロパティと呼びます。
コードにしてみると、以下になります。

const obj = {
    name: '山田太郎',
    age: '30'
}

また、オブジェクトには「名前：配列」「名前：関数」というオブジェクト型の値のペアでデータを格納することもできます。

getAgeのように関数として記述したプロパティをメソッド(手続き)と呼びます。

以下は、オブジェクトに対してメソッド（手続き）を使って値として登録された関数を呼びだすことができます。

const obj = {
    name: '山田太郎',
    age: '30',
    hobby: ['読書','映画鑑賞'],
    getAge: function(){
    return this.age;
}
}
console.log(user.getAge());
>> 30

このように、オブジェクトでは、名前(キー)を指定して値を取得したり、関数を実行することができます。

「データ（プロパティ）」と「メソッド（手続き）」をまとめてオブジェクト単位でプログラムを作り、それらを組み合わせて開発していくというプログラミングです。

オブジェクトの生成と初期化

JavaScript ではオブジェクトリテラルを使って作成する方法と、オブジェクトコンストラクタを使って作成する方法があります。

オブジェクトリテラルの記述方法

オブジェクトリテラルの作り方は全体を{}で囲って記述します。

let Object = {}//プロパティを持たない空のオブジェクトを作成

上記のコードではデータ（プロパティ）が何もない空のオブジェクトを作成しているので、オブジェクトの初期化処理ともいわれます。

初期値としてプロパティを持つオブジェクトを作成できます。
プロパティは、オブジェクトリテラル（{}）の中にキーと値を:（コロン）で区切り、複数のプロパティが含まれる場合はカンマ(,)で区切って記述します。

//プロパティを持つオブジェクトを定義する
const Object = {
    // キー:値
    name: '山田太郎',
    age: '30'
};

オブジェクトからオブジェクトを作成する new演算子

もう一つの作り方としては、new演算子を利用する方法があります。

const Obj = new Object();

newを使うとObjとObjectは別のモノとして扱われるインスタンスを作ることができます。

以下のように、空のオブジェクトを作成したあとにプロパティを追加していくことができます。
また、インスタンス(実体)を作ったタイミングで実行されるメソッド(手続き)のことコンストラクタと言います。

const Obj = new Object();
console.log(obj);
>> {}

プロパティにアクセスする方法

また、プロパティへのアクセスする方法には、ピリオド演算子形式(「.」)を使ってアクセスする方法と、角括弧[]形式([])を使ってアクセスする方法があります。また、配列の中にオブジェクトを作ることもできます。

ピリオド演算子形式でアクセスする

ピリオド演算子形式を使う場合は、オブジェクト名とプロパティ名を「.」で連結させて使います。
オブジェクト.プロパティ名

const user = {
   name : '山田太郎',
   age : 30
}

console.log(user.name + ',' + user.age);

実行結果

山田太郎,30

「user.name」と記述すると、オブジェクトの「name」プロパティにアクセスできており、値の「山田太郎」を取得できるようになります。

角括弧[]形式でアクセスする

この記述法では、「.」を使うのではなく配列のように[]で囲んだ中にプロパティ名を記述します。

const user = {
    name : '山田　太郎';
    age : 30;
}

console.log(user['name'] + ',' + user['age']);

実行結果

山田太郎,30

「user[‘name’]」と記述することでnameプロパティにアクセスできているのがわかります。

基本的にはピリオド演算子形式を利用することが多いのですが、プロパティ名を日本語にした場合などは角括弧[]形式でないとアクセスできないのでどちらも使えるように覚えておきましょう。

配列の中にオブジェクトを作る

次のサンプルでは、オブジェクト自体を配列の要素にすることもできます。

const att = [
   {name: '太郎',age:30},
   {name: '花子',age:25},
   {name: '次郎',age:42},
];

この例では、配列の要素1つずつがオブジェクトになっています。
各オブジェクトの中には「name」「age」という2つのプロパティが存在しています。

このように配列の要素としても利用できるのはオブジェクト自体も値として利用することができるようになります。
そのため、例えばプロパティの値に別のオブジェクトを設定して階層構造を持たせることも可能です。

const info = {
    name : '山田　太郎',
    age : 30,
    hobby: {
        book: 'Sample Book',
        music: 'myMusic Song'
    },
}

この例では、オブジェクトの中にある「hobby」プロパティの中で、さらに「book / music」というプロパティを作成しています。

プロパティの操作

プロパティの追加

プロパティはあとから追加していくことができます。ドッド演算子(「.」)を使う方法とブラケット記述法([])どちらでもできます。

const info = {
    name : '山田　太郎',
}
 
info.age = 30;
info['add'] = "東京千代田区";
 
console.log(info);

実行結果：

{name: "山田　太郎", age: 30, add: "東京千代田区"}

プロパティの削除

delete演算子を使ってプロパティを削除することができます。

const info = {
    name : '山田　太郎',
    age : 30,
    add : "東京千代田区"
}
 
delete info.add;
 
console.log(info);

実行結果：

{name: "山田　太郎", age: 30}

プロパティの存在チェック

指定したプロパティが存在しているかどうかを確認する方法として、「undefined」と「in」を使う方法があります。

undefinedと比較

JavaScriptでは存在しないプロパティにアクセスした場合にundefined（未定義）を返します。

const info = {
   name : '山田　太郎',
   age : 30,
}

if (info.add == undefined) {
   console.log('プロパティaddは存在しません');
}

実行結果：

プロパティaddは存在しません

上記サンプルでは「’add’ in info」のように記述することで、「add」プロパティが存在するかどうかを確認しています。実際には存在していないので返り値としては「false」になります。
IF文の「false」処理が実行されるというわけです。

in演算子を使う方法

in演算子は指定したプロパティが存在する場合にtrueを返す特徴があります。

const info = {
    name : '山田　太郎'
    age:30,
}

const check = 'add' in info;

if (check) {
   console.log('プロパティaddは存在します');
} else {
   console.log('プロパティaddは存在しません');
}

実行結果：

プロパティaddは存在しません

「’add’ in ‘info’」のように記述することで、「add」プロパティが存在するかどうかを確認しています。
実際には存在していないので返り値として「false」になります。
if文の「false」処理が実行されるというわけです。

メソッドにアクセスする方法

メソッドはプロパティの値に関数を設定したものというのが基本的な構文になります。

const obj = {
    //プロパティ : 値(文字・数値・配列など),
    //プロパティ : 関数  ⇐これがメソッド
}

今度は作成したメソッドを実行する方法について解説をします。

const obj = {
    showText: function() {
        console.log( 'Hello World' );
    }
}

上記コードの場合、メソッドは「showText()」になります。
実行するにはピリオド演算子を利用して次のように記述します。

obj.showText()

実行結果

Hello World

オブジェクト名に続けてメソッド名を「.」で連結すれば実行できます。

まとめ

ここでは、簡単なオブジェクトの作り方について説明しました。
オブジェクトとはモノの特徴を表す、プロパティ（データ）と機能の集合体です。機能はたいてい変数と関数で構成されています。
オブジェクトの中ではそれぞれプロパティとメソッドと呼ばれます。

オブジェクトを理解出来れば、あらかじめブラウザで用意されたオブジェクトを操作すること出来るようになりますし、独自のオブジェクトを作成することもできるようになりますので、しっかりとマスターしておきたいです。

Webサイト制作のご依頼、ご相談等お気軽にお問い合わせください！