Webアプリにおいてフォーム機能は不可欠で、もっとも身近なものにログインフォームやお問い合わせフォームなどがある。これらはユーザインタフェースに該当するもので、Webアプリとユーザー間で情報のやり取りするために用いられるツールだ。

実装の側面では、複数の要件が組み合わさリ形成される。たとえば、フォームに関わる状態管理、バリデーションチェック、エラーメッセージの描画、フォーム操作に関わるハンドラーなどだ。これらを複合的に機能させるのだから小難しい実装であるのは間違いない。

このエントリーでは、Reactアプリのフォーム実装を楽にするライブラリ「Formik」を紹介したい。

Formik について

Formikは、Reactアプリのフォーム実装を協力にサポートするライブラリだ。

Formikと対比されるライブラリにRedux-Formがある。Redux-FormはRedux Storeによる状態管理が主で、Reduxのセットアップが求められる反面、Formikならばローカル状態管理で済む。ローカルの一時的な状態ということで、パフォーマンスが良くスケーラブルなところが好まれてフォーム実装で覇権をふるっている。

【Formik】
https://jaredpalmer.com/formik/
https://github.com/jaredpalmer/formik

特徴

• フォームに関わる状態管理
• バリデーションチェック
• エラーメッセージの描画
• フォーム操作に関わるイベントハンドラー
• React Nativeに対応

Formik を使う

それではFormikのインストールとデモンストレーションをご覧いただこう。

インストール

インストールは下記コマンドで行う。例のごとく２パターンあるから都合のよい方を実行する。

$ npm install formik --save
# or
$ yarn add formik

デモンストレーション

下記ソースコードは、メールアドレス入力フィールドと送信ボタンがあるだけの、もっとも単純なフォーム構成のデモンストレーションだ。

import React from "react";
import ReactDOM from "react-dom";
import { Formik, Form, Field, ErrorMessage } from "formik";
​
function App() {
  return (
    <Formik
      initialValues={{ email: "" }}
      onSubmit={values => console.log(values)}
      validate={values => {
        const errors = {};
​
        if (!values.email) {
          errors.email = "Required";
        } else if (!/^[A-Z0-9._%+-]+@[A-Z0-9.-]+\.[A-Z]{2,4}$/i.test(values.email)) {
          errors.email = "Invalid email address";
        }
​
        return errors;
      }}
    >
      {({ values, errors }) => {
        return (
          <Form>
            <Field type="email" name="email" placeholder="Email" />
            <ErrorMessage name="email">{msg => <div>{msg}</div>}</ErrorMessage>
            <button type="submit">Submit</button>
          </Form>
        );
      }}
    </Formik>
  );
}
​
const rootElement = document.getElementById("root");
ReactDOM.render(<App />, rootElement);

まとめ

Reactアプリのフォーム実装を楽にするライブラリ「Formik」の紹介だった。

デモンストレーションではスタイルを適用していない。スタイルを適用する場合は、対象タグにclass属性を付与するなりインラインスタイルを当てるなりしなければならない。たとえば<Field class=”input-email” />という具合だ。もしくは「formik-material-ui」なるラッパーもあるようで、これならばMaterial UIが適用される模様だ。管理画面などで適度な見栄えを求められたならば導入を検討しても良さそうだ。

このエントリーが、あなたのクリエイティビティを刺激するものであると期待したい。