React向けライブラリを解説～フォームの状態管理を助けるFormikとは？

現場で役立つ！ React向けライブラリ詳説 第1回

　昨今、WebアプリケーションのフロントエンドをReactで作成する機会は少しずつ増えてきました。Reactそのものは状態管理とUIを効率的にひもづけるためのフレームワークですが、その周辺には、複雑な状態管理を効率化するライブラリやきれいなUIを提供してくれるライブラリなど、魅力的なライブラリが数多く存在しています。本連載では、そんなライブラリを1つずつ、実例を添えて解説することで、現場で課題に出会った際に適切なライブラリを選択できる力を養います。第1回となる今回は、入力フォームについて扱います。

対象読者

• JavaScriptとWeb開発の基礎に理解がある方
• Reactを用いたJavaScriptアプリケーション開発の経験者

前提環境

　筆者の検証環境は以下の通りです。

• macOS Catalina 10.15.7
• Node.js 14.14.0／npm 6.14.8
• React 17.0.0
• react-scripts 3.4.4
• Formik 2.2.1

ありふれているけれど難しい「入力フォーム」の世界

　入力フォームは、多くのWebアプリケーションで採用されるUIパターンです。ログインフォームのように少ない情報を扱うものから、国勢調査のように多くの情報を扱うものまで、インターネット上にはさまざまな入力フォームが存在します。

　一般に、多くの条件分岐を伴うプログラムは複雑になる傾向にあります。入力フォームの場合は、各入力欄の内容のチェックや項目同士の組み合わせのチェック、それに応じたエラー表示の変更といった、バリデーション処理で条件分岐が増加する傾向にあります。項目数の多い入力フォームは、システム開発の中で頻出するパターンである一方、常に一定の難しさがある侮れない機能なのです。

　Reactを導入している場合、宣言的UIの恩恵によって、いくらか複雑さは低減されます。UIとデータを切り離して、データ側で状態管理を行うことに、ある程度専念しやすくなるためです。とはいえ、Reactを使っていたとしても、条件分岐が多くなればプログラムは次第と複雑になっていきます。

　この問題を解消するため、入力フォームの管理に特化したReact向けのライブラリが開発されています。代表的なものとして、次のものがあります。

• Formik
• React Final Form
• React Hook Form

　どのライブラリも基本的な機能についてはおおむね同じことができますが、それぞれの特長もあるので、簡単に解説しておきましょう。

　Formikは、完全にReactコンポーネントのために実装されたライブラリです。Reactが持つ状態管理の機能を十二分に扱えるように実装されています。React Final FormはFinal Formという入力フォーム向け状態管理ライブラリを元にして、Reactコンポーネントから扱いやすいようにインターフェースを整えたものです。コアライブラリがReactから独立しているのもあって、サードパーティのライブラリ一覧を見ると、VueやWeb Components向けのインターフェースも存在していることがわかります。

　React Hook Formはこれらの中では最後発のライブラリです。その名前の通り、状態管理のインターフェースはReact Hooksにより作られています。FormikやReact Final Formは、入力欄の onChange属性とvalue属性を使ってフォームの状態を随時監視する「制御されたコンポーネント」と呼ばれる方式で状態管理を行っていましたが、React Hooks Formの場合は状態管理をDOM自身に任せる「非制御コンポーネント」の方式で入力フォームを扱えるのが大きな特長です。

　本記事では、Formikについて解説します。本記事で雰囲気をつかめたら、日本語ドキュメントがあるReact Hook Formにも挑戦して、使用感を比べてみるのもよいでしょう。

Formikとは

　Formikは、Formium社が開発している、入力フォーム開発支援ライブラリです。

図1：Formik

　Formikには2つの側面があります。

• UIライブラリ: 入力欄やエラーメッセージのUIコンポーネントを提供する
• 状態管理ライブラリ: バリデーション等で発生する条件分岐の複雑さを管理する

　手早く入力フォームを組み上げたい場合には、UIライブラリとしての側面が役立ちます。また、状態管理ライブラリとしてのFormikは、Formik以外のUIライブラリが提供する入力欄とも組み合わせることができます。本記事では、実用上の汎用性が高い、状態管理ライブラリとしての側面に特に着目して解説します。

セットアップ

　使い方の解説を始める前に、まずは動作確認の環境作りをしましょう。本記事ではCreate React Appで動作環境を作ります（リスト1）。

［リスト1］動作確認用のプロジェクトを作成する

$ npx create-react-app formik-sample

　次に、formikをインストールします。

［リスト2］formikをインストールする

$ npm install formik --save

　これでセットアップは完了です。