SHOEISHA iD

※旧SEメンバーシップ会員の方は、同じ登録情報(メールアドレス&パスワード)でログインいただけます

CodeZine編集部では、現場で活躍するデベロッパーをスターにするためのカンファレンス「Developers Summit」や、エンジニアの生きざまをブーストするためのイベント「Developers Boost」など、さまざまなカンファレンスを企画・運営しています。

現場で役立つ! React向けライブラリ詳説

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

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

  • X ポスト
  • このエントリーをはてなブックマークに追加

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

  • X ポスト
  • このエントリーをはてなブックマークに追加

対象読者

  • 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コンポーネントのために実装されたライブラリです。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
図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

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

次のページ
基本の使い方

この記事は参考になりましたか?

  • X ポスト
  • このエントリーをはてなブックマークに追加
現場で役立つ! React向けライブラリ詳説連載記事一覧

もっと読む

この記事の著者

WINGSプロジェクト 中川幸哉(ナカガワユキヤ)

WINGSプロジェクトについて>有限会社 WINGSプロジェクトが運営する、テクニカル執筆コミュニティ(代表 山田祥寛)。主にWeb開発分野の書籍/記事執筆、翻訳、講演等を幅広く手がける。2018年11月時点での登録メンバは55名で、現在も執筆メンバを募集中。興味のある方は、どしどし応募頂きたい。著書記事多数。 RSS X: @WingsPro_info(公式)、@WingsPro_info/wings(メンバーリスト) Facebook

※プロフィールは、執筆時点、または直近の記事の寄稿時点での内容です

山田 祥寛(ヤマダ ヨシヒロ)

静岡県榛原町生まれ。一橋大学経済学部卒業後、NECにてシステム企画業務に携わるが、2003年4月に念願かなってフリーライターに転身。Microsoft MVP for Visual Studio and Development Technologies。執筆コミュニティ「WINGSプロジェクト」代表。主な著書に「独習シリーズ(Java・C#・Python・PHP・Ruby・JSP&サーブレットなど)」「速習シリーズ(ASP.NET Core・Vue.js・React・TypeScript・ECMAScript、Laravelなど)」「改訂3版JavaScript本格入門」「これからはじめるReact実践入門」「はじめてのAndroidアプリ開発 Kotlin編 」他、著書多数

※プロフィールは、執筆時点、または直近の記事の寄稿時点での内容です

この記事は参考になりましたか?

この記事をシェア

  • X ポスト
  • このエントリーをはてなブックマークに追加
CodeZine(コードジン)
https://codezine.jp/article/detail/13226 2020/12/07 11:00

おすすめ

アクセスランキング

アクセスランキング

イベント

CodeZine編集部では、現場で活躍するデベロッパーをスターにするためのカンファレンス「Developers Summit」や、エンジニアの生きざまをブーストするためのイベント「Developers Boost」など、さまざまなカンファレンスを企画・運営しています。

新規会員登録無料のご案内

  • ・全ての過去記事が閲覧できます
  • ・会員限定メルマガを受信できます

メールバックナンバー

アクセスランキング

アクセスランキング