JavaScript
instanceof と inの違い instanceof object instanceof constructor instanceof 演算子は、object のプロトタイプチェーンに constructor.prototype が存在することを検査します。 in prop in object in 演算子は、指定されたプロパティが指定されたオブジェ…
1. クラスフィールド宣言ができるようになった そもそもクラスフィールドとは フィールドはクラスの中でデータの値を保管するために使用するものです。 メリット 今までのClass構文ではconstrutor()でフィールドを持たせる必要がありましたが、ES2022からは…
第一章の最後の章では、ECMAScriptの仕様についてまとめられていました。 この章ではリテラシーの向上と、それを高める手段を知れたという印象です。 ECMAScriptはEcma Internationalという団体によって標準化されている仕様です。 Microsoft、Mozilla、Goog…
[ES2015] ECMAScriptモジュール ECMAScriptモジュールはTodoアプリのユースケースで実際に動かしながら学ぶため、ここでは構文の説明とモジュールのイメージをつかむのが目的です。 モジュールは、保守性・名前空間・再利用性で使われます。 保守性: 依存性…
Mathオブジェクト JavaScriptで数学的な定数と関数を提供するビルトインオブジェクトです。 インスタンスは作成しないです。 new Math(); 結果: TypeError: Math is not a constructor const rad90 = Math.PI * 90 / 180; const sin90 = Math.sin(rad90); co…
復習 オプショナルチェーン演算子とは 以下の二つのコードが同義です。 obj?.value obj != null ? obj.value : undefined レシーバがnull undefined のときにエラーではなくundefined を返します。 三項演算子で書くよりもリファクタリングができます。 Date…
JSONにシリアライズできないオブジェクト JSON.stringifyメソッドはJSONで表現可能な値だけをシリアライズします。 (※シリアライズとは、複数の要素を一列に並べる操作や処理のこと。) JSONに変換可能な値として紹介されている、文字列、数値、真偽値、配列…
JSON JavaScript Object Notationの略です。 JSONは、データ送信に用いる文字列フォーマットです。 JavaScriptのオブジェクトリテラルをベースに作られた軽量なデータフォーマットです。 Notation(ノーテーション)は表記という意味です。 オブジェクトリテラ…
値の追加と取り出し 作成したセットに値を追加するにはaddメソッドを使います。 重複する値は持たないので、既存の値にaddメソッドを使っても無視されます。 セットが特定の値を持っているかの真偽値を得るのにhasメソッドがあります。 const set = new Set(…
復習 WeakMapの認識が甘かった箇所 Mapと違いキーには参照型のオブジェクトのみ使用できるためプリミティブ型だとエラーになります。 ラッパーオブジェクト プリミティブ型に対してプロパティを呼び出すタイミングで働きます。 Set Setはセット型のコレクシ…
WeakMap WeakMapは、Mapと同じくマップを扱うためのビルトインオブジェクトです。 Mapと違う点は、キーを弱い参照(Weak Reference)で持つことです。 弱い参照とは ガベージコレクションによるオブジェクトの解放を妨げない特殊な性質です。 メモリ管理の仕…
マップとしてのObjectの利点 Objectをマップとして使うときに起きる多くの問題は、Mapオブジェクトを使うことで解決しますが、 常にMapがObjectの代わりになるわけではありません。 マップとしてのObjectには次のような利点があります。 多くの場合はMapオブ…
ES2015でMapが導入されるまで、JavaScriptにおいてマップ型を実現するためにObjectが利用されてきました。 ただし、"マップとしてのObject"にはいくつかの問題があります。 Objectのprototypeオブジェクトから継承されたプロパティによって、意図しないマッ…
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メソッド コールバック関数には値、キー、マップの3つが渡されます。 配列の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…
Promiseではコンストラクタの処理で例外が発生した場合に自動的に例外がキャッチされます。 例外が発生したPromiseインスタンスはreject関数を呼び出したのと同じように失敗したものとして扱われます。 そのため、Promise内で例外が発生するとthenメソッドの…
thenメソッドの使い方について具体的な例を紹介します。 thenメソッドのエイリアスでもあると言われているcatchメソッドについても勉強しましたのでその点もまとめていきます。 function dummyFetch(path) { return new Promise((resolve, reject) => { setT…
Promiseとは 非同期処理の結果を表現するビルトインオブジェクトです。 エラーファーストコールバックを発展させたものです。 異なる点として単なるルールではなくオブジェクトという形にして非同期処理を統一的なインターフェースで扱うことが出来ます。 エ…
ECMAScript 2015(ES2015)でPromiseが仕様に入るまで、非同期処理中に発生した例外を扱う仕様はありませんでした。 それより以前では"エラーファーストコールバック"というルールが使われていました。 エラーファーストコールバックとは 次のような非同期処…