Webサービス開発素人がVue.js＋Firebaseで在席管理サービスを作ってみた。

個人開発

はじめに

現在30歳前半。エンジニアとして働いています。 ただ、仕事内容はチームメンバーを管理したり、関係者と仕様を詰めたりとコードを書く機会はありません。 たまにコードを書く場面があっても昔々に作られたコード(主にC++ Builder 6、Visual Basic 2010)の保守をするくらいです。

仕事だけでは技術の進歩についていけていない…と2年ほど前から不安に感じていました。 それから業務以外で勉強を初め、興味のあるWeb技術を色々つまみ食いしてきました。 そのつまみ食いの成果を用いて何かサービスを作れないか？と思い、Webサービスを作ることにしました。

作ったサービス

内容

在席管理サービスです。下記の機能があります。

1. ログイン認証

本サービスを利用するにはログイン認証が必要です。 Googleアカウントがあればログインすることができます。 f:id:fatherofikura0107:20191030125823g:plain

2. グループ単位のメンバー管理

グループ単位でメンバーを管理できます。 画面上部のプルダウンメニューからグループを選択できます。 選択しているグループはログインユーザ毎に保持されます。 f:id:fatherofikura0107:20191030130120g:plain

3. メンバー登録＆修正＆削除

画面右下の新規登録ボタンからメンバーの情報(名前/役職/電話番号)を登録できます。 既に作られたメンバーの情報はUI上から修正や削除もできます。 入力内容のValidationも行っています。 f:id:fatherofikura0107:20191030130006g:plain

4. メンバーの並び順変更

Drag&Dropにてメンバーの並び順を変更できます。 グループ内のメンバー並び順はログインユーザ毎に保持されます。 f:id:fatherofikura0107:20191031154910g:plain

5. 行き先変更

メンバーの行き先や補足情報を変更できます。 メンバーを複数選択し、まとめて行き先を変更することもできます。 f:id:fatherofikura0107:20191031160049g:plain

背景

社内にて利用している「在席管理サービス」が存在しています。 ただ、開発した方の話をしたところ、下記の状況があると聞きました。 その課題を解決しつつ学んだことを活かすには適度なボリュームだなぁと思いこの題材選びました。

1. メンテするにも開発者本人以外は難しい

コードを見してもらったところ、そもそも管理する課毎にDBが異なっていました。 そのため、新たな課を追加する時はDBやソースコードをハードコピーする運用になっていました。

2. UI/UXが古い

10年ほど前に作ったサービスのためSPAになっていません。そのため画面のチラツキが気になりました。 また、10年ほど前からUI自体の変更もないため古風な見た目をしています。

3. サーバ管理が必要

自前で用意したHW＋WindowsOSの上で動いています。 そのため、HWトラブルやソフトウェア以外のVersionUpも自分で対応が必要です。 スケールアウトも一苦労です。

採用した技術

フロントエンド

フロントエンドはVueしか触ったことないのでVue＋αで構成しています。

  • Vue.js
    • スモールスタート出来るという触れ込みで採用しています。
  • Vuex
    • 最初はprops/emitで書いていましたが、値のやり取りが辛くなり途中で採用しています。
  • buefy
    • BulmaがベースのUIフレームワーク。今風のUIを作る才能はないため力を借りております。
  • vee-validate
    • メンバー情報のValidationをするために利用しています。
  • vuedraggable
    • メンバー情報をCard表示しており、その並び替えを行うために利用しています。
  • vue-freezeframe
    • ホーム画面のGif再生用に利用しています。

バックエンド

バックエンドの知識はほぼありません。全てFirebaseにお任せすることでサーバ管理のコストを減らすことが狙いです。今回は無料枠で利用しています。

  • Authentication＠Firebase
    • Googleアカウントでのログイン認証をするために利用しています。
  • Realtime Database＠Firebase
    • 本サービスに関するデータを永続的に保存するために利用しています。
  • Hosting＠Firebase
    • SPAのファイルをHostingするために利用しています。
  • Functions＠Firebase
    • データの追加/更新/削除は全てFunctions経由で行っています。

開発環境

ローカルで開発⇒リポジトリにPush⇒自動ビルド＆デプロイの流れが最低できることを念頭に選定しています。

  • Visual Studio Code
    • Vue周りで便利なExtensionも色々あり、動作も軽いので採用しています。
  • Github
    • CircleCIを利用した自動ビルドをする際に参考にした記事ではGithubを使っていたため採用しています。
  • CircleCI
    • Firebaseへの自動デプロイするために利用しています。

作るまで

平日は朝活として自主学習をしています。1日平均45minくらいです。 今回の成果はその朝活だけで成り立っています。

事前学習

トータルで朝活149日(≒112時間)ほど利用しています。 今回の技術に関係ある朝活内容は下記になります。

No 内容 出典 実施日数(日)
1 フルスタック・Webエンジニア講座 Udemy 49日
2 基礎から学ぶ Vue.js 本 42日
3 Blackjack-Vue 個人ブログ 4日
4 Laravel+Vue.js+JWTAuth 個人ブログ 21日
5 WebAPIアプリケーション「超」入門　FirebaseとAPIによるWeb会議システム制作 本 9日
6 改訂新版　Vue.jsとFirebaseで作るミニWebサービス 本 15日
7 CircleCiとFireBaseを連携 個人ブログ 2日
8 Cloud Functions for Firebase 公式 7日

本作

トータルで朝活65日(≒49時間)ほど利用しています。 途中第三者の方に見ていただき、いただいたフィードバックを受けて修正もしています。

辛かったこと&ハマったこと

  • 途中でprops/emit⇒vuexに変更
    • 最初はprops/emitで書いていました。このサービス規模でもprops/emitだけでは各コンポーネントのやりとりが辛かったです。最初の判断を誤った気がしています。
  • vuedraggableの使い方
    • メンバーの並び替えはvuedraggableを使えば簡単に出来ましたが、その並び順を永続化する方法は非常に悩みました。
    • oldIndexやnewIndexを使おうかと思いましたが、自力で並び替えるのは辛いなぁ…と対応をあぐねていたところ、toArray関数使うと並び順のリスト取れることが分かり、その後はテンポ良く進みました。
  • デザインセンス不足
    • デザインセンスなさすぎてUI考えるのが辛かったです。
  • bulmaのnavbarにburgerメニューを表示
    • コードのコピペでは駄目で、追加作業が必要でした。 こちらの記事が参考になりました。
  • Vuexの導入
  • VeeValidateの導入
    • 最新Versionを入れるとエラーが…解決策が良くわからず、旧Versionにして対応しました。
    • asyncを足したら「regeneratorRuntime is not defined」エラー発生。こちらを参考にpolyfillを導入して解決できました。

今後やりたいこと

  • 管理画面作成
    • グループやステータスはDBのマスターから値を取る仕組みなので、Realtime Databaseを直接編集すれば追加出来る作りになっています。管理画面を用意するだけで使い勝手が上がると思っています。
  • 自動テスト
    • 自動テストが一切ありません。Webサービス開発における自動テストに関する知識が全くないので、まずは自動テストに関する知識をつけたいと思っています。
  • Cloud Firestore
    • 事前勉強をRealtime Databaseで行っていたので、Cloud Firestoreは使いませんでした。ただ、今後世の中はCloud Firestoreを使う流れになると思うので、次開発する機会があればCloud Firestoreを使っていきたいと思っています。

その他所感

  • 事前学習だけでは駄目で、自分の頭で考え、穴にハマって這い上がることで力が付くことを身を以て体験できました。今後も何か自分で作ることを続けていきたいです。