【React Native】Yupを使用してフォームチェックをしよう！

はじめに

---

入力フォームはウェブでもモバイルアプリでもよく使用されますが、ユーザーが情報を入れる場合は間違いを入れないように入力チェックは必要です。React NativeではYupというパッケージで簡単に入力チェックできます！YupはJavaScriptの入力チェックのためのパッケージです。

今回はFormikを使用して作成したフォームでチェックを行いますが、YupはFormikを使っていなくても使用できます。

前回の記事ではFormikでフォームを作りましたので必要な方は参考にしてください。

【React Native】フォームをFormikで作るメリットとデメリット

使用するための準備と参考コード

---

今回はvalidationSchemaというpropを使います。

■使用するための準備

まずはYupをimportします。

import * as yup from 'yup';

次にvalidationSchemaを準備します。

const validationSchema = yup.object().shape({
//ここにはチェックの設定
});

Formikを使用する場合はFormikの中にvalidationSchemaをセットします。

<Formik 
    validationSchema={validationSchema}
>

■参考コード

前の記事のフォームのvalidateはvalidationSchemaに変えたら下記のコードになります。

YupでvalidationSchemaのオブジェクトを作るだけでエラーチェックができます。

Yupでいろいろなチェックをしましょう

---

※まとめているフォームのコードはこの項目の下にあります。

■最大桁数

maxは最大桁数チェックができます。

例

text: yup
.string()
.max(10, '10文字以下を入れてください') 　//11文字以上だったらerrors.textは「10文字以下を入れてください」になる

■入力必須のインプット

requiredは必須項目の確認を追加します。

例

text: yup
.string()
.required('メッセージを入力してください') 

■メールアドレスチェック

Yupはメールアドレスチェックがあるので正規表現を使わなくて大丈夫です。

例

email: yup
.string()
.email('正しいメールアドレスを入力してください')

■パスワードを非表示

TextInputのsecureTextEntryというpropにtrueを代入したら文字が隠せます。

<TextInput style={styles.input}
      value={values.password}
      onChangeText={handleChange('password')}
      placeholder="パスワード"
      onBlur={handleBlur('password')}
      secureTextEntry={true}　//文字を非表示
 />

■正規表現

matchesで正規表現チェックができます。全角文字など正規表現で色々なチェックができます。

例：全角文字の場合

zenkaku: yup
.string()
.matches(/^[^\x20-\x7e]*$/, '全角文字のみ')　//全角文字のみ（空文字OK）

例：半角英数字の場合

yup
.string()
.matches(/^[0-9a-zA-Z]+$/, '半額英数字のみ')　//半角英数字のみ（空文字OK）

■型チェック

型のエラーのメッセージを指定する場合、typeErrorを使用します。

文字列

文字列のチェックはstringが使えます。

例

string: yup
.string()
.typeError('文字列を入れてください')

数字

数字のチェックはnumberが使えます。

例

number: yup
.number()
.typeError('数字を入れてください')

日付

date型はdateにキャストされて、失敗であればエラーになります。普通の数字は日付にキャストできることが多いので、typeErrorのみはあまり効果しないと思います。※日付型チェックは正規表現や日と月を分けるなどの方が多いと思います。

例

date: yup
.date()
.typeError('正しい日付を入力してください')

■使用例まとめ参考コード

他にチェックしたいことがあればドキュメンテーションで詳しく書いています。

補足

---

■コードが長い．．．整理してみる！

上記のコードは同じようなコードを何度もかいてる箇所が多いので、下記のコードでInputクラスを作って整理することでコードは読みやすくなりました。values、handleChangeなどのpropsはhelpersというpropを代入しました。Inputクラスの作り方はケースバイケースですので、ケースによって自由に作れます。

■ボタンをdisabled（無効）にする

コードでエラーがでたらボタンを押せなくします。Formikで簡単にエラーのステートでボタンをコントロールできます！

disabled={!props.isValid}

■JavaScriptのスプレッド構文

JavaScriptのスプレッド構文（...）でpropsはオブジェクトから代入できます。上記のコードは　{...this.props.other}　でotherのオブジェクトからpropsを作ります。

{...this.props.other}　

印象

---

FormikとYupでフォームを作るとまだ自分で処理することが多いですが、結構フレキシブルなパッケージです。今回はInputというクラスを作ったけど、ケースによってカスタマイズできます。handleChange、valuesなどを使うのは慣れるまで難しいので初心者向けのパッケージがあればいいと思います。

参考

---

• React Nativeのドキュメンテーション
• Formikのドキュメンテーション
• Yupのドキュメンテーション
• React NativeでFormikとYupを使うについての記事
• React NativeでFormikとYup使うについての記事(2)
• React NativeでFormikを使うについての記事
• JavaScriptの正規表現
• JSXでスプレッド構文の使い方

---

これからエンジニア転職を考えている方へ

---

ロックシステムではエンジニアスクール「ロックシステムアカデミー」を運営しています。
プログラミングの基礎知識から本格的な開発ノウハウまでしっかり教えます！

教室は生のIT企業！
◆　実際の開発プロジェクトを通して経験できる！
◆　現役エンジニアが直接指導！
◆　20代の転職成功率100％！

是非公式ホームページもご覧ください