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

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

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

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

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

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

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

CSS Custom Propeties（いわゆるCSS変数）は便利です。 この変数定義に Sass の変数を利用する方法。ちょっとハマったのですが、 #{ } というシンタックスを挟む必要がありました。 /* variables.scss（変数定義ファイル） */ $some-color: #64ff00; /* glob…

Next.js で作成した API が別ドメインからアクセスされる時、CORS の問題が発生すると思います。 対応策について調べてみたところ、設定ファイルである next.config.js の header 項目が利用できる、との情報を見つけました。 nextjs-ja-translation-docs.ve…

複数行のときだけ line-height を効かせたい場合があります。 逆に言うと、1行なら特に指定したくない。 この場合、CSS の first-line 疑似要素が使えます。 span { font-size: 14px; // 文字サイズ line-heigth: 20px; // 複数行の場合、行間を開けたい } s…