コンパイラかく語りき

import { Fun } from 'programming'

Window環境にて EPERM: operation not permitted, unlink エラーが出て npm install/uninstall ができない問題

Windows 環境で開発中に、npm 操作ができなくなりました。具体的には、npm install や uninstall コマンドでパッケージの追加・削除ができない。 エラー内容は EPERM: operation not permitted, unlink... で、自分の場合は node_module/.bin/craco が unlink…

VSCodeでTabキーを押すとエディタ画面の入力状態が終わってしまう

超小ネタ。 VSCode でコーディングをしていたら、入力動作がおかしくなった。 入力中に Tab キーを押すと、エディタ画面からカーソルが消える。つまり入力状態が終わってしまう。 調べてみると、「Toggle Tab Key Moves Focus」というモードが ON になっていた…

React testing library のテスト環境にて、tsyringe による依存注入を有効にする

tsyringe による依存注入 tsyringe を使うと TypeScript アプリケーションにて依存注入を実現することができます。 GitHub - microsoft/tsyringe: Lightweight dependency injection container for JavaScript/TypeScript アプリケーションコードは以下のよ…

yup で true が選択されていることのバリデーション(規約同意など)

yup

スキーマバリデーションの yup の話です。 例えば、会員登録時の規約の同意など、必ず true になってほしい項目があります。 その際のスキーマ定義は以下の通り。 yup.object({ accept_terms: yup.boolean().default(false).isTrue('同意が必要です') }) isT…

yup で require なフィールドを持つオブジェクト自体を optional にする方法

yup

スキーマバリデーションのライブラリである yup の話です。 以下のようなネストになったスキーマがあるとします。 yup.object({ foo: yup.object({ bar: yup.string.require() }) }) foo は require ではないので任意項目のはずです。しかし、内部の bar が …

webpackで特定のwarningを消す(Craco対応

webpack で特定の warning 表示を消す場合。 ignoreWarnings を使う。 module.exports = { //... ignoreWarnings: [ { module: /module2\.js\?[34]/, // A RegExp }, { module: /[13]/, message: /homepage/, }, /warning from compiler/, (warning) => true…

【TypeScript】yup のカスタムバリデータを追加する

yup でカスタムバリデータを追加する方法です。 サンプルとして「日付っぽい文字列かどうか」のバリデータを追加しました。 Dateライブラリには dayjs を利用しています。 import * as yup from 'yup'; import dayjs from 'dayjs'; import customParseFormat…

yup のバリデーションで min 指定でも optional にする方法

yup

スキーマバリデーションの yup の話です。 github.com ※この記事執筆時点での yup のバージョンは 1.1.1 となります。 文字列の最小文字数を指定するには、 min を使います。 const schema = yup.object().shape({ password: yup.string().default('').min(8…

AntDesign のバージョンアップデートにより、css-dev-only-do-not-override に差分が発生してしまう問題への対処法

React のコンポーネントライブラリである AntDesign の話。 AntDesign を利用したコンポーネントに対するスナップショットテストが落ちていた。スナップショットの変更箇所は以下のような感じ。 <div class="ant-select _select_1826e5 css-dev-only-do-not-override-w8mnev ant-select-single ant-select-show-arrow"> </div>

【AntDesign】Calendar コンポーネントに日本語ロケールを指定する

概要 React のコンポーネントライブラリである Ant Design ant.design その Ant Design の Calendar コンポーネントにて、日本語ロケールを指定する方法。 結論 結論から書くと、以下のように指定しました。 ※アプリケーション全体から参照できるよう、共通…