六回目ーーオブジェクトーー
何が切っ掛けか分からないのですが、今少しモチベーションが上がっているので集中してブログ作りの練習を行えています。
とはいえ、こつこつブログモドキや様々なボタン、使える機能を覚えている状態なので想定しているゲーム用のブログを作るのはだいぶ先になりそうです。
道は長そうですが進歩を感じられ楽しいですね。
前回は複数のデータを纏めて扱う配列について学びました。
const animals = [“dog” , “cat” , “mouse”];
『animals(定数)』に複数の要素(値)を入れることが配列でした。
そして、要素は左端から0、1、2……とインデックス番号が割り振られてもいました。
インデックス番号を使い
console.log(animals[0]);
0番に入れられている『dog』が出力されます。
animals[1] = “lion”;
このようにすれば中身を入れ替える、要素の更新が行えます。
前回は触れていませんでしたが、定数の値が変更されています。
これが可能なのは
『constの宣言はanimalsに対してで
要素のdogやcatではないからです』
animals = [“dog” , “cat”];
animals = [“dog” , “cat” , “mouse” , “lion”];
animals = [“dog” , “cat” , “lion”];
このようにconstが宣言されているanimalsに対して再代入――異なる値を代入し直そうとする行為は変数に値します。
色を認識して登録するanimalsボックスに色つきの袋に入れた三つの動物人形を纏めて収納した場合、同じ色の袋である限りその中身をいくらでも入れ替えることは可能です。
これがインデックス番号による更新。
しかし、袋の色を変えてしまうといくら中身が同じでもanimalsボックスは登録と異なる色の袋と認識してしまい吐き出してしまうのです。
これがanimalsの中身を再代入しようとする行為。
私の認識として分かりやすい例えがこれです。
そして、今回は似たような意味を持つ『オブジェクト』について学びます。
１．オブジェクトとは
オブジェクトとは配列と同じく複数のデータを纏めて管理する為に使います。
配列と異なる点は、『プロパティ』と呼ばれる名前を付けて管理する点です。
配列
[値1,値2,値3];
オブジェクト
{プロパティ1:値1,プロパティ2:値2};
このように異なり、カッコが異なる点にも注意が必要です。
使い方も配列と殆ど変わりありません。
const animals = {name : “dog” , count : 3};
console.log(animals);
animalsの中に入っている『{name : “dog” , count : 3}』が出力されます。
２．オブジェクトの値
では、中身を取り出したいと思います。
配列の場合はインデックス番号を指定して取り出していました。
オブジェクトの場合は
console.log(animals.name);
プロパティの名前を『.(ドット)』を付けてコードを書くと出力されます。
更新したい場合も
animals.count = 4;
console.log(animals.count);
このような形にすると出力されます。
３．オブジェクトの要素配列
では、オブジェクトと配列をくっ付けてしまいたいと思います。
例えば、ペットショップで買い物をするとします。
お店の中には犬以外にも多くの動物がおり、その値段(値)が表示されています。
このような時に使えるのがオブジェクトを要素にした配列です。
const animals = [
{name:”dog” , price:17};
{name:”cat” , price:18};
{name:”rabbit” , price:5:};
];
これでオブジェクトが要素となり配列されます。
この状態でインデックス番号を使うと
console.log(animals[0]);
console.log(animals[1].name);
上はインデックス番号0に入っている『{name:”dog” , price:17};』が全て出力され、下はインデックス番号1のnameプロパティの『cat』だけが出力されます。
４．繰り返し処理
更にfor文を使い該当動物の値段を文章として出力させます。
まずfor文に必要な条件式。
一体ずつなので数値を再代入できる変数を使います。
一体ずつなので1ずつ増える様にします。
ただし要素数までです。
for (let i = 0; i < animals.length; i = i + 1)
lengthは要素数を意味するので、animalsに入っている要素数分だけという意味になります。
次に表示する文章を作っていきます。
出力したい文章は二つです。
『動物の呼称は○○です』
『値段は○○万円です』
その前にそれぞれを出力出来る様に器を用意します。
const animal = animals[i];
これでanimalsに入っている三つの項目をiの数値(インデックス番号)ごとに更新して出力出来る様になりました。
console.log(`動物の呼称は${animal.name}です`);
console.log(`値段は${animal.price}万円です`);
動物の呼称はdogです
値段は17万円です
動物の呼称はcatです
値段は18万円です
動物の呼称はrabbitです
値段は5万円です
結果はこのようになり、オブジェクトを要素にする配列は終了となります
最終目的
・勿論手に職を付ける、若しくはお金を稼ぐ
・簡単なゲーム(リバーシや簡易シューティングなど)を作る
・フリーソフトで販売
短期目標
・大まかな流れを覚える
・プログラミングを理解する
上記の内容は覚える中で変わることがあると思います。
