JavaScript

React Select を使ったコンポーネントのテストをする

react-select という複数選択やoptionにサムネイルを追加したりできる高機能なselectを提供するライブラリがある。 OptionSelector.tsx: import { useCallback } from 'react'; import Select from 'react-select'; export type Option = { value: string; l…

axios でリクエストログを出力する

JavaScriptでXHRやFetchなどで通信するとブラウザの開発コンソールのネットワークなどにログが出力されますが、Next.js のSSRなど、Node.js で実行する場合はログはでないです。そのため、通信ログが欲しい場合は、なんらかの方法でログを出力する必要があり…

Nuxt app で AWS SDK for JavaScript v3 を使えるようにする

AWS SDK for JavaScript v3 (@aws-sdk/***) では optional chaining operator ?. が使われており、Chrome や Node.js などでも割と最近になって使えるようになったので(2020年ごろ)、Nuxt app で使おうとすると設定にもよるがおそらく以下のようなエラーが出…

Terser で minify するときに ascii_only オプションを true にしないと Unicode Escape Sequence が展開されてしまう

Webpack + Babel + core-js な環境でビルドしたJavaScriptをPerlサーバーで配信するプロジェクトで、あるときPerlサーバーで配信しようとしたときに Internal Server Error がでてしまった。 ログを確認すると、Wide character in subroutine entry at /path…

楽譜描画ライブラリVexFlowを使ってみた

最近、楽譜学習アプリを作っており楽譜を描画する必要があるので、なにか便利なライブラリがないか調べていたら VexFlowというJavaScript製のライブラリがあることを知りました。 このライブラリは、JavaScriptで五線や音符を操作するAPIを呼び出すことでSVG…