チュートリアル

始める前に

Formikのチュートリアルへようこそ。このチュートリアルでは、Reactでシンプルで複雑なフォームを作成するために必要なすべてを学ぶことができます。

すぐにでもローカルマシンで作業を始めたい場合は、60秒クイックスタートをご覧ください。

何を作成するのか？

このチュートリアルでは、ReactとFormikを使用して複雑なニュースレター登録フォームを作成します。

作成する内容はこちらで確認できます：最終結果。コードが理解できない場合でも心配しないでください！このチュートリアルの目標は、Formikを理解するのに役立つことです。

前提条件

Formikとその仕組みを完全に理解するには、HTML、CSS、モダンJavaScript、およびReact（およびReact Hooks）に関する知識が必要です。このチュートリアルでは、アロー関数、let、const、スプレッド構文、デストラクチャリング、計算されたプロパティ名、およびasync/awaitを使用しています。Babel REPLを使用して、ES6コードがどのようにコンパイルされるかを確認できます。

チュートリアルの設定

このチュートリアルを完了するには、2つの方法があります。ブラウザでコードを作成するか、コンピュータにローカル開発環境を設定します。

設定オプション1：ブラウザでコードを作成する

これは最も迅速な開始方法です！

まず、このスターターコードを新しいタブで開きます。新しいタブには、メールアドレス入力、送信ボタン、いくつかのReactコードが表示されます。このチュートリアルでは、Reactコードを編集します。

2番目の設定オプションをスキップして、概要セクションに進み、Formikの概要を確認してください。

設定オプション2：ローカル開発環境

これは完全にオプションであり、このチュートリアルには必要ありません！

オプション：お好みのテキストエディタを使用してローカルで作業するための手順

この設定にはより多くの作業が必要ですが、選択したエディタを使用してチュートリアルを完了できます。手順は以下のとおりです。

最新バージョンのNode.jsがインストールされていることを確認してください。
Create React Appのインストール手順に従って、新しいプロジェクトを作成します。

 npx create-react-app my-app

Formikをインストール

 npm i formik

または

 yarn add formik

新しいプロジェクトの `src/` フォルダー内のすべてのファイルを削除します

注意
`src` フォルダー全体を削除しないでください。内部にある元のソースファイルのみを削除してください。次の手順では、このプロジェクトの例を使用してデフォルトのソースファイルを置き換えます。

1 cd my-app
2 cd src
3 
4 # If you’re using a Mac or Linux:
5 rm -f *
6 
7 # Or, if you’re on Windows:
8 del *
9 
10 # Then, switch back to the project folder
11 cd ..

`src/` フォルダーに `styles.css` という名前のファイルを追加し、このCSSコードを追加します。
`src/` フォルダーに `index.js` という名前のファイルを追加し、このJSコードを追加します。

次に、プロジェクトフォルダーで `npm start` を実行し、ブラウザで `http://localhost:3000` を開きます。メール入力と送信ボタンが表示されます。

エディタの構文ハイライトを設定するには、これらの手順に従うことをお勧めします。

行き詰まりました！

行き詰まった場合は、FormikのGitHubディスカッションを確認してください。さらに、FormiumコミュニティDiscordサーバーは、迅速なヘルプを得るための優れた方法でもあります。回答を受け取れない場合、または行き詰まったままである場合は、問題を報告してください。お手伝いいたします。

概要：Formikとは？

Formikは、ReactとReact Nativeでフォームを作成するための、少数のReactコンポーネントとフックのグループです。最も厄介な3つの部分を支援します。

フォームの状態への値の入出力
バリデーションとエラーメッセージ
フォーム送信の処理

Formikは上記をすべて一箇所に配置することで、整理整頓を維持し、フォームのテスト、リファクタリング、および推論を簡単に行うことができます。

基本

Formikを使用する最も冗長な方法から始めます。これは少し回りくどいように見えるかもしれませんが、Formikがどのように構築されているかを理解し、それがどのように機能するかの完全なメンタルモデルを持つことが重要です。

ブログのニュースレター登録フォームを追加したいとしましょう。まず、フォームには `email` という名前のフィールドが1つだけあります。Formikを使用すると、これはわずか数行のコードです。

1 import React from 'react';
2 import { useFormik } from 'formik';
3 
4 const SignupForm = () => {
5   // Pass the useFormik() hook initial form values and a submit function that will
6   // be called when the form is submitted
7   const formik = useFormik({
8     initialValues: {
9       email: '',
10     },
11     onSubmit: values => {
12       alert(JSON.stringify(values, null, 2));
13     },
14   });
15   return (
16     <form onSubmit={formik.handleSubmit}>
17       <label htmlFor="email">Email Address</label>
18       <input
19         id="email"
20         name="email"
21         type="email"
22         onChange={formik.handleChange}
23         value={formik.values.email}
24       />
25 
26       <button type="submit">Submit</button>
27     </form>
28   );
29 };

