6時だョ!!全員集合!!

Rails・JavaScrictを中心にアウトプットします。

JavaScript

2022年7月10日 instanceofよりも安全にインスタンスかどうかの確認ができる、プライベートフィールドのin演算子

instanceof と inの違い instanceof object instanceof constructor instanceof 演算子は、object のプロトタイプチェーンに constructor.prototype が存在することを検査します。 in prop in object in 演算子は、指定されたプロパティが指定されたオブジェ…

2022年7月2日 JavaScriptの最新仕様ES2022を深ぼる

1. クラスフィールド宣言ができるようになった そもそもクラスフィールドとは フィールドはクラスの中でデータの値を保管するために使用するものです。 メリット 今までのClass構文ではconstrutor()でフィールドを持たせる必要がありましたが、ES2022からは…

2022年3月19日 [ES2015] ECMAScript (JavaScript Primer)

第一章の最後の章では、ECMAScriptの仕様についてまとめられていました。 この章ではリテラシーの向上と、それを高める手段を知れたという印象です。 ECMAScriptはEcma Internationalという団体によって標準化されている仕様です。 Microsoft、Mozilla、Goog…

2022年3月18日 [ES2015] ECMAScriptモジュール (JavaScript Primer)

[ES2015] ECMAScriptモジュール ECMAScriptモジュールはTodoアプリのユースケースで実際に動かしながら学ぶため、ここでは構文の説明とモジュールのイメージをつかむのが目的です。 モジュールは、保守性・名前空間・再利用性で使われます。 保守性: 依存性…

2022年3月17日 Math (JavaScript Primer)

Mathオブジェクト JavaScriptで数学的な定数と関数を提供するビルトインオブジェクトです。 インスタンスは作成しないです。 new Math(); 結果: TypeError: Math is not a constructor const rad90 = Math.PI * 90 / 180; const sin90 = Math.sin(rad90); co…

2022年3月16日 Date (JavaScript Primer)

復習 オプショナルチェーン演算子とは 以下の二つのコードが同義です。 obj?.value obj != null ? obj.value : undefined レシーバがnull undefined のときにエラーではなくundefined を返します。 三項演算子で書くよりもリファクタリングができます。 Date…

2022年3月15日 JSON (JavaScript Primer)JSONにシリアライズできないオブジェクト

JSONにシリアライズできないオブジェクト JSON.stringifyメソッドはJSONで表現可能な値だけをシリアライズします。 (※シリアライズとは、複数の要素を一列に並べる操作や処理のこと。) JSONに変換可能な値として紹介されている、文字列、数値、真偽値、配列…

2022年3月14日 JSON (JavaScript Primer)

JSON JavaScript Object Notationの略です。 JSONは、データ送信に用いる文字列フォーマットです。 JavaScriptのオブジェクトリテラルをベースに作られた軽量なデータフォーマットです。 Notation(ノーテーション)は表記という意味です。 オブジェクトリテラ…

2022年3月11日 [ES2015] Map/Set - Set (JavaScript Primer) 値の追加と取り出し

値の追加と取り出し 作成したセットに値を追加するにはaddメソッドを使います。 重複する値は持たないので、既存の値にaddメソッドを使っても無視されます。 セットが特定の値を持っているかの真偽値を得るのにhasメソッドがあります。 const set = new Set(…

2022年3月10日 [ES2015] Map/Set - Set (JavaScript Primer)

復習 WeakMapの認識が甘かった箇所 Mapと違いキーには参照型のオブジェクトのみ使用できるためプリミティブ型だとエラーになります。 ラッパーオブジェクト プリミティブ型に対してプロパティを呼び出すタイミングで働きます。 Set Setはセット型のコレクシ…

2022年3月8日 [ES2015] Map/Set - WeakMap (JavaScript Primer) WeakMap

WeakMap WeakMapは、Mapと同じくマップを扱うためのビルトインオブジェクトです。 Mapと違う点は、キーを弱い参照(Weak Reference)で持つことです。 弱い参照とは ガベージコレクションによるオブジェクトの解放を妨げない特殊な性質です。 メモリ管理の仕…

2022年3月7日 [ES2015] Map/Set - マップとしてのObjectとMap (JavaScript Primer) マップとしてのObjectの利点

マップとしてのObjectの利点 Objectをマップとして使うときに起きる多くの問題は、Mapオブジェクトを使うことで解決しますが、 常にMapがObjectの代わりになるわけではありません。 マップとしてのObjectには次のような利点があります。 多くの場合はMapオブ…

2022年3月5日 [ES2015] Map/Set - マップとしてのObjectとMap (JavaScript Primer)

ES2015でMapが導入されるまで、JavaScriptにおいてマップ型を実現するためにObjectが利用されてきました。 ただし、"マップとしてのObject"にはいくつかの問題があります。 Objectのprototypeオブジェクトから継承されたプロパティによって、意図しないマッ…

2022年3月4日 [ES2015] Map/Set - Map (JavaScript Primer) マップの反復処理

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…

2022年3月3日 [ES2015] Map/Set - Map (JavaScript Primer) マップの反復処理

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

2022年3月1日 [ES2015] Map/Set - Map (JavaScript Primer)

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

2022年2月28日 非同期処理:コールバック/Promise/Async - Promise APIとAsync Functionを組み合わせる (JavaScript Primer) [ES2022] Module直下でのawait式

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

2022年2月26日 非同期処理:コールバック/Promise/Async - await式はAsync Functionの直下でのみ利用可能 (JavaScript Primer)

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

2022年2月25日 非同期処理:コールバック/Promise/Async - Promise APIとAsync Functionを組み合わせる (JavaScript Primer)

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

2022年2月24日 非同期処理:コールバック/Promise/Async - Promiseチェーンをawait式で表現する (JavaScript Primer)

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

2022年2月22日 非同期処理:コールバック/Promise/Async - Async FunctionはPromiseを返す (JavaScript Primer)

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

2022年2月21日 非同期処理:コールバック/Promise/Async - Promise.race (JavaScript Primer)

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

2022年2月19日 非同期処理:コールバック/Promise/Async - Promiseチェーンで逐次処理 (JavaScript Primer)

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

2022年2月17日 非同期処理:コールバック/Promise/Async - Promiseチェーンで値を返す (JavaScript Primer)

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

2022年2月17日 非同期処理:コールバック/Promise/Async - Promiseチェーン (JavaScript Primer)

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

2022年2月15日 非同期処理:コールバック/Promise/Async - Promise.resolve (JavaScript Primer)

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

2022年2月11日 非同期処理:コールバック/Promise/Async - Promiseと例外 (JavaScript Primer)

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

2022年2月8日 JavaScript (JS Primer) Promise.prototype.thenとcatch

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

2022年2月7日 JavaScript (JS Primer) Promise

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

2022年2月4日 JavaScript (JS Primer) エラーファーストコールバック

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