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

JavaScriptの学習メモ。

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

jsstudy.hatenablog.com

3.11　オブジェクト
- サンプルコード
- 実行結果
オブジェクト
まとめ

3.11　オブジェクト

(p.135)

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

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

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

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

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

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

サンプルコード

「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"] // ブラケット表記法

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

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

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

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

オブジェクトの作り方

書式：プロパティー数が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入門'

プロパティー名とデータ（値）の１組で、１つのプロパティーとなります。

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

プロパティ名: データ（値）
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のオブジェクト指向プログラミング」という知識とテクニックが必要になってきますが、少し高度なので本書ではそこまで扱っていません。

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

オブジェクトの練習として、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 ]