タグ Zod
人気順 10 users 50 users 100 users 500 users 1000 usersZod を使って OpenAI の構造化された出力を扱う
Zod を使って OpenAI の構造化された出力を扱う 2024.12.07 OpenAI の gpt-4o-2024-08-06 以降のモデルではパラメータとして JSON Schema を指定することで構造化された出力をサポートしています。Node.js 向けの OpenAI SDK では Zod を使ってスキーマを定義し、構造化された出力を扱うことができます。この記事では実... 続きを読む
Zod を使って CSV からの入力データをバリデーションする - ドワンゴ教育サービス開発者ブログ
こんにちは、バックエンドエンジニアの日下です。 CSV から JSON へ変換するスクリプトを、TypeScript で実装する機会がありました。 今回は、CSV のデータのバリデーションに Zod を使った話をします。 スクリプトの目的 システム間のデータ連携が目的です。 連携元のシステムから CSV 出力されたデータを、連携先のシ... 続きを読む
ZodでJSONのオブジェクトを実行時に都合の良い型に変換する | フューチャー技術ブログ
いろんなJavaScriptの統計を見ると、今時のウェブフロントエンドの新規開発は80%はTypeScriptになっているということです。また、TypeScript自身を使わなくても、TypeScriptで培われた型推論のパワーで、JavaScriptであってもVSCode上で補完とか思いの外うまくいったりしちゃうので、TypeScriptフレンドリーというのはま... 続きを読む
サービスの管理画面を継続的に改善するためのReact Hook FormとZod活用術 - Mirrativ Tech Blog
こんにちは!ミラティブのフロントエンドエンジニア どじねこ です。 今回は、ミラティブを支える社内向けの管理システムにおいて、機能開発の体験を改善する取り組みを「MUI と Zod、React Hook Form の活用術」としてご紹介させていただきます。 前提 ミラティブでは、他の多くの Web サービスと同様に配信者さんの登... 続きを読む
lizod: 1kb 未満の zod の精神的後継
作った。 lightweight-zod だから lizod。 npm install lizod -S で使える。 tl;dr 各種フロントエンドや Cloudflare Workers で zod のビルドサイズが邪魔になっている メソッドチェーンと便利なユーティリティを全部捨てた zod 風のバリデータを作った zod の 57kb に対して lizod は 1kb 以下 これが動く // Pick val... 続きを読む
zod ではなく ajv を使っている話
encraft #2 までの間、スキーマスキーマした話をたくさん書きたい。好き好きスキーマと言いたいところだが、zod に対しては人気に対して逆張り意見的なのを持っているのでそれを書いていきたい。 OGP は Ajv ユーザーと焼肉をしたときの画像だ。網もスキーマが大事ってことですね。 独自性の高いスキーマを使うのは危険... 続きを読む
JSON Schema や Ajv と TypeScript の型を紐づけるときの考え方や技術
宣伝 4/25 に Encraft #2 サーバーとクライアントを結ぶ技術 というイベントで JSON Schema について喋る。いま現在進行形で IDL として JSON Schema, GraphQL, Protocol Buffer, zod, joi を使っているのでそれらを食べ比べる発表をするつもりだ(明らかに JS 上でしか動かないものを IDL と呼んでいいか不安になってき... 続きを読む
Zodファーストで型安全なNext.js用のルーティングライブラリを作った話
今までNext.jsのAPIでちょっとしたルーティングを実現するために下記のライブラリを使っていました。 ただ、こちらのライブラリでは、APIの型情報をクライアントに共有することや、Zodなどであらかじめサーバーサイドで受け取るパラメータの型を縛ったりすることができませんでした。 そこで、今回ZodファーストなNext.j... 続きを読む
tRPC と MSW の統合
tRPC は Next.js プロジェクトの生産性を向上させるライブラリです。サーバー側定義の型推論が API Client にダイレクトに伝搬するだけでなく、Zod スキーマによる入力値制約が施せます。そのため、Client ⇄ API Routes 間の疎通がEnd-to-end typesafeになる、便利なライブラリです。 tRPC と MSW の統合要点 筆者はテス... 続きを読む
Next.js の Zod 活用術
本年は Next.js + バリデーションライブラリの Zod をよく利用し、Zenn でもいくつかの関連記事を投稿しました。本稿では、この組み合わせならではの TIPS を紹介します。記事で紹介するサンプルは以下に置いています。 リクエスト検証に便利な Zod Next.js で getServerSideProps を使用すると、リクエスト検証をサーバ... 続きを読む
Total TypeScriptのZodチュートリアルでZodに入門した - dackdive's blog
はじめに Zod というバリデーションライブラリが非常に流行っているようなので、素振りした。 www.totaltypescript.com このチュートリアルはたしか Twitter で流れてきて知ったのだが 今見ると Zod の公式ドキュメントからも Resources として紹介されているので、そこそこ信頼していいコンテンツなのだと判断した。 チ... 続きを読む
OpenAPI + Zod で型安全な API クライアント出力
バックエンドが OpenAPI(REST) で API 仕様を公開している場合、 フロントエンド側で OpenAPI の仕様から、 型安全、かつ API 仕様通りに型定義と API クライアントを生成したい場合があり、 現状 API クライアント生成系ライブラリとして、以下のいずれかが候補に上がるかと思います。 openapi-generator 様々な言語... 続きを読む
react-hook-form と zod でバリデーションのその先へ
どうも、 uzimaru です。 最近、react-hook-form と zod を使っていい感じにやっているのでそれについてまとめようと思います。 react-hook-form で zod を使う 公式から利用する方法が提供されています。 https://www.npmjs.com/package/@hookform/resolvers これを useForm の resolver で利用することで zod が使える... 続きを読む
Zodで真のTypeScript firstを手にする
fullstack TSなアプリケーションも増えてきた昨今、TSでvalidatorを実装する際に何を採用するかは一大トピックです。今回は、その中でも新しめなライブラリでありBlitzも採用しているZodについて見ていきます。 Zodとは Zodの特徴として、Schema firstなvalidationライブラリであるというのがあります。 validateするsch... 続きを読む