第9話:オブジェクト

第1部 JavaScriptプログラミングの基本

目次

マンガ








マンガ台詞

【1Page】
先生:前回は配列を学んだが 今回は『オブジェクト』だ 数字ではなく文字列を 添え字にするんだ
    それではちょっと 書いてみよう
        var tensuuObj = new Object();
        tensuuObj["足立"] = 65;
        tensuuObj["安藤"] = 78;
        tensuuObj["内木"] = 87;
        :
    これは こうも書ける
        var tensuuObj = {"足立" : 65, "安藤" : 78, "木村" : 43, …};
    見にくければ 途中で折り返し てもよい
        var tensuuObj = {
             "足立" : 65
            ,"安藤" : 78
            ,"内木" : 87
            ,…
        };
【2Page】
守:先生 『オブジェクト』は どうやってループ させるんですか?
先生:よい質問だ 『オブジェクト』では 『for』文ではなく 『for in』文を 利用する
    実例を 見てもらおう
        var tensuuObj = {"足立" : 65, "安藤" : 78, …};
        var goukeiTen = 0;
        var ninnzuu = 0;
        for (var key in tensuuObj) {
            goukeiTen += tensuuObj[key];
            ninnzuu ++;
        }
        var heikinTen = goukeiTen / ninnzuu;
        alert(heikinTen);
    『オブジェクト』を作る際に 指定した文字列の要素名は 『キー』とも呼ばれる
    ここでは 『tensuuObj』に入れた 『足立』『安藤』 といった文字列が 『キー』となる
【3Page】
先生:『for in』文では 『変数 in オブジェクト』
    とすることで 要素名を取り出せる
    この場合は 変数『key』に
    『tensuuObj』のキー を取り出している
先生:『for』文と 同じように 処理の流れを 書いてみるぞ
    『key』に 『tensuuObj』の 要素名を取り出し
    『ループ処理』 を行う
    全ての要素名を 取り出し終えた ので抜ける

【4Page】
先生:このプログラムを 実行すれば クラスの平均点が 分かるぞ
        58点
麗:じー
        :
        ,"安川" : 87
        ,"安見" : 3
        ,"吉田" : 76
        :
    なるほど 遊がクラスの 平均点を下げて いるのね
遊:(ガーン)

説明

この章では、『オブジェクト』と『オブジェクトのループ処理』について学びます。『オブジェクト』は、配列に似ています。各要素にアクセスする際は、数値(『array[0]』など)ではなく、文字列(『object["string"]』)を使ってアクセスします。『オブジェクト』は、『.length』で要素の数を知ることはできません。

『オブジェクト』の各要素をループ処理で利用する際には、『for』文ではなく、『for in』文を利用します。

『オブジェクト』

『配列』は『数字』が添え字のデータセットでしたが、『オブジェクト』は『文字列』が添え字のデータセットです。(本当はもっと複雑な説明が必要ですが、ここではこれだけに留めておきます)

以下、いくつかの方法でオブジェクトを作ってみます。以下は、全て同じ内容のオブジェクトが作成されます。

var tensuuObj = new Object();
tensuuObj["adachi"] = 65;
tensuuObj["andou"] = 78;
tensuuObj["utiki"] = 87;
var tensuuObj = {};    // 中身が空のオブジェクトを作る
tensuuObj["adachi"] = 65;
tensuuObj["andou"] = 78;
tensuuObj["utiki"] = 87;
var tensuuObj = {"adachi": 65, "andou": 78, "utiki": 87};

3番目の方法でオブジェクトを作る際、その要素名が「変数名に使える文字列」の場合、『"』を省略して書くことができます。以下、例です。(上記の例でも『"』は省略できるのですが、英数字以外は『"』を付けて書いた方が分かりやすいので、付けた方がよいです)

var tensuuObj = {adachi: 65, andou: 78, utiki: 87};

各要素を利用する際は、『[~]』を利用する方法と、『.~』を利用する方法があります。『.~』を利用する方法が使えるのは、その要素名が「変数名に使える文字列」の場合のみです。

var s = tensuuObj["adachi"] + "," + tensuuObj.andou
document.write(s);

【結果】

65,78
参考

以下、中級者以上向け。

入れ子

配列が多次元配列を作れたように、オブジェクトも入れ子のオブジェクトを作れます。また、配列の中にオブジェクトを入れたり、オブジェクトの中に配列を入れたりすることもできます。

いくつか例を示します。また、例の中に出てくる『JSON』『console』については後述します。ここでは、Webブラウザで[F12]を押して開発者ツールを表示して、「コンソール」(Console)タブを選択して、そこに結果を表示します。

【例1】

var nestObj = {};
nestObj.adachi = {kokugo: 65, suugaku: 72};
nestObj.andou = {kokugo: 87, suugaku: 77};
console.log(JSON.stringify(nestObj, null, "  "));

【結果】

{
  "adachi": {
    "kokugo": 65,
    "suugaku": 72
  },
  "andou": {
    "kokugo": 87,
    "suugaku": 77
  }
}

【例2】

var nestObj = {adachi: {kokugo: 65, suugaku: 72}, andou: {kokugo: 87, suugaku: 77}};
console.log(JSON.stringify(nestObj, null, "  "));

【結果】

{
  "adachi": {
    "kokugo": 65,
    "suugaku": 72
  },
  "andou": {
    "kokugo": 87,
    "suugaku": 77
  }
}

【例3】

