はじめに
現在Shopifyのサイト制作を行なっているのですが、スキルアップを狙ってReactを学習中です。
習得の過程で「学習記録アプリ」を作成したので、その経験談を記載します！
今回作成したもの
学習記録アプリの内容
- inputタグを2つ配置（学習内容、学習時間を入力）
- inputタグ2つのうち1つでも未記入だった場合、登録ボタンが押せない仕様
- inputタグに学習内容と学習時間を入力して登録ボタンを押すと、学習記録のリストが追加される
- 記録された学習時間の合計時間をreduce関数で算出
元々サイト制作でちょっとしたJavascriptの記述は行なっていたことと、Udemyの講座でもTodoアプリを作成した経験があったので、こちらのwebアプリの開発は半日程度で完成できました！
開発期間としては自分ではかなり早くできたと思いますが、それでも新しく触るReact言語は難しい…
だけどそれ以上にJavascriptに比べてコードの記述量がめっちゃ少ない！！
そのおかげかミスを発見できるスピードも早い！（気がする）
Reactめっちゃ楽しい！となったのですが、やはりミスが出てきた時の絶望感はありましたし、「これどうやって実装するのか見当もつかない…」っていう過程もあったので、ここからはその紹介をします！
レンダリング地獄
今回アプリの機能としてボタンをクリックしたら配列にリストを追加して、追加された後の配列をmap関数で表示っていうところがあったんですね！
Reactに全く不慣れな僕は、useStateを使用せずに配列に新しいリストを追加してしまっていました（なんのためにReactで記述しているのか…）。
具体的には既存の配列にJavascriptのpushメソッドを使用して、新しい配列を作っていました。
この新しい配列に対してmap関数を使って、学習の記録リストを更新しよう！
と思っていましたが、更新されない！！
そう、原因はuseStateで配列を更新していないからレンダリングされていません！！
そこでレンダリングの起こるタイミングを調べました。
- stateが更新された時（←今回はここ）
- propsが更新された時
- 親コンポーネントが再レンダリングされた時
の３パターンあるそうです！
これに気付かず2時間くらい悩んでいました…
useStateの間違った記述
続いての壁はuseStateです。
配列をuseStateを使用して更新していこうと思っていたのに、初期値として入力していたものは文字列！！！
具体的にはconst [array1 , array2] = useState(””)といった感じです…
本来はconst [array1 , array2] = useState([])と書かなければいけないところを、全く気にしておらず（そもそもこの書き方で動くと思っていました）ここでまた2時間近くロス…
自分なりに調査したところ、useStateの初期値として設定できる型には「文字列」「数字」「配列」「関数」があります！（足りなかったらすいません）
アプリ開発を通して学んだこと
僕は割とHTMLやCSSはパパッと書いてしまって、一通り書き終わってから表示を確認してエラーの箇所を修正する、といった記述をしていました。
僕が慣れていないだけかもしれませんが、JavascriptやReactのミスを見つけるのってめっちゃ時間かかるんですよね…
なのでReactを書くときには1行づつミスの内容に、丁寧に記述しようと思いました！
あと今回はアプリ開発においての苦難の経験を書きましたが、実際にはここに達するまでにも大きな壁がありました。
それはUdemyの講座で使用する環境構築もできなかったということです。
つまりReactを開発する土俵にすら立てていませんでした…
ではこれをどうやって克服したかというと、、、
先輩エンジニアに聞きました（決して自分で解決したわけではありません）。
プログラミング学習においては、よくメンターをつけて学習するのが良いと言われています。
よく聞く言葉ですが、壁にぶち当たった時ほどその言葉の重要性がわかります。
自分で考えることはめっちゃ大事ですが、早く成長したいなら有識者にアドバイスをもらうのが一番ですね！
終わりに
今回無事に学習記録アプリの開発が終わったのですが、やっとスタート地点に立ったという感覚です。
今後もReact周りのスキルアップに励んで、Qiitaへアウトプットをしていきたいと思います！
投稿に対してアドバイスやフィードバックをいただけると、とっても勉強になります。
これからもよろしくお願いいたします！