こちらの記事で要素をドラッグして移動するのが簡単に実装できることを知った 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()を使うとよいことが…

JavaScriptのクロージャと関数オブジェクトのお話を聞く機会があり、自分なりに整理してみた 先に関数オブジェクトについてまとめていたとき uga-box.hatenablog.com 関数オブジェクトは「実行時にnameとlengthをもったオブジェクトが作られる」とイメージす…

JavaScriptの関数オブジェクトのお話を聞く機会があり、理解していたつもりだが深くはできていなかったことに気づいた なので、自分でももまとめてみる tc39.es 関数の定義方法 function add(x, y) { return x + y; } const add = function(x, y) { return x…

JavaScriptのクロージャのお話を聞く機会があり、理解していたつもりだが深くはできていなかったことに気づいた なので、自分でももまとめてみる Closure（関数閉包） ▼閉じた関数 自分が定義した引数/変数だけを使っている関数 function f (x, y) { const z…

Cloudinaryにアップロードしている画像がキャッシュされていないことがわかった これによりLCPが低い原因になっている そこで、リクエストを事前にしてキャッシュさせるキャッシュウォームアップを行いたい キャッシュウォーマー（クローラー）をJavaScript…

React + Redux アプリケーションのテストを考えているときに、reduxのテストの書き方のドキュメントと、丁度以下の記事を目にしたので、自身のプロジェクトに当てはめてみる recruit-tech.co.jp 上の記事で挙げられているテストの対象は以下 Action Creator …

よくあるコンテンツをシェアするためのURLのコピーをJavaScriptで行いたい Twitterでいうと以下の「ツイートのリンクのコピー」をクリックしてクリップボードにコピーする機能 調べてでてきた方法は４通り Document.execCommand("copy") ClipboardEvent.clip…

PrettierをつかってコードのフォーマットをしていたがPrettierのバージョンを2.xにあげたところfunctionと括弧の間にスペースが追加されることに気付いた v1.0 const fun = function() { // ... } v2.0 const fun = function () { // ... } どちらでもよいの…