formikの使い方基礎

komosyu2023.06.10

React

はじめに

実務でフォーム制御に formikというライブラリを使っていて、基本的なことを学んだのでまとめていきたいと思います！
バリデーションについてはサードパーティのライブラリの利用がおすすめされているので今回はyupを使っていきます。

formik の特徴

実務のプロジェクトで使われていたことから存在を知ったのですが、これまで特に form 制御に関するライブラリを使ったことのない私でも理解しやすかったり使い勝手がよかったりしたので、これからも使っていきたいなとは思っています。

公式のドキュメントを見てみると、こんな特徴が挙げられていました。

フォーム状態の内外で値を取得する
検証メッセージとエラーメッセージ
フォーム送信の処理

まあふつうに form の制御をする分には十分そうですね。

基本的な使い方

ライブラリのインストール

下記のコマンドでインストールしていきましょう！

formik

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

yup

npm install yup --save
or
yarn add yup --save

よく使う機能

form 制御でよく使うのはこのあたりだと思うので、下記を組み込んでデモを用いて解説してみます！

入力項目の監視
エラーバリデーション
送信時の挙動

import React from 'react'
import { FormikErrors, FormikTouched, useFormik } from 'formik'
import * as yup from 'yup'

const SignupForm = () => {
  // formに設定される初期値
  const initValues = {
    name: '',
    email: '',
  }

  // yupを使っての簡単なバリデーション
  const validateSchema =  yup.object({
    name: yup.string().required('お名前を入力してください'),
    email: yup.string().email('正しいメールアドレスを入力してください').required('メールアドレスを入力してください'),
  }),

  // 送信時の挙動
  const submitData = () => {
    // こんな感じで値が確認できる
    const {name, email} = values
  }

  // 状態とヘルパーを返すhook
  const formik = useFormik({
    // 初期の状態を設定
    initialValues: initValues,
    // バリデーションを設定
    validationSchema: validateSchema,
    // 送信時の挙動を設定
    onSubmit: (values) => {
      alert(JSON.stringify(values, null, 2))
    },
  })

  const {
    // onSubmitに設定
    handleSubmit,
    // onChangeに設定
    handleChange,
    // valueに設定(values.name,values.emailみたいな感じになってる)
    values,
    // エラーメッセージの制御(errors.name,errors.emailみたいな感じになってる)
    errors
  } = formik

  return (
    <form onSubmit={handleSubmit}>
      <div>
        <label htmlFor="name">お名前</label>
        <input
            id="name"
            name="name"
            type="text"
            onChange={handleChange}
            value={values.name}
        />
        {errors.name ? <div>{errors.name}</div> : null}
      </div>
      <div>
        <label htmlFor="email">メールアドレス</label>
        <input
            id="email"
            name="email"
            type="email"
            onChange={handleChange}
            value={values.email}
        />
        {errors.email ? <div>{errors.email}</div> : null}
      </div>
      <button type="submit">送信</button>
    </form>
  )
}

export default SignupForm

上記でコメントを入れたのがすべてなのですが、非常にシンプルにまとめられるのでいいですね！

流れをまとめるとこんな感じです。

1.useFormikを呼び出して、その中で「初期の状態」「バリデーション」「送信時の挙動」を設定します
2.その中で設定する変数を作成
3.form や input など値を制御する項目にhandleSubmit,handleChangeなどイベント設定し、value には値を設定

参考

さいごに

React を使ったことがあれば、直感的に理解できて使うことができそうですね。

実務ではこれからもガンガン使っていくことになると思うので、そこで得た知見などをこれからも共有していきます！