2022-01-01から1ヶ月間の記事一覧
React Hook Form を使ったフォームの実装において、フォームの任意の要素にフォーカスを当てる setFocus() メソッドの実行時に TypeError: Cannot read properties of undefined (reading '_f') のエラーが出てしまうことがありました。 useForm - setFocus …
Supabase の DB からデータを取得する際に、少し凝ったフィルタリングの実装に悩んだのでメモがてら書いておきます。 通常 supabase.from() メソッドでデータを取得する際、通常は以下のように eq() メソッドを繋ぎ、条件を指定します。この例では、posts テ…
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>…
これまで Node のバージョン管理ツールにはずっと nodebrew を使っていたのですが、プロジェクトごとにバージョンを変える必要がある際に不便だったのと、シンプルに飽きてきたというのもあり、比較的新しい Volta に変更してみました。 volta.sh nodebrew …