DESIGNMAP

  1. TOP
  2. 公開講座
  3. ゼロから始めるJavaScript入門
  4. オブジェクト ー ゼロから始めるJavaScript入門(ECMAScript 2015)【Vol.12】

オブジェクト ー ゼロから始めるJavaScript入門(ECMAScript 2015)【Vol.12】

オブジェクトはユーザーが定義できるオブジェクトと組み込みのオブジェクトがあります。組み込みのオブジェクトは、配列、関数があげられます。今回はユーザーが定義できるオブジェクトを学びます。

オブジェクトは名前のついた値を集めたコンテナです。

Atomで新規ファイルをつくり「文字列型 ー ゼロから始めるJavaScript入門(ECMAScript 2015)【Vol.2】」で作った「js-study」フォルダ内に、「obj1.html」というファイル名で保存します。

以下のコードを書いて保存します。

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title></title>
  </head>
  <body>
    <script>
      var book = new Object();

      book.id = 1;
      book.title = "三四郎";
      book.price = 800;

      console.log(book);

    </script>
  </body>
</html>

Google Chromeで「obj1.html」を開き、JavaScriptコンソールを開きます。「Object」が出力されます。

JavaScriptコンソールで出力された「Object」の左に三角があります。クリックすると、Objectの中をみることができます。

名前のついた値が4つ表示されます。これをプロパティと呼びます。

一番下の__proto__プロパティは、記述していません。これはプロトタイプ継承という仕組みで、別のオブジェクトからプロパティを受け継ぐ機能です。__proto__プロパティの左の三角を開くと、さらにいろいろなプロパティが表示されます。

継承していますので、これらは今回のオブジェクトでも自分のプロパティのように使うことができます。具体的にはObject.prototypeオブジェクトからプロパティを継承しています。

3つしか明示的にプロパティを設定していないのですが、継承という仕組みがあるため実際は多くのプロパティを使うことができます。

プロトタイプ継承はJavaScriptの重要なポイントです。回を改めてじっくり解説します。

インスタンス化

var book = new Object();

newはオブジェクトからオブジェクトの複製をつくる演算子です。JavaScriptにはObjectオブジェクトという組み込みのオブジェクトが用意されています。このオブジェクトは最小限のプロパティをもったオブジェクトです。ここから、new演算子で複製して自分用のオブジェクトをつくります。

オブジェクトからオブジェクトを複製することをインスタンス化といいます。インスタンス化されたオブジェクトをインスタンスと呼びます。

オブジェクトのプロパティの値を取得する(ドット記法)

以下のように記述するとプロパティの値を取り出すことができます。オブジェクトを参照している変数名の後に、ドットを書き、プロパティ名でつなげます。ドット記法と呼ばれます。

var book = new Object();

book.id = 1;
book.title = "三四郎";
book.price = 800;

console.log(book.id);
console.log(book.title);
console.log(book.price);
1
三四郎
800

オブジェクトのプロパティの値を取得する(ブラケット記法)

ドット記法以外に

console.log(book["id"]);
console.log(book["title"]);
console.log(book["price"]);

ように角括弧にプロパティの文字列を指定して取り出すことも可能です。ブラケット記法と呼ばれます。

ブラケット記法はドット記法と比べて使う機会は少ないですがメリットがあります。
例えば、変数をつかって動的にプロパティ名を指定できます。

var book = new Object();

book.id = 1;
book.title = "三四郎";
book.price = 800;

var str1 = "ti";
var str2 = "tle";

console.log(book[str1 + str2]);
三四郎

後述するfor in文でプロパティの値を取得するときもこのブラケット記法を使います。

オブジェクトに存在しないプロパティ名にアクセスした場合

エラーではなく、undefinedが返されます。

var book = new Object();
book.id = 1;

console.log(book.name);
undefined

オブジェクトリテラル

new Object()からつくる方法をご紹介しましたが、実際のコーディングではほぼオブジェクトリテラルが使われます。オブジェクトリテラルを使うと、new Object();と書かず、いきなりインスタンス化されたオブジェクトを書くことができます。

var book = {
  id: 1,
  title: "三四郎",
  price: 800
};

console.log(book);
console.log(book.id);
console.log(book.title);
console.log(book.price);

実行すると、下図のように表示されます。console.log(book);の出力がnew Object()の例と若干ことなりますが、三角を開くと、__proto__プロパティがみえますので、new Object()からつくったオブジェクトと同じであることがわかります。

プロパティの追加

空のオブジェクトをつくっておき、後からプロパティを追加することもできます。

var book = {};

book.id = 1;
book.title = "三四郎";

console.log(book);
Object {id: 1, title: "三四郎"}

プロパティの削除

delete演算子でプロパティを削除できます。

var book = {
  id: 1,
  title: "三四郎",
  price: 800
};

delete book.id;

console.log(book);
Object {title: "三四郎", price: 800}

for in文でプロパティを列挙する

for in文でプロパティを列挙できます。