フォームの `initialValues` と送信関数 (`onSubmit`) を `useFormik()` フックに渡します。フックは、`formik` と呼ぶ変数に、フォームの状態とヘルパーメソッドの詰め合わせを返します。今のところ、重要なヘルパーメソッドは次のとおりです。

`handleSubmit`：送信ハンドラー
`handleChange`：各 `<input>`、`<select>`、または `<textarea>` に渡す変更ハンドラー
`values`：フォームの現在の値

上記のように、それぞれをそれぞれのpropsに渡します…それだけ！これで、Formikを搭載した機能するフォームを作成できます。フォームの値を自分で管理し、各入力ごとに独自のイベントハンドラーを作成する代わりに、`useFormik()` を使用できます。

これはかなり素晴らしいですが、入力は1つだけで、`useFormik()` を使用する利点は不明です。そこで、ユーザーの名前と姓を入力するためのさらに2つの入力（フォームでは `firstName` と `lastName` として保存）を追加しましょう。

1 import React from 'react';
2 import { useFormik } from 'formik';
3 
4 const SignupForm = () => {
5   // Note that we have to initialize ALL of fields with values. These
6   // could come from props, but since we don’t want to prefill this form,
7   // we just use an empty string. If we don’t do this, React will yell
8   // at us.
9   const formik = useFormik({
10     initialValues: {
11       firstName: '',
12       lastName: '',
13       email: '',
14     },
15     onSubmit: values => {
16       alert(JSON.stringify(values, null, 2));
17     },
18   });
19   return (
20     <form onSubmit={formik.handleSubmit}>
21       <label htmlFor="firstName">First Name</label>
22       <input
23         id="firstName"
24         name="firstName"
25         type="text"
26         onChange={formik.handleChange}
27         value={formik.values.firstName}
28       />
29 
30       <label htmlFor="lastName">Last Name</label>
31       <input
32         id="lastName"
33         name="lastName"
34         type="text"
35         onChange={formik.handleChange}
36         value={formik.values.lastName}
37       />
38 
39       <label htmlFor="email">Email Address</label>
40       <input
41         id="email"
42         name="email"
43         type="email"
44         onChange={formik.handleChange}
45         value={formik.values.email}
46       />
47 
48       <button type="submit">Submit</button>
49     </form>
50   );
51 };

新しいコードをよく見ると、いくつかのパターンと対称性が生まれていることに気付くでしょう。

同じ変更ハンドラー関数 `handleChange` を各HTML入力で再利用します。
`initialValues` で定義したプロパティと一致する `id` と `name` のHTML属性を渡します。
同じ名前を使用してフィールドの値にアクセスします（`email` -> `formik.values.email`）

プレーンなReactを使用してフォームを作成することに慣れている場合は、Formikの `handleChange` は次のように機能すると考えることができます。

