はじめに
Reactの練習で、学習記録アプリを作ってみました。
あくまでReactの練習なので、CSSやDBなどは全く作ってないです。
工夫したことを復習がてら書きます。
リポジトリはこちら
https://github.com/KuroishiTomoki/react-timer-app
環境構築はこちらの記事で書いてます。
https://qiita.com/Tukirukiki/items/2a9d046a5d79e605e62d
工夫したこと
App.jsxには極力タグを書かない
大元のApp.jsxのファイルの中身はこちらです。
return (
<>
<h1>学習記録一覧</h1>
<Input title = "学習内容" value = {content} setValue={setContent} placeholder = "学習記録を記載ください" type="text"/>
<Input title = "学習時間" value = {time} setValue={setTime} placeholder = "学習時間を記載ください" type="number"/>
<InputOutput title="入力されている学習内容" text={content}/>
<InputOutput title="入力されている学習時間" text={time}/>
<RegisterButton onRegister={onRegister}/>
{error && <p>入力されてない項目があります</p>}
<Log records = {records} />
<p>{sumTime} / 1000(h)</p>
</>
)
基本的にコンポーネント化してタグを書かないようにしています。
これがReactのコンポーネント化のメリットなので、使わない手はないです。
特に、
Input 入力欄
InputOutput 入力出力欄
は、2回以上登場するので、その時点でコンポーネント化決定です。
2回以上登場しないかつ 1行のものは コンポーネント化しない
App.jsxでコンポーネント化してないものもあります。
{error && <p>入力されてない項目があります</p>}
<p>{sumTime} / 1000(h)</p>
これらの要素は、1度しか登場しないし、1行でかけるので、コンポーネント化しない判断にしました。
コンポーネント化すると、何をやっているかコンポーネント側を見にいかなくてはならないので、使いまわしたくなったらコンポーネント化したら良いです。
連想配列で渡す
タイトルと時間を、stringの配列ではなく、連想配列で渡すことで、受け取り側でコントロールできます。
const onRegister = () =>{
if(content == "" || time <= 0){
setError(true);
return;
}
else{
setError(false);
}
// 連想配列
const newRecords = [...records, {title:content, time:time}];
setRecords(newRecords);
setSumTime(sumTime + parseInt(time, 10));
setContent("");
setTime(0);
}
受け取る側は、整形がしやすくなります。
<p>{record.title} {record.time}時間</p>
感想
何かを学んだ時は、学んで終わりではなく、自分で何かを作ってアウトプットすることが身につくためには必要だと感じています。
このアプリにはまだまだアップデートする余地はありますが、作り混みすぎると終わりがないので途中時点で記事にしてアウトプットしています。
この、２０％くらいだけどとりあえずアウトプットすると言うことが大切だと思います。
これが仕事だと、２０％で共有して方向性を決める時に役に立ちます。
