ReactとZodで作る堅牢なフォームバリデーション - ICS MEDIA
前回の記事『2024年版 HTMLで作るフォームバリデーション』ではHTMLの機能を駆使したフォームバリデーションの実装について解説しました。HTMLのみでも高機能なフォームを作成できるのは解説したとおりですが、HTMLに加えてJavaScriptを組み合わせることでより高機能なフォームを作成できます。それに加えて、開発者体験の向上も期待できます。 本記事では3つのライブラリを使用して実践的なフォームを作成する方法を解説します。 UIライブラリ「React」 フォーム向けライブラリ「React Hook Form」 型システムと相性の良いスキーマバリデーションライブラリ「Zod」 また、静的型付け言語であるTypeScriptもこれらのライブラリと同時に使用し、堅牢なフォームの実装を目指します。 本記事を読むことで以下の知識が身につきます。 フォーム画面のユーザー体験（UX）と、フォーム実
【React】複数ページに分割し進捗を表示する入力フォームの設計
概要 入力する項目が多い入力フォームは離脱率を考えると、1ページにまとめるよりも複数ページに分割したほうが良いとされています。 ではReactで、以下のように複数ページに分割し、進捗を表示するフォームを作成するにはどうすれば良いでしょうか。 設計 自分なりに考えた結果、以下のような設計になりました。 render hooksパターンを使用 今回の要件では、親コンポーネントでフォームのページ数を管理し、小コンポーネント側でフォームの状態を保持させる必要があります。 フォームのページ数が必然的に複数ページに分かれてしまうため、通常であればuseContextやRedux,Recoilなどのグローバルで状態を管理できるライブラリを使ってフォームの状態を保持させることになります。 そこで思いついたのが、hook自体がコンポーネントを返却するrender hooksパターン。 複数のページコンポーネ
React Hook Form(v7)を使ったコンポーネント設計案
本記事ではReact Hook Form(v7)を使ったコンポーネント設計のアイデアについて話します。 React Hook Formはその名の通り、Hooksをベースにフォームのバリデーション設定を記述できるライブラリで、特にv7で大きな変更が入りました。そのため、本記事ではv7前提であることをタイトルで明記しています。 Hooksにフォームのロジックが切り離されることにより、理論的には、TSXで記述されたView層と、バリデーションを司るロジック層を切り離して実装することができるはずです。 オンライン家庭教師マナリンクで提供しているオンライン指導の機能にてこちらの設計を実践してみたので、どなたかの参考になれば幸いです。 前提条件 React v17 React Hook Form v7 Material UI v5 ※View層、ロジック層という命名は適当に考えたものなので、もっと適切
【React】フォームは状態管理せずに実装できるよ - Qiita
こんにちは。ぬこすけです。 皆さんは React でフォームをライブラリを使わずに実装する時にどう実装しますか？ おそらく useState を使いまくっているのではないかと思います。 少し上級者の方は useReducer を使っているかもしれません。 が、そもそも React で状態管理することなくフォームは実装できます 。 実際にコードをお見せしながら紹介しましょう。 ※記事の最後に紹介した全てのコード例を CodeSandbox に載せています。 ありがちな例 コードをお見せする前に、まずはありがちな例から見たいと思います。 （結論のコードだけ知りたい方は読み飛ばして OK です） 簡易的なフォームの例です。 useState を使った実装は次のようになります。 import { useState, ChangeEventHandler, FormEventHandler } fr
TypeScriptでreact-hook-formを使ってみた｜ryry_w
Reactで独自にフォームを実装しようとすると、CustomHooksに大量のロジックが必要になり、コード量もかなりの量になることがあります。 多くの人がこの面倒な部分に遭遇しているかと思います。 そのため、react-hook-formやFormikなどの有名なライブラリが利用されることがあります。 今回はreact-hook-formを使用してみましたが、ハマったポイントなどをここにまとめておきたいと思います。 まず、パッケージをインストールしましょう。 $ yarn add -D react-hook-formでは、ざっくりとした今回のコードを紹介します。 UI部分はMaterial UIを使用しています。 import React, { ReactElement } from 'react'; import { useForm } from 'react-hook-form'; i
React Hook Form: A guide with examples - LogRocket Blog
Vijit Ail Software Engineer at toothsi. I work with React and NodeJS to build customer-centric products. Reach out to me on LinkedIn or Instagram. Editor’s note: This article was last updated by Jude Miracle on 23 July 2024 to cover how to use the useFormContext Hook in React Hook Form, handle complex data structures like nested fields and arrays within forms, and update code blocks where necessar
React Hook Formによるフォームバリデーション - わくわくBank
import React, { FC } from 'react'; import { useForm } from 'react-hook-form'; type FormInputs = { postTitle: string; postDescription: string; }; const Sample: FC = () => { const { register, errors, handleSubmit } = useForm<FormInputs>(); const onSubmit = (data: FormInputs) => console.log(data); return ( <form onSubmit={handleSubmit(onSubmit)}> <input name="postTitle" ref={register({ required: 'タイト
【2022年】 React Hook FormでValidationライブラリはどれにするか?
React + Typescript + MUIv5 + React Hook Form で開発環境を作成しています。 今回は React Hook FormでValidationライブラリをどれにするか? について調査しました。 React Hook Form が標準で対応しているライブラリ React Hook Form が標準で対応しているライブラリは以下の10個になります。 正確には React Hook Form で 外部の検証ライブラリを使用する為に @hookform/resolvers が必要なのですが、この @hookform/resolvers が標準対応しているライブラリが以下の10個になります。 その他のライブラリもカスタムリゾルバを構築して使用できます。 class validator https://github.com/typestack/class-vali
React Hook Formで動的にフォームを増やす。 - Qiita
フォーム系のライブラリはいくつもありますが、動的なフォームは記法でつまづきがちなポイントだと思います。 今回は際レンダリング数が少なく、かなり使われ出しているReact Hook Formの動的なフォームのサンプルです。 まずは動的でないフォーム こんな感じでOKだと思います。 interface sampleFormInterface { firstName: string lastName: string } const SampleComponent: React.FC = () => { const { register, handleSubmit, } = useForm<sampleFormInterface>() const onSubmit = (data: unknown) => { console.log(data) } return ( <form onSubmit=
React Hooksを最大限利用したFormの実装🔥
2021.10.01追記 記事執筆時点からこの記事の実装についての筆者のスタンスが変わってきたので補足します。伝えたいのは以下です。 プロダクトでフォーム実装を考える際は、React Hook FormやReact Final Formの導入も検討ください。この記事はReactとTSの実装を理解するのには役立ちますが、プロダクト実装に耐えうるかはわからないです。 以下、お気持ちです。 執筆当時、筆者はReactでのフォームの実装は公式にあるようなコントローラブルな本記事の実装一択だ、これが一番拡張性があり、可読性も高い実装だと思っていました(正直視野狭かったですね…) 実際にプロダクトで運用してみると、入力内容の監視を行うとパフォーマンスがめちゃくちゃ悪くなったり、項目を追加させるようなフォームでは秘伝のタレみたいな実装をせざるおえなかったり、結局先に挙げたようなデファクトスタンダードなラ
Reactでフォームをスマートに実装
この記事は、2021/9/2 に行われた WESEEK Tech Conference の内容をまとめたものです。 目次 はじめに この記事ではフォームの基礎について扱い, その後 React でのフォームの基礎, 実装をしてみてライブラリ (react-hook-form) を導入する話, react-hook-form の基礎と導入例について扱います 対象読者とこの記事で扱う内容 React のフォームの基礎を知りたい フォームってなんだろう Controlled or Uncontrolled とその基礎 react-hook-form について知りたい 基礎 Tips, GROWI.cloud での導入事例 そもそもフォームどういうもの ? ユーザとアプリケーションでの対話を表現しているもの。いろいろ種類がある。 一番単純なフォームから考えてみる 名前を入力したら Submit を
React + TypeScript: React Hook Formでフォーム入力値をまとめて簡単に取得・検証する - Qiita
React Hook Formは、フォームの入力データを検証まで含めて、まとめて簡単に扱えるライブラリです。ただ、導入のページ(「はじめる」)にコード例は示されているものの、説明があまりありません。本稿は、その中から基本的なコード例8つを採り上げ、公式ドキュメントの引用やリンクも加えて解説します。コード例はわかりやすい(あるいは動く)ように手直しし、CodeSandboxにサンプルを掲げました。 インストール React Hook Formは、npm installコマンドでつぎのようにインストールします。 アプリケーションを手もとでつくるには、Create React Appを使うのがよいでしょう。本稿のコード例の場合には、TypeScriptのテンプレートを加えてください(「React + TypeScriptのひな形作成とFullCalendarのインストール」参照)。 基本的な使い
React Hook Formとは？煩雑なフォームのstate管理を楽に実装する！ - stmn tech blog
目次 はじめに Reactを使用したフォーム設計パターンについて React Hook Formとは ? React Hook Formの基本機能の紹介 React Hook Formのユースケース 最後に はじめに こんにちは、株式会社スタメンでエンジニアをしています、ワカゾノです。 Rails、Reactを使用して、弊社プロダクトTUNAGの機能開発を行っています。 直近のプロジェクトにおいて、Reactでフォームを実装する必要がありました。 要件としては、下記のようになります。 新規作成時、編集時のフォームをerbから、Reactへリプレイス 1画面毎に3 ~ 6つのフォームが存在、それを10数画面分実装 各フォームの入力値に応じて画面の表示を動的に変更する 例) 選択しているラジオボックスにより、フォーム要素の表示、非表示を切り替える 各フォームに細かいバリデーションが必要 例 )
Reactでウェブフォームを作る2021
Webのフォームは、いつでもベストプラクティスを悩むものの一つです。React を使うとして完全に自作でやるのか？それともフォームライブラリを使うか？フォームライブラリならどれを使うか？ 今の時代 Formik を選ぶ理由はありませんが、React Hook Form と React Final Form のどちらを使うかはとても悩ましいです。 React Hook Form は利用経験者・採用実績が多い、速度が速いなど様々な利点はありますが、React 哲学に反する作りなどクセの強さが難点です。あと良くも悪くも利用シーンが豊富でドキュメントも豊富で迷子になりがちです。 React Final Form は Final Form の React wrapper です。個人的にはこちら React 的使いやすさに反すると感じてること、React Final Form として見たときにドキュメ
React Hooksに対応した複数のonChangeハンドラを処理する書き方
React Hooksに対応した複数のonChangeハンドラを処理する書き方 Functional Componentにおける複数のonChangeハンドラを一元的に処理するコールバック関数をお伝えしたい。 まずフォーム項目の操作は、onChangeハンドラが必要で、記述がなければwarningが発生するケースもある。input要素を有するコンテンツに限れば、必須イベントハンドラといえる。 そしてinput要素がひとつということも考えにくく、複数のinput要素から構成されることが予想される。たとえばログインフォームにしても、メールアドレスとパスワード、ログイン保持などが考えられるが、そのどれもstate変化によって成り立つ。 すなわちonChangeハンドラが必要となるが、それぞれでコールバック関数を定義していては効率が悪い。複数input要素があっても、ひとつのコールバック関数が処理
React Hook Formのアップデート内容 - Version 7 - Qiita
(❤️ ブログ記事を翻訳してくれた日本のチーム、Kotaro、Keiya、Marinaに感謝します。) React Hook Formもそろそろ2年目を迎えようとしています。プロジェクト自体は、初日と同じように今でも活発に活動しています。この数年の間に、バージョン7の作成やデザインに繋がる多くの学びや経験がありました。私はここで、次のメジャーバージョンでの改善点とその理由をいくつか紹介します。フォームを構築するという点で、React開発者がより楽に開発できるようにする私たちの使命に変わりはありません。 V7 visions:  📖 (DX)厳密に型付けされたフォーム 🏋🏻♀️ シンプルさと一貫性 🏎 パフォーマンス 💁♂️ パッケージサイズの削減 このビジョンを説明するために、APIの変更点を見ていきましょう。 </> register 主な変更点の一つは register
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
Creating a Controlled Form with React Hooks
React controlled forms with hooks