Vue.js + Firebase でテレワーク用勤怠管理アプリ作ってみた
背景
筆者が務める会社でも、昨年からテレワーク勤務が標準化された。
しかし、社内のシステムやら制度やらはなかなか追いついていかず、
色々面倒くさいことがあった。。
出勤したら、打刻とは別に、メールで出勤報告＆タスク報告が必要。二度手間。
今どこにいるかが分からないから、予定表にテレワークか否かを記入する必要あり。
直接コミュニケーションとれず、メールが飛び交う。チャットでよくない？と思うことも。。
というわけで、、、
打刻ができ、チームメンバーの勤務状態がリアルタイムに見える化され、打刻ついでにToDoも整理でき、
朝一番に伝えたいちょっとしたお知らせをチャットで共有できるような、
「テレワーク向けの出退勤時にやること一元化アプリ」を作りたかった。
作ったアプリ
こんな感じのWebアプリ。メインとなる出退勤ページでは、
出勤・退勤
現在のステータス変更
勤務地変更
他のメンバーのリアルタイムの状況把握
カレンダーページで
勤務実績の変更申請
休日申請
各日付の勤務地の変更
Done(その日こなしたタスク)の確認
他のメンバーの勤務実績・予定等確認
が可能。
ToDoページでは
ToDo、Doneの整理
他のメンバーのToDo確認
が可能。
Requestページは、組織内のAdmin権限を持ったユーザのみが利用できる。部長とかに割り当てるような想定。
組織へのユーザ新規追加申請の承認・拒否
勤務実績の修正申請の承認・拒否
休暇取得申請の承認・拒否
が可能。
他に、Settingページで細かい設定変更もできる。（admin権限の割り当てやパスワードの変更など）
実際に作ったデモページはこちら！(https://the-team-run.web.app/)
ログインID : test〇@test.co.jp (test1@test.co.jp ~ test10@test.co.jpまで用意。test5@test.co.jpまでがAdminユーザ。)
パスワード ： passowrd
※公開用ということで一部機能制限を設けており、Settingページのボタンは、すべてエラーが返ります。
使用した技術
Vue.js
Vuex
Firebase
Firebase Authentication
Firestore
Cloud Functions (Node.js)
こだわり！！
これはもうリアルタイム性。
チームメンバーの勤怠ステータス＆チャットがリアルタイムに更新されていく。
マネージャーとかからすると、横に画面を開きっぱなしにしておいて、皆の出勤状態を見るようなユースケースがあるかと考えた。
これをバックエンドで実装するとなると、WebSocketという技術を使った実装が必要になるが、Firebaseではそれを全く意識する必要がなく、非常に楽だった。
具体的には、下記のような記述をすれば、もうあっという間にリアルタイム処理の出来上がり。
Node.js
const chatInfo = firebase.firestore().collection('chat').doc(organizationCode);
chatInfo.onSnapshot(querySnapShot => {
updateFunc(querySnapShot.data().chats);
})
所感①Vue.js + Vuexは良いぞぅ
やっぱり開発しやすい！
Vue.js + Vuexは非常にオススメ。個人的にReact.jsより良い。
Vue.jsの記法は直感的に理解しやすい構成になっている。
フロントエンド、というか画面デザインに近い部分は、いかに画面と紐づいているかが大切だと思う。
フロントエンドは昔と比べると非常にプログラマブルになったが、ロジックに支配されてしまってはいけない気がしている。
本業でReactのソースコードを読むこともあるが、非常に苦しい。
初心者やコーディングが苦手な人はVue.jsは結構オススメ。
あと、ちょっと難しくてもVuexは使用したほうが良い！！
今回1か月半で開発できたのはVuexのおかげ。
SPAはヌルヌル動く！
ほんとにこれ、感動する。
最近は、SEOとかのニーズもあってSSRが用いられたりするが、その一方で、
今回のように、個人やチームの中だけであるツールとして用いるようなアプリケーションの場合、SPAは本当に強い。
ただ、「どのデータ群を最初に取得し（ステートとして持っておき）、どのデータ群をアクションをトリガにして取得してくるか」は考える必要があると思う。
最初に大量のデータを取得すると、メモリ・初期ロードスピードの面で負の影響が出て、結局重くなりそう。
例えば、今回はカレンダー機能は年月・ユーザの選択で都度APIをコールするようにしている。
Vue.jsの難しいところ
直感的ではあるが、React.jsよりコードが冗長化したり、汚くなる可能性が高いのかなと思った。
例えば親コンポーネントから、あるコンポーネントに別コンポーネントを内包させたいときとか面倒くさい。
こういうのは、Reactだったら作成したコンポーネントをコンポーネントの引数に受け継いでやればよいのだが、Vue.jsはそう簡単には配置できなかった。
恐らく、熟練者がReact.jsで書くと、無駄のない洗練されたコードになるのではないかと思う。
所感②Firebaseも良いぞぅ！！
Firebaseは楽かつ難しい
Firebaseは確かに、バックエンドを1から実装する必要がない分、めちゃくちゃ楽になる。
開発全体を見たときに、大幅に開発期間が削減される。
ただし、それは「Firebaseが簡単」とは別。全く別。
Firebaseはそれほど情報が多くないかつ公式の情報もそれほど詳しくない。
ちょっと凝ったことをやろうとしたら調べるのに結構苦労する。
特に難しいのが、Firestoreのrule。
これは難しいけど、めちゃくちゃ大切。
これがあるからFirebaseが成り立つので、実は一番手を入れるべきところなのだが、普通に難しい。
ということでFirebaseは一回分かれば開発は楽になるが、初期コストは必ずしも低いわけではないことに注意してほしい。
なぜCloud Functions？？
Firebase Authentication、Firestore 従来のAPIに絞らず、Cloud Functionsを使用したのは以下の機能を実装したかったから。
メール送信機能（ユーザ登録時メアド有効確認、各リクエストの承認メール、拒否メール）
スケジュールされた時間に、ユーザのあれこれを設定する処理（その日のDoneの登録、カレンダーの更新など）
チャットが500までいったら、一番上のメッセージを消す機能
など。
バックエンドはなくならない
上記のCloud Functionsと関連付けて。。
Firebaseが生まれて一時期バックエンドエンジニア不要論が湧いてきてたので、個人的な意見を言う。
まあバックエンドが楽になるから、バックエンドだけしかできないエンジニアは淘汰されるよね、っていう意見ならまだ理解できるが、バックエンド自体がなくなることはない。
この世の様々なシステムに触れれば分かると思うが、フロントエンドの責務ではない、
どのユーザもスイッチを押すべきでない処理が多様にある。（例えば今回のようなスケジュール処理）
それら全てを自動化することは難しいし、FirebaseがCloud Functionsの機能を提供しているのが、実は自らそのことを提言してくれていると思う。
Cloud Functionsを実装する役割は紛れもなく、バックエンドエンジニアだと思うし、仮にすべてがGUIで実現できたとしても、それを構築する人はバックエンドエンジニアとは呼べないのだろうか？
最後に
今回かかった開発期間は約1か月半。
Firebaseとか使えば、小規模の中でも少し大きめのシステムを割と短期間で作ることができることが分かった。
どんどん良いものを作って業界を活性化させたい！
gitlabはこちら！(https://gitlab.com/teten927)
導入してみたいという方はご連絡ください。
ご連絡は temmaru927@gmail.com まで！！
↧