entriesメソッド const map = new Map([["key1", "value1"], ["key2", "value2"]]); const entries = []; for (const [key, value] of map.entries()) { entries.push(`${key}:${value}`); } console.log(entries); // => ["key1:value1","key2:value2"] ent…

マップが持つ"要素を列挙メソッド"として、forEach、keys、values、entriesがあります。 今回はforEach、keysについて学んでいきます。 forEachメソッド コールバック関数には値、キー、マップの３つが渡されます。 配列のforEachではインデックスが渡される…

JavaScriptには配列の他にマップ型のコレクションであるMapと、セット型のコレクションであるSetというデータの集まりを扱うコレクションがあります。 Map マップ型のコレクションを扱うためのビルトインオブジェクトです。 キーと値の組み合わせからなりま…

[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に関する処理も行っています。 非同期処理は名前から考えるとメインスレッド以外で実行されるように見えますが、 …

多くのプログラミング言語にはコードの評価の仕方として、同期処理（sync）と非同期処理（async）という大きな分類があります。 非同期処理はJavaScriptにおけるとても重要な概念です。 まずは非同期処理での例外処理、非同期処理の違いから学んでいきたいと…

JavaScript開発においてデバッグ中に発生したエラーを理解することは非常に重要です。 エラーが持つ情報を活用することで、ソースコードのどこでどのような例外が投げられたのかを知ることができます。 エラーはすべてErrorオブジェクトを拡張したオブジェク…

エラーオブジェクト throw文ではエラーオブジェクトを例外として投げることができます。 ここでは、throw文で例外として投げられるエラーオブジェクトについて見ていきます。 渡された数値が0以上ではない場合に例外を投げる関数です。 tryの中で発生させ、c…

try...catch構文 例外が発生しうるブロックをマークし、例外が発生したときの処理を記述するための構文です。 try...catch構文のtryブロック内で例外が発生すると、tryブロック内のそれ以降の処理は実行されず、catch節に処理が移行します。 catch節は、try…

ビルトインオブジェクトの継承 今回は「ビルトインオブジェクトのコンストラクタも継承出来る」ということについて学んでいきます。 ビルトインオブジェクトにはArray、String、Object、Number、Error、Dateなどのコンストラクタがあります。 class構文では…

【復習-1】 インスタンスオブジェクト new演算子などを用いてクラスをインスタンス化したものです。 // プロパティを持たない空のオブジェクトを作成 // = `Object`からインスタンスオブジェクトを作成 const obj = new Object(); console.log(obj); // => {…

子クラスのインスタンスから親クラスのプロトタイプメソッドを呼び出す例を学習しました。 プロトタイプ継承 Parentクラスではmethodを定義しているため、これを継承しているChildクラスのインスタンスからも呼び出せます。 class Parent { method() { conso…

本日はクラスの継承について勉強しました。 継承 extendsキーワードを使うことで既存のクラスの構造や機能を引き継いだ新しいクラスを定義することが出来ます。 クラスの定義 以下のように定義します。 class 子クラス extends 親クラス { ~子クラスの定義~ …

プロトタイプオブジェクトのプロパティがどのようにインスタンスから参照されるか オブジェクトのプロパティを参照するときに、オブジェクト自身がプロパティを持っていない場合でも、そこで探索が終わるわけではありません。 オブジェクトのPrototype内部プ…

復習 プロトタイプメソッドはプロトタイプオブジェクトのプロパティとして定義しています。 クラスをインスタンス化したときにプロトタイプオブジェクトのプロパティとしてメソッドが組み込まれます。 class構文で定義したプロトタイプメソッドはプロトタイ…

前提(prototypeオブジェクトについて) 正確には、ほとんどすべてのオブジェクトはObject.prototypeプロパティに定義されたprototypeオブジェクトを継承しています。 prototypeオブジェクトとは、すべてのオブジェクトの作成時に自動的に追加される特殊なオブ…