読者です 読者をやめる 読者になる 読者になる

JavaScript勉強会

JavaScriptの学習日記

3.11 アイテムの価格と在庫を表示する 《オブジェクト》 【JavaScript超入門】

JavaScriptの学習メモ。

今日は『確かな力が身につくJavaScript「超」入門』の第3章を読んでみます。

 

jsstudy.hatenablog.com

 

 

3.11 オブジェクト

 (p.135)

配列に続いて新しいデータの種類「オブジェクト」を紹介します。

「オブジェクトって、windowとかdocumentとか、いままで見てきたオブジェクトのこと?」

そう、同じです……基本的には。

ただ、ここでは複数のデータをまとめて1つの変数で管理するためにオブジェクトを使用します。

複数のデータを1つにまとめるという点で、前節の配列と今回のオブジェクトは似ていますが、もちろん違うところもあります。

サンプルを作りながら、オブジェクトというデータの特性や配列との違いを体感しましょう。

 

サンプルコード

「index.html」というファイルを作り、以下の内容を書きます。

<!doctype html>
<html>
<head>
    <meta charset="UTF-8">
    <title>3-11_object</title>
    <style>
        table {
            border-collapse: collapse;
        }
        td {
            padding: 4px 8px;
            border: 1px solid #23628f;
        }
    </style>
</head>
<body>
    <h1>アイテムの価格と在庫を表示する</h1>
    <table>
        <tr>
            <td id="title"></td>
            <td id="price"></td>
            <td id="stock"></td>
        </tr>
    </table>
    <script>
        var jsbook = { title: 'JavaScript入門', price: 2500, stock: 3 };

        document.getElementById('title').textContent = jsbook.title;
        document.getElementById('price').textContent = jsbook.price + '円';
        document.getElementById('stock').textContent = jsbook.stock;
    </script>
</body>
</html>

 

実行結果

「index.html」をChromeで開きます。

以下のような実行結果になりました。

f:id:jsstudy:20170423215030p:plain

 

オブジェクトのプロパティーから値が取り出されて、使われていることが確認できました。

 

オブジェクト

JavaScriptのオブジェクトって、他のプログラミング言語でいうところの「連想配列」と似てますね?

 

連想配列とは?

連想配列 - Wikipedia

連想配列(れんそうはいれつ、associative array)とは、コンピュータプログラミングにおいて、添え字にスカラー数値以外のデータ型(文字列型等)も使用できる配列である。

抽象データ型のひとつ。

連想リスト、連想コンテナ、辞書(ディクショナリ dictionary)、ハッシュ(hash)、マップ(map)とも呼ばれる。

 

連想配列では、要素とそれを紐付けできるような値(キーと呼ぶ)のペアで表され、キーによって目的の値を求める。

辞書やディクショナリという呼び方は、要素を本文、キーを見出しになぞらえたものと言える。

 

  • 配列の要素の位置は、数字の添え字で指定しました。(インデックス番号)
  • 連想配列の要素の位置は、文字の添え字で指定します。(キー名)

 

JavaScriptのオブジェクトは連想配列

javascript オブジェクト 連想配列 - Google 検索

 

developer.mozilla.org

 

JavaScript におけるオブジェクトはプロパティの集まりからなり、またそのプロパティは名前(あるいはキー)と値との関連付けから成り立っています。

プロパティの値を関数にすることもでき、これはいわゆるオブジェクトのメソッドとなります。

 

Javascriptメモ:連想配列とオブジェクト - Qiita

どうやら連想配列はオブジェクトの一種だと考えていいみたい。

 

 

配列とオブジェクトと連想配列 - Ajax専

連想配列(重要)

連想配列と言えば、

human['name']

こんな感じで記述できるのが連想配列です。

さて、この連想配列はArray型?Object型?

 

実はArray型で宣言してもエラーが出るわけではないので気づきにくいですが、Object型が正解です。

というよりもそもそも連想配列なんてものはJavascriptには存在しません。

 

上記の例を別の記述に変えると分かりやすいですが、

human.name

となります。

もうそのままObject型ですね。

 

とはいえ、利便性のため、「Ajax専」では

object[name]のような記述は連想配列と呼びます。

 

ドット演算子とは?

developer.mozilla.org

メンバー演算子は、ドット表記法またはブラケット表記法を使用してオブジェクトのプロパティにアクセスする方法を提供します。

 

object.property    // ドット表記法
object["property"] // ブラケット表記法

 

(ドット表記法で)オブジェクトとプロパティーをつないでいるドット(点)「.」が、「ドット演算子」です。

この点(ドット)を指すとき、何かしら呼び名がないと、会話で説明しづらいので、「ドット演算子」という名前が付けられたんでしょうか?

 

  • 連想配列では、キー(プロパティー名に相当)をブラケット[]で囲みますが、
  • オブジェクトでは、プロパティー名をドット.でつなぎます。

オブジェクトはドットで書けるので、ちょっとだけ文字数が節約できますw

 

オブジェクトの作り方

書式:プロパティー数が0個(空)のオブジェクトを作成して変数に保存する

var 変数名 = {};
var obj = {}; // 変数objに空のオブジェクトを代入

 

書式:プロパティーが1個以上あるオブジェクトを作成する

var 変数名 = { プロパティ名1: データ1, プロパティ名2: データ2, ..., プロパティ名n: データn };
var jsbook = { title: 'JavaScript入門', price: 2500, stock: 3 };

 