var nestArr = {};
nestArr[0] = {name: "adachi", kokugo: 65, suugaku: 72};
nestArr[1] = {name: "andou", kokugo: 87, suugaku: 77};
console.log(JSON.stringify(nestArr, null, "  "));

【結果】

{
  "0": {
    "name": "adachi",
    "kokugo": 65,
    "suugaku": 72
  },
  "1": {
    "name": "andou",
    "kokugo": 87,
    "suugaku": 77
  }
}

『JSON』

『JSON』は『JavaScript Object Notation』の略です。JavaScriptのオブジェクトを、文字列で記述したものです。

JavaScriptでは、『JSON.parse(文字列)』という命令を使い、文字列からJavaScriptのプログラムで使うオブジェクトを作ることができます。また、『JSON.stringify(オブジェクト)』という命令を使い、オブジェクトから文字列を作ることができます。

『JSON.stringify(オブジェクト)』をそのまま使うと、人間には読みにくい文字列が作成されます。

var nestObj = {};
nestObj.adachi = {kokugo: 65, suugaku: 72};
nestObj.andou = {kokugo: 87, suugaku: 77};
console.log(JSON.stringify(nestObj));

【結果】

{"adachi":{"kokugo":65,"suugaku":72},"andou":{"kokugo":87,"suugaku":77}}

『JSON.stringify(オブジェクト, null, "インデントに使う文字列")』とすることで、人間が読みにくい文字列にすることができます。

var nestObj = {};
nestObj.adachi = {kokugo: 65, suugaku: 72};
nestObj.andou = {kokugo: 87, suugaku: 77};
console.log(JSON.stringify(nestObj, null, "  "));

【結果】

{
  "adachi": {
    "kokugo": 65,
    "suugaku": 72
  },
  "andou": {
    "kokugo": 87,
    "suugaku": 77
  }
}
参考

『console』

Webブラウザで[F12]を押して開発者ツールを表示して、「コンソール」(Console)タブを選択すると、プログラムからの出力結果を見ることができます。

プログラム中に、『console.log(文字列)』と書くことで、このコンソール欄に情報を出力できます。複数の情報を出力したい場合は、『console.log(文字列1, 文字列2, 文字列3)』のように『,』(カンマ)区切りで書きます。

console.log(1);
console.log("2.文字列", "3.文字列", "4.文字列");
console.log("配列", [5, 6, 7]);
console.log("オブジェクト", {a: 8, b: 9, c: 10});

【結果】

1
2.文字列 3.文字列 4.文字列
配列 (3) [5, 6, 7]
オブジェクト {a: 8, b: 9, c: 10}
参考

『for in』文

『for in』文は、『for』文に似ています。しかし、違う点もあります。『for in』文では、『for (~)』の括弧内の書き方が『for』文とは異なります。

以下は、『for』文です。

for (変数の初期化; 継続条件; 変数の増減) {
    // ループ処理(何度も実行する処理)
}

以下は、『for in』文です。

for (要素名を取得する変数 in オブジェクト) {
    // ループ処理(何度も実行する処理)
}

『for in』文では、『for (~)』の括弧内で、『オブジェクト』と、その要素の『要素名』を取得する変数を書きます。この『要素名』を取得する変数には、ループが1回行われるごとに、『要素名』が1つずつ代入されていきます。ループ処理の中では、この『要素名』を利用して、オブジェクトの各要素の値を取得します。そして、全ての『要素名』を処理し終えたあとに、ループを抜けます。『要素名』は『キー』とも呼ぶので、『要素名』はkeyという変数で受け取ったりします。

以下、実例を示します。

var tensuuObj = {"足立" : 65 ,"安藤" : 78 ,"内木" : 87};
for (var key in tensuuObj) {
    document.write(key + " " + tensuuObj[key] + "<br>");
}

【結果】

足立 65
安藤 78
内木 87

変数『key』に、オブジェクト『tensuuObj』の『キー』が、1つずつ入っていきます。

そして、ループ処理内で『tensuuObj[key]』として、オブジェクトの要素の値を取得しています。

マンガ中のプログラムの解説

マンガで登場したプログラムについても、解説を行っておきます。

var tensuuObj = {"足立" : 65, "安藤" : 78, …};
var goukeiTen = 0;
var ninnzuu = 0;
for (var key in tensuuObj) {
    goukeiTen += tensuuObj[key];
    ninnzuu ++;
}
var heikinTen = goukeiTen / ninnzuu;
alert(heikinTen);

オブジェクト『tensuuObj』に対して、『for in』文でループ処理を行っています。

変数『goukeiTen』に、『tensuuObj』の各値を足していき、変数『ninnzuu』に、処理した回数を記録しています。最後に『goukeiTen / ninnzuu』と割ることで、平均点を取得しています。

サンプルの入手

以下は、今回出てきたサンプルです。

ZIPでまとめてダウンロード (右クリックから保存してください)

sample1.html』(平均点)を表示

sample1b.html』(短く表記)を表示

sample2.html』(キーと値を出力)を表示

プログラムの中身を見たい場合は、それぞれのHTMLファイルをブラウザで開いたあと、右クリックをして『ソースの表示』を選択してください。

メモ帳で、ファイルの中身を見ることができます。

Cronus Crown(クロノス・クラウン)のトップページに戻る
(c)2002-2018 Cronus Crown (c)1997-2018 Masakazu Yanai
このWebPageに関するご意見・お問い合わせは
サイト情報 弊社への連絡
までお願いします。