概要

正直に言うと、Reactにおけるフォームは非常に冗長です。さらに悪いことに、ほとんどのフォームヘルパーは非常に多くのマジックを行い、多くの場合、パフォーマンスに大きなコストがかかります。Formikは、最も厄介な3つの部分を助けてくれる小さなライブラリです。

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

上記のすべてを1箇所に配置することで、Formikは整理された状態を維持し、テスト、リファクタリング、フォームに関する推論を容易にします。

動機

私(@jaredpalmer)は、@eonwhiteと共に大規模な内部管理ダッシュボードを構築している際にFormikを作成しました。約30種類の独自のフォームがあり、入力コンポーネントだけでなく、データがフォームを流れる方法も標準化することでメリットを得られることがすぐに明らかになりました。

なぜRedux-Formではないのか？

今頃、「なぜRedux-Formを使わなかったのですか？」と思っているかもしれません。良い質問です。

私たちの預言者Dan Abramovによると、フォームの状態は本質的に一時的でローカルであるため、Redux（またはFluxライブラリのいずれか）で追跡する必要はありません
Redux-Formは、**すべてのキーストロークごとに**トップレベルのRedux reducer全体を複数回呼び出します。これは小さなアプリケーションでは問題ありませんが、Reduxアプリケーションが大きくなると、Redux-Formを使用した場合、入力レイテンシが増加し続けます。
Redux-Formはミニファイされたgzip圧縮後で22.5 kBです（Formikは12.7 kBです）。

Formikの目標は、最小限のAPIを持つスケーラブルで高性能なフォームヘルパーを作成し、本当に面倒なことを処理し、残りはユーザーに任せることでした。

React Alicanteでの私の講演では、Formikの動機と哲学をより深く掘り下げ、ライブラリを紹介し（ミニバージョンを作成する様子を見て）、実際のものを用いて非自明なフォーム（配列、カスタム入力など）の構築方法をデモします。

影響

Formikは、この小さな高階コンポーネントをBrent Jacksonが拡張したことから始まり、Redux-Formからのいくつかの命名規則、そして（最近では）React-MotionとReact-Router 4によって普及したレンダープロップスアプローチの影響を受けています。上記を使用したことがあるかどうかに関係なく、Formikは数分で開始できます。

インストール

NPM、Yarn、またはunpkg.com経由の従来の<script>を使用してFormikをインストールできます。

NPM

 npm install formik --save

または

 yarn add formik

FormikはReact v15以降と互換性があり、ReactDOMとReact Nativeで動作します。

このCodeSandbox.ioでのFormikのデモで、購入前に試すこともできます。

ブラウザ内プレイグラウンド

これらのライブオンラインプレイグラウンドで、WebブラウザでFormikを試すことができます。

要約

Formikはフォームの状態を追跡し、propsを介してフォームにいくつかの再利用可能なメソッドとイベントハンドラ（handleChange、handleBlur、handleSubmit）と合わせて公開します。handleChangeとhandleBlurは期待どおりに機能し、name属性またはid属性を使用して更新するフィールドを特定します。

1 import React from 'react';
2 import { Formik } from 'formik';
3 
4 const Basic = () => (
5   <div>
6     <h1>Anywhere in your app!</h1>
7     <Formik
8       initialValues={{ email: '', password: '' }}
9       validate={values => {
10         const errors = {};
11         if (!values.email) {
12           errors.email = 'Required';
13         } else if (
14           !/^[A-Z0-9._%+-]+@[A-Z0-9.-]+\.[A-Z]{2,}$/i.test(values.email)
15         ) {
16           errors.email = 'Invalid email address';
17         }
18         return errors;
19       }}
20       onSubmit={(values, { setSubmitting }) => {
21         setTimeout(() => {
22           alert(JSON.stringify(values, null, 2));
23           setSubmitting(false);
24         }, 400);
25       }}
26     >
27       {({
28         values,
29         errors,
30         touched,
31         handleChange,
32         handleBlur,
33         handleSubmit,
34         isSubmitting,
35         /* and other goodies */
36       }) => (
37         <form onSubmit={handleSubmit}>
38           <input
39             type="email"
40             name="email"
41             onChange={handleChange}
42             onBlur={handleBlur}
43             value={values.email}
44           />
45           {errors.email && touched.email && errors.email}
46           <input
47             type="password"
48             name="password"
49             onChange={handleChange}
50             onBlur={handleBlur}
51             value={values.password}
52           />
53           {errors.password && touched.password && errors.password}
54           <button type="submit" disabled={isSubmitting}>
55             Submit
56           </button>
57         </form>
58       )}
59     </Formik>
60   </div>
61 );
62 
63 export default Basic;

ボイラープレートの削減

上記のコードは、Formikが実行していることを正確に示しています。onChange -> handleChange、onBlur -> handleBlurなどです。しかし、時間を節約するために、Formikには、生活をより簡単に、より簡潔にするための追加のコンポーネントがいくつか用意されています。<Form />、<Field />、<ErrorMessage />です。これらはReactコンテキストを使用して、親<Formik />の状態/メソッドにフックします。

1 // Render Prop
2 import React from 'react';
3 import { Formik, Form, Field, ErrorMessage } from 'formik';
4 
5 const Basic = () => (
6   <div>
7     <h1>Any place in your app!</h1>
8     <Formik
9       initialValues={{ email: '', password: '' }}
10       validate={values => {
11         const errors = {};
12         if (!values.email) {
13           errors.email = 'Required';
14         } else if (
15           !/^[A-Z0-9._%+-]+@[A-Z0-9.-]+\.[A-Z]{2,}$/i.test(values.email)
16         ) {
17           errors.email = 'Invalid email address';
18         }
19         return errors;
20       }}
21       onSubmit={(values, { setSubmitting }) => {
22         setTimeout(() => {
23           alert(JSON.stringify(values, null, 2));
24           setSubmitting(false);
25         }, 400);
26       }}
27     >
28       {({ isSubmitting }) => (
29         <Form>
30           <Field type="email" name="email" />
31           <ErrorMessage name="email" component="div" />
32           <Field type="password" name="password" />
33           <ErrorMessage name="password" component="div" />
34           <button type="submit" disabled={isSubmitting}>
35             Submit
36           </button>
37         </Form>
38       )}
39     </Formik>
40   </div>
41 );
42 
43 export default Basic;

詳細については以下をお読みください…

補足パッケージ

上記のように、バリデーションはユーザーに任されています。独自のバリデータを作成するか、サードパーティライブラリを使用してください。個人的には、オブジェクトスキーマのバリデーションにYupを使用しています。Joi / React PropTypesと非常によく似たAPIを持っていますが、ブラウザにとって十分小さく、ランタイム使用に十分な速度です。Yupが大好きなので、FormikにはvalidationSchemaというYup用の特別な設定オプション/プロップがあり、Yupのバリデーションエラーを、キーがvaluesとtouchedに一致する美しいオブジェクトに変換します。とにかく、npmからYupをインストールできます…