React Hooksを最大限利用したFormの実装🔥
2021.10.01追記
記事執筆時点からこの記事の実装についての筆者のスタンスが変わってきたので補足します。伝えたいのは以下です。
プロダクトでフォーム実装を考える際は、React Hook FormやReact Final Formの導入も検討ください。この記事はReactとTSの実装を理解するのには役立ちますが、プロダクト実装に耐えうるかはわからないです。
以下、お気持ちです。
執筆当時、筆者はReactでのフォームの実装は公式にあるようなコントローラブルな本記事の実装一択だ、これが一番拡張性があり、可読性も高い実装だと思っていました(正直視野狭かったですね…)
実際にプロダクトで運用してみると、入力内容の監視を行うとパフォーマンスがめちゃくちゃ悪くなったり、項目を追加させるようなフォームでは秘伝のタレみたいな実装をせざるおえなかったり、結局先に挙げたようなデファクトスタンダードなライブラリを利用するのがよかったんじゃ、、と最近は思ってます😢まだしっかり試せていないですが、機会があればライブラリを組み込んだ実装にチャレンジしてみたいと思ってます。
Reactの実装をプロダクトで採用する機会は増えたと感じてます。この記事にたどり着いた方が、実装についてよりよい検討ができるようにと思い追記しました…!
追記ここまで
Form周りの実装を、React Hooksを最大限利用して管理しやすくしたので軽くまとめます✌
参考になれば✌
最後に全部載せのCodeSandboxのURL載せるので、お急ぎの方はそっちみちゃってください💪
目指すとこ
- 型定義がんばる
- コンポーネントはUIの関心だけ持つ
- inputによくある単位の表示とかも実装
- ラベルをクリックしたらinputにフォーカスする
- requiredなどの入力制約の表現はブラウザ標準のものを利用する
- submitは{プロパティ名: 値, ...}の形式でフォーム全体の値をとれるようにする
- 親コンポーネントから渡ってくるclassNameもちゃんと受け取る
- ラジオボタン、チェックボックスはまた今度🙇
やっていき
※ 全体を通して React.FCX
ってのを使っているのですが、classNameを受け取る際の型定義を省くために React.FC
をカスタマイズしているためこうなってます。
カスタマイズについて知りたい方はこちらみてみてください
※ classNameに指定しているのはemotion/css を代入した変数です。実際の記述部分は「style...」みたいな感じで省略します。
input
Input.tsx
type Props = InputHTMLAttributes<HTMLInputElement> & {
unit?: ReactNode;
};
const Input: React.FCX<Props> = (props) => {
const { className, unit, sizes, ...inputProps } = props;
return (
<div className={${className || ""}`}>
<input {...inputProps} className={input(unit !== undefined)} />
{unit && <span className={unitStyle}>{unit}</span>}
</div>
);
};
export default Input;
// style...
ポイント
-
InputHTMLAttributes<HTMLInputElement>
使うことでinputタグに使えるプロパティの型定義を楽してます - unitはinputタグで一緒に使いがちな「単位」を受け取って表示するために置いてます
-
className || ""
ってとこ、もっと良い書き方ないもんですかね・・・
hooks.ts
export const useInput = (
initState?: string | null,
inputProps?: InputHTMLAttributes<HTMLInputElement>
) => {
const [value, setValue] = useState(initState || "");
const handleChange = (e: React.ChangeEvent<HTMLInputElement>) =>
setValue(e.target.value);
const id = useMemo(() => uuidv4(), []);
return {
...inputProps,
value,
onChange: handleChange,
id
};
};
ポイント
- inputタグに必要なプロパティをすべて返しています。
-
const name = useInput()
<input {...name} />
みたいに流し込むだけで使えます - labelタグのfor(htmlFor)プロパティに指定するときに扱いやすいよう、ユニークなidを付与して返しています。idの発行はuuidというパッケージを利用しています。
- コンポーネントの更新のたびにid作り直すのもあれなので、useMemoしてます
- changeイベントにもちゃんと型定義してます。えらい👏
select
Select.tsx
type Props = SelectHTMLAttributes<HTMLSelectElement> & {
options?: Option[];
};
const Select: React.FCX<Props> = (props) => {
const { options, className, sizes, ...selectProps } = props;
return (
<div className={`${className || ""}`}>
<select {...selectProps} className={select}>
<option value="">選択してください</option>
{options?.map((option) => (
<option key={option.id} value={option.value}>
{option.text}
</option>
))}
</select>
</div>
);
};
export default Select;
// style...
ポイント
SelectHTMLAttributes<HTMLSelectElement>
- 表示するオプションは、必要なデータを受け取ってコンポーネント内で表示してます
-
Option
は、hooksファイルで定義してます。のちほどでます -
<option value="">
でvalue=""
としとかないと、requiredが仕事しない。しらんかった - オプションのマップ時に指定するkey用にidがついてきてます。カスタムフックスがいい仕事してるみたいですね
hooks.ts
export type Option = {
id?: string;
value: string;
text: ReactNode;
};
export const useSelect = (
initState?: string | null,
selectProps?: SelectHTMLAttributes<HTMLSelectElement>,
options?: Option[]
) => {
const [value, setValue] = useState<string>(initState || "");
const handleValue = (e: React.ChangeEvent<HTMLSelectElement>) => {
setValue(e.target.value);
};
const id = useMemo(() => uuidv4(), []);
const optionsWithId = useMemo(() => {
return options?.map((v) => {
if (v.id) return v;
v.id = uuidv4();
return v;
});
}, [options]);
return {
...selectProps,
value,
onChange: handleValue,
id,
options: optionsWithId
};
};
ポイント
- selectタグに必要なプロパティをすべて返しています
- labelタグのfor(htmlFor)プロパティに指定するときに扱いやすいよう、ユニークなidを付与して返しています。idの発行はuuidというパッケージを利用しています。
- 前述の通り、オプション表示の際に指定する必要のあるkeyのために上記同様idを付与して返しています。オプション配列にもともとidがある場合は必要ないと思います。
- コンポーネントの更新のたびにid作り直すのもあれなので、useMemoしてます
- もしバックエンドからオプションの配列を受け取って表示用に整形するとしたら、この中でやるんだと思います
フォームでの使い方
Form.tsx
const Form = () => {
const name = useInput(null, { placeholder: "名前", required: true });
const age = useInput(null, { placeholder: "年齢", type: "number", min: 0 });
const from = useSelect(null, { required: true }, [
{ value: "Tokyo", text: "東京" },
{ value: "Osaka", text: "大阪" },
{ value: "Kyoto", text: "京都" }
]);
const submitValues = useSubmitValues({ name, age, from });
const submit = (e: React.FormEvent<HTMLFormElement>) => {
e.preventDefault();
console.log({ submitValues });
};
return (
<form onSubmit={submit}>
<Label htmlFor={name.id} required={name.required}></Label>
<Input {...name} />
<Input {...age} unit="歳" />
<Label htmlFor={from.id} required={from.required}></Label>
<Select {...from} />
<button type="submit">送信</button>
</form>
);
};
export default Form;
ポイント
- 宣言的?な利用の仕方してます。inputの状態への関心をすべて
name, age, from
のような変数が保持しています - useSubmitValuesを通して{プロパティ名: 値, ...}みたいな形に整形してます。後述しますが名前これじゃなくてよかったかも
hooks.ts
// [TODO] 型つけたい
export const useSubmitValues = (states: any) => {
const values: any = {};
Object.keys(states).forEach((key) => {
values[key] = states[key].value;
});
return values;
};
ポイント
- 受け取ったプロパティのプロパティ名(key)とその値でオブジェクトを生成して返しています
-
useInput, useSelect
では必ずvalueを返しているので成り立ってます。そんな性善説でやってけるのか?valueなかったらどないするんや?なんか制約設けないと破綻しそう - そもそもブラウザのフォーム周りのAPI利用すればこんなことしなくてもすむ気もしています。まあ送信用のデータ整形ポイントということで…
全部盛り
※見た目の調整のために記事内のコードと違う点ちょいちょいあります
※Input,Selectそれぞれで、個人的によく使うsize調整のための実装が入ってますがまあ無視してください
以上です
以上です。
普段からCodeSandboxでuseHogehoge
みたいなカスタムフックを作ってはTwitterで共有とかしてるので、よかったらフォローしてあげてください。フォロワー数で指原を超えるのが夢です
もっとこうしたらいいよ〜とかあれば教えてください!
ちなみに{...name}
みたいな書き方は、よくある規約だと弾かれちゃうんですが、メリットのほうが大きいかなと今のとこ思ってて使ってます。。
観点としてここ漏れてない??みたいなのも是非に〜🙏
お読みいただきあざした!
Discussion