React入門 進捗の報告ッス！！！！

TL;DR

意気揚々と勤怠アプリ開発を続けるsawada。

毎日たのしくプログラミングをして、JavaScriptを完全に理解した気持ちになっていたけど・・・・

よく考えてみたら！？？

最後まで完成させた作品が！！！！

ひとつも！！！！ないッ！！？？？

やめて！オリジナルの勤怠アプリ作成なんて中止して、比較的簡単に作れそうなTODOアプリなんかに手を出したら、それはそれでまた迷宮入りしてまでポートフォリオ完成まで遠くなっちゃう！！！！

おねがい、死なないでsawada！あんたが今ここでTODOアプリ作成に手を出したら、名古屋フロントエンドもくもく会のみんなとの約束はどうなっちゃうの？？？

時間はまだ残ってる。ここを耐えれば、勤怠アプリは必ず完成するんだから！！！！

次回！

「sawada、禁断のTODOアプリ作成」

デュエルスタンバイ！

現状

はい。

勤怠アプリ絶対完成させるマン、sawadaです。

というわけで、今できていること、できていないことを整理します。

また、やりながらこれからの指針が固まってきたので、それも整理します。

わかったこと

・firebaseによる認証

firebase.auth().createUserWithEmailAndPassword などを使って、アカウントの新規作成、ログイン、ログアウト、パスワードの変更（変更のためのメールを送る）等の機能を実装できた。

・react-routerによるページ遷移

ページ遷移という言葉が正しいのかわからないけれど、react-routerを使用して、ログインしている場合としていない場合で、ページへのアクセス権を分けることができた。

例えばログインしていない場合、メイン機能のページにアクセスしようとするとログイン画面にredirectされるようにした。

ちなみにログインしているかの状態の取得は

firebase.auth().onAuthStateChanged、

もしくは

firebase.auth().currentUser

を使用すればよい。

これからの指針 

ここでわからないことに入る前にこれからの指針についてまとめます。

アプリの設計としては

まず最初にログイン画面に飛ぶ

→ログインできたら勤怠メインメニュー画面に飛ぶ

→飛んだ瞬間モーダルウィンドウが開いて日付を選択する

→選択後、出勤・退勤ボタンが押せるようになる

→勤怠メインメニューとは別に、一覧表示画面を作成、そこでは1か月の勤怠内容を表示

→一覧表示画面では時間の修正が可能

→時間の修正については管理者権限アカウントのみ可能

といった具合に進めていこうと思います。

わからないこと

・headerをログインしている時としていない時で変更したい

ログイン状態をfirebaseで取得しているため、stateに反映できていない。

firebaseでログインの判別はできるが、headerにそれを反映させるとなると判別した後に再度renderしないといけない。（firebaseでのログインの判別はrenderより遅い？DOMがマウントされてから判別してる？それとも関数を呼び出す位置が単に悪いだけ？

ログインした瞬間にアプリ全体のstateを変更して、そのstateを踏まえたうえでheaderを表示したい。

そのためにはsetStateを利用しなければならない。こういう状況でsetStateを利用するためにはlifecycleの理解が重要。

というところまでなんとなく詰めることができた。

たぶんlifecycle勉強してrenderのタイミングをちゃんとつかむことができたら解決しそう

→　とりあえず完成までもっていきたいので学習コスト高そうなこの内容については後回しにします。

・firebaseのdatabase系を使用して、勤怠に入力した時間を永続化する

これについてはまだ全くノータッチだが、firebase.auth()関連でなんとなくfirebaseの使い方が掴めたので、わりと簡単にイケそうな気もする。

・モーダルウィンドウの設定

モーダルウィンドウという名前だったのは今日初めて知ったが、実際はるか昔からこの機能を実装しようとしていた。

課題となる点はモーダルウィンドウで入力した内容とstateの紐づけだが、これもまたわりとすぐできそうな気もする。

まとめ

なんだか完成しそうでできないもどかしい時間が続いております。とりあえず簡易的でも一通り使えるように骨組みだけは完成させて、一つずつ機能を拡張していくことにします。

早急に、人様に遊んでいただける状態までには、なんとかもっていきたい。

明日からも頑張ります。