Object.defineProperty()の使いどころについて調べた developer.mozilla.org JavaScriptのObject.defineProperty()は、オブジェクトのプロパティを詳細に定義・制御するためのメソッド 通常、オブジェクトにプロパティを追加すると、そのプロパティは自由に…

bignumber.js というライブラリを知ったので調査 mikemcl.github.io JavaScriptの数値はIEEE 754 倍精度浮動小数点数（double）のため、数を表現するために使えるビット数に限りがあり、少数の計算が正しくできない double は、例えば 1 / 10の結果（0.1） 2…

immerというJavaScriptのライブラリの使い方を調べた immerjs.github.io immerは、JavaScript でイミュータブルなデータ構造を簡単に操作するためのライブラリ proxy を使って、オブジェクトを一時的に「仮想的にミュータブルに扱える」ようにしてくれる よ…

input要素の onCompositionStart と onCompositionEnd について調べた developer.mozilla.org onCompositionStartは、ReactやHTML標準におけるイベントハンドラ IME（入力メソッドエディタ）を使った入力が開始されたときに発生するイベントをキャッチするた…

Drag and Drop における Propagation（伝播）について調べた Propagationとは、ドラッグ操作中に発生するイベントがDOMツリー内でどのように伝わるかに関連する概念 ポイントをまとめると以下 1. Drag and Dropの基本的な流れ HTML5のDrag and Drop APIを使…

TerserというJavaScriptコードを圧縮・最小化するためのツールを知って使ったことがなかったので触ってみる terser.org 基本的な使い方 $ terser -c -m -o output.js -- input.js オプション -c: コードを圧縮 -m: 関数名などの名前を短い名前に変換 -o outp…

Module Harmonyの話を聞いた speakerdeck.com Module Harmonyを知らなかったのでざっくりメモっておく JavaScript(Ecmascript)の仕様策定は合議制で、プロポーザルという提案を出し合って実装してみて意見を出し合いながら新しい仕様が決まる そんな中でModu…

こちらの記事で要素をドラッグして移動するのが簡単に実装できることを知った qiita.com 使っている要素技術は onpointermove: ポインターの座標が変化し、かつブラウザーのタッチ操作によってポインターがキャンセルされていないときに発生するイベント eve…

こちらのブログを読んで、オブジェクトのディープクローンにはstructuredCloneを使うと良いことを知った www.builder.io JavaScriptはコピーしたオブジェクトとコピー元のオブジェクトでプロパティにおいて同じ参照を共有するコピー（シャローコピー）と参照…

以前にPromiseベースのNode.js ORMのSequelizeを使ってPostgresqlに接続したことがある uga-box.hatenablog.com 今回、別件で同じことをやろうとしたところ以下のエラーがでて失敗した Please install pg package manually at ConnectionManager._loadDialec…

fetchAPIを使っていて、以下のエラーが出た TypeError: body used already for: https://my-app/remove-favorite 調べたところ、レスポンスを.json()でJSONオブジェクトとして解析していたが、Content-Typeがjsonでないことが原因だった github.com レスポン…

LottieというAirbnbが開発しているアニメーションライブラリを知ったので試してみた airbnb.design とりあえずの使い方はこちらにすごく詳しく書かれていた WebアニメーションはLottieがオススメ！基本の使い方完全ガイド【2020年版】 | PhotoshopVIP Illust…

console.logで変数の値を見ていると、ある変数で以下のような警告がでていることがわかった [Object: null prototype] { title: '' } 表示はできているが、前の[Object: null prototype]が気になるので調べた 調べるとこれは、プロパティ/プロトタイプのない…

いまさらながらES2022でのアップデートをキャッチアップした 鹿野さんの記事が参考になった zenn.dev クラスフィールド宣言 プライベートなメンバー instanceofの代わりのin トップレベルawait 配列の最後の要素を取得できるat() hasOwnPropertyの代わりのOb…

JavaScriptとReactでつくるWebアプリのデザインパターンがまとめられたサイトを知ったのでみてみた javascriptpatterns.vercel.app まずは、よくきく以下のようなデザパタをJSでやる方法がめちゃめちゃわかりやすく載っている モジュールパターン シングルト…

