はじめに
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を作りました🚀
ぜひ、メンションつきツイートをしていただけるとたいへんとてもとても喜びます！
JavaScript Advent Calendar 2019
JavaScript Advent Calendar 2019明日の担当は、
@okumurakengoさんです！
※2020年1月更新
##MENTAでコードレビューやプログラミング勉強相談を行っています！
お気軽にメッセージを下さい！
プランはこちらになります！