Javascript【オブジェクト】とは？初心者向け

Javascriptの「オブジェクト」
私は何度説明を受けてもわかりませんでした。
オブジェクトは実際に手を動かして体感したほうがわかります。

Javascript「オブジェクト」の説明

「オブジェクト」とは「プロパティ」を複数集めた集合のことです。
変数配列もオブジェクトの一種に当たります。
※プロパティの意味：あらかじめ設定した特定のデータに名前「プロパティ名」をつけたもの。

「オブジェクト」について最初、この手の説明を受けがちです。
初めて聞く言葉を、初めて聞く言葉で説明する必要がある・・・。
現段階で「オブジェクト」よく分らずとも実際に使用すると分かってきます。

「オブジェクト」は「配列」のように複数のデータを管理するのに使います。
「配列」ではデータにインデックス番号がふりあてられていました。
「オブジェクト」では自分で名前を決めます。その名前をつけたものを「プロパティ」と呼びます。

これ、あれなのです。

後に「配列」と「オブジェクト」を組み合わせて使用する場面が出てきます。
その時、インデックス番号が割り振られつつの、自分で「プロパティ名」の組み合わせによって自由度があがります。

よ～し、あのデータを引っ張ってこよ～的な。
ルールをちゃんと覚えたら、こっちのものです。

Javascript「オブジェクト」の書き方

以下、「配列」と「オブジェクト」の書き方の違いです。

配列
[値1,値2,値3]

オブジェクト
｛プロパティ1:値1,プロパティ2:値｝

配列は要素を[ 　]四角カッコで囲みましたが、オブジェクトは｛ ｝にょろカッコで囲みます。プロパティの名前は自分で決めます。
プロパティと値の間はコロン（ : ）で繋ぎます。
配列と同様に「要素」と「要素」はコンマ（ , ）で区切ります。

実例をあげると以下のようになります。

｛name:”みかん”,price:300｝

文字は” “で囲みます。
数字は囲みません。

Javascript「オブジェクト」の使い方

「変数」「定数」にオブジェクトも代入することができます。

const fruit = ｛name:”みかん”,price:200｝;

const fruit = ｛name:"みかん",price:200｝;

そして
console.log(fruit);

で出力したら、

｛name:”みかん”,price:200｝

ディスプレイに表示されます。

その時に、自分でつけた「プロパティ名」を使用します。

const fruit = ｛name:”みかん”,price:200｝;

fruit.name

console.log(fruit.name);

すると、

みかん

とディスプレイに出力されます。

自分で決めたnameがJavascriptに取り込まれています。
すごいこっちゃ、Javascript。そんなつもりなかったけど・・・。

そして改めて「オブジェクト.プロパティ名 = 新しい値」を記述することで、オブジェクトの値を後から代入して上書きすることも可能です。

実際にコードを書いてみましょう。

const fruit = ｛name:"みかん",price:200｝;

fruit.name = "バナナ";

console.log(fruit.name);

バナナ

がディスプレイに出力されます。

const fruit = ｛name:"みかん",price:200｝;

fruit.price = 100;

console.log(fruit.price);

100

がディスプレイに出力されます。

Javascript「オブジェクト」を「配列」の要素にする

「配列」の要素に文字列や数値だけでなく「オブジェクト」を使うこともできます。

↓

実例をだとこのようになります。
↓

const fruits =[｛name:”みかん”,price:200｝,｛name:”バナナ”,price:100｝];

定数であるfruitsに、オブジェクトを入れてた「配列」を代入しています。

長くなるため、
実際にコードを書く場合は改行していたりします。

const fruits =［｛name:"みかん",price:200｝,｛name:"バナナ",price:100｝];

//↓

const fruits =［
　｛name:"みかん",price:200｝,
　｛name:"バナナ",price:100｝
];

改行することによって見やすくなります。
改行されていない場合もあります。
見慣れるまでは、すぐには判断がつきません。
それでも使用している内になんとなく判断できるようになってきます。

※注意：改行するときに（ , )を消さないよう注意しましょう。
私は消しがちです。

そして

const fruits =[
　｛name:”みかん”,price:200｝,
　｛name:”バナナ”,price:100｝
];

「配列」です。
配列ということはインデックス番号がふられています。
※インデックス番号は0からスタートする。

const fruits =[
　｛name:”みかん”,price:200｝,　0：インデックス番号
　｛name:”バナナ”,price:100｝　 1：インデックス番号
];

console.log(fruits[1]);

｛name:”バナナ”,price:100｝
が、ディスプレイに出力されます。

インデックス番号がふられている上に、
自分でつけたプロパティ名での指定も可能です。

【配列[インデックス番号].プロパティ名】で指定します。

const fruits =［
　｛name:"みかん",price:200｝,
　｛name:"バナナ",price:100｝ 
];

みかんを出力したいなら指定方法は、

fruits[0].name

console.log(fruits[0].name);

みかん

が、ディスプレイに出力されます。

console.log(fruits[1].price);

100

が、ディスプレイに出力されます。

「オブジェクト」に「オブジェクト」を入れる

「オブジェクト」に「オブジェクト」を入れることもできます。

どういうことか言いますと、実際にコードを書くとこうなります。

const man =｛name:"たろう",
             favorite:{

             　food:"ごはん",
             　fruit:"みかん",
            　 sweets:"ケーキ",

　　　　　　},
｝;

値を指定したい場合は、
【オブジェクト名.プロパティ.プロパティ】で指定します。

みかんを指定する場合は
「man.favorite.fruit」

console.log(man.favorite.fruit);

みかん

がディスプレイに出力されます。

ただこれ、記述も読みずらいし、よけいな間違いを増やしかねません。

「オブジェクト」に「配列を入れることも可能です。

「オブジェクト」に「配列」を入れる

先ほどは「オブジェクト」に「オブジェクト」を入れたため、ややこしくなっていました。「オブジェクト」に「配列」を入れて書き換えてみます。

const man =｛name:"たろう",
             favorite:{

             　food:"ごはん",
             　fruit:"みかん",
            　 sweets:"ケーキ",

　　　　　　},
｝;

//↓　複雑だったものが「配列」を使って1行でかける。

const man =｛name:"たろう",favorite:［"ごはん","みかん","ケーキ"]｝;

コードがスッキリしました。

ごはんを指定したい場合は、

man.favorite[0]

console.log(man.favorite[0]);

ごはん

が、ディスプレイに出力されます。

「オブジェクト」と「配列」の関係には自由度の高さを感じますね。
どっちをどっちに入れた方がいいのか？
考える余地があります。

実際に仕事をする上でも、なんだか上手くいかないな・・・。
そんな時は入れる方が逆だった・・・。
そんなことってあります。なんとなく頭の片隅に置いておいてください。