ReactJS - 制御コンポーネント：初めての人向けガイド

こんにちは、未来のReact開発者さんたち！今日は、ReactJSの制御コンポーネントの世界に楽しく飛び込みます。プログラミングが初めてでも心配しないでください。私はあなたの親切なガイドとして、一歩一歩進めていきます。このチュートリアルの終わりまでに、プロのようにフォームを作成できるようになるでしょう！

ReactJS - Controlled Component

制御コンポーネントとは？

まず、シンプルな類似を考えてみましょう。あなたが高級レストランでカスタムピザを注文したいとします。このシナリオでは、あなた（Reactコンポーネント）がピザ（フォームデータ）に何を載せるかをコントロールしています。トッピングを追加または削除したい場合は、ウェイター（状態）に伝え、彼らが注文を更新します。これがReactの制御コンポーネントが基本的にどのように働くかです！

Reactの用語では、制御コンポーネントとは、その値がReactによってコントロールされる入力フォーム要素のことです。DOMがフォームデータを処理するのではなく、Reactが取って代わります。

制御コンポーネントを使用する理由

真実の一元化源：すべてのフォームデータはコンポーネントの状態に保存されます。
即時入力アクセス：入力値をすぐにアクセスできます。
より多くのコントロール：入力データを簡単に操作および検証できます。

では、コードに手を付けてみましょう！

単一入力の制御コンポーネント

まず、シンプルな例で始めましょう。ユーザーに挨拶するテキスト入力フィールドです。

import React, { useState } from 'react';

function GreetingInput() {
const [name, setName] = useState('');

const handleChange = (event) => {
setName(event.target.value);
};

return (
<div>
<input type="text" value={name} onChange={handleChange} />
<p>Hello, {name}!</p>
</div>
);
}

export default GreetingInput;

これを分解してみましょう：

useStateをReactからインポートして、コンポーネントの状態を管理します。
状態変数nameとそのセット関数setNameを作成します。
handleChange関数は、入力が変わるたびにname状態を更新します。
JSXでは、入力のvalueをnameに設定し、onChangeイベントをhandleChangeに結び付けます。
現在のnameの値を使用して挨拶を表示します。

これが制御コンポーネントの本質です。Reactは状態を通じて入力の値をコントロールします。

自分で試してみよう！

入力フィールドにあなたの名前を入力してみてください。挨拶が即座に更新されるのを見てください。これが制御コンポーネントの魔法です！

シンプルなフォームの作成

基本を理解したところで、複数の入力フィールドを持つより複雑なフォームを作成してみましょう。

import React, { useState } from 'react';

function PizzaOrderForm() {
const [order, setOrder] = useState({
name: '',
size: 'medium',
toppings: []
});

const handleChange = (event) => {
const { name, value, type, checked } = event.target;

if (type === 'checkbox') {
if (checked) {
setOrder(prevOrder => ({
...prevOrder,
toppings: [...prevOrder.toppings, value]
}));
} else {
setOrder(prevOrder => ({
...prevOrder,
toppings: prevOrder.toppings.filter(topping => topping !== value)
}));
}
} else {
setOrder(prevOrder => ({
...prevOrder,
[name]: value
}));
}
};

const handleSubmit = (event) => {
event.preventDefault();
alert(`Order placed! Name: ${order.name}, Size: ${order.size}, Toppings: ${order.toppings.join(', ')}`);
};

return (
<form onSubmit={handleSubmit}>
<input
type="text"
name="name"
value={order.name}
onChange={handleChange}
placeholder="Your Name"
/>
<select name="size" value={order.size} onChange={handleChange}>
<option value="small">Small</option>
<option value="medium">Medium</option>
<option value="large">Large</option>
</select>
<label>
<input
type="checkbox"
name="toppings"
value="cheese"
checked={order.toppings.includes('cheese')}
onChange={handleChange}
/>
Cheese
</label>
<label>
<input
type="checkbox"
name="toppings"
value="pepperoni"
checked={order.toppings.includes('pepperoni')}
onChange={handleChange}
/>
Pepperoni
</label>
<button type="submit">Place Order</button>
</form>
);
}

export default PizzaOrderForm;

これは多くのコードですね！でも心配しないで、一歩一歩説明します：

状態オブジェクトorderを作成し、すべてのフォームデータを保持します。
handleChange関数はもっと複雑です。異なる入力タイプを処理します：

テキストとセレクト入力の場合、対応するプロパティを状態に更新します。
チェックボックスの場合、トッピングを配列に追加または削除します。

handleSubmit関数は、デフォルトのフォーム送信を防ぎ、注文の詳細を表示するアラートを表示します。
JSXでは、名前、サイズ（セレクトとして）、トッピング（チェックボックスとして）の入力を作成します。
各入力のvalue（またはチェックボックスのchecked状態）はorder状態によってコントロールされます。

制御フォームの力

この設定により、フォームデータを完全にコントロールできます。検証を追加したい場合は、handleChange関数を修正するだけです。データを送信前に変換したい場合は、handleSubmit関数を更新します。可能性は無限です！

制御コンポーネントの一般的なメソッド

制御コンポーネントで使用される一般的なメソッドをまとめましょう：

メソッド	説明
`useState`	コンポーネントの状態を管理するためのフック
`onChange`	入力が変わる際のイベントハンドラ
`onSubmit`	フォームが送信された際のイベントハンドラ
`preventDefault`	デフォルトのフォーム送信動作を防ぐ
`event.target.value`	入力の現在値を取得
`event.target.checked`	チェックボックスのチェック状態を取得

結論

おめでとうございます！Reactの制御コンポーネントについて学びました。単一の入力から複雑なフォームまで、そしてピザ注文フォームまで作成しました（私も饥えてきました！）。

制御コンポーネントは、フォームデータを正確に管理するための力をあなたに与えます。最初は多くの労力が必要かもしれませんが、得られるコントロールと柔軟性は価値があります。

Reactの旅を続ける中で、制御コンポーネントを使用する無限の方法を見つけるでしょう。ブログエディターやユーザー登録フォーム、甚至是してピザ配達アプリ（私に割引コードを送ってください！）を作成することもできるかもしれません！

練習を続け、好奇心を持ち、ハッピーコーディングを！

Credits: Image by storyset

前のチュートリアル:

ReactJS - フォームプログラミング

次のチュートリアル:

ReactJS - 非制御コンポーネント