tjmschkのブックマーク - はてなブックマーク

Next.js の Zod 活用術

本年は Next.js + バリデーションライブラリの Zod をよく利用し、Zenn でもいくつかの関連記事を投稿しました。本稿では、この組み合わせならではの TIPS を紹介します。記事で紹介するサンプルは以下に置いています。リクエスト検証に便利な Zod Next.js で getServerSideProps を使用すると、リクエスト検証をサーバーサイドで行えます。例えばセッションに保持している値の検証はバリデーションライブラリの Zod を使用して、次のようなコードで実現できます。 export const userSchema = z.object({ name: z.string(), em ail: z.string(), }); export const getServerSideProps = async (ctx) => { const sess = await ge

tjmschk 2022/12/14

あとで読む

リンク

MSW で加速するフロントエンド開発

みなさん、フロントエンド開発時のモックサーバーは何を使っていますか？モックサーバーといっても様々なアプローチがあると思いますが、最近活用している MSW が便利だったので紹介します。MSW（Mock Service Worker）はブラウザリクエストを Service Worker がインターセプトし、任意のレスポンスを返すことが出来るライブラリです。次の様な Express 風ハンドラーで、モックレスポンスを表現することができます。なんとこのコードがブラウザで動いてしまいます。 import { setupWorker, rest } from "msw"; const worker = setupWorker( rest.get("https://myapi.dev/csr", (req, res, ctx) => { return res( ctx.json({ title: "C

tjmschk 2022/02/24

リンク

Storybook CSF3.0 時代のテストに備える

CSF3.0 が間近に迫っているが、まだリリース前という状況。Storybook は、Component テストと Storybook の垣根を壊す事を目指しており、CSF3.0 は Storybook に閉じた話ではなくテスト戦略に関わってくる。現状 Storybook 環境を整備するにあたり、どう備えておくべきかを考える。 npm i -D @storybook/react@next で beta を install し、.storybook/main.js に以下を追加すれば CSF3.0 を試す事ができる。