デザイナがReactを始める前に押さえておきたいJavaScriptの基本①（配列編）

#はじめに
ここ最近、DOMの最適化やCSS、JavaScriptのインタラクションを中心とするUIの実装など、Webデザイナーが担当してきた分野においても、Reactスキルの需要が高まってきました。

HTML・CSS・jQuery（コピペ多め）でのマークアップを長年やってきた私には、そもそもJavaScriptとは、DOMを直接操作して見た目を動かすためのスクリプト、という"思い込み"みたいなものありました。

Reactを学ぶ上で色々とつまずいた原因は、JavaScriptの**配列・オブジェクト・クラス**の概念をきちんと理解しないまま始めてしまったこと。極端な例えをすると、九九をちゃんと覚えていないのに、いきなり数学の応用問題を解こうとするようなものでした。

この経験から分かったこと、WebデザイナーがReactを始める前に最低限押さえておくべきJavaScriptの基本（個人的見解）について、3回（予定）に分けて書きます。

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

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

##配列いろいろ
まず配列を作る。

```JavaScript
const numbers = new Array(120, 300, 280, 170, 80) //[120, 300, 280, 170, 80]
```
配列の要素をひとつひとつ取り出す。

```JavaScript
console.log(`Number ${numbers[0]}`)
console.log(`Number ${numbers[1]}`)
console.log(`Number ${numbers[2]}`)
console.log(`Number ${numbers[3]}`)
console.log(`Number ${numbers[4]}`)
```
####結果：
consoleツールで結果を表示させてみる。配列の要素をひとつづつ取り出せた。
<img width="491" alt="スクリーンショット 2020-01-04 15.54.06.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/218656/07c898cb-94dc-aaac-8c03-0bc85eba1d36.png">

###for（）
配列の要素をひとつひとつ取り出す。

```JavaScript
for(let i = 0; i < numbers.length; i++){
    console.log(`Number ${numbers[i]}`)
}
```
####結果：
<img width="491" alt="スクリーンショット 2020-01-04 15.54.06.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/218656/07c898cb-94dc-aaac-8c03-0bc85eba1d36.png">

###forEach（）
配列の要素をひとつひとつ取り出す。
※配列すべての要素に対し同じ処理を実行させたいが、返り値が不要。

```JavaScript
numbers.forEach((number, index) => console.log(`Number${index}: ${number}`) )
```
####結果：
<img width="485" alt="スクリーンショット 2020-01-05 21.12.02.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/218656/9735e31f-985d-3bdf-37b2-b1d96b02e87a.png">


###map（）
配列に何らかの処理をして、配列で返したい。
※配列すべての要素に対して同じ処理を実行させて新しい配列を作りたい。

```JavaScript
const updatedNumbers = numbers.map(number => number * 2)
console.log(updatedNumbers)
```
####結果：
取り出された配列の要素ひとつひとつの倍数（number×2）が新しい配列として返された
<img width="400" alt="スクリーンショット 2020-01-06 18.42.59.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/218656/9c38dd48-3b18-6f32-4f1e-ae07ca9518c5.png">



###filter（）

何らかの条件でtrueを返した要素だけを取り出せる。
例：配列から3の倍数を取り出したい

```JavaScript
numbers.filter(number => number % 3 === 0)
console.log(numbers)
```
####結果：
3の倍数だけを取り出せた。
<img width="464" alt="スクリーンショット 2020-01-04 17.25.06.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/218656/ce4bc13a-4cef-cf04-e399-7cea5c6f3eda.png">

###スプレッド構文

```JavaScript
const otherNumbers = [20, 10, 60, 10, 90]
const newNumbers = [120, 300, 280, 170, 80, ...otherNumbers]
console.log(newNumbers)
```
####結果：
otherNumbersの配列の要素をそのままnumbersの配列の要素にすることが出来る。
<img width="431" alt="スクリーンショット 2020-01-05 13.55.36.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/218656/65dd3cd5-c7f2-f7c0-c274-9ca76e68d6d5.png">

```JavaScript
const hogeNumbers = [...numbers, ...otherNumber]
console.log(hogeNumbers)
```
####結果：
<img width="509" alt="スクリーンショット 2020-01-05 14.06.51.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/218656/9ba61cb4-c542-1bfb-8c42-7785cb2df638.png">
##先頭や末尾の要素を操作
もう一度配列を定義。

````JavaScript
const numbers = [120, 300, 280, 170, 80]
````
###末尾に要素を追加したい： `push()`
````JavaScript
numbers.push(100, 150)
console.log(numbers)
````
####結果：
末尾に[100, 150]が追加されている。
<img width="345" alt="スクリーンショット 2020-01-05 15.56.23.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/218656/bffa208e-2f51-6843-def5-d5e7e66fd48a.png">
###配列の先頭に要素を追加したい： `unshift()`
````JavaScript
numbers.unshift(10,20)
console.log(numbers)
````
####結果：
先頭に[10, 20]が追加されている。
<img width="364" alt="スクリーンショット 2020-01-05 16.00.50.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/218656/6939d893-b64c-4a72-c15f-027533faecc2.png">
###先頭から要素を削除したい： `shift()`
````JavaScript
numbers.shift()
console.log(numbers)
````
####結果：
先頭の要素[10]が削除されている。※一度にひとつの要素しか削除出来ない
<img width="388" alt="スクリーンショット 2020-01-05 16.06.33.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/218656/03172e25-cf18-64c9-2120-67d1b41b7333.png">
###末尾から要素を削除したい： `pop()`
````JavaScript
numbers.pop()
console.log(numbers)
````
####結果：
末尾の要素[150]が削除されている。※一度にひとつの要素しか削除出来ない
<img width="345" alt="スクリーンショット 2020-01-05 16.07.43.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/218656/3900b42e-8e0e-a1d4-8486-7f359826fbfa.png">

###要素のインデックスを取得したい `indexOf()`
配列を準備する。

```JavaScript
const eto = ['子', '丑', '寅', '卯', '辰', '巳', '午', '未', '申', '酉', '戌', '亥']
```

['巳']のindexを取得

```JavaScript
eto.indexOf('巳')
```
####結果：
numbersの要素['巳']は0番目から数えて5番目の要素
<img width="443" alt="スクリーンショット 2020-01-05 17.33.15.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/218656/8946ea21-2881-f955-6433-2e6c6f56a58b.png">
###要素のインデックス位置を指定して要素を削除したい： `splice()`
`indexOf()`で取得した、削除したい要素のindexをposとする

```JavaScript
const pos = eto.indexOf('巳')
```
削除したい要素の個数を定義

```JavaScript
const n = 2
```
posで定義した要素から数えてn個の要素を削除

```JavaScript
eto.splice(pos, n)
console.log(eto)
```
####結果：
指定位置 pos(=5) から n(=2) 個分の要素が削除された
<img width="433" alt="スクリーンショット 2020-01-05 19.38.22.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/218656/a0a8b8e2-60d0-bf07-6444-3e860a8bae0c.png">

##最後に

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

次回はオブジェクトについて書きたいと思います。


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