Zenn
📚

JavaScript 学習実施メモ 5

2021/02/10に公開
JavaScript
初心者
frontend
frontend
メモ
tech

初学者のメモです。間違い等ありましたらご指摘コメント待ってます。

5回目。ストックがなくなれば、溜まったら出す形式で。

前回： https://zenn.dev/yuki_kanayama/articles/3c37943989b79d

初回： https://zenn.dev/yuki_kanayama/articles/37022f0373e38d

Promise

非同期処理をより簡単に、可読性が上がるように記述できるようにしたもの。

1. // resolve の場合は then が実行される。
2. new Promise(function (resolve, reject) {
3.   resolve("hello!");
4. }).then(function (data) {
5.   console.log(data); // -> "hello"
6. }).catch(
7.  
8. ).finally(function () {
9.   console.log("終了処理");
10. });
11.  
12. // reject の場合は catch が実行される。
13. new Promise(function (resolve, reject) {
14.   reject("bye!");
15. }).then(
16. ).catch(function (data) {
17.   console.log(data); // -> "bye!"
18. }).finally(function () {
19.   console.log("終了処理");
20. });

1. new Promise(
2.   同期処理
3. ).then(
4.   非同期処理（resolveを待つ）
5. ).catch(
6.   非同期処理（rejectを待つ）
7.  
8. ).finally(
9.   非同期処理（then、またはcatchを待つ）
10. );

Promiseチェーン

1. function sleep(val) {
2.   return new Promise((resolve) => {
3.     setTimeout(() => {
4.       console.log(val++);
5.       resolve(val);
6.     }, 1000);
7.   });
8. }
9.  
10. sleep(0)
11.   .then(function (val) {
12.   return sleep(val);
13.   })
14.   .then(function (val) {
15.     return sleep(val); // sleep(val)が実行 => Promiseのインスタンスが return される。それがさらにreturnされることでチェーンがつながる。
16.   })
17.   .then(function (val) {
18.     return sleep(val);
19.   })
20.   .then(function (val) {
21.     return sleep(val);
22.   })
23.  
24. // アロー関数を使用する場合
25. sleep(0)
26.   .then(val => sleep(val))
27.   .then(val => sleep(val))
28.   .then(val => sleep(val))
29.   .then(val => sleep(val))
30.   .then(val => sleep(val))
31.   .then(val => sleep(val))

Promiseと並列処理

allメソッド

Promiseの並列処理を実行するメソッド。引数に反復可能オブジェクト（Arrayなど）でPromiseのインスタンスを記述する。中の処理が全て完了したときに次の処理に以降する。

raceメソッド

配列で渡された最初のインスタンスが完了したら、次の処理を実行する。

allSettlledメソッド

allの違いは、rejectが呼ばれるとcatchに処理が移行するが、allSettledはthenしか呼ばれない。

マクロタスクとマイクロタスク

マクロタスク

これまでのレクチャーでタスクキューと呼んでいたもの。順番が回ってきたら1つずつタスクを実行する。

例：

setTimeout

setInterval

requestAnimateonFrame

など

マイクロタスク

タスクキューとは別で存在する非同期処理の待ち行列。別名：ジョブキュー順番が回ってきたらすべてのジョブを実行する。

例：

Promises

queueMicrotask

MutationObserver

など

Await / Async

Promiseをさらに直感的に記述できるようにしたもの。

Async

Promiseを返却する関数の宣言を行う。宣言した関数に return の記述がなくてもPromiseの空インスタンスを返す。

Await

Promiseを返却する関数の非同期処理が完了するまで待つ。

例：

1. function sleep(val) {
2.   return new Promise(function(resolve) {
3.     setTimeout(function() {
4.       console.log(val++);
5.       resolve(val);
6.     }, 1000);
7.   });
8. }
9.  
10. async function init() { // async がないとエラー
11.   let val = await sleep(0); // resolve が渡す引数を変数に代入する。
12.   val = await sleep(val);　// 受け取った引数を再代入しもう一度実行。
13.   val = await sleep(val);
14.   val = await sleep(val);
15.   val = await sleep(val);
16.   val = await sleep(val);
17.   return (val); // then が実行
18.   throw new Error(); // catch が実行
19. };
20.  
21. init().then(val => {
22.   console.log('then: ' + val);
23. }).catch(() => { 
24.   console.log('catch');
25. })

1. 実行結果
2. 0
3. 1
4. 2
5. 3
6. 4
7. 5
8. then: 6

fetch

サーバーからデータを取得したりすることができる関数。返ってくる値はPromiseのインスタンス。よって thenメソッド が使える。

jsonファイル

Javascriptからサーバー上にデーターを取得するとき、サーバーに対してデータをリクエストする時に使用する。Javascriptの記述形式に似ている。主に3つの違いがある。

  1. シングルコーテーションが使えない。
  2. プロパティをダブルコーテーションで囲む必要がある。
  3. 最後の要素にカンマをつけるとエラーになる。
1. fetch('users.json')
2.   .then((val) => {
3.     // console.log(val);
4.     return val.json();
5.   })
6.   .then((json) => {
7.     console.log(json);
8.     for (const user of json) {
9.       console.log(`I am ${user.name}, ${user.age} years old!`)
10.     }
11.   })
12.  
13. // Async / Await を使用する場合
14. async function fetchUsers() {
15.   let val = await fetch('users.json');
16.   let json = await val.json();
17.   for (const user of json) {
18.     console.log(`I am ${user.name}, ${user.age} years old!`);
19.   }
20. }
21. fetchUsers();

例外処理とエラー

例外処理

エラーが発生した際に飛ぶ特別な処理。

1. try {
2.   throw new Error()
3. } cache(e) {
4.   エラーハンドリング
5. }　finally {
6.

ES ModulesとCommonJS

モジュール

ソースコードを機能毎に分割して、メンテナンスしやすくする仕組み。代表的なものにESM（ESモジュール）とCJS（Common JS）がある。

Common JS

Node.jsのモジュール管理システム。require / exports を使用する。

ES モジュール

ECMAScript の使用に基づいたモジュール管理システム。主にブラウザ側で使用する。import / export を使用する。

主な違い

1.           ESM         vs.         CJS
2.      import/export          require/exports
3.         ブラウザ                  Node.js
4.          .mjs                    .cjs

ESModuleと即時関数

モジュールコンテキスト

ほとんど、グローバルコンテキストと同じ。ただ、モジュールコンテキストは、this が使えない。(Windowを参照しない）

モジュールスコープ

モジュール間（ファイル間）でのスコープ。export / import を使用しないと変数を参照できない。

モジュールの特徴

モジュールの動き

モジュールは、読み込みが非同期処理で行われる。よって、HTMLの構文解析が完了してから実行される。また、HTML側で同じモジュールを複数回読み込む、または、import で複数回読み込んでも一度しか実行されない。

nomodule 

1. <script nomodule>alert('表示したいテキスト') </script>

このように記述することで、モジュールに対応していないブラウザ（IEなど）でアラート表示することができる。

Discussion