ReactJS - Formik: Expense Formの構築

こんにちは、将来のReact開発者たち！今日は、Formikという素晴らしいライブラリを使用してReactにおけるフォーム操作の世界に飛び込む興奮的な旅に出かけます。このチュートリアルの最後に、プロ並みのスリムで効率的なフォームを作成できるようになるでしょう。それでは、始めましょう！

ReactJS - Formik

Formikとは？

コードを書く前に、Formikとは何か、そしてなぜReact開発において这么大変革をもたらすのかを理解しましょう。

Formikは、Reactアプリケーションにおけるフォーム操作を簡素化する人気のライブラリです。フォームの状態管理、バリデーション、送信など、面倒な部分を引き受けてくれ、あなたはアプリケーションのロジックに集中できるようにします。

Formikを個人的なフォームアシスタントのように考えましょう。優れたアシスタントが全ての書類をあなたの代わりに処理するように、Formikは全てのフォーム関連のタスクを管理し、あなたは大局を見ることができます。

プロジェクトのセットアップ

まず第一に、プロジェクトをセットアップしましょう。既にNode.jsがコンピュータにインストールされていることを前提としています。インストールされていない場合は、公式のNode.jsウェブサイトからインストールしてください。

ターミナルを開き、以下のコマンドを実行します：

npx create-react-app expense-form-app
cd expense-form-app
npm install formik yup
npm start

これらのコマンドは、新しいReactアプリケーションを作成し、FormikとYup（フォームバリデーションのためのライブラリ）をインストールし、開発サーバーを起動します。

エクスペンスフォームの作成

プロジェクトがセットアップされたので、エクスペンスフォームを作成しましょう。ユーザーが支出の説明と金額を入力できるシンプルなフォームを構築します。

ステップ1: フォームの基本構造

まずは基本的なフォーム構造を作成しましょう。src/App.jsファイルを開き、以下のコードに置き換えます：

import React from 'react';
import { Formik, Form, Field, ErrorMessage } from 'formik';

function App() {
return (
<div className="App">
<h1>Expense Form</h1>
<Formik
initialValues={{ description: '', amount: '' }}
onSubmit={(values, { setSubmitting }) => {
setTimeout(() => {
alert(JSON.stringify(values, null, 2));
setSubmitting(false);
}, 400);
}}
>
{({ isSubmitting }) => (
<Form>
<div>
<label htmlFor="description">Description</label>
<Field type="text" name="description" />
<ErrorMessage name="description" component="div" />
</div>
<div>
<label htmlFor="amount">Amount</label>
<Field type="number" name="amount" />
<ErrorMessage name="amount" component="div" />
</div>
<button type="submit" disabled={isSubmitting}>
Submit
</button>
</Form>
)}
</Formik>
</div>
);
}

export default App;

ここで行われていることを分解してみましょう：

必要なコンポーネントをFormikからインポートします。
フォームをラップするためのFormikコンポーネントを作成します。
フォームフィールドの初期値を設定します。
フォーム送信を処理するためのonSubmit関数を定義します。
FormikのForm、Field、ErrorMessageコンポーネントを使用してフォーム構造を作成します。

ステップ2: バリデーションの追加

次に、フォームにバリデーションを追加しましょう。Yupを使用します。App.jsファイルを以下のように更新します：

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

const ExpenseSchema = Yup.object().shape({
description: Yup.string()
.min(2, 'Too Short!')
.max(50, 'Too Long!')
.required('Required'),
amount: Yup.number()
.positive('Must be positive')
.required('Required'),
});

function App() {
return (
<div className="App">
<h1>Expense Form</h1>
<Formik
initialValues={{ description: '', amount: '' }}
validationSchema={ExpenseSchema}
onSubmit={(values, { setSubmitting }) => {
setTimeout(() => {
alert(JSON.stringify(values, null, 2));
setSubmitting(false);
}, 400);
}}
>
{({ isSubmitting }) => (
<Form>
<div>
<label htmlFor="description">Description</label>
<Field type="text" name="description" />
<ErrorMessage name="description" component="div" />
</div>
<div>
<label htmlFor="amount">Amount</label>
<Field type="number" name="amount" />
<ErrorMessage name="amount" component="div" />
</div>
<button type="submit" disabled={isSubmitting}>
Submit
</button>
</Form>
)}
</Formik>
</div>
);
}

export default App;

ここで追加した内容は以下の通りです：

Yupをインポートし、バリデーションスキーマ（ExpenseSchema）を定義します。
FormikコンポーネントにvalidationSchemaプロパティを追加します。

これで、フォームが送信される前に入力をバリデーションします！

ステップ3: フォームのスタイリング

フォームに基本のスタイルを追加して、見た目を良くしましょう。srcフォルダに新しいファイルApp.cssを作成し、以下のCSSを追加します：

.App {
font-family: Arial, sans-serif;
max-width: 400px;
margin: 0 auto;
padding: 20px;
}

h1 {
color: #333;
}

form {
display: flex;
flex-direction: column;
}

div {
margin-bottom: 15px;
}

label {
margin-bottom: 5px;
display: block;
}

input {
width: 100%;
padding: 8px;
border: 1px solid #ddd;
border-radius: 4px;
}

button {
background-color: #4CAF50;
color: white;
padding: 10px;
border: none;
border-radius: 4px;
cursor: pointer;
}

button:disabled {
background-color: #ddd;
}

.error {
color: red;
font-size: 0.8em;
}

次に、App.jsファイルにこのCSSファイルをインポートします：

import React from 'react';
import { Formik, Form, Field, ErrorMessage } from 'formik';
import * as Yup from 'yup';
import './App.css';

// ... rest of the code remains the same

結論

おめでとうございます！あなたはFormikとReactを使用して機能的なエクスペンスフォームを構築しました。これはFormikでできることの始まりに過ぎません。Reactの旅を続ける中で、Formikは非常に価値のあるフォーム操作ツールになるでしょう。

練習は完璧の proximate です。このフォームを修正したり、新しいフィールドを追加したり、学んだことを活用して完全に新しいフォームを作成してみてください。React開発の世界は広大で興奮するものです。あなたがその一部になるための道筋を歩んでいます！

ハッピーコーディング、そしてあなたのフォームが常にスムーズにバリデーションされることを祈っています！?

Formikメソッドテーブル

以下は、一般的に使用されるFormikメソッドのテーブルです：

メソッド	説明
`handleSubmit`	フォーム送信を処理します
`handleChange`	フォームフィールドの変更を処理します
`handleBlur`	フィールドがフォーカスを失ったときを処理します
`setFieldValue`	フィールドの値を手動で設定します
`setFieldTouched`	フィールドのタッチ状態を手動で設定します
`validateForm`	フォームバリデーションを手動でトリガーします
`resetForm`	フォームを初期値にリセットします
`setErrors`	フォームエラーを手動で設定します
`setStatus`	トップレベルのステータスオブジェクトを設定します
`setSubmitting`	フォームの送信状態を設定します

これらのメソッドは、フォームの行動と状態に対して細かい制御を提供します。Formikに慣れるに連れて、これらのメソッドを使用してより複雑でインタラクティブなフォームを作成するために手を伸ばすようになるでしょう。

Credits: Image by storyset