Laravel v8.23.1 (PHP v8.0.1)をUbuntu 20.04.1 LTSにインストールする
転職が決まり次の会社ではPHPやLaravelを使用するということで手持ちのUbuntu機にインストールしてみた。
PHPをインストールする
以下のコマンドを順にconsoleに打っていけばおｋ。
$ sudo apt install software-properties-common $ sudo add-apt-repository ppa:ondrej/php $ sudo apt install php8.0
それぞれのコマンドの解説
sudo apt install software-properties-common
これは次のコマンド
add-apt-repository
を使用するためのコマンドです。
sudo add-apt-repository ppa:ondrej/php
リポジトリの追加です。 aptでパッケージをインストールする際、オフィシャルリポジトリを参照してパッケージを探しますが、そこにパッケージがない場合手動でリポジトリを追加する必要があります。 phpの諸々のパッケージはppa:ondrej/php というレポジトリにあるっぽいです。
sudo apt install php8.0
php8.0をインストールです。
Composerをインストールする
ComposerとはPHPのパッケージ管理システムのことです。 RubyでいうGemとかbundlerのポジションですね。
以下のコマンドを順に（以下略
$ sudo apt install curl php-cli php-mbstring git unzip php-xml
$ php -r "copy('https://getcomposer.org/installer', 'composer-setup.php');"
$ php -r "if (hash_file('sha384', 'composer-setup.php') === '756890a4488ce9024fc62c56153228907f1545c228516cbf63f885e036d37e9a59d27d63f46af1d4d07ee0f76181c7d3') { echo 'Installer verified'; } else { echo 'Installer corrupt'; unlink('composer-setup.php'); } echo PHP_EOL;"
$ php composer-setup.php
$ php -r "unlink('composer-setup.php');"
これで一通りのインストールは完了です。 ただこのままだとコンソール上で
$ composer ~~~
みたいなコマンドが打てない（PATHが通っていない）ので、以下のコマンドをコンソールに打ち込んでいきましょう。
$ sudo mv composer.phar /usr/local/bin/composer $ sudo chmod +x /usr/local/bin/composer $ composer --version
最後の--versionでちゃんとバージョン情報が出てきたらおｋです！
参考
UbuntuにComposerをインストールするにはこんな風に｜たのしいWeb
Laravelをインストールする
大体このドキュメントに記載されています。 インストール 8.x （再翻訳中）Laravel
今回は上記ドキュメントの「Composerでのインストール」を参考にしています。
こんなコマンドを打っていきましょう。
$ composer create-project laravel/laravel hogehoge $ cd hogehoge $ sudo composer install $ php artisan serve
ここのhogehogeには好きなプロジェクト名を入れましょう。 今実行しているディレクトリにhogehogeディレクトリが新たに作成され、その中にLaravelの必要なファイルが保存されていきます。
$ sudo composer install
はRailsでいうbundle installです。 これしないとvender/以下のファイルが作られずエラーになります。 詳しくはその他余談で。
$ php artisan serve
はサーバの起動コマンドですね。 Railsでいうrails sです。
うまく行くとこんなログが出てくると思います。
[Wed Jan 20 20:16:08 2021] PHP 8.0.1 Development Server (http://127.0.0.1:8000) started
そしたら
にアクセスしてページがちゃんと表示されるか確認してみましょう〜！
だがしかし！多分表示されません！
No application encryption key has been specified.
こんなエラーが表示されるかもです（自分のときはこれでした）。 encryption keyが未設定です！みたいなエラーですね。 encryption keyを作りましょう。
$ php artisan key:generate $ php artisan config:cache
そしたら晴れてこーんなページが出てくると思います。
これで完了です！
参考
No application encryption key has been specified.となったときの対応方法 - Qiita
その他余談
最初Laravelのサーバを起動しようとしたとき、また別の原因でうまく行きませんでした。 これ、結構分かりづらくて、最初php-xmlをapt installしないまま進めてたんですね。 そしてcomposer installもしていませんでした。
そしたらphp artisan serveしたらこんなエラーが出ました。
PHP Fatal error: Uncaught Error: Failed opening required '/home/sawadango/code/laravel_test_in_local/vendor/autoload.php' (include_path='.:/usr/share/php') in /home/sawadango/code/laravel_test_in_local/artisan:18
vender以下のautoload.phpが読み込めないぞというエラーですね。 そしてディレクトリ見てみるとvenderが丸々無い！
このエラーの解決方法がconposer installすることなので、
$ sudo composer install
してみると、今度は
No lock file found. Updating dependencies instead of installing from lock file. Use composer update over composer install if you do not have a lock file.
となり、その下のProblem1に
phpunit/phpunit[9.3.3, ..., 9.5.x-dev] require ext-dom * -> it is missing from your system. Install or enable PHP's dom extension.
と表示されていました。 PHPのdomのなんちゃらが無いみたいなエラーです。
これを解決するためには
$ sudo apt install php-xml
すればおｋです。 php-xmlにext-domとかが含まれてるみたいです。
参考 laravel - PHP7 : install ext-dom issue - Stack Overflow
再度
$ sudo composer install
したら起動すると思います。 （そしてNo application encryption key has been specified.エラーが出ると思います）
最後に
ずっとRails使ってきたのですがRailsより大変では・・・？
なかなかまとまったドキュメントが無かった（あんま探してないけど）のでサラッと作ってみました。 再現しなかったら申し訳ないです。
誰かの参考になれば！
いらないパソコンにDebian 10.0.7(buster)をインストールしてログインするまでのお話
タイトルのとおりです。
フィヨルドブートキャンプに入ったのですが、そこでDebianをインストールしてみろ！みたいな課題があります。
さくらVPSとか借りてインストールすることを推奨されていますが、たまたま実家に大学時代に買ったノートパソコンが眠っていたので、そのパソコンにDebian 10.0.7(buster)をインストールしてみました。
今回はGUIはインストールせずCUIのみのインストールです〜。
目次
- 使用環境
- まずDebianのisoファイルをダウンロードする
- USBのデータを消しとく
- Debianインストール用のUSBインストールメディアを作る
- BIOSでbootの優先順位を変更する（USBを一番にする）
- 案内に従ってDebianをインストールしてく
- ろぐいーーん！！！
- アーカイブミラーが選択できないことにより発生した各種問題の解決
使用環境
インストールメディア作成用の適当なパソコン
→今回はUbuntu 20.04.1 LTSが入ったパソコン使いました
→別にWindowsでもMacでも適当なパソコンで大丈夫そう
→いらないパソコンで作ってもよさそう
いらないパソコン
→今回はWindows 8.1が入ったLenovo G510っていうノートパソコンを使いました
→データとか全て消えます（パーティションとかうまいことやったら消さずに済むかも？です）
→せっかくWindows入ってるのにもったいない・・・とちょっと思いましたが、調べてみると8.1のプロダクトキーは1,000~2,000円くらいで買えるみたいなのでまぁいいかなって感じです（てかどうせWindowsあんま使わないし）
→Windows 10とかでもまぁ似たような金額だと思います。
わからないことを調べる用のパソコン
→Debian入れるときはいろいろとつまづいてググりまくる必要があるので、それ用のパソコンを用意しときましょう（わしはインストールメディア作成用パソコンを使って調べものしました）
→適当なやつで大丈夫だと思います
→8~16GBくらいあれば大丈夫です（わしは16GBを用意しました）
→データ全部消えるので中身のデータはどっかに移しときましょう
まずDebianのisoファイルをダウンロードする
OSをインストールする用のファイルでよく使われるのがISOイメージファイルってやつです。
参考
Debianの公式サイトでDebianインストール用のISOファイルが配布されているのでそれをダウンロードしてUSBに書き込んでいきます。
Debian公式サイト
ちょっと分かりにくいですが、この画面のamd64っていうリンクからダウンロードできます。
amd64以外にもいろいろありますが、これはインストールするパソコンのプロセッサ（CPU）のアーキテクチャで変わってくるみたいです。
が、わりと新しめの普通のパソコンならamd64でいいと思います。
（自分のパソコンのプロセッサとかいろいろ調べてみて、以下のリンクから適切なやつ選んでください）
USBのデータを消しとく
念の為データは消して空の状態にしときましょう。（このステップは要らないかも？）
これは結構時間かかるので進捗確認する方法を知っておきましょう。
コンソールで別タブ開いて
$ sudo pkill -USR1 dd
でddを実行中のタブの方に進捗が出てきます。
Debianインストール用のUSBインストールメディアを作る
このUSBのことをブータブルUSBなんて言ったりするみたいです。
ISOファイルのダウンロード終わったら早速ブータブルUSB作っていきます。
Windowsの場合
WindowsだとRefusっていう無料ソフトがあって、それ使うとブータブルUSBが秒で作れます。（Ubuntu入れるとき利用しました）
Rufus 使い方 とかでググってみてください。
だけどRed HatがRed Hat Enterprise LinuxのブータブルUSB作成方法を書いてるページではFedora Media Writerってやつを使うことを推奨してます（使ったこと無いのでわからん）。
Windowsの方は調べてみてください〜（丸投げ）
Linuxの場合
ありがたいことに↑のページにLinux（Ubuntu）の場合のインストール方法も書いてあります。
まぁ〜案内に従ってやっていけば大丈夫だと思います。
4のddコマンド使ってISOファイルをUSBに書き込むところで、/image_diretory/image.isoにダウンロードしたISOイメージファイルの完全パスをいれてくださいとあります。
完全パスの調べ方は、例えばdebian-10.7.0-amd64-netinst.isoっていうファイルをダウンロードした場合、
$ locate debian-10.7.0-
とかで出てくると思います。
debian-10.7.0-のところにはダウンロードしたファイルの最初の何文字かをいれるって感じです。
このddコマンドでの処理はすぐに終わると思いますが時間がかかっていたらUSBのデータ削除のところでやった進捗確認コマンドをやって確認してみてください。
BIOSでbootの優先順位を変更する（USBを一番にする）
Debianインストール用のいらないパソコンにさっき作ったUSBを差します。
パソコンの起動時、F2キー（パソコンによってはF2+fnなど）をポチポチ押してるとBIOSが起動できます。
（BIOSって何？って方へ）
BIOSの説明はこんな感じです。
ここでbootのpriorityを変更していきます。
bootのpriorityとは、まずパソコンが起動したときにどのデバイス（の起動用ファイル）を見に行くかの優先順位になります。
基本的にはHDD(SSD)が一番優先順位が高くなっていて、そこにWindowsとかが入っているのでいつもパソコンを起動すると勝手にWindowsが起動するって仕組みになっています。
今回はWindowsの入っているHDDよりも先にUSBを読み込んでほしいので優先順位を変えていきます。
変え方はお使いのパソコンで違うと思うので「BIOS boot 変更 (お使いのパソコンのメーカー)」とかでググってみてください。
ちなみにLenovoのG510の場合、BootModeをLegacyに、Boot PriorityをLegacy Firstに、下らへんにデバイス一覧が出てくるのでUSBにカーソルを合わせてF6+fn(だったっけ?)でUSBを一番上にすれば大丈夫でした。
案内に従ってDebianをインストールしてく
ここまで来たらあともうちょいです！
以下のリンクの内容に従ってインストールを進めていきましょう。
（このサイトではDebian 8.0 Jessieを扱っていますが、Debian 10.7.0でもほとんど同じ手順でした）
ちなみにこのJessieとか、Debian 5.0系だとlennyとか名前がついていますが、これは開発用コード名で実はトイストーリーのキャラクターにちなんでるんだって！おもしろいね！（開発用コード名はまぁそんなに気にしなくてOKです）
！！！詰まりポイント！！！
上記のURLの案内に従ってインストールを進めていけば基本的に大丈夫なんだけど、詰まりポイントが２つあったのでご紹介します。
1. ネットワークの設定がよくわからんかった！
まず機器を聞かれて、Lenovo G510はイーサネット（有線）とWi-Fiの両方がハードとして備わってたんだけど何故かWi-Fiのほうがうまく認識されず・・・。
そしてイーサネットでもなんか「ネットワークの自動設定に失敗しました」みたいになっちゃった。
対処法としては一回「戻る」とか押してDebianインストーラメインメニューに戻って「ネットワークの設定」を選択しよう。
次に「ネットワークの設定方法」で「ネットワークの自動設定を再試行」をすると自分の場合なぜかうまく行きました。
このインストールの段階でネットワークの設定ができないとCUI上で設定はだいぶキツいのでがんばりましょう。
（私は一回ネットワーク設定なしでインストールを終わらせ、ネット環境が構築できずに詰んで再インスコしました）
Debian 3.0系のちょっと古い資料ですが、以下の６ページあたりに似たようなことがかいてあります。（資料中では「ネットワークを手動で設定」を選択していますが、このときに「ネットワークの自動設定を再試行」をやったらうまく行きました）
https://ftp.orca.med.or.jp/pub/receipt/sarge_install/sarge_install-0.3.pdf
ここらへん、あんまりググっても情報が出てこなかったんですよね（多分調べ方が悪い）。
また時間あるときに調べてみます。
2. アーカイブミラーが使えない！
これですね。
この記事はDebian 7.0のものですが10.0系でも同様の現象が起きました。
インストール進めていくとアーカイブミラーを選択できるフェーズに行くんですが、どれを選んでも「正しくないアーカイブミラーです」となってしまいます。
どうやらアーカイブミラーのサポートが終了してしまっているみたいです。
そもそもアーカイブミラーとはなんぞやというところなんですが、正直私もあんまり分かっていません・・・。
各種設定が済んだDebianを利用できる、みたいな感じだと認識してます。
以下のサイトとか見てみるといいかもです。
ミラーを選択できないと最小パッケージでのインストールとなり、インストール後のCUIが文字化けしたりパッケージをダウンロードできなかったりします。
（ミラーを選択できたらここらへんが直るのかは自分で試していないので断言できないですが・・・）
致し方ないのでミラーは選択せず次に進んでいき、インストールを終えましょう。
先述の通り文字化け問題やパッケージダウンロードできない問題が発生するので、CUIでDebianにログインできた後に解決していきましょう（記事の一番最後らへんに解決策書いていきます）
ろぐいーーん！！！
すべて終わるとこの画面になるので、Debianインストール時に設定したユーザ名とパスワード入力してログインしましょう！
パスワードは入力しても文字は表示されませんがちゃんと入力されてますので打ち終わったらEnterを思いっきり叩きましょう。
ただ、このままだといろいろと使い勝手が悪いのでいろいろとセットアップしたほうがいいと思います。
これはまた別記事で。
アーカイブミラーが選択できないことにより発生した各種問題の解決
文字化け問題
/etc/bash.bashrcにコードを書き足しましょう。
参考
パッケージダウンロードできない問題
sources.listが最低限になってしまっているからですね。
sources.listはパッケージをダウンロードする先を記載してあるファイルなんですが、ダウンロード先の記載が最低限になってしまっているので、もっといろんなところからダウンロードしてきて！と変更する感じです。
sources.listの説明はこちらとかがわかりやすいと思います。
というわけで修正していきましょう。
# vi /etc/apt/sources.list
して
deb http://deb.debian.org/debian buster main contrib non-free
deb-src http://deb.debian.org/debian buster main contrib non-free deb http://deb.debian.org/debian-security/ buster/updates main contrib non-free
deb-src http://deb.debian.org/debian-security/ buster/updates main contrib non-free deb http://deb.debian.org/debian buster-updates main contrib non-free
deb-src http://deb.debian.org/debian buster-updates main contrib non-free
と記載しましょう。
sources.listはこの６行だけで大丈夫です（他の部分は消して大丈夫です）。
参考
以下のページの「Example sources.list」の「If you also need the contrib and non-free components....」の下のところですね。
ちなみに今回はパッケージをダウンロードする先にcontribやnon-freeも指定しています。
contribやnon-freeの説明はこちらとか見るといいかもです。
終了です。
おつかれっした！
調べ方が悪いのかあんまりドンピシャな情報が出てこずなかなか苦戦しました。
何か手がかりにでもなれば幸いです。
間違ってるところとかあればご指摘いただけると〜！
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の紐づけだが、これもまたわりとすぐできそうな気もする。
まとめ
なんだか完成しそうでできないもどかしい時間が続いております。とりあえず簡易的でも一通り使えるように骨組みだけは完成させて、一つずつ機能を拡張していくことにします。
早急に、人様に遊んでいただける状態までには、なんとかもっていきたい。
明日からも頑張ります。
絶望のReact
今日３時間近く頑張ったのにも関わらず全く進捗が出なかったからその反省。
反省点その１
基礎ができていない！！！！！！！
React以前の問題でJSのimportやexportであったり、Reactでもモジュールごとにファイルを分けた場合のpropsの挙動、複数のクラスコンポーネントで複数のstateを管理した時の挙動などについて、基礎を疎かにしたせいで基本的な挙動が想像できないので、いちいちconsole.logしてどこにどんな値が入るかを実験していた。
これにかなり時間を取られてしまった。
その２
思考の停止。
一回うまくいかなかったことを、なんでだろうと思いながらも全く同じやり方で繰り返し試していた。頭が回っていない。
その３
その１と被るがReactのlifecycleやReduxによるstateの管理（qiita等でやりたいことを調べると基本Reduxとセットになっている）などの知識がないので、コンポーネントをそれぞれの機能ごとに作るには作れるけども、うまいこと噛み合せることができない＝自分のやりたいことを達成できない。
特にstateについてだが、どうやってバケツリレーしているかが追いきれていない感ある。
これからの方向性
についても、悩んでしまった。
現在、
firebaseによるメール・パスワードログイン機能
↓
react-routerによるログイン画面とホーム画面のrouting
↓
勤怠管理アプリをもう少し機能的にする
↓
firebaseを使ってデータの保存、ユーザーとデータの紐付け
↓
CSSを適当につけて、かっこよくする
といった順番で進めていこうかと思っていたが、今偶然twitterで、「未経験プログラマは適当な管理画面を作成し、簡単なCRUD機能を実装できたら十分だ！」なんて記事が回っていてだいぶ心がぐらついた。それくらいならすぐできそうな気もする。が、また最後まで完成させずに次に行ってしまうといつまでたってもポートフォリオが完成しないので、ここはグッとこらえて当初の計画通り修羅の道を歩んでいきたいと思う。
正直この計画を達成して作品を完成させることができる頃には、だいぶReactを使いこなせるようになってると思うので、ちょっと苦しいけどなんとか完成までこぎつけたい。とりあえず５月中には。
現時点でのわからないリスト
・ Reactのlifecycle
レンダリングされる前にstateをセットするとかなんとかが、よく理解できていない。逆にこれを理解できたらかなり思い通りにReactを操れると思うので頑張る。
・ react-routerによるページ遷移
componentを分けてLinkとRouteを使うと上手いこといってくれない。Link使うと確かにURLは変化するものの、Routeが拾ってくれないので画面遷移しない。
・ renderとは
色々なサンプルコードを見てると、renderのなかで条件分岐していたりする。（renderの中ではreturnでDOMを生成するかcomponentを呼び出すしかできないと思っていた。）renderを今一度理解されたい。
・ this.props.children
なんやこれはァ！！！！！！！！！
・ 最適な設計
色々サンプルを見ていると、どうやらroutingについてはシンプルなJSファイルでやってる。コンポーネントっぽくしていない。いや、コンポーネントだ。routingを一つにまとめる設計について、造詣を深めたい。
こうして言語化してみると、あれ、なんだか理解できないこともない気もしてくる。頭の中が整理された感じ。明日は頑張る。
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、それ以外のことはこのブログで報告したいと思います。
また、この記事は「目次」のようにしていきたいので、新たな記事の投稿とともに随時この記事も更新していきます。みなさんよろしくお願いします。
以下、我がクソコード
