Qiita Teams that are logged in
You are not logged in to any team

Log in to Qiita Team
Community
OrganizationAdvent CalendarQiitadon (β)
Service
Qiita JobsQiita ZineQiita Blog
16
Help us understand the problem. What is going on with this article?
More than 1 year has passed since last update.

はじめに

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さんです!

※2020年1月更新

MENTAでコードレビューやプログラミング勉強相談を行っています!

お気軽にメッセージを下さい!
プランはこちらになります!

16
Help us understand the problem. What is going on with this article?
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
watsuyo_2
フロントエンドエンジニアとして開発業務を行う。 主に、Vue.js, Nuxt.js, TypeScript, Firebaseを使用し、プロダクトを開発。
icare
我々は「働くひとと組織の健康を創る」をビジョンに掲げ、法人向けヘルスケアサービスを提供しているITベンチャーです。「人事の健康管理業務をミスなく、ラクに」健康診断・ストレスチェック・過重労働、これら人事が抱える健康管理業務がワンストップでできるHRTechサービスです。また、保健師やカウンセラーが直接対応するチャットは、従業員がいつでも健康相談できます。

Comments

No comments
Sign up for free and join this conversation.
Sign Up
If you already have a Qiita account Login
16
Help us understand the problem. What is going on with this article?