Help us understand the problem. What is going on with this article?

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

はじめに

JavaScript Advent Calendar 2019の4日目です。
本日は@watsuyo_2が「2019年 よく使ったJavaScriptたちをまとめる」を記事にします!

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

↓は1年前に転職するまでの流れを書いた記事にあります。
新年からWebエンジニアになる僕に2018年、起こったこと

Array.prototype.map()

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

実務的な例

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

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だった結果から新たな配列を作れる

実務的な例

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

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だった結果を取得する

実務的な例

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

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()

配列に新しい要素を追加する

実務的な例

配列になにか新しい要素を追加する場面はよく遭遇しました。

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を返します。

実務的な例

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

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文

const hoge = 0

if(hoge === 0) {
  return 'fuga'
} else {
  return 'hoge'
}

パターンB: 三項演算子

const hoge = 0

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

実務的な例

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

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

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

おわりに

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

メンションつきツイートをしていただけるとたいへん喜びます!

thanks-mentionsというQiitaの記事を作者に対してメンションを飛ばしながらツイートが出来るPWAを作りました🚀
ぜひ、メンションつきツイートをしていただけるとたいへんとてもとても喜びます!
popup.jpg

JavaScript Advent Calendar 2019

JavaScript Advent Calendar 2019明日の担当は、
@okumurakengoさんです!

Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
Comments
Sign up for free and join this conversation.
If you already have a Qiita account
Why do not you register as a user and use Qiita more conveniently?
You need to log in to use this function. Qiita can be used more conveniently after logging in.
You seem to be reading articles frequently this month. Qiita can be used more conveniently after logging in.
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away