【JavaScript】オブジェクトを世界一わかりやすく解説！！自信あり【key, value】

みなさんこんにちは、現役エンジニアのサメハックです

アパレル企業でトップ販売員を経て
未経験からWebエンジニアに転職し、
現在正社員として5年働いています！

今回はオブジェクト(連想配列)について学んでいきましょう！
難しい項目なので、これ以上無いくらいわかりやすく解説します！

駆け出しエンジニアや未経験の方、
また新入社員を指導する先輩社員にとっても
わかりやすいように解説していきます！

オブジェクトとは

かなり簡潔に説明するといくつかの情報をまとめたモノの俗称や概念のようなものです。

例えばですが、
・it
・モノ
・スマホ
・魚
のような感じです。

魚のイメージだとわかりやすいと思いますが、
「魚」とだけ聞いても、明確に何を指しているのかわかりませんよね？

このように明確に何かはわからないが、
このモノの情報全体をまとめたものがオブジェクトです。

そして、この“魚”という俗称、
つまりオブジェクト自体に深い意味はありません。
あくまで俗称や概念でしかなく、具体的な情報ではないからです。

プロパティとは

プロパティとは、オブジェクトがもつ具体的な情報です。

例えば先ほどの魚の例で言うとこのような具体的情報を持っています。

これらの情報の一つ一つがプロパティです

keyとvalue

オブジェクトの話をすると必ず出てくるのがkeyとvalueです。

これは簡単で、プロパティを分解したものです
key・・・・どんな値が入っているかを示す文字列
value・・・実際の値

プロパティ = key + value

オブジェクトを作ってみよう！

ようやくですが、実際にオブジェクトを作ってみましょう

■ 構文

オブジェクト名 = {
    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]; 

配列について詳しく知りたい方はこちら

【JavaScript】配列の作り方【array】

この記事を読むと・・・ 配列の作り方がわかる 配列のデータの取得ができる 配列とオブジェクトの違いがわかる

samehack.com

おまけ:問題

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

まとめ

オブジェクトが苦手な方へアドバイス

オブジェクトの解説って当サイトも含め、わかりにくく長いものばかりですよね？

そして「あぁ、やっぱりオブジェクトって難しいなあ、プログラミングって難しいなぁ・・・」
と感じた方ってかなり多いと思うのですが、
これは、あなたの理解力が足りないのではなく
オブジェクトに関しては”これ！！！”というような
簡潔明瞭な説明が出来ないからです。

今回の記事作成にあたって、かなりの記事やブログや書籍を
読み込みましたが、いずれも簡潔明瞭な解説はありませんでした。

プログラミングにおけるオブジェクトというのは、
あくまでも概念レベルの話にどうしてもなってしまうので
順序立てて解説し「なんとなくこんな感じのものです、わかった?」
というようにしか伝えられないからです。

なので、オブジェクトについてしっかり理解しよう！！と考えるのではなく
「ふーん、こんなもんなのか」程度の理解度を目標としてOKです。

つまり、何が言いたいかと言うと
オブジェクト自体に深い意味はないので
記述方法だけ覚えておけば、理解はあとから付いてくるということです！

おまけの答え

// オブジェクトの宣言
const fruit = {
  name: "りんご",
  color: "赤",
  price: 120
};

// ログの出し方はお好みで！
console.log(fruit["name"]);
// 【出力結果】りんご
console.log(fruit["color"]);
// 【出力結果】赤
console.log(fruit.price);
// 【出力結果】120

間違えやすいポイント

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

twitter
instagram