BLOG

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

2019-12-03

はじめに


フロントエンドエンジニアはどんなシステムでもよく入力フォームを作っています。ウェブではフォームの作り方が色々ありますが、React Nativeも色々な作り方があります。パッケージなしで作ったら自分でstateなどを処理しなくてはいけないのでパッケージを使ったら便利です。最近人気Formikというパッケージを使う方法を検証してみました。

FormikはReactとReact Nativeのフォーム作成の為のパッケージです。


結論から


React NativeではFormikの全てのコンポーネントが使えるわけではないが、stateなどを処理してくれるのでとても便利です。 Formikの使用できないコンポーネントはパッケージなしで作れば問題ないので、Formikの使用をおすすめします。

■メリット

  • 軽い

    Formikは色々な機能や派手なコンポーネントがあるパッケージではなく、シンプルで面倒な処理をしてくれるパッケージなので比較的軽いです。

  • 下記のような面倒な処理をしてくれる

    1. Stateの値の処理
    2. 入力チェックとエラー出力
    3. フォームのサブミット処理
  • パッケージの使いたい部分だけ使えるのでカスタマイズしやすい

    例えば、handleBlurを使うか使わないか選べます。

■デメリット

  • 下記のFormikのコンポーネントはウェブでは動きますがモバイルではエラーがでて動かない(ReactJSでは使えます)

    • Field
    • Error Message
  • シンプルなフォームを作ってもお決まりのソースコードが必要で、それは結構長いので自分でコンポーネントを作ることになる
  • React Nativeは新しい為、Formikの記事やパッケージはReactJS向けが多い

  • Formikなしとありを比較してみよう


    入力欄と送信ボタンがあるフォームを作ります。


    ■パッケージなしでフォームを作る

    このコードではstateは自分で処理します。stateは入力した内容(text)とエラー(error)があります。

    ■Formikを使ってフォームを作る

    パッケージをインストールする

    ローカルな開発でしたらパッケージをインストールしないとFormikが使えない為、プロジェクトのダイレクトリに移動して下記のコマンドを実行するとFormikをインストールできます。

npm install formik --save

Snackでもnpmのパッケージが使えるのでsnackでコードを試すのは便利です。Formikのimportのコードを書いたら、エラーメッセージが出て、ADD CTRL+ をクリックしたらパッケージはsnackで使えるようになります。

import { Formik}  from 'formik';

Formikでコードを書く

先ほどのフォームをFormikを使って作り直しました。

最初はFormikコンポーネントを見ましょう。上のコードでFormikのpropsをセットする部分があります。下記が使用しているpropsの説明です。

  • initialValues: フォーム変数の最初の値
  • onSubmit: submitをクリックしたら関数を実行する
  • validate: 入力チェックの関数。エラーがあったらonSubmitは実行されない

全てのpropsについては以下のリンク先で確認することができます。

https://jaredpalmer.com/formik/docs/api/formik#props

Formikタグの中で色々なステートやヘルパーがpropsとして使えます。下記は説明です。

  • values: フォーム変数の値
  • touched: フォームインプットに触れたかどうか
  • errors: validateによってエラーの内容
  • handleChange: テキストが変わったらvaluesを更新するためのヘルパー
  • handleBlur: インプットに触ったらtouchedを変更するためのヘルパー
  • handleSubmit: サブミットの処理

propsについては以下のリンクで確認することができます。

handleChange、handleBlurなどを使わなくてはいけませんが、詳細はFormikが処理してくれるし、エラー出力のコードはエラーがある場合にボタンが押されたり入力欄のフォーカスが外れたら出力してくれるのでとても便利です。

コンポーネントのFieldとError Messageは使えない

FormikはFieldとError Messageというコンポーネントがあるけど、使ってみたらウェブしか使えなかったです。(2019/12 現在)調べたらこの2つはReact NativeのサポートはなくReactJSだけが使えるそうです。なので、今は長いフォームを作る人は使えないコンポーネントの代わりに自分のカスタムコンポーネントを作るのお勧めます。

モバイルで使えませんが、FieldとError Messageでフォームを作るコードは下にあります。いつかこのコードはサポートができればフォームは作りやすくなりますね。

※モバイルでエラーが出るけどウェブで動きます。

■比較してみる

上記の2つのパッケージなしとパッケージありのコードを比較してみると、長さはほぼ変わらないですがFormikのコードが分かりやすいと思います。

パッケージなしのコードは細かく見ないとエラーの値があっているかどうか不安になると思いますが、FormikでhandleChangeとvalidateを使っているのでタイミングを考えずに使えます。

シンプルなフォームを作ってもお決まりのソースコードが必要でそれは結構長いので、Formikで長いフォームを作る場合は、コピペをよくする、あるいは自分でコンポーネントを作る必要があります。しかし、そのためカスタマイズしやすいです。


印象


React Nativeでフォームを作るのは思ったより難しかったです。React Nativeのメリットはカスタムコンポーネントが使えることですが、デメリットはちょうどいいコンポーネントを探すのは時間がかかるし、なかったら自作でコンポーネントを作ることになります。時間の経過とともに、パッケージが増えるのでReact Nativeはだんだん使いやすくなると思います。


次回


次回はYupというパッケージで入力チェックを追加します。


参考




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

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

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


是非公式ホームページもご覧ください
未経験からITエンジニアをめざすならロックシステムアカデミー
大阪市福島駅すぐの現役SE直接指導のプログラミングスクール開校
https://rocksystem.co.jp/academy/

株式会社ロックシステム

「ブラック企業をやっつけろ!!」を企業理念にエンジニアが働きやすい環境をつきつめる大阪のシステム開発会社。2014年会社設立以来、残業時間ほぼゼロを達成し、高い従業員還元率でエンジニアファーストな会社としてIT業界に蔓延るブラックなイメージをホワイトに変えられる起爆剤となるべく日々活動中!絶賛エンジニア募集中。