UGA Boxxx

つぶやきの延長のつもりで、知ったこと思ったこと書いてます

JavaScript

【JavaScript】State of JS 2022 - 言語仕様

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

【JavaScript】URLパラメーターの文字列をスマートにオブジェクトにする

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

【JavaScript】Intl.DateTimeFormatのcalendarオプション

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

【JavaScript】JavaScriptでスマホのキーボード操作の落とし穴

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

【システム開発】JavaScriptのError を拡張する

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

【JavaScript】JavaScriptでハッシュ値を取得する

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

【JavaScript】GCSからjsonファイルをダウンロードする

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

【JavaScript】NaNの話

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

【JavaScript】ES2021

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

【JavaScript】条件付きでオブジェクトにメンバーを追加する

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

【JavaScript】es6-promise-poolでPromiseを返す関数の同時実行を制御する

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

【JavaScript】複数のPromiseをまとめて処理したい - Promise.allSettled

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

【JavaScript】クロージャと関数オブジェクト

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

【JavaScript】関数オブジェクト

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

【JavaScript】クロージャ

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

【JavaScript】Promiseを返す関数の同時実行を制御する

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

【Redux】React + Redux のテストを考える

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

【JavaScript】クリップボードにコピー

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

【Prettier】2.0から関数の括弧の前にスペースがつく

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

【Prettier】2.0からArrow関数の引数が1つでも括弧がつく

PrettierをつかってコードのフォーマットをしていたがPrettierのバージョンを2.xにあげたところArrow関数の引数が1つでも括弧がつくようになった v1.0 a => {} v2.0 (a) => {} https://github.com/prettier/prettier/pull/7430 引数が増えた時に余計な変更…

【Babel】7.4.0で推奨されているcore-js@3がIE11でうまく動作しない

Babel7では、polyfillは@babel/polyfillからcore-js@3を使うことが推奨されている これに対応したのだがcore-js@3を使ったpolyfilではvuexがIE11でうまく動作しなかった uga-box.hatenablog.com 以下のエラーがでて画面が真っ白になってしまう [vuex] vuex r…

【FlowType】関数オーバーロード

関数のオーバーロード(シグネチャの異なるメソッド)に対応する型を考える 例えば、以下の関数の型について考える number を受け取った場合は string を返す string を受け取った場合は number を返す この場合、どちらか一方ということからUnion型|を使っ…

【FlowType】逆引きメモ

Flow使ってみて調べた使い方 分割代入した変数に対して const { pathname }: { pathname: string } = location; 指定された型をすべて満たす型をつくる Intersection types を使う // @flow type A = { a: number }; type B = { b: boolean }; type C = { c:…

【FlowType】2020年のFlowってどうなのか

Flowって最近どうなのかを調べたら、ちょうど先日3/10に2020年の計画が発表されていたのでざっくりまとめてみた

【Firebase】初期設定を環境に応じて変更する

WebサービスでFirebaseを使う場合、Firebase SDKの初期設定をする必要がある こういうやつ const firebaseConfig = { apiKey: "abcdefghijklmnopqrstuvwxyz1234567890ABC", authDomain: "YOUR-PROJECT-NAME.firebaseapp.com", databaseURL: "https://YOUR-PR…

【JavaScript】moment.jsの日付フォーマット内にテキストを含める

ベトナム語のローカライズを行う場合、2020年1月は下のようになる Tháng 1 2020 馴染みがまったくないがThángが「月」にあたるらしい これをmoment.jsのフォーマットを使って表現すると下のようになる Tháng M YYYY と思っていたがこれではダメだった