Home

Zod で独自のスキーマバリデーションを実現するには、refine というメソッドを使います。また、さらに高度な使い方ができる superRefine が提供されているため、使い方を復習してみようと思います。

Next.js におけるミドルウェアとは、サーバーにリクエストが飛んだタイミングで何らかの処理を実行できる仕組みのことです。ポートフォリオの作成にあたり、特定のページを除いて NextAuth.js で認証する方法を学びました。今回はその備忘録となります。

小規模のアプリケーションであれば、React が提供する Context API と Hooks だけで global state を管理できることが知られています。本記事ではこのパターンを採用した場合のテスト手法を紹介します。

NextAuth.js の API で取得したセッションですが、デフォルトではユーザー ID を含んでいません。セッションのオブジェクトをカスタマイズして、型推論まで効かせる方法を備忘録としてまとめます。

React Hook Form とフィールドの値を連動する際、MUI のようなライブラリは Controller を使い、それ以外には register を使うという認識でいました。今回はフォームの外からフィールドの値を更新する方法を学んだので、その内容を記事にします。

ブログ記事の体裁を整えるため、Markdown 文書を校正してくれる textlint というツールを使用しています。ローカルの Node バージョンを上げたことをきっかけとして、執筆環境を Docker へ引越しすることにしました。今回は Dev Containers という VSCode の拡張機能を用いた、セットアップ手順を紹介します。

SWR はデータ取得のために使うライブラリという認識でいたのですが、useSWRMutation なるフックの存在を知りました。どうやら、SWR 2.0 から POST をはじめとした他の HTTP リクエストも任せられるようになった様です。今回は useSWRMutation でより宣言的なコードが書けるという話をします。

私は HTTP クライアントとして Axios を好んで使っています。最近エラーハンドリングの手法として、Result 型を使うという選択肢を知りました。この記事では Result 型の説明から始まり、Axios と組み合わせた場合のサンプルコードを紹介します。

Next.js 13 から next/font という新しいモジュールが提供され、従来とフォントの使い方が変わりました。どのような違いやメリットがあるのか、Google Fonts で試してみようと思います。

HTML の dialog 要素がすべてのモダンブラウザーでサポートされました。早速モーダルコンポーネントの実装に取り入れてみたのですが、 ref の取り扱いに迷うところがあったので記事にします。

Prisma が生成した型をフォームバリデーションに利用したいと考え、Zod と React Hook Form にたどり着きました。DB からフォームまで、一貫した型安全を実現する方法を紹介します。

リスト内の要素の並び順を Playwright でテストしたかったのですが、Locator オブジェクトをうまく扱えずに少し躓きました。備忘録として、試行錯誤の結果を記事にします。