var book = {
  id: 1,
  title: "三四郎",
  price: 800
};

for(var p in book) {
  console.log(p);
}
for(var p in book) {
  console.log(book[p]);
}

pにはプロパティ名が取得できます。値を出力したい場合はbook[p]のようにブラケット記法を使います。

id
title
price
三四郎
800

プロパティが存在するかの確認

in演算子を使うと、オブジェクトにプロパティが存在かどうかの確認することができます。存在すればtrue、存在しなければfalseを返します。

var book = {
  id: 1,
  title: "三四郎",
  price: 800
};

console.log("id" in book);
console.log("name" in book);
true
false

ただしin演算子は、注意点があります。プロトタイプ継承したプロパティもtrueを返してしまうのです。

console.log("toString" in book);
true

toStringプロパティは、Object.prototypeオブジェクトで定義されているプロパティですが、継承されてしまいます。

オブジェクト自身のみのプロパティに限定させたい場合は、hasOwnProperty()メソッドを使います。

console.log(book.hasOwnProperty("toString"));
console.log(book.hasOwnProperty("id"));
false
true

入れ子のオブジェクト

オブジェクトのプロパティに別なオブジェクトを割り当てることも可能です。複雑なデータ構造がつくれます。

var cart = {
  product1: {
    name: "フライパン",
    price: 2000
  },
  product2: {
    name: "まな板",
    price: 1000
  }
}

console.log(cart.product1);
console.log(cart.product2);
Object {name: "フライパン", price: 2000}
Object {name: "まな板", price: 1000}

オブジェクトのプロパティの値に関数を設定できる

プロパティの値に、関数を割り当てることができます。この場合、getTitleプロパティは、メソッドと呼ばれます。メソッドとは、オブジェクトのプロパティに関数が定義されたものです。

var book = {
  id: 1,
  title: "三四郎",
  price: 800,
  getTitle: function(){
    return this.title;
  }
};

console.log(book.getTitle());
三四郎

return this.title;thisはインスタンス化されたオブジェクト自身を指します。

オブジェクトリテラルのよりシンプルなメソッドの定義の記法

先ほど紹介したメソッドはより簡略した表記が書けます。: function()が省略できます。

var book = {
  id: 1,
  title: "三四郎",
  price: 800,
  getTitle() {
    return this.title;
  }
};

console.log(book.getTitle());
三四郎

オブジェクトを返す関数を定義する

配列を返す関数をつくり、Fizz Buzz問題を解こう ー ゼロから始めるJavaScript入門(ECMAScript 2015)【Vol.11】」で配列を返す関数を定義しましたが、オブジェクトを返す関数をつくることもできます。

function getBook(title, age) {
  return {
    title: title,
    age: age
  };
}

var obj = getBook("我輩は猫である", "1905年");
console.log(obj);
Object {title: "我輩は猫である", age: "1905年"}

プロパティの値に変数を設定しています。

なお上記のコードは、プロパティ名と値の変数名が同じ名前なので、

function getBook(title, age) {
  return {
    title,
    age
  };
}

と簡略して書くことができます。

関数の引数にオブジェクトを渡す

関数の引数にオブジェクトを使うコードもよくでてきます。

function showBook(obj){
  if (obj.title === undefined) { obj.title = "三四郎"; }
  if (obj.price === undefined) { obj.price = 1000; }
  return `${obj.title}の値段は${obj.price}円です。`;
}

console.log(showBook({
  title: "こころ",
  price: 800
}))
こころの値段は800円です。

この場合、
下記のように順番を変えても出力が同じです。

console.log(showBook({
  price: 800,
  title: "こころ"
}))

また

 if (obj.title === undefined) { obj.title = "三四郎"; }
 if (obj.price === undefined) { obj.price = 1000; }

のようにデフォルト値を設定しているので、

console.log(showBook({
  price: 800,
}))

のように呼び出した場合、

三四郎の値段は800円です。

とデフォルト値が使われます。

オブジェクトを受け取る関数側を下記のように書くことも可能です。

function showBook({ title, price }){
  return `${title}の値段は${price}円です。`;
}

console.log(showBook({
  title: "こころ",
  price: 800
}))
こころの値段は800円です。

デフォルト値も

function showBook({ title = “三四郎”, price = 1000 }){
return `${title}の値段は${price}円です。`;
}

とシンプルに設定することができます。

動的なプロパティ名

プロパティ名を角括弧でくるむと、式の値から動的にプロパティ名を生成できます。

var book = {
  ["title" + 1]: "三四郎"
};

console.log(book);
Object {title1: "三四郎"}

以下のように変数を使うこともできます。

t = "title";

var book = {
  [t + 1]: "三四郎"
};

console.log(book);
Object {title1: "三四郎"}

スポンサーリンク

関連記事

プロフィール

DESIGNMAP
ディレクター
ON VISITINGを制作・運営。
マジックカテゴリーはhttp://tejina.designmap.info/に移しました。
お問い合わせ