はじめに
初めまして！
エンジニアになって数年、今まで本を読むだけでしたが、もっとプライベートで楽しみながら成長したい！自分が学んだ足跡を残していきたい！と思い記事を書きました！
最終的には自在に開発できるようになりたいと思っています。
いろいろな記事を参考にさせてもらっています。
その中でもこれってどういう意味？とかつまづいたところを念入りに書いていこうかと思います。
今回の目的
前回の続きです。今回は「state の管理」。被る部分もあると思いますが、後で振りかえって深掘りするきっかけになるのが理想です。細かく書くと大変なのであっさりめ。
使用したものや事前準備
・Macbook Pro
・Visual Studio Code
主に参考にさせていただいた記事
state管理
Reactのバグの一般的な原因は、冗長な、あるいは重複したstateである。
・覚えたいこと
ーstateを適切に構造化する方法
ーstate更新ロジックをメンテナンスしやすい状態に保つ方法
ー離れたコンポーネント間でstateを共有する方法
stateを使って入力に反応
Reactはユーザー入力に応じてstateの変更をトリガにUIを変更する。
（例）
・フォーム内に文字を入力すると、ボタンが押せるようになる。
・ボタンを押すと、フォームとボタンが非活性になり、Loadアニメーションになる。
・APIのレスポンスが正常に返ってきた時、結果が表示される。
・APIのリクエストに失敗した時、エラーメッセージが表示される。
const [status, setStatus] = useState('typing');
// レンダリングされた時にstateのstatusがsuccessならリターン
if (status === 'success') {
return <h1>That's right!</h1>
}
async function handleSubmit(e) {
e.preventDefault();
setStatus('submitting');
try {
await submitForm(answer);
setStatus('success');
} catch (err) {
setStatus('typing');
setError(err);
}
}
function submitForm(answer) {
// 失敗でエラーをスローする
return new Promise((resolve, reject) => {
setTimeout(() => {
let shouldError = answer.toLowerCase() !== 'lima'
if (shouldError) {
reject(new Error('Good guess but a wrong answer. Try again!'));
} else {
resolve();
}
}, 1500);
});
}
UIを宣言的に考えるために
コンポーネントのさまざまな視覚状態を特定する
さまざまな視覚状態とは、ユーザーが見るUIの状態である。
モックアップを作る時は各状態を基準に用意すると良い。
活用できるのは「storybook」で振る舞いの確認が可能。
例：入力フォームとSubmitボタンを持つFormコンポーネント
・無効状態のSubmitボタン
・有効状態のSubmitボタン
・フォーム入力不可かつLoading状態
・入力フォームとSubmitボタンが非表示になり、テキストメッセージが表示される
・エラーメッセージが表示される
状態変更を引き起こすトリガの決定
トリガには、人間からとコンピュータの入力の２種類がある。変化に応じて対応できるようにstateを設定する。
・人間からの入力：ボタンクリック、入力、リンク遷移など
・コンピュータからの入力：レスポンスの到着、タイムアウトなど
Statusの変化とトリガのフロー図を描くと可視化されわかりやすくなる。
stateは可能な限り少なくする
stateは「動くパーツ」であり、増えれば複雑性が増すため。
stateはリファクタリングの対象とし複雑性を抑える
stateは、同時に発生しない状態同士で管理する考えを持つ。
例えば、エラーメッセージを表示しているときにサクセスメッセージを出すことはない場合、同じstateで制御することを考える。
また、より複雑な場合、state単体で制御しきれないこともある。
あるstateが変更された時テキストのみ表示になる場合、それ以外のコンポーネントの制御のために用意されたstateは意味をなさない。
それぞれのstateの本来あるべき状態を制御するために、useReducerを用いることも考える。
終わりに
視覚状態に応じたモックアップを想定し、入力に対してstateを用意し、用意したstateで状態を制御する。制御した結果が見れるようstorybookも使えるようにしていきたい。
また、stateの制御のためにuseReducerの使用も考えられるようになりたいと思いました。
次