【JavaScript入門】オブジェクト – プロパティとメソッド

ここではJavaScriptのオブジェクトについて基本的なところを扱います。

JavaScriptのオブジェクトは簡単にいえば、他の言語でいう連想配列です。名前をキーにアクセスができる値です。通常の配列がインデックス番号のみをキーにしているということと違いがあります。

オブジェクトはプロパティとメソッドで構成されます。というだけではイメージが掴みにくいと思うので、基本的なことを具体的にみていきましょう。

オブジェクトとプロパティ
オブジェクトとメソッド
まとめ

オブジェクトとプロパティ

オブジェクトは連想配列だと述べました。通常の配列はインデックスの数字と値が対応しています。配列についてはすでにこちらで扱いました。

JavaScriptは値の集合を操作するための一般的な方法であるArrayオブジェクトについて扱います。Arrayオブジェクトとは配列で、要素を角括弧で括って生成します。インデックスを指定して値を取り出したり、メンバーを使って操作できます。

この配列がインデックスという数字をキーにしかできないのに対して、オブジェクトは文字列をキーにアクセスすることができるので、データの対応関係がとてもみやすくなるのが特徴です。

プロパティとは、オブジェクトの状態や特性を表す情報のことを言います。

具体的なコードで見てみましょう。

var edward = {
    firstName: 'エドワード',
    lastName: 'エルリック',
    age: 15,
    job: '国家錬金術師',
    family: ['アルフォンス', 'トリシャ', 'ヴァン','師匠', 'ウィンリィ'],
    isMarried: false
};

console.log(edward);

波括弧{}の中に、キーと値をコロン（:）でセットにして、要素が入れられているのがわかります。他のプログラミング言語の連想配列の形ですね。これがJavaSriptのオブジェクトということになります。これを変数に代入することをインスタンス化と言います。

console.log()で表示するとこうなります。

通常は最初の1行だけですが、▼印をクリックして展開して表示しています。

プロパティは、オブジェクトの状態や特性を表す情報でしたが、次のようにして取り出すことができます。

console.log(edward.firstName);
console.log(edward['lastName']);
var x = 'age';
console.log(edward[x]);

変数にドット（.）でキーを接続して出力しています。また、ドットで接続せずに角括弧[]にキーを指定して出力しています。どちらも同じ操作ですが、ドットで接続する方法が良いとされています。また、キーを新たな変数に代入して、それを角括弧で指定して出力しています。

このようにしてプロパティの内容を確認することができます。

次のようにすることで、プロパティの内容を変更することができます。

edward.job = '機械鎧技師';
edward['isMarried'] = true;
console.log(edward);

インスタンス変数にドットでキーを接続、または角括弧でキーを指定して、それぞれの値を変更しています。

出力すると次のようになります。

値が変更されて出力されているのがわかります。

上ではオブジェクトは波括弧{}で連想配列を作ることで作成していますが、new演算子を使ってオブジェクトを作ることもできます。

var alfons = new Object();
alfons.firstName = 'アルフォンス';
alfons.age = 14;
alfons['lastName'] = 'エルリック';
console.log(alfons);

newに続けてオブジェクト名を指定して、インスタンス変数に入れています。この時点では空のオブジェクトです。これにインスタンス変数にドット接続でキーを指定して値を入れて行きます。

表示するとこうなります。

新しいオブジェクトとして作成されているのがわかります。ただし、こちらも配列の時と同じようのnew演算子は表現が余計なので基本的に使わないということになっています。

オブジェクトとメソッド

今度はオブジェクトのメソッドについてみていきましょう。メソッドはオブジェクトの操作をするための道具です。

最初に示したオブジェクトのコードを次のように変更してみます。

var edward = {
    firstName: 'エドワード',
    lastName: 'エルリック',
    age: 15,
    job: '国家錬金術師',
    family: ['アルフォンス', 'トリシャ', 'ヴァン','師匠', 'ウィンリィ'],
    isMarried: false,
    calcBirthYear: function() {
        return  2019 - this.age;
    }
};

最後に、calcBirthYearというキーを与えて関数のfunction()を定義しています。この部分がメソッドになります。returnで戻り値として西暦2019から年齢のageを引いています。このときこのオブジェクトを示すthisキーワードを使っています。

次のようにドット接続で関数を実行すると、計算の値を取り出すことができます。

var birthYear = edward.calcBirthYear();
console.log(birthYear);

2014と値が出力されるはずです。

これを、次のように書き換えることもできます。

var edward = {
    firstName: 'エドワード',
    lastName: 'エルリック',
    age: 15,
    job: '国家錬金術師',
    family: ['アルフォンス', 'トリシャ', 'ヴァン','師匠', 'ウィンリィ'],
    isMarried: false,
    calcBirthYear: function() {
        this.birthYear = 2019 - this.age;
    }
};

edward.calcBirthYear();
console.log(edward);

returnで戻り値を返す代わりに、このオブジェクトであるthisキーワードを使ってbirthYearの変数を作って、その中に計算の値を代入する形にしています。

これをインスタンスからドット接続でこのメソッドcalcBirthYear()を実行して、オブジェクトの内容をconsole.log()で表示しています。

実行すると、JavaScriptコンソールには次のように表示されます。

birthYearも計算されて表示されているのがわかります。

次のようにな書き方もできます。

var edward = {
    firstName: 'エドワード',
    lastName: 'エルリック',
    age: 15,
    job: '国家錬金術師',
    family: ['アルフォンス', 'トリシャ', 'ヴァン','師匠', 'ウィンリィ'],
    isMarried: false,
    calcBirthYear: function() {
        this.birthYear = 2019 - this.age;
        return this.birthYear;
    }
};

console.log(edward.calcBirthYear());

JavaScriptコンソールに2014と出力されるはずです。