JS オブジェクトの作成方法とオブジェクト内のthisとは

JavaScriptをマスターする上で欠かすことの出来ないものの一つが「オブジェクト」になります。

データを管理する上で欠かすことの出来ない重要なものになりますので、しっかりと学習していきましょう。

オブジェクトとは
作成方法
オブジェクトでの this
あとがき

オブジェクトとは

オブジェクトとは、データと機能の集合体です。

この説明だと分かりにくいので、もう少し簡単に言うと、「プロパティ（name : ‘ジロウ’)」や「関数（function())」、「配列」などが格納されているものになります。

作成方法

基本的な記述方法

オブジェクトを作成するには以下の書式で記述します。

let sample = {key : 値, key : 値, key : 値};

以下例を見ていきましょう。

let profile = {
let profile = {
    name : 'ジロウ',
    age : 40,
    'favorite color' : [ 'blue', 'red']
}

profile.name;
'ジロウ'
profile.age;
40
profile['favorite color'];
(2) ['blue', 'red']

「name : ‘ジロウ’」の部分を「プロパティ」と呼びます。

keyに空白がある場合はクオテーションで囲む必要があります。

let profile = {
    name : 'ジロウ',
    age : 40,
    'favorite color' : [ 'blue', 'red'],
    greeting : function(){
    alert('こんにちは' + this.name + 'です。');
    }
}

profile.greeting();

「greeting : function()」のように、値に関数を記述したプロパティのことを「メソッド」と呼びます。

オブジェクトの中にオブジェクト

let profile = {
    name : 'ジロウ',
    age : 40,
    'favorite color' : { 
        first :'blue',
        last : 'red'
    },
     greeting : function(){
    alert('こんにちは' + this.name + 'です。');
    }
}

profile['favorite color'].first;
'blue'

先程の「‘favorite color’ : [ ‘blue’, ‘red’],」の配列で書いた値をオブジェクトに変更してみました。

「{}」で囲んで、「key + 値」で書き換えればOKです。

新しい値の代入

profile.name = '太郎';
'太郎'

profile['name'] = 'ジロウ';
'ジロウ'

新しい値を代入するには、ドットまたは「[]」でkeyを指定して、新しい値を記述します。

プロパティを追加する

profile['address'] = 'Tokyo';
'Tokyo'

profile.postalCode = '100-0000';
'100-0000'

ドットまたは「[]」でプロパティを追加します。

プロパティを削除する

delete profile.postalCode;
true

「delete」の後に削除するプロパティを記述します。

こちらも「[]」を使ってもOKです。

オブジェクトでの this

let profile = {
    name : 'ジロウ',
    age : 40,
    greeting : function(){
    alert('こんにちは' + this.name + 'です。');
    }
}

先程メソッド内に「this.name」という記述があったのですが、この「this」について簡単に説明していきます。

この「this」は現在のオブジェクト、「profile」を指しているのですが、なぜ「profile」と書かないで、「this」と書いているのでしょうか。

let profile = {
    name : 'ジロウ',
    age : 40,
    greeting : function(){
    alert('こんにちは' + this.name + 'です。');
    }
}

let profile1 = {
    name : '太郎',
    age : 42,
    greeting : function(){
    alert('こんにちは' + this.name + 'です。');
    }
}

例えばこのようにベースが同じコードが複数あった場合に、それぞれのオブジェクト名を記述するよりも簡単で分かりやすく簡潔に書くことが出来るためです。

詳しい「this」の解説はその都度していきます。