bunという新たなJavaScriptランタイムが話題になったので調べた bunはJarred Sumner氏が開発したJavaScriptおよびTypeScriptプロジェクトをバンドル、トランスパイル、インストール、実行を高速に行うオールインワンのビルドツール（webpackやnpmが含まれたn…

Sentryというエラー監視ツールを知った 結構前からあるみたい docs.sentry.io 利用するには言語固有のSDKをインストールする必要がある 対応しているプラットフォームは以下 Platforms | Sentry Documentation このうちJavaScriptを見てみる JavaScript Erro…

Reactのアプリケーションをつくっているときに例外処理について悩んでいた Javaエンジニア出身としては、RuntimeExceptionをラップして適した名称のExceptionをつくるみたいなのが良いかなと思っていた そんなとき、以下の@takepepeさんの記事を読んだり、他…

State of JS の2022年版が今年もでたので知らなかったこと曖昧だったことをピックアップしてみた 2021.stateofjs.com Proxy Proxy - JavaScript | MDN いきなり知らなかった このProxyオブジェクトを使用すると、元のオブジェクトがもつプロパティの取得、設…

JavaScriptでURLパラメーターの文字列（"?a=foo&b=bar"）をオブジェクト（{ a: 'foo', b: 'bar' }）にしたいときにどうするのがスマートかを調べた まずURLSearchParamsのコンストラクターに文字列を渡すのがよさそう var params = new URLSearchParams('?a=…

２年前にタイの日付に関して、Date#toLocaleDateStringをオプションなしで使うと仏暦になる問題に対して、localeにオプションを追記することで西暦にするということを行った uga-box.hatenablog.com そのときはlocaleth-THをth-TH-u-ca-iso8601という文字列…

スマホで入力フォームにフォーカスインするとスマホのキーボードが表示される このとき、入力して各キーボードの右下の決定ボタン（iOSならreturn、Androidなら矢印）をクリックしたときの制御をしたい 具体的には、この入力フォームがformタグの中にあり、…

JavaScriptで作ったアプリでのエラーをハンドリングしたい 例えば、Node.jsのAPIサーバーでリクエストパラメータの精査エラーをハンドリングするなど 特定のエラーを処理する場合はMDNにあるようにinstanceofで判別することができる try { foo.bar() } catch…

バックエンド側で、ある検索条件で検索した結果をjsonファイルにしてGCSに格納した このファイルをNode.jsのアプリ側でダウンロードしたい このときファイル名が検索条件をハッシュ化したものになっているためダウンロードする際にそのハッシュ値を生成しな…

node.jsでつくったアプリで、GCSからファイルをダウンロードしたい @google-cloud/storageを使う www.npmjs.com APIドキュメントは以下 https://googleapis.dev/nodejs/storage/latest/File.html#download サンプル実装 import { Storage } from "@google-cl…

以下の記事が話題になった nmi.jp NaN === NaN は false である console.log(NaN == false); // → false グローバルオブジェクトにあるisNaNとNumber.isNaNは挙動が違う 配列のindexOfでNaNは見つけられない ということさえ覚えておけばよさそうで、あとはや…

先日6月22日にES2021が正式仕様として承認された www.ecma-international.org こちらの記事がまとめられて参考になった zenn.dev 気になったことだけ確認する Promise.any() 以前に調べた機能で、正式に仕様になったとのことで使っていこうと思う uga-box.ha…

JavaScriptで条件に応じてオブジェクトにメンバーを追加するかどうかを下のように実装していた const obj = { foo: "foo", bar: "bar" }; if (someCondition) { Object.assign(obj, { baz: "baz" }); } これをオブジェクト定義時に条件判定してメンバーに追…

以前、p-limitというライブラリを使ってPromiseを返す関数の同時実行を制御したことがある uga-box.hatenablog.com これとは別のやり方でes6-promise-poolを使った方法をしったので調査してみる 参考にしたstackoverflow stackoverflow.com github.com READM…

複数のPromiseをまとめて処理をしたくてPromise.allを使っていたが、allは複数のPromiseのうち一つでも Reject すると全体が Reject してしまう どれかが失敗しようが全て実行して成功と失敗の配列で結果が欲しい場合Promise.allSettled()を使うとよいことが…