みなさんこんにちは、現役エンジニアのサメハックです
アパレル企業でトップ販売員を経て
未経験からWebエンジニアに転職し、
現在正社員として5年働いています!
今回はオブジェクト(連想配列)について学んでいきましょう!
難しい項目なので、これ以上無いくらいわかりやすく解説します!
駆け出しエンジニアや未経験の方、
また新入社員を指導する先輩社員にとっても
わかりやすいように解説していきます!
- オブジェクトの概念が理解できる
- オブジェクトから期待の値を取得できる
実は簡単だからサクッとマスターしよう!
オブジェクトとは
かなり簡潔に説明するといくつかの情報をまとめたモノの俗称や概念のようなものです。
例えばですが、
・it
・モノ
・スマホ
・魚
のような感じです。
魚のイメージだとわかりやすいと思いますが、
「魚」とだけ聞いても、明確に何を指しているのかわかりませんよね?

このように明確に何かはわからないが、
このモノの情報全体をまとめたものがオブジェクトです。
そして、この“魚”という俗称、
つまりオブジェクト自体に深い意味はありません。
あくまで俗称や概念でしかなく、具体的な情報ではないからです。
オブジェクト自体に深い意味はないから考えすぎに注意だよ!
プロパティとは
プロパティとは、オブジェクトがもつ具体的な情報です。
例えば先ほどの魚の例で言うとこのような具体的情報を持っています。

- なまえ: サケ
- サイズ: 60センチ
- 寿命 : 5年
これらの情報の一つ一つがプロパティです
keyとvalue
オブジェクトの話をすると必ず出てくるのがkeyとvalueです。
これは簡単で、プロパティを分解したものです
key・・・・どんな値が入っているかを示す文字列
value・・・実際の値
プロパティ = key + value

keyには文字列がはいるよ!
オブジェクトを作ってみよう!
ようやくですが、実際にオブジェクトを作ってみましょう
■ 構文
オブジェクト名 = {
key: value,
key: value,
key: value
}
このように書きましょう!
実際に先ほどの魚の例をコードに落とし込んで動かしてみましょう!
// オブジェクトの宣言
const fish = {
// key: value
name: "サケ",
size: 60,
lifeSpan: 5,
};
// オブジェクトを出力
console.log(fish);
// 【出力結果】{ name: 'サケ', size: 60, lifeSpan: 5 }
長い前置きを踏んだので、意外とすんなり理解できたかなと思います。
ポイントは各プロパティをカンマで区切ることくらいです。
オブジェクトから特定のキーの値を取得しよう
値の取得方法は2種類あります。
■ 構文1
オブジェクト名[key※文字列];
■ 構文2
オブジェクト名.key;
先ほどのfishオブジェクトから特定のキーの値を取り出してみましょう。
// オブジェクトの宣言
const fish = {
// key: value
name: "サケ",
size: 60,
lifeSpan: 5,
};
// fishのなまえを出力
console.log(fish.name);
// 【出力結果】サケ
// fishのサイズを出力
console.log(fish["size"]);
// 【出力結果】60
このように取得することが出来ます。
構文1と2の明確な使い分けは決まっていませんが、
配列とセットで覚えるために、
自信がない方は一旦構文2で覚えておくと良いと思います。
配列とオブジェクト(連想配列)の違い
結論から言うと、データの管理方法が異なります。


- 配列は、データを番号(index)で管理している
- オブジェクトは、データを文字列(key)で管理している
■ 配列の構文
// 数値
オブジェクト名[index];
■ オブジェクトの構文
// 文字列
オブジェクト名[key];
配列について詳しく知りたい方はこちら

おまけ:問題
以下のプロパティを持つオブジェクトfruitを宣言し、
各値を出力してください
なまえ = りんご
色 = 赤
値段 = 120
まとめ

- オブジェクトとは、モノの情報のまとまりの俗称
- オブジェクトが持つ各情報をプロパティという
- プロパティはkeyとvalueを持つ
- 構文🦈オブジェクト名 = {key: value, key: value}
- 取り出し方1🦈オブジェクト名[key名※文字列]
- 取り出し方2🦈オブジェクト名.key名
- 配列とオブジェクトの違いは、データを数値で管理するか、文字列で管理するかどうか
- “オブジェクト”自体に深い意味は無い
オブジェクトが理解できてえらい!
最難関項目なので、1回で理解できなくても大丈夫だよ!
オブジェクトが苦手な方へアドバイス
オブジェクトの解説って当サイトも含め、わかりにくく長いものばかりですよね?
そして「あぁ、やっぱりオブジェクトって難しいなあ、プログラミングって難しいなぁ・・・」
と感じた方ってかなり多いと思うのですが、
これは、あなたの理解力が足りないのではなく
オブジェクトに関しては”これ!!!”というような
簡潔明瞭な説明が出来ないからです。
今回の記事作成にあたって、かなりの記事やブログや書籍を
読み込みましたが、いずれも簡潔明瞭な解説はありませんでした。
プログラミングにおけるオブジェクトというのは、
あくまでも概念レベルの話にどうしてもなってしまうので
順序立てて解説し「なんとなくこんな感じのものです、わかった?」
というようにしか伝えられないからです。
なので、オブジェクトについてしっかり理解しよう!!と考えるのではなく
「ふーん、こんなもんなのか」程度の理解度を目標としてOKです。
つまり、何が言いたいかと言うと
オブジェクト自体に深い意味はないので
記述方法だけ覚えておけば、理解はあとから付いてくるということです!
おまけの答え
// オブジェクトの宣言
const fruit = {
name: "りんご",
color: "赤",
price: 120
};
// ログの出し方はお好みで!
console.log(fruit["name"]);
// 【出力結果】りんご
console.log(fruit["color"]);
// 【出力結果】赤
console.log(fruit.price);
// 【出力結果】120
間違えやすいポイント
- 各プロパティをカンマで区切ること
- [] を用いて値を取り出す際にクオーテーションで囲むこと
- . を用いて値を取り出す際はクオーテーションは不要

満足いただけたら、1クリックなのでSNSフォローしてもらえると嬉しいです🦈