【Formik/Yup】React簡単フォーム作成ライブラリ解説

こんにちは。iQeda [@iQeeeda] です。

最近 Next.js (React フレームワーク) を使っています。

と聞いていましたが、ライブラリを使うとめっちゃ簡単でした！

Formik / Yum インストール

yarn コマンドで必要なライブラリをインストールします。

cd [プロジェクト]

# formik と yup インストール
yarn add formik yup

Formik

Formik はフォームコンポネント作成ライブラリです。

Yup

Yup は Formik 公式でも推奨されている Validation 実装ライブラリです。

公式ドキュメント

①お問い合わせフォーム → Slack 通知サンプル

上記項目の入力フォームです。送信すると Slack 通知するようにしています。

import React, { Component } from 'react';
import axios from 'axios';
import Router from 'next/router';
import {
    Formik,
    Form,
    Field,
    ErrorMessage
} from 'formik';
import * as Yup from 'yup';

const phoneRegExp = /^((\\+[1-9]{1,4}[ \\-]*)|(\\([0-9]{2,3}\\)[ \\-]*)|([0-9]{2,4})[ \\-]*)*?[0-9]{3,4}?[ \\-]*[0-9]{3,4}?$/
const webhookURL = '[Slack の Webhook URL]';

/**
 * 非同期 Varidation
 */
const validationSchema = Yup.object().shape({
    name: Yup.string()
        .required('氏名は必須です'),
    email: Yup.string()
        .email('メールアドレスの形式に誤りがあります')
        .required('メールアドレスは必須です'),
    tel: Yup.string()
        .matches(phoneRegExp, '電話番号の形式に誤りがあります'),
    content: Yup.string()
        .required('お問い合わせ内容は必須です'),
});

class ContactForm extends Component {
    constructor(props) {
        super(props);
        this.defaultFormState = {
            name: '',
            email: '',
            tel: '',
            content: '',
        }
    }

    /**
     * フォーム送信後の処理
     */
    handleSubmit (form, { resetForm }) {
        let text = `■ 名前: ${form.name}\n■ メールアドレス: ${form.email}\n■ 電話番号: ${form.tel}\n■ お問い合わせ内容: ${form.content}`
        let data = {
            method: 'post',
            baseURL: webhookURL,
            headers: {
                'Content-Type': 'application/x-www-form-urlencoded; charset=UTF-8',
            },
            data: `payload={ "text": "${ text }"}`
        };
        try {
            axios.request(data)
            alert('送信しました')
            resetForm()
            Router.push('/contact') // リダイレクト
        } catch (error) {
            alert('送信に失敗しました')
        }
    }

    render() {
        return (
            <Formik
                onSubmit={this.handleSubmit}
                initialValues={this.defaultFormState}
                validationSchema={validationSchema}
            >
                <Form>
                    <div className="form-field">
                        <Field
                            name="name"
                            type="text"
                            placeholder="氏名"
                        />
                    </div>
                    <div className="form-field">
                        <Field
                            name="email"
                            type="email"
                            placeholder="メールアドレス"
                        />
                    </div>
                    <div className="form-field">
                        <Field
                            name="tel"
                            type="tel"
                            placeholder="電話番号"
                        />
                    </div>
                    <div className="form-field">
                        <Field
                            name="content"
                            component="textarea"
                            placeholder="お問い合わせ内容"
                        />
                    </div>
                    <div className="form-field">
                        <button type="submit">
                            送信
                        </button>
                    </div>
                    <ErrorMessage
                        name="name"
                        component="div"
                        className="invalidForm"
                    />
                    <ErrorMessage
                        name="email"
                        component="div"
                        className="invalidForm"
                    />
                    <ErrorMessage
                        name="tel"
                        component="div"
                        className="invalidForm"
                    />
                    <ErrorMessage
                        name="content"
                        component="div"
                        className="invalidForm"
                    />
                </Form>
            </Formik>
        )
    }
}

export default ContactForm;

②アカウント作成フォームサンプル

上記項目の入力フォームです。

import React, { Component } from 'react';
import {
    Formik,
    Form,
    Field,
    ErrorMessage
} from 'formik';
import * as Yup from 'yup';

/**
 * 非同期 Varidation
 */
const validationSchema = Yup.object().shape({
    email: Yup.string()
        .email('メールアドレスの形式に誤りがあります')
        .required('メールアドレスは必須です'),
    password: Yup.string()
        .required('パスワード設定は必須です'),
    confirmPassword: Yup.string()
        .required('設定したパスワードを再入力してください')
        .oneOf([Yup.ref('password')], 'パスワードが一致しません')
});

class RegistrationForm extends Component {
    constructor(props) {
        super(props);
        this.defaultFormState = {
            email: '',
            password: '',
            confirmPassword: ''
        }
    }

    /**
     * フォーム送信後の処理
     */
    handleSubmit (form) {
        // 値をコンソール表示
        console.log(form)
    }

    render() {
        return (
            <Formik
                onSubmit={this.handleSubmit}
                initialValues={this.defaultFormState}
                validationSchema={validationSchema}
            >
                <Form>
                    <Field
                        name="email"
                        type="email"
                        placeholder="Email"
                    />
                    <Field
                        name="password"
                        type="password"
                        placeholder="Password"
                    />
                    <Field
                        name="confirmPassword"
                        type="password"
                        placeholder="Confirm password"
                    />
                    <button type="submit">
                        Submit
                    </button>
                    <ErrorMessage
                        name="email"
                        component="div"
                        className="invalidForm"
                    />
                    <ErrorMessage
                        name="password"
                        component="div"
                        className="invalidForm"
                    />
                    <ErrorMessage
                        name="confirmPassword"
                        component="div"
                        className="invalidForm"
                    />
                </Form>
            </Formik>
        )
    }
}

export default RegistrationForm;

(おまけ) handleSubmit 内で setState できない問題

フォーム送信したことを state 管理しようと思ったのですが、
handleSubmit() 内で setState を実行することはできませんでした…

Formik は結果ステータスを props で渡すことができるみたいなので、
それで上手いことやる必要がありそうです。

関連記事

関連記事