こんにちは。
先日HTML5プロフェッショナル認定試験level2を受けて、
JavaScriptセクション内で重要だと思った「this」、「fetch / Promise / async-await(非同期処理)」の文法についてまとめてみました。
以下、目次です。
1、まとめようと思った成り行き
2、「This」について
3、「fetch / Promise / async-await(非同期処理)」について
4、まとめと今後の展望
1、まとめようと思った成り行き
まず、今回この記事を書こうと思ったわけについて、
先日HTML5プロフェッショナル認定試験を受けたのですが、無事落ちました；
ただ試験終了後に自分がどのセクションで、どの程度の正答率があったのかわかるのですが、
「JavaScript」セクション(所謂ソース文法問題)が33%の正答率しかなく、
割と自信があっただけにショックでした。
再度試験を受けるのに、さすがにJSセクションへの理解度を深めておく必要があると思ったので、
試験で少し曖昧だった部分についてまとめようと思い今回二つの文法をピックアップしました。
2、「This」について
ThisはJavaScriptの中でもかなり混乱しやすいトピックであり、
実際に出題された問題ではアロー関数が題材となっていました。
JavaScriptでは、thisが何を指すかは「どのように呼び出されたか」によって決まります。
下にThisを使用したソースと実際のブラウザ表示を記します。
↓ブラウザ表示結果
それぞれの動きについてまとめます。
①関数を単独で呼び出す
関数を単独で呼び出した場合、ブラウザでは「グローバルオブジェクト（window）」がデフォルトのthisになる。
strictモードでは自動的に束縛されず、undefinedになる。
(strictモードは別名厳格モードで、意図しないバグにつながる可能性のあるコードをエラーとして検出し、コードの安全性を高める仕組み）
②オブジェクトのメソッドとして呼び出す
オブジェクトのメソッドとして呼び出す場合は「そのメソッドを呼び出したオブジェクト」自体を指す。
この場合はobjectUserが呼び出し元なので、this === objectUserとなる。
③アロー関数で呼び出す
アロー関数のthisは外側のスコープのthisを引き継ぐ。
ここでは外側がグローバルスコープなので、thisはwindow（strictモードならundefined）となる。
④コンストラクタ関数（またはクラス）で呼び出す
newを使う(インストラクタを作成する)と、新しいオブジェクトが生成され、そのオブジェクトがthisとして関数内に渡される。
⑤～⑦ call使用例/apply使用例/bind使用例
⑤callについて、
callは「この関数をthis=A（またはB）として実行してね」という命令である。
このように同じ関数を異なる文脈で再利用できるのが最大のメリット。
⑥applyについて、
applyは「引数がすでに配列の形になっているとき」に使われる。
たとえば、スプレッド構文がなかった時代に使用されることが多かった(らしい)。
⑦bindについて、
bindは「thisを固定した新しい関数」を返す。
すぐ実行されるcall/applyとは異なり、「後で使える」ことが特徴。
⑧イベントハンドラ内で呼び出す
イベントリスナ内のthisは「イベントが発生した要素（=イベントのターゲット）」を指す。
上記に書き出しただけでも8種類あり、それぞれで動きの特徴がかなり異なっています。
特にアロー関数が少しややこしくなっていることがわかるかと思います。
3、「Promise / fetch / async-await(非同期処理)」について
まずJavaScript はシングルスレッドのため、1つの処理しか同時に行えません。
そのため、ネット通信など時間のかかる処理を待っていたらユーザ的には快適とは言えない...
そこで使用されているのが「非同期処理」であり、処理が終わるのを待たずに次に進める仕組みです。
〇Promise
Promise（約束）は、「今はまだ終わっていないけど、将来完了する処理」を表すオブジェクトであり、
Promiseの状態には、「pending（処理中）」、「fulfille（成功：resolve）」、「rejected（失敗：reject）」などがあります。
以下がPromiseの基本形です。
then() が「成功時の処理」、catch() が「失敗時の処理」となっており、finallyは結果関係なく行われる処理です。
〇fetch
fetch() は、JavaScriptでHTTP通信（APIなど）を行うための組み込み関数であり、
Promiseを返すのが最大の特徴です
以下がfetchの基本形です。
fetch()は即座にPromiseを返し、通信が完了したらthen()が呼ばれます。
また複数のthen() をつなげる（＝Promiseチェーンを作る）ことが可能です。
エラー処理のため必ずcatch()を使用し、通信やパースに失敗したときに備える必要があります。
〇async-await(非同期処理)
async-await は、Promiseを「同期処理のように(直感的に)書ける構文」であり、
コードが読みやすくなり保守性が高まります。
以下がasync-awaitの基本形です。
上記ソースでは「順番に実行」されるように見えやすく、実際ネストが深くなりにくいためわかりやすいです。
fetch / Promise / async-awaitはどれも今のweb開発で使用されていますが、
実際の業務で最も使用されているのはasync-awaitとされています。
その理由としてはPromiseを直感的に扱える構文であり、読みやすい・保守しやすいコードを書くことができるためです。
4、まとめと今後の展望
最後のまとめになりましたが、
今回はHTML5プロフェッショナル認定試験level2に落ちたことで再度学びなおさないとまずいと感じ、個人的に重要だと思ったトピックについてまとめました。
特にthisおよび非同期処理関連は実際の業務でも頻繁に使用される技術なので、
簡単にではありましたが自分なりに再度理解を深めることができたのでよかったと思います。
また、次のHTML5プロフェッショナル認定試験level2で合格することができるように今回の知識も生かして頑張りたいです。
今回の資格試験が落ち着いたら今度こそ自分でWEBサイトを作成してみたいと思うので、
作成した暁にはまたQiita記事などで報告できたらよいなと思います。
ここまでお読みいただきありがとうございました。
それでは！