Laravel、Vue、Docker、AWS、CircleCIでポートフォリオを作成【参考リンク有】

##初めに##
開発未経験ですが、ここまでやれるぞという想いを胸に2020年9月からこのプロジェクトは始まりました。平日は会社が終わってから力尽きるまで、土日はたまに気分転換もしましたがほぼ終日、年末年始もずっと個人的にアプリ制作に取り組んでいました。世間はコロナで騒いでいる中、私はニュースを見る暇も惜しんで常にアプリの事を考えていました。なので最近の時事ネタは本当にわかりません・・・。時を取り戻したい笑。

本当は去年12月中リリース予定でしたが、見積もりが甘く1ヶ月もリリースが遅くなりました。
今回どういう経緯でアプリ作成に至ったのか、またリリースが遅れた理由、アプリの説明など書いていこうと想います。

##開発環境##
バックエンドはLaravel、フロントエンドにVue.js、そしてDocker, CircleCI, AWSを組み込んでデプロイしました。

##アプリの概要##
アプリは勤怠アプリです。
出退勤や休憩を記録出来、さらに自分が今やっているタスクの時間をカウントし、リアルタイムでメンバーと共有出来るアプリです。

アプリのURL：勤怠App
(※スマホ対応が完了していないので、PCでの閲覧推奨です)

GitHubのURL：https://github.com/gahaku200/master

##インフラ構成図##

##DB設計##

##機能一覧##
・ユーザー登録関連
ユーザー登録、ログイン、ログアウト機能

・ユーザー情報の編集
登録したメールアドレス、ユーザー名、パスワードを変更することが出来る。

・出退勤機能
出勤、休憩入、休憩出、退勤ボタンを有し、それぞれのボタンを押した時間を記録する。

・タスク計測機能
今取り組んでいるタスクをセレクトボックスで選択することが出来る。選択したタスクを1秒ごとに計測し、時間経過を表示させる。また勤務中の全タスクの履歴を表示させる。

・グループメンバーのタスク状況をリアルタイムで反映
グループメンバーが何のタスクをどれくらいやっているのかリアルタイムで表示させる。

・勤怠履歴閲覧、編集
カレンダー形式で勤怠履歴が確認出来、時間の編集が可能。合計勤務時間(時間外や深夜勤務時間など)が自動で計算される。

・タスク履歴閲覧
自身が計測したタスクの履歴を月と日ごとに何時間かかったのか、また全タスクの何％に当たるのかを表示する。

・グループ作成機能
ユーザー登録が完了したら、グループを作成することが出来る。グループの作成者は自動的にAdministratorとなり、グループメンバーの情報を閲覧、操作することが可能になる。

・メンバー招待機能
Administratorはメンバーを招待することが出来る。招待出来るメンバーはユーザー登録しているユーザーかつグループに所属していないユーザーとなる。招待するユーザーの登録しているメールアドレスにメールを送り、届いたメールからユーザー認証の工程を踏むことで、招待されたユーザーはグループのメンバーとなる。

・グループメンバーの閲覧、追放機能
Administratorのみグループメンバーの閲覧、追放が可能になる。さらにメンバーの勤怠履歴とタスク履歴を閲覧することが出来る。

##アプリ作成の経緯##
今回作成した勤怠アプリは以前働いていたコールセンターで使用されていたシステムで、社員800人を一元管理出来ていて、すごいシステムだと興味を持っていました。このシステムをSlackやTeamsなどのメール認証型グループ作成方式にしたSaaSだと面白いのではないかと思い、プロジェクト開始に至りました。

##リリースが遅れた原因##
①DB設計を甘くみていた。
DB設計は以前プログラミングスクールでやったことがあるですが、答えがあったし、周りと相談しながらやれたので苦ではありませんでした。今回は答えがないので、自分で理論立てて抜け漏れがないか考えないといけなかったので大変でした。考えるだけで１日終わり、実際プログラムを書いてみたら当初の設計じゃ問題があることが発覚し、またDB設計のやり直しで時間がかかりました。

②DBの構築を後回しにし、フロントエンドの開発を進めてしまった。
フロントエンドできちんと表示されるかどうかは大事だと思いますが、最終的にはDBの値を表示させなければいけないので、DB構築前のフロントエンドのコードはほとんど書き直しになりました。それだったら最初からDB構築しておいて、フロントエンドのコードを書けば良かったと思っています。

③SlackやTeamsなどのメール認証型グループ作成方式の記事がない
今や主流になっているメール認証型グループ作成方式ですが、当然講座や記事があるだろうと思っていましたが、全然ない・・・。記事探しで1日終わってしまうこともありました。ようやく見つけた英文記事を何個か組み合わせて、時間がかかりましたが何とか作り上げました。これは一番心が折れそうになりました・・・。

参考記事１：https://getstream.io/blog/invite-only-chat-laravel-vue/
参考記事２：https://medium.com/@alicenjoroge707/user-invitation-using-laravel-email-notifications-ef15197ba8e8

④勤怠時間の計測部分が鬼アルゴリズム
勤怠時間を通常時間と深夜時間と残業時間と深夜残業時間に分けて自動で計算するプログラムを作成したのですが、これが鬼アルゴリズムでした。常識的な勤務時間で、普通の勤怠の記録をつけると問題なかったのですが、例えば警備会社の方とは24時間勤務で仮眠休憩で6時間とかいうシフトを聞いたことがあるので、その方々向けの時間計算した時は普通の計算とは違います。if文で条件分岐しまくって、再帰も使いました。これが正しいのかは疑問です。。鬼でした。

⑤dockerを導入するタイミングを完全に間違える
dockerを導入する前に自分のローカルPCでアプリを完成させてからdocker環境に移行させました。するとローカルPCで動いていた状況がdockerだと全然違いました。結局docker環境でやり直しが発生し、時間がかかりました。そもそもdockerは開発環境なので、最初に導入すべきです。僕みたいな愚かな行動は絶対に辞めましょう！

##最後に##
このアプリはまだまだ改良の余地があり、課題は残りますが自分がここまではやりたい最低ラインまで出来て良かったです。結構失敗だらけでここまで進んできましたが、いつか開発に携わることが出来たらこの失敗をバネに進んで行きたいと思います。ご視聴ありがとうございました。