Yohei Kuji

はじめにこの記事で作るフォームのソースコードはこちら↓になります。https://github.com/yohei222/react-hook-form-zod-mui【React Hook Form × Zod × MUI】フォームを作ろう！の続編になります。ソースコードや実装方針などは前編のものを継承しています。前編の「フォームを作ろう！」では、テキスト入力フォームと選択フォームの実装例を紹介しています。この記事では、型安全に複数選択可能でオートコンプリートなフォームを実装する方法の例を紹介していきます。 使用技術TypeScriptReact ...

【React Hook Form×Zod×MUI】複数選択+オートコンプリート+型安全なフォームを作ろう！

はじめにこの記事で作るフォームのソースコードはこちら↓になります。https://github.com/yohei222/react-hook-form-zod-mui 使用技術TypeScriptReact Hook FormZodMUI 作成するフォームこの記事で作成するフォームがこちらになります。フォームの内容を整理していきます。テキスト入力要素必須入力と任意入力で二つの要素があります。検索ボタンを押した時にエラーメッセージが出るのは必須入力の要素のみで、任意入力の方ではエラーは表示されません。セレクト要素テキスト入力要素と同じく、必須...

【React Hook Form × Zod × MUI】フォームを作ろう！

本記事の趣旨(satisfies Operator)TypeScriptのversion4.9以降にて扱えるsatisfies Operatorに関して、サンプルコードとともに解説しています。ちなみにですが、satisfies OperatorはTSのver4.9の新機能として2022/11/15に公表されているため、割と新しめの機能になります。また、余談ですが、TSのver4.9のリリースノートではsatisfies Operatorを一番上で紹介しているので、4.9の目玉機能と言えるかもしれません。 satisfies Operatorの利点に関して 値自身の型を保...

【TS ver4.9以降】satisfies Operator とは？

【React】 useEffectの中で前回のstateの値を取得したい！フロントエンドの開発していると稀に起こりうる可能性があるので、自分への備忘録も兼ねて記事として残しておきます。サンプルコードのみを見たい方へ↓こちらからこの記事にて紹介しているサンプルコードへアクセスすることができます！サンプルコード(codesandbox) useEffectの中で前回のstateの値を取得したい理由React公式 では、以下のように説明されています。前回の props や state が欲しくなるというケースは 2 つあります。ひとつは、前回の props を副作...

【React】 useEffectの中で前回のstateの値を取得したい！

【TS】呪文：undefined as unknown as numberとは？先日、業務中にいつも親切に教えてくださる上司から、上記のundefined as unknown as numberという呪文を教わりました。まるで呪文のように、もしくは英会話の文法のように聞こえます。また、上司曰く、悪用は厳禁な呪文でもあるようです。それでは、この呪文の意味は一体なんなのか、またなぜ悪用厳禁な呪文であるのか、を理解していきましょう。 1. そもそも "as"とは？asは、型アサーションと言って、TypeScriptの型推論を上書きする機能になります。タイトルの例だと、undef...