React Hook Form を使ったフォームの実装において、フォームの任意の要素にフォーカスを当てる setFocus() メソッドの実行時に TypeError: Cannot read properties of undefined (reading '_f') のエラーが出てしまうことがありました。 useForm - setFocus …

React 用のフォームバリデーションライブラリ react-hook-form で、zod を使ったバリデーションの実装を行ったのでメモしておきます。 react-hook-form.com github.com zod は、型と値を検証できる軽量なバリデーションライブラリで、react-hook-form にはそ…

React でコンポーネントを作る際（css modules を使う想定）、基本的には以下の2つのファイルを毎回作っています。 ▼ Component/index.tsx import React from 'react' import styles from './index.module.scss' const Component: React.FC = () => { return…

最近、JavaScript（と、主にReact）のデザインパターンをまとめている ebook をちょこちょこ読み進めています。 www.patterns.dev この中で、初めて見たデザインパターンとして Observser Pattern （オブザーバパターン）というパターンが出てきたのですが、…

例えばアプリケーションのログインページおよび新規登録ページが、それぞれ /auth/login、/auth/signup に配置されていると仮定します。 - pages - auth - login.tsx - signup.tsx このとき、これらのページにアクセスできるのは未ログイン状態のユーザーの…

『Reactハンズオンラーニング』を一周し終えたので、ざっくり感想をまとめます。 内容についてと、全体的な感想 「ハンズオンラーニング」と銘打っているだけあって、なにかターゲットとなる目標物をじっくり解説（Reactの）を交えて作り上げていくような本…

「next-realworld-example-app」のコードを読み込んでいて参考になる箇所があったのでメモしておきます。 ごくシンプルなユーティリティ系のコンポーネント <Maybe> です。 props に表示の可否を決定するための値 test を渡し、その値の如何によって表示を制御しま</maybe>…

今作っているアプリケーションで、Firebase Authentication のソーシャルログインを活用しているものがある。そこで、ソーシャルログインしたのち（この時点でFirebase Authentication 上にユーザー情報が作られる）、場合によってすぐにユーザー情報を削除…

Firebase Authentication を活用したアプリケーションにおいて、取得したユーザ情報を useContext などを使ってグローバルに保持するケースがあると思います。具体的には以下のような実装です。 import { FC, createContext, useEffect, useState } from 're…