概要
Reactで始めてアプリを作成したので、その際の学びを記事にしました。
Reactの学習を始めたばかりのため、間違い等あるかもしれませんが、その際は優しくご指摘・アドバイス等頂けると幸いです。
よろしくお願いします。
対象読者
- これからReactの学習を始めたい方
- 始めてReactでアプリを作ろうと考えている方
本記事の内容
Reactで始めてアプリを作成する際に学んだこと
何をやったのか
大まかに以下の要件を持ったアプリを作成しました。
- 学習時間と学習内容を登録できる
- フォームに入力されている内容を動的に表示する（確認用）
- 登録をしたらフォームが初期化される
- フォームを入力せずに登録ボタンを押すとエラーが表示される
- 記録した勉強の時間を合計して表示する
 |
| 完成品 |
難しかった点
今回苦労した点としては、state でのデータの管理についてです。
今回作成したアプリでは学習内容と学習時間という二つの入力内容があり、それぞれをセットに一つのレコードとして扱わなくてはなりません。
例えば学習内容という一つの入力内容であれば特に悩むことはなく、以下の記述でデータの持ち方を実現できます。
// 学習内容を保持するstate
const [newTitle, setNewTitle] = useState("");
// 入力された値を保存する処理
const handleTitleChange = (e) => {
setNewTitle(e.target.value);
};
// 入力フォーム
<input
type="text"
id="title"
name="title"
placeholder="学習内容を入力"
value={newTitle}
onChange={handleTitleChange}
/>
ただ、今回に関しては入力内容が二つあり、それを一意のレコードとして扱わなければならないため、少し混乱してしまいました。
この点に関しては以下の方法で実現することができました。
// 学習内容と学習時間を保持するstate
const [records, setRecords] = useState([]);
// 学習内容を保持するstate
const [newTitle, setNewTitle] = useState("");
// 学習時間を保持するstate
const [newTime, setNewTime] = useState("");
// 学習内容を保存する処理
const handleTitleChange = (e) => {
setNewTitle(e.target.value);
};
// 学習時間を保存する処理
const handleTimeChange = (e) => {
setNewTime(e.target.value);
};
// 学習内容と学習時間を一つのレコードとして保存する処理
setRecords([...records, { title: newTitle, time: Number(newTime) }]);
学習内容を保持するstate、学習時間を保持するstateに加え、それらを一つの配列として保持するstateの合計3つ用紙する方法です。
ただ、実装し終わった後にもう少しスマートにできてないかと思い色々と思考錯誤した結果、以下のやりかたでも実現できそうです。
const [records, setRecords] = useState([]);
const [newRecord, setNewRecord] = useState({ title: "", time: "" });
const handleInputChange = (e) => {
const { name, value } = e.target;
setNewRecord(prev => ({ ...prev, [name]: value }));
};
自分としてはまだこの辺が曖昧になってしまっているのでさらに学習を深めていきたいと思います。
成長を実感した点
今回のアプリ制作を通してReactの処理の流れをだいぶ追えるようになったと感じています。
具体的には、以下の二点です。
- 定義した関数をどのタイミングで呼び出すのか
-
stateにどのように値が入っていくのかなどです
実際にアプリを0から作ってみないとこの部分の成長は実感できなかったと思うので、成長が感じられてよかったです。
JISOUのメンバー募集中
プログラミングコーチングJISOUではメンバーを募集しています。
日本一のアウトプットコミュニティでキャリアアップしませんか？
気になる方はぜひHPからお願いします👇