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

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

- [JavaScriptの基本①（配列編）](https://qiita.com/seira/items/2389293b83087de2f55c) :point_left_tone1: 読んでね
- **JavaScriptの基本②（オブジェクト編）** :point_left_tone1: 今ここ
- [JavaScriptの基本③（クラス編）](https://qiita.com/seira/items/084eff3ae916cdc037fb)

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

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

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

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

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

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

```JavaScript
console.log(points.x) //100
console.log(points['y']) //180
```
`オブジェクト名.キーの名前`(ドット表記法)、または`オブジェクト名[]`(ブラケット表記法) の中にキーを**文字列**の形で渡す方法があります。

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

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

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

````javascript
points.z = 200
delete points.y

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

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

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

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

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

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

###キーや値を取得

キーを配列で取得。

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

値を配列で取得。

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

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

````javascript
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()を使うと、新しい配列で返してくれます。

````javascript
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です。"]
````
###複数オブジェクトの配列

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

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

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

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

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

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

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

###メソッドを使う

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

````javascript
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というキーワードでアクセス出来ます。）

````javascript
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いいね
````
うまくメソッドを呼び出せましたが、オブジェクトの全てにメソッドを付けるのは同じ記述の繰り返しになってしまいます。
このようなオブジェクトをテンプレート化できるのが**クラス**です:ok_hand_tone1:

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

##最後に

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



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