サービスの管理画面を継続的に改善するためのReact Hook FormとZod活用術 - Mirrativ Tech Blog

2023/11/21 38 users React Hook Mui 管理画面 サービス Form

こんにちは！ミラティブのフロントエンドエンジニア どじねこ です。 今回は、ミラティブを支える社内向けの管理システムにおいて、機能開発の体験を改善する取り組みを「MUI と Zod、React Hook Form の活用術」としてご紹介させていただきます。 前提 ミラティブでは、他の多くの Web サービスと同様に配信者さんの登... 続きを読む

lizod: 1kb 未満の zod の精神的後継

2023/05/23 18 users tl;dr ユーティリティ 後継 メソッドチェーン 1KB

作った。 lightweight-zod だから lizod。 npm install lizod -S で使える。 tl;dr 各種フロントエンドや Cloudflare Workers で zod のビルドサイズが邪魔になっている メソッドチェーンと便利なユーティリティを全部捨てた zod 風のバリデータを作った zod の 57kb に対して lizod は 1kb 以下 これが動く // Pick val... 続きを読む

zod ではなく ajv を使っている話

2023/04/21 13 users OGP Encraft スキーマ 焼肉 たくさん

encraft #2 までの間、スキーマスキーマした話をたくさん書きたい。好き好きスキーマと言いたいところだが、zod に対しては人気に対して逆張り意見的なのを持っているのでそれを書いていきたい。 OGP は Ajv ユーザーと焼肉をしたときの画像だ。網もスキーマが大事ってことですね。 独自性の高いスキーマを使うのは危険... 続きを読む

JSON Schema や Ajv と TypeScript の型を紐づけるときの考え方や技術

2023/04/15 15 users TypeScript JSON Schema IDL Joi

宣伝 4/25 に Encraft #2 サーバーとクライアントを結ぶ技術 というイベントで JSON Schema について喋る。いま現在進行形で IDL として JSON Schema, GraphQL, Protocol Buffer, zod, joi を使っているのでそれらを食べ比べる発表をするつもりだ(明らかに JS 上でしか動かないものを IDL と呼んでいいか不安になってき... 続きを読む

Zodファーストで型安全なNext.js用のルーティングライブラリを作った話

2023/04/11 5 users ルーティングライブラリ ルーティング サーバーサイド API

今までNext.jsのAPIでちょっとしたルーティングを実現するために下記のライブラリを使っていました。 ただ、こちらのライブラリでは、APIの型情報をクライアントに共有することや、Zodなどであらかじめサーバーサイドで受け取るパラメータの型を縛ったりすることができませんでした。 そこで、今回ZodファーストなNext.j... 続きを読む

tRPC と MSW の統合

2023/01/25 9 users tRPC スキーマ MSW client デス

tRPC は Next.js プロジェクトの生産性を向上させるライブラリです。サーバー側定義の型推論が API Client にダイレクトに伝搬するだけでなく、Zod スキーマによる入力値制約が施せます。そのため、Client ⇄ API Routes 間の疎通がEnd-to-end typesafeになる、便利なライブラリです。 tRPC と MSW の統合要点 筆者はテス... 続きを読む

Next.js の Zod 活用術

2022/12/14 16 users getServerSideProps Zenn Tips

本年は Next.js + バリデーションライブラリの Zod をよく利用し、Zenn でもいくつかの関連記事を投稿しました。本稿では、この組み合わせならではの TIPS を紹介します。記事で紹介するサンプルは以下に置いています。 リクエスト検証に便利な Zod Next.js で getServerSideProps を使用すると、リクエスト検証をサーバ... 続きを読む

Total TypeScriptのZodチュートリアルでZodに入門した - dackdive's blog

2022/10/31 21 users Twitter resources チュートリアル

はじめに Zod というバリデーションライブラリが非常に流行っているようなので、素振りした。 www.totaltypescript.com このチュートリアルはたしか Twitter で流れてきて知ったのだが 今見ると Zod の公式ドキュメントからも Resources として紹介されているので、そこそこ信頼していいコンテンツなのだと判断した。 チ... 続きを読む

OpenAPI + Zod で型安全な API クライアント出力

2022/09/28 50 users OpenApi openapi-generator API

バックエンドが OpenAPI（REST） で API 仕様を公開している場合、 フロントエンド側で OpenAPI の仕様から、 型安全、かつ API 仕様通りに型定義と API クライアントを生成したい場合があり、 現状　API クライアント生成系ライブラリとして、以下のいずれかが候補に上がるかと思います。 openapi-generator 様々な言語... 続きを読む

react-hook-form と zod でバリデーションのその先へ

2022/06/24 15 users react-hook-form PACKAGE その先 公式

どうも、 uzimaru です。 最近、react-hook-form と zod を使っていい感じにやっているのでそれについてまとめようと思います。 react-hook-form で zod を使う 公式から利用する方法が提供されています。 https://www.npmjs.com/package/@hookform/resolvers これを useForm の resolver で利用することで zod が使える... 続きを読む

Zodで真のTypeScript firstを手にする

2021/04/29 8 users Validator Sch Blitz ライブラリ 昨今

fullstack TSなアプリケーションも増えてきた昨今、TSでvalidatorを実装する際に何を採用するかは一大トピックです。今回は、その中でも新しめなライブラリでありBlitzも採用しているZodについて見ていきます。 Zodとは Zodの特徴として、Schema firstなvalidationライブラリであるというのがあります。 validateするsch... 続きを読む