JavaScript WEB

JavaScript ES6の便利メソッド・構文おさらい【読みやすく・書きやすい】

JavaScriptの次世代規格「ES6」で使えるようになった便利メソッドを、Udemyの動画講座「【世界で2万人が受講】JavaScriptエンジニアのためのES6完全ガイド」を見ながら自分用にまとめました。

新しいメソッドを、”知ってれば使える”というものでもありませんが、随時見直して少しずつ使えるようになっていきたいものです。

*間違い等あれば、指摘ください。

配列で使えるJavaScript ES6の便利メソッドおさらい

forEach関数

  • ループ文を簡潔に書く関数(コードが読みやすい)
  • ES5のfor文に変わるループ文

for文で書くよりも可読性が上がり、書くことが少ないのでミスも起きにくい。

forEach文はmap関数、reduce関数、filter関数などの他の関数の機能も含まれている万能関数だが、mapやfilterなどでできることはその関数を使った方が可読性は高い。

map関数(よく使う)

  • 配列から取得した値を、コールバック関数で処理し、新たな配列を自動で作り格納する関数
  • 元々の配列を残したまま、自動で新しい配列が作られるので意図しない動作しにくい

ユースケース:
ツイッターなどのサーバにある、投稿の一覧データを取得し、表示する時などに使用

map関数にはreturnが必ず必要!!(アロー関数で省ける場合もある)

filter関数(よく使う)

  • 配列から取得した値を、コールバック関数でtrue/false判定し、新たな配列を作り格納する関数

ユースケース:
自分の興味のある値だけ取得したいときなど。blogアプリで「ある投稿(post id)に関するコメント(comment)だけ取得したい・・・など。

filter関数にはreturnが必ず必要!!(アロー関数で省ける場合もある)

find関数

  • 配列の中から特定のデータを探す時に使う。
  • データが見つかった時点で、ループから抜ける。
  • 配列データの中に重複データがあっても、最初にそのデータを見つけたタイミングでループを抜けるので注意

[** find関数にはreturnが必ず必要!!](アロー関数を使えば省ける場合もある)

every関数とsome関数

  • everyは配列に定義したデータから、条件に合うデータの論理積(AND)を取る。

ユースケース:
3つあるデータが全て条件に一致すればtrueを返し、ひとつでも一致しなければfalseを返す


  • someは配列に定義したデータから、条件に合うデータの論理和(OR)を取る。

reduce関数

  • 配列の中にある複数の値を1つの値に集約していく動き

他の便利関数との違いは、初期値が設定できること(初期値は何でもOK)

動き:

  • 1回目のループ:第1引数sum = 0、第2引数number = 10の和をsumに格納 // 10
  • 2回目のループ:sum = 10、number = 20の和をsumに格納 // 30
  • 3回目のループ:sum = 30、number = 30の和をsumに格納 // 60

構文で使えるES6の新しい書き方 おさらい

テンプレートリテラル

  • ES6から文字列の扱いがシンプルになった

バッククォート内に${ javascript }を書けば、javascriptはなんでも入れられる

アロー関数

  • アロー関数を書く場所によってthisが確定する
  • アロー関数を使った時と、使わなかった時でthisの指すモノが変わる lexical this(構文的なthis)
  • ES5の時はコールバック関数内のthisは別の場所のthisだった

オブジェクトリテラル

  • ES5に比べ、オブジェクトの書き方がシンプルに書けるようになった


関数のデフォルト引数

  • ES6から関数の引数に初期値を入れることができるようになった
  • デフォルト引数にはメソッドを渡すことも出来る

Rest演算子

  • 受け取った値を配列に変換する演算子
  • 可変長の変数として使用できる

Spread演算子

  • 書き方はRest演算子と同じ「...」を使う
  • 配列をまとめたいときに使う(配列を展開してくれる)
  • Spread演算子で新しい配列を作った場合は、配列の中に、好きな値を追加できる

分割代入




ユースケ―ス1:
引数の多い関数にオブジェクトを渡す場合など

ユースケース2:
データの整形
かなり難しい使い方なので、シンプルに書けるが可読性は低い??

クラス

  • ES6から、他の言語にあるclassに近いものが使えるようになった(実際に動いているのはES5のprototype)

クラスの継承(ES5でのprototype chain

generator

  • for ofと組み合わせて使うことで、オブジェクトの中から希望の順番でデータを取り出せたりする

generatorのデリゲーション(委譲)

  • 複数のgeneratorをひとつのfor ofで回すようなケースで使う
  • 最初に呼ぶgeneratorから次に呼ぶgeneratorに引き継ぐ
  • 次項のSymbol.iteratorを使うことで更に簡潔に書ける

Symbol.iterator

  • ↓↓最終的にはこうなる

実際のユースケース(掲示板のコメント機能のツリー構造)
掲示板の各記事のコメントをすべて拾ってくる

Promise

  • JavaScriptにはコードを一時的に止めておく機能(sleepなど)は無い(ノンブロッキング)
  • そのため、webサーバーにリクエストを投げている間に次の処理が走ってしまう。これを「”レスポンスが来てか”ら次の処理を行う」ようにするのがPromise

Promiseの状態
unresolved(未解決状態)処理完了待ち
resolved(処理成功)➡ コールバック(then)処理成功後に入れたい処理を書く
rejected(処理失敗)➡ コールバック(catch)処理失敗後に入れたい処理を書く

タイマーを使った例

  • ES6の「fetch関数」を使ってhttpリクエスト送ると、promiseでリクエストを投げたように実装できる
  • が、fetch関数には欠点がいくつかあるため、現状でhttpsリクエストは外部ライブラリ(axiosやajax)を使った方が無難

例えば。。。

  • 存在しないURLにリクエストを送るとstatus:404などになるが、fetchはエラーにならな(.catchに飛ばない)サーバーからのレスポンスがあるとすべてthenに飛ぶリクエストするドメイン自体が無かったような場合はエラーとな.catchに飛ぶ(axiosなどとは動きが違う)

さいごに

動画講座を受講直後は分かったつもりでも、実際のプログラミングで使ってみないと本当に理解しているかわからないものですね。動画を見ながら書いたコードも、後で見返すと「??」です。

動画を都度振り返りながら、自分のものにしていきたいです。

Udemyの動画講座はこちら
【世界で2万人が受講】JavaScriptエンジニアのためのES6完全ガイド

タグ

カテゴリー

  • この記事を書いた人
アバター

from-age35

中小企業非エンジニアです。35歳で急遽プログラミングを覚えることになり、PythonやJavaScriptなどをゆっくりマイペースに覚えています。先端スキルには疎いですが、楽しくコーディングしてます♪最近の興味は【WEB開発】です

-JavaScript, WEB
-

Copyright© 35からのプログラミング , 2020 All Rights Reserved Powered by AFFINGER5.