1 const [values, setValues] = React.useState({});
2 
3 const handleChange = event => {
4   setValues(prevValues => ({
5     ...prevValues,
6     // we use the name to tell Formik which key of `values` to update
7     [event.target.name]: event.target.value
8   });
9 }

バリデーション

連絡先フォームは機能しますが、機能は完全ではありません。ユーザーは送信できますが、どのフィールド（もしあれば）が必要なのかは通知されません。

ブラウザの組み込みHTML入力バリデーションを使用しても構わない場合は、各入力に `required` プロパティを追加し、最小/最大長（`maxlength` と `minlength`）、またはこれらの各入力の正規表現バリデーションのための `pattern` プロパティを指定できます。これらは、それらを使用できる場合は素晴らしいです。ただし、HTMLバリデーションには限界があります。まず、ブラウザでのみ機能します！そのため、React Nativeでは明らかに実行できません。第二に、ユーザーにカスタムエラーメッセージを表示することは困難または不可能です。第三に、非常にぎこちないものです。

前述のように、Formikはフォームの `values` だけでなく、そのバリデーションとエラーメッセージも追跡します。JSでバリデーションを追加するには、カスタムバリデーション関数を指定し、`useFormik()` フックに `validate` として渡します。エラーが存在する場合は、このカスタムバリデーション関数は、`values` / `initialValues` と一致する形状の `error` オブジェクトを生成する必要があります。繰り返しますが… _対称性_ …はい…

1 import React from 'react';
2 import { useFormik } from 'formik';
3 
4 // A custom validation function. This must return an object
5 // which keys are symmetrical to our values/initialValues
6 const validate = values => {
7   const errors = {};
8   if (!values.firstName) {
9     errors.firstName = 'Required';
10   } else if (values.firstName.length > 15) {
11     errors.firstName = 'Must be 15 characters or less';
12   }
13 
14   if (!values.lastName) {
15     errors.lastName = 'Required';
16   } else if (values.lastName.length > 20) {
17     errors.lastName = 'Must be 20 characters or less';
18   }
19 
20   if (!values.email) {
21     errors.email = 'Required';
22   } else if (!/^[A-Z0-9._%+-]+@[A-Z0-9.-]+\.[A-Z]{2,4}$/i.test(values.email)) {
23     errors.email = 'Invalid email address';
24   }
25 
26   return errors;
27 };
28 
29 const SignupForm = () => {
30   // Pass the useFormik() hook initial form values, a validate function that will be called when
31   // form values change or fields are blurred, and a submit function that will
32   // be called when the form is submitted
33   const formik = useFormik({
34     initialValues: {
35       firstName: '',
36       lastName: '',
37       email: '',
38     },
39     validate,
40     onSubmit: values => {
41       alert(JSON.stringify(values, null, 2));
42     },
43   });
44   return (
45     <form onSubmit={formik.handleSubmit}>
46       <label htmlFor="firstName">First Name</label>
47       <input
48         id="firstName"
49         name="firstName"
50         type="text"
51         onChange={formik.handleChange}
52         value={formik.values.firstName}
53       />
54       {formik.errors.firstName ? <div>{formik.errors.firstName}</div> : null}
55 
56       <label htmlFor="lastName">Last Name</label>
57       <input
58         id="lastName"
59         name="lastName"
60         type="text"
61         onChange={formik.handleChange}
62         value={formik.values.lastName}
63       />
64       {formik.errors.lastName ? <div>{formik.errors.lastName}</div> : null}
65 
66       <label htmlFor="email">Email Address</label>
67       <input
68         id="email"
69         name="email"
70         type="email"
71         onChange={formik.handleChange}
72         value={formik.values.email}
73       />
74       {formik.errors.email ? <div>{formik.errors.email}</div> : null}
75 
76       <button type="submit">Submit</button>
77     </form>
78   );
79 };

`formik.errors` はカスタムバリデーション関数によって設定されます。デフォルトでは、Formikはキーストローク（変更イベント）ごと、各入力のblurイベントごと、および送信前にバリデーションを実行します。`useFormik()` に渡した `onSubmit` 関数は、エラーがない場合（つまり、`validate` 関数が `{}` を返す場合）のみ実行されます。

訪問済みフィールド

フォームは機能しており、ユーザーは各エラーを確認できますが、ユーザーエクスペリエンスとしては最適ではありません。バリデーション関数はすべてのフォームのvaluesに対して各キーストロークで実行されるため、errorsオブジェクトには、任意の時点ですべてのバリデーションエラーが含まれます。コンポーネントでは、エラーが存在するかどうかをチェックし、すぐにユーザーに表示しています。ユーザーがまだアクセスしていないフィールドのエラーメッセージも表示されるため、これは不適切です。ほとんどの場合、ユーザーがそのフィールドへの入力を終えた後に、フィールドのエラーメッセージを表示するだけで十分です。

errorsやvaluesと同様に、Formikはどのフィールドがアクセスされたか追跡します。この情報は、values/initialValuesの形状を反映するtouchedというオブジェクトに格納されます。touchedのキーはフィールド名、値はブール値true/falseです。

touchedを活用するために、各入力のonBlurプロパティにformik.handleBlurを渡します。この関数は、name属性を使用して更新するフィールドを特定するという点で、formik.handleChangeと同様に機能します。

1 import React from 'react';
2 import { useFormik } from 'formik';
3 
4 const validate = values => {
5   const errors = {};
6 
7   if (!values.firstName) {
8     errors.firstName = 'Required';
9   } else if (values.firstName.length > 15) {
10     errors.firstName = 'Must be 15 characters or less';
11   }
12 
13   if (!values.lastName) {
14     errors.lastName = 'Required';
15   } else if (values.lastName.length > 20) {
16     errors.lastName = 'Must be 20 characters or less';
17   }
18 
19   if (!values.email) {
20     errors.email = 'Required';
21   } else if (!/^[A-Z0-9._%+-]+@[A-Z0-9.-]+\.[A-Z]{2,4}$/i.test(values.email)) {
22     errors.email = 'Invalid email address';
23   }
24 
25   return errors;
26 };
27 
28 const SignupForm = () => {
29   const formik = useFormik({
30     initialValues: {
31       firstName: '',
32       lastName: '',
33       email: '',
34     },
35     validate,
36     onSubmit: values => {
37       alert(JSON.stringify(values, null, 2));
38     },
39   });
40   return (
41     <form onSubmit={formik.handleSubmit}>
42       <label htmlFor="firstName">First Name</label>
43       <input
44         id="firstName"
45         name="firstName"
46         type="text"
47         onChange={formik.handleChange}
48         onBlur={formik.handleBlur}
49         value={formik.values.firstName}
50       />
51       {formik.errors.firstName ? <div>{formik.errors.firstName}</div> : null}
52 
53       <label htmlFor="lastName">Last Name</label>
54       <input
55         id="lastName"
56         name="lastName"
57         type="text"
58         onChange={formik.handleChange}
59         onBlur={formik.handleBlur}
60         value={formik.values.lastName}
61       />
62       {formik.errors.lastName ? <div>{formik.errors.lastName}</div> : null}
63 
64       <label htmlFor="email">Email Address</label>
65       <input
66         id="email"
67         name="email"
68         type="email"
69         onChange={formik.handleChange}
70         onBlur={formik.handleBlur}
71         value={formik.values.email}
72       />
73       {formik.errors.email ? <div>{formik.errors.email}</div> : null}
74 
75       <button type="submit">Submit</button>
76     </form>
77   );
78 };

もうすぐです！touchedを追跡できるようになったので、エラーメッセージのレンダリングロジックを変更して、特定のフィールドのエラーメッセージを、それが存在しかつユーザーがそのフィールドにアクセスした場合にのみ表示するようにできます。

1 import React from 'react';
2 import { useFormik } from 'formik';
3 
4 const validate = values => {
5   const errors = {};
6 
7   if (!values.firstName) {
8     errors.firstName = 'Required';
9   } else if (values.firstName.length > 15) {
10     errors.firstName = 'Must be 15 characters or less';
11   }
12 
13   if (!values.lastName) {
14     errors.lastName = 'Required';
15   } else if (values.lastName.length > 20) {
16     errors.lastName = 'Must be 20 characters or less';
17   }
18 
19   if (!values.email) {
20     errors.email = 'Required';
21   } else if (!/^[A-Z0-9._%+-]+@[A-Z0-9.-]+\.[A-Z]{2,4}$/i.test(values.email)) {
22     errors.email = 'Invalid email address';
23   }
24 
25   return errors;
26 };
27 
28 const SignupForm = () => {
29   const formik = useFormik({
30     initialValues: {
31       firstName: '',
32       lastName: '',
33       email: '',
34     },
35     validate,
36     onSubmit: values => {
37       alert(JSON.stringify(values, null, 2));
38     },
39   });
40   return (
41     <form onSubmit={formik.handleSubmit}>
42       <label htmlFor="firstName">First Name</label>
43       <input
44         id="firstName"
45         name="firstName"
46         type="text"
47         onChange={formik.handleChange}
48         onBlur={formik.handleBlur}
49         value={formik.values.firstName}
50       />
51       {formik.touched.firstName && formik.errors.firstName ? (
52         <div>{formik.errors.firstName}</div>
53       ) : null}
54 
55       <label htmlFor="lastName">Last Name</label>
56       <input
57         id="lastName"
58         name="lastName"
59         type="text"
60         onChange={formik.handleChange}
61         onBlur={formik.handleBlur}
62         value={formik.values.lastName}
63       />
64       {formik.touched.lastName && formik.errors.lastName ? (
65         <div>{formik.errors.lastName}</div>
66       ) : null}
67 
68       <label htmlFor="email">Email Address</label>
69       <input
70         id="email"
71         name="email"
72         type="email"
73         onChange={formik.handleChange}
74         onBlur={formik.handleBlur}
75         value={formik.values.email}
76       />
77       {formik.touched.email && formik.errors.email ? (
78         <div>{formik.errors.email}</div>
79       ) : null}
80 
81       <button type="submit">Submit</button>
82     </form>
83   );
84 };

Yupを使ったスキーマバリデーション

上記のように、バリデーションはユーザー自身に任されています。独自のバリデーターを作成するか、サードパーティのヘルパーライブラリを使用できます。Formikの開発者/多くのユーザーは、Jason QuenseのライブラリYupをオブジェクトスキーマのバリデーションに使用しています。YupはJoiやReact PropTypesと同様のAPIを持っていますが、ブラウザでも動作し、ランタイムでも十分な速度です。このREPLで試すことができます。

Formikの開発者/ユーザーがYupを非常に気に入っているため、FormikにはYup用の特別な設定プロパティvalidationSchemaがあります。これは、Yupのバリデーションエラーメッセージを、values/initialValues/touchedとキーが一致する（カスタムバリデーション関数と同じように）美しいオブジェクトに自動的に変換します。いずれにしても、NPM/yarnからYupを次のようにインストールできます…

1 npm install yup --save
2 
3 # or via yarn
4 
5 yarn add yup

Yupの動作を確認するために、カスタムバリデーション関数validateを削除し、YupとvalidationSchemaを使用してバリデーションを書き直してみましょう。

1 import React from 'react';
2 import { useFormik } from 'formik';
3 import * as Yup from 'yup';
4 
5 const SignupForm = () => {
6   const formik = useFormik({
7     initialValues: {
8       firstName: '',
9       lastName: '',
10       email: '',
11     },
12     validationSchema: Yup.object({
13       firstName: Yup.string()
14         .max(15, 'Must be 15 characters or less')
15         .required('Required'),
16       lastName: Yup.string()
17         .max(20, 'Must be 20 characters or less')
18         .required('Required'),
19       email: Yup.string().email('Invalid email address').required('Required'),
20     }),
21     onSubmit: values => {
22       alert(JSON.stringify(values, null, 2));
23     },
24   });
25   return (
26     <form onSubmit={formik.handleSubmit}>
27       <label htmlFor="firstName">First Name</label>
28       <input
29         id="firstName"
30         name="firstName"
31         type="text"
32         onChange={formik.handleChange}
33         onBlur={formik.handleBlur}
34         value={formik.values.firstName}
35       />
36       {formik.touched.firstName && formik.errors.firstName ? (
37         <div>{formik.errors.firstName}</div>
38       ) : null}
39 
40       <label htmlFor="lastName">Last Name</label>
41       <input
42         id="lastName"
43         name="lastName"
44         type="text"
45         onChange={formik.handleChange}
46         onBlur={formik.handleBlur}
47         value={formik.values.lastName}
48       />
49       {formik.touched.lastName && formik.errors.lastName ? (
50         <div>{formik.errors.lastName}</div>
51       ) : null}
52 
53       <label htmlFor="email">Email Address</label>
54       <input
55         id="email"
56         name="email"
57         type="email"
58         onChange={formik.handleChange}
59         onBlur={formik.handleBlur}
60         value={formik.values.email}
61       />
62       {formik.touched.email && formik.errors.email ? (
63         <div>{formik.errors.email}</div>
64       ) : null}
65 
66       <button type="submit">Submit</button>
67     </form>
68   );
69 };

繰り返しますが、Yupは完全にオプションです。しかし、試してみることをお勧めします。上記のように、30行のコードではなく、わずか10行のコードでまったく同じバリデーション関数を表現できました。Formikの中核となる設計原則の1つは、整理整頓を支援することです。Yupは間違いなくこの点で大きく役立ちます。スキーマは非常に表現力豊かで直感的（値を反映するため）であり、再利用可能です。Yupを使用するかどうかとは関係なく、アプリケーション全体で一般的に使用されるバリデーションメソッドを共有することを強くお勧めします。これにより、一般的なフィールド（例：メールアドレス、住所、ユーザー名、電話番号など）の一貫したバリデーションが保証され、より良いユーザーエクスペリエンスにつながります。

ボイラープレートの削減

`getFieldProps()`

上記のコードは、Formikが正確に何をしているかを非常に明確に示しています。onChange -> handleChange、onBlur -> handleBlurなどです。しかし、時間を節約するために、useFormik()はヘルパーメソッドformik.getFieldProps()を返し、入力の接続を高速化します。フィールドレベルの情報が与えられると、特定のフィールドのonChange、onBlur、value、checkedの正確なグループが返されます。それをinput、select、またはtextareaに展開できます。

1 import React from 'react';
2 import { useFormik } from 'formik';
3 import * as Yup from 'yup';
4 
5 const SignupForm = () => {
6   const formik = useFormik({
7     initialValues: {
8       firstName: '',
9       lastName: '',
10       email: '',
11     },
12     validationSchema: Yup.object({
13       firstName: Yup.string()
14         .max(15, 'Must be 15 characters or less')
15         .required('Required'),
16       lastName: Yup.string()
17         .max(20, 'Must be 20 characters or less')
18         .required('Required'),
19       email: Yup.string().email('Invalid email address').required('Required'),
20     }),
21     onSubmit: values => {
22       alert(JSON.stringify(values, null, 2));
23     },
24   });
25   return (
26     <form onSubmit={formik.handleSubmit}>
27       <label htmlFor="firstName">First Name</label>
28       <input
29         id="firstName"
30         type="text"
31         {...formik.getFieldProps('firstName')}
32       />
33       {formik.touched.firstName && formik.errors.firstName ? (
34         <div>{formik.errors.firstName}</div>
35       ) : null}
36 
37       <label htmlFor="lastName">Last Name</label>
38       <input id="lastName" type="text" {...formik.getFieldProps('lastName')} />
39       {formik.touched.lastName && formik.errors.lastName ? (
40         <div>{formik.errors.lastName}</div>
41       ) : null}
42 
43       <label htmlFor="email">Email Address</label>
44       <input id="email" type="email" {...formik.getFieldProps('email')} />
45       {formik.touched.email && formik.errors.email ? (
46         <div>{formik.errors.email}</div>
47       ) : null}
48 
49       <button type="submit">Submit</button>
50     </form>
51   );
52 };

Reactコンテキストの活用

上記のコードは、Formikが正確に何をしているかを非常に明確に示しています。onChange -> handleChange、onBlur -> handleBlurなどです。しかし、各入力にこの「プロップゲッター」getFieldProps()を手動で渡す必要があります。さらに時間を節約するために、FormikにはReactコンテキストベースのAPI/コンポーネントが付属しており、より簡単にコードを簡潔にすることができます：<Formik />、<Form />、<Field />、<ErrorMessage />。より具体的には、Reactコンテキストを暗黙的に使用して、親<Formik />の状態/メソッドに接続します。

これらのコンポーネントはReactコンテキストを使用するため、フォームの状態とヘルパーをツリーに保持するReactコンテキストプロバイダーをレンダリングする必要があります。自分でこれを行うと、次のようになります。

1 import React from 'react';
2 import { useFormik } from 'formik';
3 
4 // Create empty context
5 const FormikContext = React.createContext({});
6 
7 // Place all of what’s returned by useFormik into context
8 export const Formik = ({ children, ...props }) => {
9   const formikStateAndHelpers = useFormik(props);
10   return (
11     <FormikContext.Provider value={formikStateAndHelpers}>
12       {typeof children === 'function'
13         ? children(formikStateAndHelpers)
14         : children}
15     </FormikContext.Provider>
16   );
17 };

幸いにも、<Formik>コンポーネントでこれを行いました。これはまさにこれと同じように機能します。

これで、useFormik()フックをFormikの<Formik>コンポーネント/レンダープロップに置き換えます。コンポーネントなので、useFormik()に渡されたオブジェクトをJSXに変換し、各キーをプロップにします。

1 import React from 'react';
2 import { Formik } from 'formik';
3 import * as Yup from 'yup';
4 
5 const SignupForm = () => {
6   return (
7     <Formik
8       initialValues={{ firstName: '', lastName: '', email: '' }}
9       validationSchema={Yup.object({
10         firstName: Yup.string()
11           .max(15, 'Must be 15 characters or less')
12           .required('Required'),
13         lastName: Yup.string()
14           .max(20, 'Must be 20 characters or less')
15           .required('Required'),
16         email: Yup.string().email('Invalid email address').required('Required'),
17       })}
18       onSubmit={(values, { setSubmitting }) => {
19         setTimeout(() => {
20           alert(JSON.stringify(values, null, 2));
21           setSubmitting(false);
22         }, 400);
23       }}
24     >
25       {formik => (
26         <form onSubmit={formik.handleSubmit}>
27           <label htmlFor="firstName">First Name</label>
28           <input
29             id="firstName"
30             type="text"
31             {...formik.getFieldProps('firstName')}
32           />
33           {formik.touched.firstName && formik.errors.firstName ? (
34             <div>{formik.errors.firstName}</div>
35           ) : null}
36 
37           <label htmlFor="lastName">Last Name</label>
38           <input
39             id="lastName"
40             type="text"
41             {...formik.getFieldProps('lastName')}
42           />
43           {formik.touched.lastName && formik.errors.lastName ? (
44             <div>{formik.errors.lastName}</div>
45           ) : null}
46 
47           <label htmlFor="email">Email Address</label>
48           <input id="email" type="email" {...formik.getFieldProps('email')} />
49           {formik.touched.email && formik.errors.email ? (
50             <div>{formik.errors.email}</div>
51           ) : null}
52 
53           <button type="submit">Submit</button>
54         </form>
55       )}
56     </Formik>
57   );
58 };

上記のように、useFormik()フックを<Formik>コンポーネントに置き換えました。<Formik>コンポーネントは、子として関数を受け入れます（別名レンダープロップ）。その引数は、useFormik()によって返されるオブジェクトとまったく同じです（実際、<Formik>は内部的にuseFormik()を呼び出します！）。したがって、フォームは以前と同じように機能しますが、新しいコンポーネントを使用して、より簡潔な方法で表現できるようになりました。

1 import React from 'react';
2 import { Formik, Field, Form, ErrorMessage } from 'formik';
3 import * as Yup from 'yup';
4 
5 const SignupForm = () => {
6   return (
7     <Formik
8       initialValues={{ firstName: '', lastName: '', email: '' }}
9       validationSchema={Yup.object({
10         firstName: Yup.string()
11           .max(15, 'Must be 15 characters or less')
12           .required('Required'),
13         lastName: Yup.string()
14           .max(20, 'Must be 20 characters or less')
15           .required('Required'),
16         email: Yup.string().email('Invalid email address').required('Required'),
17       })}
18       onSubmit={(values, { setSubmitting }) => {
19         setTimeout(() => {
20           alert(JSON.stringify(values, null, 2));
21           setSubmitting(false);
22         }, 400);
23       }}
24     >
25       <Form>
26         <label htmlFor="firstName">First Name</label>
27         <Field name="firstName" type="text" />
28         <ErrorMessage name="firstName" />
29 
30         <label htmlFor="lastName">Last Name</label>
31         <Field name="lastName" type="text" />
32         <ErrorMessage name="lastName" />
33 
34         <label htmlFor="email">Email Address</label>
35         <Field name="email" type="email" />
36         <ErrorMessage name="email" />
37 
38         <button type="submit">Submit</button>
39       </Form>
40     </Formik>
41   );
42 };

<Field>コンポーネントは、デフォルトで<input>コンポーネントをレンダリングします。これは、nameプロップが与えられると、それぞれのonChange、onBlur、valueプロップを暗黙的に取得して要素に渡すと同時に、渡されたプロップも渡します。しかし、すべてが入力ではないため、<Field>は、自由にレンダリングできるようにいくつかのプロップも受け入れます。いくつかの例…

1 // <input className="form-input" placeHolder="Jane"  />
2 <Field name="firstName" className="form-input" placeholder="Jane" />
3 
4 // <textarea className="form-textarea"/></textarea>
5 <Field name="message" as="textarea" className="form-textarea" />
6 
7 // <select className="my-select"/>
8 <Field name="colors" as="select" className="my-select">
9   <option value="red">Red</option>
10   <option value="green">Green</option>
11   <option value="blue">Blue</option>
12 </Field>

Reactはコンポジションがすべてであり、プロップドリリングを多く削減しましたが、各入力にlabel、<Field>、<ErrorMessage>を繰り返しています。抽象化でより良いことができます！Formikを使用すると、アプリケーション全体で共有できる再利用可能な入力プリミティブコンポーネントを作成できます。<Field>レンダープロップコンポーネントには姉妹がいて、その名前はuseFieldで、同じことを行いますが、Reactフックを使用します！ご覧ください…

1 import React from 'react';
2 import ReactDOM from 'react-dom';
3 import { Formik, Form, useField } from 'formik';
4 import * as Yup from 'yup';
5 
6 const MyTextInput = ({ label, ...props }) => {
7   // useField() returns [formik.getFieldProps(), formik.getFieldMeta()]
8   // which we can spread on <input>. We can use field meta to show an error
9   // message if the field is invalid and it has been touched (i.e. visited)
10   const [field, meta] = useField(props);
11   return (
12     <>
13       <label htmlFor={props.id || props.name}>{label}</label>
14       <input className="text-input" {...field} {...props} />
15       {meta.touched && meta.error ? (
16         <div className="error">{meta.error}</div>
17       ) : null}
18     </>
19   );
20 };
21 
22 const MyCheckbox = ({ children, ...props }) => {
23   // React treats radios and checkbox inputs differently from other input types: select and textarea.
24   // Formik does this too! When you specify `type` to useField(), it will
25   // return the correct bag of props for you -- a `checked` prop will be included
26   // in `field` alongside `name`, `value`, `onChange`, and `onBlur`
27   const [field, meta] = useField({ ...props, type: 'checkbox' });
28   return (
29     <div>
30       <label className="checkbox-input">
31         <input type="checkbox" {...field} {...props} />
32         {children}
33       </label>
34       {meta.touched && meta.error ? (
35         <div className="error">{meta.error}</div>
36       ) : null}
37     </div>
38   );
39 };
40 
41 const MySelect = ({ label, ...props }) => {
42   const [field, meta] = useField(props);
43   return (
44     <div>
45       <label htmlFor={props.id || props.name}>{label}</label>
46       <select {...field} {...props} />
47       {meta.touched && meta.error ? (
48         <div className="error">{meta.error}</div>
49       ) : null}
50     </div>
51   );
52 };
53 
54 // And now we can use these
55 const SignupForm = () => {
56   return (
57     <>
58       <h1>Subscribe!</h1>
59       <Formik
60         initialValues={{
61           firstName: '',
62           lastName: '',
63           email: '',
64           acceptedTerms: false, // added for our checkbox
65           jobType: '', // added for our select
66         }}
67         validationSchema={Yup.object({
68           firstName: Yup.string()
69             .max(15, 'Must be 15 characters or less')
70             .required('Required'),
71           lastName: Yup.string()
72             .max(20, 'Must be 20 characters or less')
73             .required('Required'),
74           email: Yup.string()
75             .email('Invalid email address')
76             .required('Required'),
77           acceptedTerms: Yup.boolean()
78             .required('Required')
79             .oneOf([true], 'You must accept the terms and conditions.'),
80           jobType: Yup.string()
81             .oneOf(
82               ['designer', 'development', 'product', 'other'],
83               'Invalid Job Type'
84             )
85             .required('Required'),
86         })}
87         onSubmit={(values, { setSubmitting }) => {
88           setTimeout(() => {
89             alert(JSON.stringify(values, null, 2));
90             setSubmitting(false);
91           }, 400);
92         }}
93       >
94         <Form>
95           <MyTextInput
96             label="First Name"
97             name="firstName"
98             type="text"
99             placeholder="Jane"
100           />
101 
102           <MyTextInput
103             label="Last Name"
104             name="lastName"
105             type="text"
106             placeholder="Doe"
107           />
108 
109           <MyTextInput
110             label="Email Address"
111             name="email"
112             type="email"
113             placeholder="jane@formik.com"
114           />
115 
116           <MySelect label="Job Type" name="jobType">
117             <option value="">Select a job type</option>
118             <option value="designer">Designer</option>
119             <option value="development">Developer</option>
120             <option value="product">Product Manager</option>
121             <option value="other">Other</option>
122           </MySelect>
123 
124           <MyCheckbox name="acceptedTerms">
125             I accept the terms and conditions
126           </MyCheckbox>
127 
128           <button type="submit">Submit</button>
129         </Form>
130       </Formik>
131     </>
132   );
133 };

上記のように、useField()を使用すると、あらゆる種類のReactコンポーネントを入力として<Field> + <ErrorMessage>のようにFormikに接続できます。これを使用して、ニーズに合った再利用可能な入力グループを作成できます。

まとめ

おめでとうございます！Formikを使用してサインアップフォームを作成しました。

複雑なバリデーションロジックと詳細なエラーメッセージがあります。
エラーメッセージを適切なタイミング（フィールドをぼかした後）でユーザーに正しく表示します。
アプリの他のフォームで使用できる独自の入力コンポーネントを活用します。

素晴らしい仕事です！Formikの仕組みをある程度理解できたことを願っています。

最終的な結果はこちらをご覧ください：最終結果。

時間がある場合、または新しいFormikスキルを練習したい場合は、難易度順にサインアップフォームを改善するためのアイデアをいくつかご紹介します。

ユーザーが送信を試行している間、送信ボタンを無効にします（ヒント：formik.isSubmitting）。
formik.handleResetまたは<button type="reset">を使用して、リセットボタンを追加します。
URLクエリ文字列または<SignupForm>に渡されたプロップに基づいてinitialValuesを事前に設定します。
フィールドにエラーがあり、フォーカスされていない場合、入力の枠線の色を赤に変更します。
エラーが表示され、アクセスされている各フィールドにシェイクアニメーションを追加します。
フォームの状態をブラウザのsessionStorageに永続化し、ページのリフレッシュ間でフォームの進捗状況を維持します。

このチュートリアルでは、フォームの状態、フィールド、バリデーション、フック、レンダープロップ、Reactコンテキストなど、Formikの概念について説明しました。これらのトピックの詳細については、その他のドキュメントを参照してください。チュートリアルでコンポーネントとフックを定義する方法の詳細については、APIリファレンスを参照してください。

前へはじめに次へリソース

このページは役に立ちましたか？

GitHubでこのページを編集する

チュートリアル

始める前に

何を作成するのか？

前提条件

チュートリアルの設定

設定オプション1：ブラウザでコードを作成する

設定オプション2：ローカル開発環境

行き詰まりました！

概要：Formikとは？

基本

バリデーション

訪問済みフィールド

Yupを使ったスキーマバリデーション

ボイラープレートの削減

`getFieldProps()`

Reactコンテキストの活用

まとめ

このページについて

リソース

コミュニティ

Formiumについて

ニュースレターの購読

チュートリアル

始める前に

何を作成するのか？

前提条件

チュートリアルの設定

設定オプション1：ブラウザでコードを作成する

設定オプション2：ローカル開発環境

行き詰まりました！

概要：Formikとは？

基本

シンプルなニュースレター登録フォーム

バリデーション

訪問済みフィールド

Yupを使ったスキーマバリデーション

ボイラープレートの削減

getFieldProps()

Reactコンテキストの活用

まとめ

このページについて

リソース

コミュニティ

Formiumについて

ニュースレターの購読

`getFieldProps()`