Open11

JS

flowerflower

同期処理(sync)と非同期処理(async)
同期処理ではコードを順番に処理していき、ひとつの処理が終わるまで次の処理は行いません。

同期的にブロックする処理があると、ブラウザでは大きな問題となります。
なぜなら、JavaScriptは基本的にブラウザのメインスレッド(UIスレッドとも呼ばれる)で実行されるためです。
メインスレッドは表示の更新といったUIに関する処理も行っています。 そのため、メインスレッドがJavaScriptの処理で専有されると、表示が更新されなくなりフリーズしたようになります。

非同期処理はコードを順番に処理していきますが、ひとつの非同期処理が終わるのを待たずに次の処理を評価します。 つまり、非同期処理では同時に実行している処理が複数あります。
非同期処理(コールバック関数)は、コードの見た目上の並びとは異なる順番で実行されることがわかります。

メインスレッドはUIスレッドとも呼ばれ、重たいJavaScriptの同期処理はメインスレッドで実行する他の処理(画面の更新など)をブロックする問題について紹介しました。
これは非同期処理においても同様の問題があります。
なぜならJavaScriptにおける非同期処理の大部分はメインスレッドで実行されるためです。

非同期処理は名前から考えるとメインスレッド以外で実行されるように見えますが、 基本的には非同期処理も同期処理と同じようにメインスレッドで実行されます。

JavaScriptでは一部の例外を除き非同期処理が並行処理(Concurrent)として扱われます。
並行処理とは、処理を一定の単位ごとに分けて処理を切り替えながら実行することです。 そのため非同期処理の実行前にとても重たい処理があると、非同期処理の実行が遅れるという現象を引き起こします。

ただし、非同期処理の中にもメインスレッドとは別のスレッドで実行できるAPIが実行環境によっては存在します。 たとえばブラウザではWeb Worker APIを使い、メインスレッド以外でJavaScriptを実行できます。 このWeb Workerにおける非同期処理は並列処理(Parallel)です。 並列処理とは、排他的に複数の処理を同時に実行することです。

このように、非同期処理のすべてをひとくくりにはできませんが、基本的な非同期処理(タイマーなど)はメインスレッドで実行されているという性質を知ることは大切です。JavaScriptの大部分の非同期処理は非同期的なタイミングで実行される処理であると理解しておく必要があります。

flowerflower

非同期処理は処理の流れが同期処理とは異なることについて紹介しました。 これは非同期処理における例外処理においても大きな影響を与えます。

同期処理では、try...catch構文を使うことで同期的に発生した例外がキャッチできます

非同期処理では、try...catch構文を使っても非同期的に発生した例外をキャッチできません。

コールバック関数内でエラーをキャッチできますが、非同期処理の外からは非同期処理の中で例外が発生したかがわかりません。 非同期処理の外から例外が起きたことを知るためには、非同期処理の中で例外が発生したことを非同期処理の外へ伝える方法が必要です。

また、JavaScriptでのHTTPリクエストやファイルの読み書きといった処理も非同期処理のAPIとして提供されています。 これらの非同期処理はネットワークにつながっていない場合やファイルが存在しない場合などには失敗します。 そのため、非同期処理における例外の扱い方(エラーハンドリング)は、極めて重要になります。

非同期処理で発生した例外の扱い方についてはさまざまなパターンがあります。 この章では主要な非同期処理と例外の扱い方として、主にPromise、Async Functionの2つを見ていきます。

Async FunctionはPromiseの上に成り立っている構文です。 そのため、どちらか片方ではなく両方とも理解することが重要です。

flowerflower

パッケージのインストール先の確認(npm list)
npm list
npm list によってパッケージのインストール先の確認をすることができます。

ローカルインストールの場合

ローカルインストールされたパッケージの確認

$ npm list --depth=0
グローバルインストールの場合

グローバルインストール先の確認

$ npm list -g | head -1

グローバルインストールされたパッケージの確認

$ npm list -g --depth=0

flowerflower

DOMにはHTMLドキュメントそのものを表現する document グローバルオブジェクトがあります。 document グローバルオブジェクトには、指定したHTML要素を取得したり、新しくHTML要素を作成するメソッドが実装されています。

DOMは言語機能(ECMAScript)ではなくブラウザが実装しているAPIです。 そのため、DOMを持たないNode.jsなどの実行環境では使えず、documentのようなグローバルオブジェクトも存在しないことには注意が必要です。

flowerflower

Node.jsは、ウェブブラウザのChromeと同じV8というJavaScriptエンジンを利用しています。 そのため、ECMAScriptで定義されている基本構文はブラウザと同じように使えます。 しかし、ブラウザ環境とNode.js環境では利用できるグローバルオブジェクトが違うため、アプリケーションを開発するときにはその違いを理解しなくてはなりません。

https://jsprimer.net/use-case/nodecli/helloworld/#global-objects