[ES2022] Module直下でのawait式 ブラウザではscriptタグで囲えば"Script"として実行され、 <script type="module">と書けば"Module"として実行されます。 "Module"としてJavaScriptを実行した時のみ、トップレベル（もっとも外側のスコープ）においてはAsync Functionなしでawait…

await式はAsync Functionの直下でのみ利用可能 今回はAsync Functionとawait式の特徴についてもう少し深ぼる内容でした。 関数宣言でawait式を使用した場合 // asyncではない関数では`await`式は利用できない function main(){ // SyntaxError: await is onl…

昨日の朝会ではawait式でリソースを順番に1つずつ取得していましたが、Promise.allを使ってまとめて取得する例から見ていきます 。 Promise APIとAsync Functionを組み合わせる function dummyFetch(path) { return new Promise((resolve, reject) => { setT…

Promiseチェーンをawait式で表現する まずはawaitを使わない逐次的な処理から見てみます。 以下はPromiseチェーンで複数の非同期処理を逐次的に行っている例です。 function dummyFetch(path) { return new Promise((resolve, reject) => { setTimeout(() =>…

Async FunctionはPromiseを返す Async Functionとして定義した関数が返す値は次のケースがあります。 値をreturnした場合、Fulfilled状態のPromiseインスタンスの値を返します。 Promiseをreturnした場合、返り値のPromiseをそのまま返します。 例外が発生し…

Promise.allメソッドは複数のPromiseが全て完了するまで待つ処理でした。 一方で複数のPromiseを受け取りますが、Promiseが1つでも完了した（Settled状態となった）時点で次の処理を実行する "Promise.race"を勉強しました。 Promise.race Promise.raceメソ…

Promiseチェーンで逐次処理 Promiseチェーンで非同期処理の流れを書く大きなメリットは、非同期処理のさまざまなパターンに対応できることです。 ここでは、典型的な例として複数の非同期処理を順番に処理していく逐次処理を考えていきましょう。 Promiseで…

Promiseチェーンで値を返す thenメソッドなどのコールバック関数は次のチェーンに値を渡すこともできます。 以下はreturnして次のthenメソッドの引数に値を渡している例です。 Promise.resolve(1).then((value) => { console.log(value); // => 1 return val…

Promiseチェーン Promiseによる統一的な処理方法は複数の非同期処理を扱う場合に特に効力を発揮します。 非同期処理が終わったら次の非同期処理というように、複数の非同期処理を順番に扱いたい場合もあります。 Promiseではこのような複数の非同期処理から…

Promise.resolve Promise.resolveメソッドはFulfilledの状態となったPromiseインスタンスを作成します。 const fulfilledPromise = Promise.resolve(); Promise.resolveメソッドは以下のコードの糖衣構文(シンタックスシュガー)です。 // const fulfilledPro…

ActionMailer Railsに組み込まれているメール送信機能です。 コマンドで主要ファイルを作成することが出来ます。 rails g mailer UserMailer whenever Railsで定期的に実行したいタスクを設定することが出来るGemです。 スコープとメソッドの違い 前提として…

Promiseではコンストラクタの処理で例外が発生した場合に自動的に例外がキャッチされます。 例外が発生したPromiseインスタンスはreject関数を呼び出したのと同じように失敗したものとして扱われます。 そのため、Promise内で例外が発生するとthenメソッドの…

thenメソッドの使い方について具体的な例を紹介します。 thenメソッドのエイリアスでもあると言われているcatchメソッドについても勉強しましたのでその点もまとめていきます。 function dummyFetch(path) { return new Promise((resolve, reject) => { setT…

Promiseとは 非同期処理の結果を表現するビルトインオブジェクトです。 エラーファーストコールバックを発展させたものです。 異なる点として単なるルールではなくオブジェクトという形にして非同期処理を統一的なインターフェースで扱うことが出来ます。 エ…

ECMAScript 2015（ES2015）でPromiseが仕様に入るまで、非同期処理中に発生した例外を扱う仕様はありませんでした。 それより以前では"エラーファーストコールバック"というルールが使われていました。 エラーファーストコールバックとは 次のような非同期処…

非同期処理はメインスレッドで実行される メインスレッドは、ブラウザがユーザーのイベントや描画を処理するところです。表示の更新といったUIに関する処理も行っています。 非同期処理は名前から考えるとメインスレッド以外で実行されるように見えますが、 …