オブジェクトを構成する要素の名称
  • プロパティー:  title: 'JavaScript入門'
  • プロパティー名: title
  • データ(値):  'JavaScript入門'

プロパティー名とデータ(値)の1組で、1つのプロパティーとなります。

 

書式:プロパティーの書式

プロパティ名: データ(値)
propertyName: 'Value'

 

オブジェクトからデータを読み取る・書き換える

書式:プロパティーのデータを読み取る

オブジェクト名.プロパティ名

var book = { title: 'JS入門', price: 2500, stock: 3 };
var bookTitle = book.title;

 

書式:プロパティーのデータを書き換える

オブジェクト名.プロパティ名 = 新しいデータ

var book = { title: 'JS入門', price: 2500, stock: 3 };
book.stock = 1; // 本の在庫数を3から1に減らす

 

オブジェクトのメソッド

(p.141)

今回作成したオブジェクトにはプロパティだけしかありませんが、実はプロパティのデータにはファンクションを保存しておくこともできます。

var obj = {
    addTax: function (num) {
        return num * 1.08;
    }
};

objオブジェクトを定義して、そのaddTaxプロパティのデータとしてファンクションを代入しています。

プロパティのデータがファンクションのとき、そのプロパティのことを特別に「メソッド」といいます。

 

つまり、皆さんもメソッドとプロパティを持つオブジェクトを作成することができます。

ただ、それを作成して使いこなすには「JavaScriptオブジェクト指向プログラミング」という知識とテクニックが必要になってきますが、少し高度なので本書ではそこまで扱っていません。

まずは、プロパティだけを持つオブジェクトを作成し、複数のデータを1つにまとめて管理する方法を習得した後、興味のある方は「オブジェクト指向プログラミング」がどういうものか、ネットや別の書籍などで調べてみてください。

 

オブジェクトの練習として、2段階でやるとスムーズになりそうですね?

  1. 連想配列としてオブジェクトを利用する(複数のデータをまとめる箱)
  2. プロパティーに関数を入れて、メソッドも用意するオブジェクト指向プログラミングの機能)

 

f:id:jsstudy:20170423235952p:plain

 

オブジェクトの繰り返し処理

JavaScriptのオブジェクトは、for...in文で、オブジェクトのプロパティをすべて読み取ることができます。

 

書式:for...in文

for(var プロパティを保存しておく変数名 in オブジェクト名) {
    処理内容
}

 

developer.mozilla.org

for..in 文は、指定したオブジェクトの列挙可能プロパティに対して、順不同で反復処理をします。

各プロパティに対して、指定された文を実行できます。

 

var obj = {a:1, b:2, c:3};
    
for (var prop in obj) {
  console.log("obj." + prop + " = " + obj[prop]);
}

// Output:
// "obj.a = 1"
// "obj.b = 2"
// "obj.c = 3"

 

オブジェクトのイテレータ

イテレーターとは?

Iteratorの意味 - 英和辞典 Weblio辞書

反復子; 繰返し子

 

イテレータ - Wikipedia

イテレータIterator)とは、プログラミング言語において配列やそれに類似するデータ構造の各要素に対する繰返し処理の抽象化である。

実際のプログラミング言語では、オブジェクトまたは文法などとして現れる。

あまり一般的ではないが反復子(はんぷくし)という訳もある。

 

developer.mozilla.org

 

コレクションの中の各項目を処理するのは、とても一般的な操作です。

JavaScript は簡単な for ループから map()、filter() にいたるまで、コレクションを反復処理する方法を取り揃えています。

 

オブジェクトのプロパティを操作するときには、for...in文だけでなく、イテレーターを使って操作することもできます。

JavaScriptの新しいバージョンであるES2015では、イテレータ―が用意されています。

 

qiita.com

 

map()メソッド

(オブジェクトではなく)配列の要素を全て繰り返し処理したい場合には、map()というメソッドも用意されています。

 

developer.mozilla.org

map() メソッドは、与えられた関数を配列のすべての要素に対して呼び出し、その結果からなる新しい配列を生成します。

 

var numbers = [1, 3, 5, 7];
var square = function(x) { //正方形の面積算出
    return x * x;
}
var area = numbers.map(square); // 面積の配列
console.log(area);

// Output:
// [ 1, 9, 25, 49 ]

 

配列やオブジェクトのように、データの束を操作するときは、繰り返しの処理を行いますね?

JavaScriptでは、繰り返しの処理にも、いろいろ便利な仕組みが用意されています。

 

まとめ

  • JavaScriptのオブジェクトは、いわゆる「連想配列」と同じ(似ている?)
  • オブジェクトのプロパティーは、キー(プロパティー名)と値(データ)のペアで1組の構造になっている
  • プロパティーに関数を保存した場合、そのプロパティーは「メソッド」と呼ばれる
  • 全てのプロパティーを操作(読み取り等)する場合、for...in文やイテレーターを使う

 

オブジェクトの使い方の練習は、本書のアドバイスだと2段階でやると良いみたいです。

 

  1. 連想配列としてオブジェクトを利用する(複数のデータをまとめる箱)
  2. プロパティーに関数を入れて、メソッドも用意する(オブジェクト指向プログラミングの機能)

 

データがたくさんある場合、オブジェクトを活用して、データの扱いをスッキリさせたいです。