デザイナがReactを始める前に押さえておきたいJavaScriptの基本②（オブジェクト編）

#はじめに
WebデザイナーがReactを始める前に最低限押さえておくべきJavaScriptの基本（個人的見解）について、前回のJavaScriptの基本①（配列編）に続き、JavaScriptの基本②（オブジェクト編）について書きます。

• JavaScriptの基本①（配列編） 読んでね
• JavaScriptの基本②（オブジェクト編） 今ここ
• JavaScriptの基本③（クラス編）

なぜこの順番なのか？
オブジェクトを理解するためには配列を理解していることが前提 => クラスを理解するためにはオブジェクトを理解していることが前提 => Reactを理解するためにはクラスを理解していることが大前提となるからです。

(JavaScriptの基本的知識がしっかりしていないままReactの勉強に進んだことで、何度もつまづき、心が折れそうになった自身の経験から書きました。)

##オブジェクトいろいろ
配列は連番が付けられた値（変数）をまとめたものですが、オブジェクトは値に名前を付けて管理出来ます。

const points = {
  x: 100,
  y: 180
}

x: 100 ,y: 180のように、オブジェクトを構成するこれらのひとつひとつの要素をプロパティといい、左側は名前、またキー、そして右側は値と言います。
プロパティーには関数なども格納することが出来、関数が格納されたプロパティのことをメソッドといいます。

プロパティーの値にアクセスする方法。

console.log(points.x) //100
console.log(points['y']) //180

オブジェクト名.キーの名前(ドット表記法)、またはオブジェクト名[](ブラケット表記法) の中にキーを文字列の形で渡す方法があります。

###代入、追加、削除
オブジェクトpointsのキーxの値を変更。

points.x = 170 //またはpoint['x']
console.log(points) //{x: 170, y: 180}

新しいキーz 値２００のプロパティーを追加。
キーyのプロパティーを削除。

points.z = 200
delete points.y

console.log(points) //{x: 170, z: 200}

###スプレット構文
スプレット構文でオブジェクトを展開することが出来ます。

const otherPoints = {age: 30, hobby: 'music'}
const newPoints = {x: 100, y: 180, ...otherPoints}
console.log(newPoints) //{x: 100, y: 180, age: 30, hobby: "music"}

####分割代入とレスト構文
オブジェクトのキーと同じ定数名を使うと、そのキーの値が代入されます。（分割代入）
残りのプロパティはオブジェクトのまま取り出せます。（レスト構文）

const {age, hobby, ...newPointsOthers} = newPoints

console.log(age) //30
console.log(hobby) //music
console.log(newPointsOthers) //{x: 100, y: 180}

###キーや値を取得

キーを配列で取得。

const newPoints = {x: 100, y: 180, age: 30, hobby: "music"}
const keys = Object.keys(newPoints)
console.log(keys) // ["x", "y", "age", "hobby"]

値を配列で取得。

const values = Object.values(newPoints)
console.log(values) // [100, 180, 30, "music"]

forEach()でキーと値をひとつずつ取得

keys.forEach(key => console.log(`key: ${key} value: ${newPoints[key]}`))
//key: x, value: 100
//key: y, value: 180
//key: age, value: 30
//key: hobby, value: music

＊keyは文字列（string）で取得されていることに注意

map()を使うと、新しい配列で返してくれます。

const map = keys.map(key => `keyは${key}, valueは${newPoints[key]}です。`)
console.log(map)
//["keyはx, valueは100です。", "keyはy, valueは180です。", "keyはage, valueは30です。", "keyはhobby, valueはmusicです。"]

###複数オブジェクトの配列

const posts = [
  {
    content: 'JavaScriptの楽しい！',
    likes: 2,
  },
  {
    content: 'プログラミング楽しい！',
    likes: 3,
  },
  {
    content: 'React楽しい！',
    likes: 1,
  }
]

for()を使って、postsの値をひとつひとつ取得。

for(let i = 0; i < posts.length; i++ ){
  console.log(`${posts[i].content} ${posts[i].likes}いいね`)
}
// JavaScriptの楽しい！ 2いいね
// プログラミング楽しい！ 3いいね
// React楽しい！ 1いいね

forEach()を使って、postsの値をひとつひとつ取得。

posts.forEach(post => console.log(`${post.content} ${post.likes}いいね`))
// JavaScriptの楽しい！ 2いいね
// プログラミング楽しい！ 3いいね
// React楽しい！ 1いいね

map()を使って、postsのひとつひとつを取りだして新しい配列で返します。

const objMap = posts.map(post => `${post.content} ${post.likes}いいね`)
console.log(objMap)
// ["JavaScriptの楽しい！ 2いいね", "プログラミング楽しい！ 3いいね", "React楽しい！ 1いいね"]

###メソッドを使う

postをひとつひとつ取り出す。

const posts = [
  {
    content: 'JavaScriptの楽しい！',
    likes: 2,
  },
  {
    content: 'プログラミング楽しい！',
    likes: 3,
  },
  {
    content: 'React楽しい！',
    likes: 1,
  }
]

const getPost = post => console.log(`${post.content} ${post.likes}いいね`)
getPost(posts[0]) // JavaScriptの楽しい！ 2いいね
getPost(posts[1]) // プログラミング楽しい! 3いいね
getPost(posts[2]) // React楽しい！ 1いいね

getPost()をオブジェクトの中に入れて、プロパティの値として、関数を持たせます。
関数をプロパティの値にした時、その関数をメソッドと言います。
（同じオブジェクト内のプロパティへthisというキーワードでアクセス出来ます。）

const posts = [
  {
    content: 'JavaScript楽しい！',
    likes: 2,
    getPost: function(){console.log(`${this.content} ${this.likes}いいね`)}
  },
  {
    content: 'プログラミング楽しい!',
    likes: 3,
    // getPost: function(){console.log(`${this.content} ${this.likes}いいね`)}
    // functionを省略したメソッドの書き方↓↓↓こちらが一般的
    getPost(){console.log(`${this.content} ${this.likes}いいね`)}
  },
  {
    content: 'React楽しい！',
    likes: 1,
    getPost(){console.log(`${this.content} ${this.likes}いいね`)}
  }
]
posts[0].getPost() // JavaScriptの楽しい！ 2いいね
posts[1].getPost() // プログラミング楽しい! 3いいね
posts[2].getPost() // React楽しい！ 1いいね

うまくメソッドを呼び出せましたが、オブジェクトの全てにメソッドを付けるのは同じ記述の繰り返しになってしまいます。
このようなオブジェクトをテンプレート化できるのがクラスです

次回はクラスについて書きたいと思います。

##最後に

道半ばですが、分からないことがあっても諦めずに少しずつすすめると、小さな成長を感じる瞬間があります。
そんな素敵な瞬間を楽しみながら頑張ろうと思っております
フロントエンドスキルを武器にしたいWebデザイナーのみなさん、一緒にがんばりましょう！

###参考にさせていただいたサイト
https://developer.mozilla.org/