Reactに入門して勤怠管理アプリを作成しよう
TL;DR
ついにReactを学び始め、とりあえず何か動くものを作ろうと心に決めたsawada。しかし、思い浮かぶアイデアはどれも非現実的なものばかりで断念。
結局なんの面白みもない「勤怠管理のウェブアプリ」を作ることにした。
果たして、寿命が尽きる前に完成するのだろうか・・・（遠い目）。
この記事の目的（真面目）
・ 現状を整理するため（現時点で何を作れたのか、何を理解したのか）
・ Reactのチュートリアルを一通り学び、自分で何か作ろうと思ってる人の参考になれば・・・
前提知識
前提知識というよりも、自分が何となく理解しているものをとりあえず羅列する。
1. HTML,CSS（リファランスググって適当な実装ができる）
2. JavaScript（ドットインストールで紹介されてるようなちょっとしたミニアプリが作れる）
3. railsで簡単なアプリが作れる（CRUD、routingあたりの理解）
4. Reactの基礎（コンポーネントの概念、データの受け渡し等々）
5. JSXの書き方（正直JS部分は{}で囲むくらいしか分かってない）
他にも広く浅く知識を持っている気もしますが、とりあえず今作ってるアプリ作成のために必要な知識はこれくらいでした。
開発環境
この記事に従ったら、一通り環境構築できました。大感謝。
現状
実際の画面（画質は荒い）
ボタンは左から
「出勤」
「退勤」
「勤務時間の計算」
「残業時間の計算」
「勤務時間の修正」となっております。
主な機能としては以下のものになります。
1. 「出勤」ボタンを押すと、押した時点の時刻が「出勤時間」テーブルに打刻されます。
2. 「退勤」ボタンを押すと、押した時点の時刻が「退勤時間」テーブルに打刻されます。
3. 「勤務時間の計算」ボタンを押すと「勤務時間」が表示されます（「退勤時間」ー「出勤時間」）。
4. 「残業時間の計算」ボタンを押すと「残業時間」が表示されます（「規程された労働時間（デフォルトでは１秒）」ー「勤務時間」）。
5. 「勤務時間の修正」ボタンを押すと修正用のフィールドが表示されます。
※ 開発の都合上、時間は全て「分：秒」ですが、最終的には「時：分」単位に変えようと思っています。
現時点での問題点
1. 「退勤時刻」ー「出勤時刻」が「勤務時間」と一致しない（ミリ秒単位で計算しているため）。
2. コードが入り組んでおり、可読性が極めて低い。
１については、また別の記事で触れたいと思います。
２については、コンポーネント単位でファイルを分けたらちょっとはマシになりそう。
これから実装したいこと
1. 「勤務時間の修正」ボタンの機能（現時点ではまだ機能してない）
2. ログイン画面
3. 30日分のテーブルをあらかじめ表示しておく
4. 管理者のみが時間の修正をできるようにする
5. 入力情報の永久化（Firebaseの使用）
6. テストを書く
7. TypeScriptの導入
あとは、コードのリファクタリングをしてもっと可読性を上げたい（今のコード、書いてる本人でも読みにくい・・・）。
実装しようとしたけどよくわからないこと
1. cssの導入（そもそもwebpackがよく理解できていない。）
何がわからないのかわからない状態でもある。
ただ今のところ、一回実装しようとしてみて全くのお手上げ状態に陥ったことは少ないので、またそういう壁にぶち当たるたび、ここに記入していきたいと思います。
最後に
とりあえず、現状について整理するためにこの記事を書きました。
これから少しずつ機能を追加していき、何か成功するたびに、技術的なことはQiita、それ以外のことはこのブログで報告したいと思います。
また、この記事は「目次」のようにしていきたいので、新たな記事の投稿とともに随時この記事も更新していきます。みなさんよろしくお願いします。
以下、我がクソコード
