【じぃの最近其の2】
いろいろやってます〜〜
どうも！こんにちは！
前回の続きで今回は、「React+firebaseでタスク管理アプリ」、「React+firebaseでチャットアプリ」を学習した記録を書いていきます！
vueをやっていたからとはいえ、Reactの記述はまた違うのでそこが苦労しました。
React+firebaseでタスク管理アプリ
1から調べながらやるのは難しいのと時間がもったいないので、Udemyの以下動画を見ながら対応していきました。
https://www.udemy.com/course/firebasereact-hookstypescript-todo/
fierebaseは以前「使ってみたい！」と思い、fierebaseが用意しているサンプルプロジェクトを使ってやってみたのですが、分からない事が多かったので放置していました。笑
しかし、この動画はReactの記述とReactHooks、firebase共に分かりやすく解説しながら進めていくので、
手を動かしながらやると、頭に入っていきやすかったです。
そして出来上がったのがこちらです。
https://udemy-todo-f0672.firebaseapp.com/login
メールアドレスによる認証と、タスクの入力・編集・削除ができるようになっています。
サンプルプロジェクトなので、適当なメールアドレスでアカウント登録してもらうと、実際のタスク登録画面に遷移できます。
（デザインは途中で放棄したので、全然適当です。笑）
firebaseによる、認証・DB連携は思っていたより簡単にすることができました！
あとホスティングもfirebaseなので、そこも簡単です。
しょぼいアプリなので、そこまで記述は多くないので簡単だったとは思いますが、
基礎を学べたので応用もかけられるかなと思っています。
React+firebaseでチャットアプリ
次は、同じツール・環境でチャットアプリの制作をしました。
Udemyがちょうどセールになっており、「Reactで何かいいのないかな〜」と探していたところ、
以下「はむさん」の動画がヒットし、「前回やった内容を復習がてらそのまま使る！」と思いポチりました。
https://www.udemy.com/course/react-firebase/
この動画も分かりやすく、「なぜこの処理をするのか？」、「このような処理を入れないといけないのはなぜか？」
という疑問点を解説してくれるので、理解して進めることができます。
自分はReactではなく、Next.jsで調整してみましたがNext.jsでも問題なく出来上がりました！
んで、今は、、
今は、大工をやっている友人に頼まれた「大工計算アプリ」を作成しています。
正直これは素のJSで全然できるのですが、復習や発見の意味を込めてNext.jsで制作しています。
やっていることは、
- 幅303mmの板、高さ1820mmの板を任意の幅、高さに何枚置けるかを視覚化
- 木材の無駄を省くため、任意の幅・高さが、303mm・1820mmで割り切れなかった際、余りを求めて他使えるところがないか長さを求める
という感じのアプリです。
一旦出来上がりはしましたので、今友人がテスター中になります。笑
このアプリで再発見したこととして、
- 再レンダリングが結構発生している
ということです。
幅と高さを入力するので、レンダリングとしてはinput要素だけと思っていたのですが、
画面にあるほぼほぼの要素が再レンダリングにかかっていました。
おそらく、ReactHooksのuseStateが原因と思いますが、ReactHooksはしっかりと理解できていないので、
今後はReactHooksを理解できるように勉強していきます。
ちょうど今もUdemyのセールなので、ReactHooks系の動画でいいのがあれば購入してみたいと思います。笑
ただ、この2、3ヶ月は大分勉強をしたので、ちょっと燃え尽き症候群が発生しています。
ここで燃え尽きてしまうと、今後勉強するのが難しくなると思うので、少しプログラムは忘れて体を休めようと思います。
それでは、次回もゆたしく〜〜
