2019年 よく使ったJavaScriptたちをまとめる

# はじめに
[JavaScript Advent Calendar 2019](https://qiita.com/advent-calendar/2019/javascript)の4日目です。
本日は[@watsuyo_2](https://twitter.com/watsuyo_2)が「2019年 よく使ったJavaScriptたちをまとめる」を記事にします！

フロントエンドエンジニア1年目を振り返りながら、これからJavaScriptを学ぶ人やよく使うメソッドを知りたい人がわかりやすいようにまとめます。
普段、 **Nuxt.js(Vue.js)** と **Firestore** を使用した開発をしているので例としてでてきますがご了承ください。

↓は1年前に転職するまでの流れを書いた記事にあります。
[新年からWebエンジニアになる僕に2018年、起こったこと](https://note.com/watuyo_2/n/naf7981d36226?creator_urlname=watuyo_2)

## Array.prototype.map()
配列の要素をひとつひとつ取り出し、第一引数の値(例で言うx)を元に処理を行い、その結果から新たな配列を作れる

### 実務的な例
よく使うパターンとして、オブジェクト配列をそれぞれ取り出して、Firestoreにデータ更新、取得するような時に使います。

```js
const todos = [
  { id: 'H6BHBW7WS7H8DAT8HAK', content: '早起きする' },
  { id: 'HGX3DMZ9ZT8GN7KHYUY', content: '早く寝る' },
  { id: '4MT32NDNS6XFJUNGRPH', content: '牛乳を買う' },
  { id: 'PHCXSNTRVZHNAJYWJT6', content: 'Youtubeは1日2時間まで' }
]

todos.map(todo => (
  firebase.firestore().collection(`todos/${todo.id}`).update({ todo.content })
))
```

## Array.prototype.filter()
配列の要素をひとつひとつ取り出し、第一引数の値(例で言うx)を元に比較を行い、trueだった結果から新たな配列を作れる

### 実務的な例
オブジェクト配列をそれぞれ取り出して、特定の要素を削除する場合などで使いました。

```js
const todos = [
  { id: 'H6BHBW7WS7H8DAT8HAK', content: '早起きする' },
  { id: 'HGX3DMZ9ZT8GN7KHYUY', content: '早く寝る' },
  { id: '4MT32NDNS6XFJUNGRPH', content: '牛乳を買う' },
  { id: 'PHCXSNTRVZHNAJYWJT6', content: 'Youtubeは1日2時間まで' }
]

// 特定のtodo.idが'PHCXSNTRVZHNAJYWJT6'以外の配列を作成
const deleteOne = () => todos.filter(todo =>
  todo.id != 'PHCXSNTRVZHNAJYWJT6'
)
 
console.log(deleteOne())
// [
//   { id: 'H6BHBW7WS7H8DAT8HAK', content: '早起きする' },
//   { id: 'HGX3DMZ9ZT8GN7KHYUY', content: '早く寝る' },
//   { id: '4MT32NDNS6XFJUNGRPH', content: '牛乳を買う' }
// ]
```

## Array.prototype.find()
配列の要素をひとつひとつ取り出し、第一引数の値(例で言うx)を元に比較を行い、trueだった結果を取得する

### 実務的な例
オブジェクト配列をそれぞれ取り出して、配列中の特定の要素を抽出する場合などで使いました。

```js
const todos = [
  { id: 'H6BHBW7WS7H8DAT8HAK', content: '早起きする' },
  { id: 'HGX3DMZ9ZT8GN7KHYUY', content: '早く寝る' },
  { id: '4MT32NDNS6XFJUNGRPH', content: '牛乳を買う' },
  { id: 'PHCXSNTRVZHNAJYWJT6', content: 'Youtubeは1日2時間まで' }
]

const pickUpTodo = () => todos.find(todo =>
  todo.id === 'PHCXSNTRVZHNAJYWJT6'
)
 
console.log(pickUpTodo()) //{ id: 'PHCXSNTRVZHNAJYWJT6', content: 'Youtubeは1日2時間まで' }

```


## Array.prototype.push()
配列に新しい要素を追加する
### 実務的な例
配列になにか新しい要素を追加する場面はよく遭遇しました。

```js
const todos = [
  { id: 'H6BHBW7WS7H8DAT8HAK', content: '早起きする' },
  { id: 'HGX3DMZ9ZT8GN7KHYUY', content: '早く寝る' },
  { id: '4MT32NDNS6XFJUNGRPH', content: '牛乳を買う' },
  { id: 'PHCXSNTRVZHNAJYWJT6', content: 'Youtubeは1日2時間まで' }
]

todos.push({ id: 'WRABJ9IY4RJML7L4OB2', content: 'リーダブルコードを読む' })
 
console.log(todos)
// [
//  { id: 'H6BHBW7WS7H8DAT8HAK', content: '早起きする' },
//  { id: 'HGX3DMZ9ZT8GN7KHYUY', content: '早く寝る' },
//  { id: '4MT32NDNS6XFJUNGRPH', content: '牛乳を買う' },
//  { id: 'PHCXSNTRVZHNAJYWJT6', content: 'Youtubeは1日2時間まで' },
//  { id: 'WRABJ9IY4RJML7L4OB2', content: 'リーダブルコードを読む' }
// ]
```



## String.prototype.match()
正規表現に対して文字列のマッチングし、マッチすればtrue、しなければfalseを返します。

### 実務的な例
入力されたデータに対し、バリデーションをかける時などでよく使いました。

```js
const telA = '070-7374-0044'
const telB = '09024570411' 

console.log(telA.match(/^(0{1}\d{9,10})$/g)) // null
console.log(telB.match(/^(0{1}\d{9,10})$/g)) // true
```
## 三項演算子
if文の省略的な立ち位置になります。
以下がif文と三項演算子との対照表です。

## パターンA: if文
```js
const hoge = 0

if(hoge === 0) {
  return 'fuga'
} else {
  return 'hoge'
}
```
## パターンB: 三項演算子
```js
const hoge = 0

hoge === 0 ? 'fuga' : 'puge'
```

### 実務的な例
実務では上記の例のように全く対象のものとしては捉えておらず、可読性を重視します。
特に`return`で結果だけが欲しい場合では`三項演算子`を使うことが多いです。

例えばVue.js×TypeScriptに限る話になりますが、computed内で値が`this`を使って参照する値が存在するかをチェックし、存在すればその値を返し、無ければnullを返す場合に使います。

```js
computed: {
  todo (): Terms | null {
    return this.todo.titles ? todo.titles : null
  }
},
```

# おわりに
今回、例としてあげた部分はほんの一部で、その他にもたくさんありますので奥は深いです。
振り返ってみても、JavaScriptフレームワークが様々な現場で普及している2019年ですが、基本的なメソッドや書き方は初心忘れるべからずということで押さえておきましょう。

# メンションつきツイートをしていただけるとたいへん喜びます！
[thanks-mentions](https://thanks-mentions.web.app/)というQiitaの記事を作者に対してメンションを飛ばしながらツイートが出来るPWAを作りました🚀
ぜひ、メンションつきツイートをしていただけるとたいへんとてもとても喜びます！
![popup.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/253605/ca91b6c2-c84a-1665-b127-08b6ad5014f1.jpeg)


# JavaScript Advent Calendar 2019
[JavaScript Advent Calendar 2019](https://qiita.com/advent-calendar/2019/javascript)明日の担当は、
[@okumurakengo](https://twitter.com/okumurakengo)さんです！

※2020年1月更新
##MENTAでコードレビューやプログラミング勉強相談を行っています！
お気軽にメッセージを下さい！
[プラン](https://menta.work/plan/1461)はこちらになります！