まとめ：フォームと入力
CoddyのReactジャーニー「基本概念」セクションの一部 — レッスン 32/42。
チャレンジ
中級章の要約。入力、ライブフィードバックの確認、クリアという制御された入力（controlled-input）のループ全体を備えたニックネームピッカーを構築します。
- 入力（
id="nick"）を、空の状態で始まるnickステートで制御（controlled）されるようにします。 - 段落（
id="meter"）にはN of 12が表示されます。ここで N はニックネームの現在の長さです（例：Coddyと入力した場合 →5 of 12）。これは保存するのではなく、派生値として計算します。 id="clear"のbuttonはニックネームを空にし、入力ボックスも連動して空にします。
自分で試してみよう
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="styles.css" />
</head>
<body>
<div id="root"></div>
<script type="module" src="main.jsx"></script>
</body>
</html>