[React x Firebase]整理券アプリを作ってみた
サービス紹介
整理券の作成・取得を行えるサービスを作りました。整理券の名前と枚数を入れると、整理券取得画面が作成され、twitterなどでURLを共有することで整理券を取得してもらえます。
整理券取得画面です
取得した番号が表示されます
管理画面です（呼び出しを押してもメールやプッシュ通知は送られません）
呼び出しの状況はユーザの整理券に表示されるので、あと何番か、呼び出されてからどのくらい経ったかが分かります。
ただ、まだ本当には使わないでください。個人開発なので運用に手が回らないためです。引き継いでくれる方募集します。
作ったきっかけ
家族から「会社でやるイベントで使える予約システムがほしい」と言われたことがきっかけです。はじめは時間別の予約システムを考えていましたが難しすぎたので整理券に変更しました。意外にも無料で使える整理券システムは少なかったので作ってみました。
製作期間
コードを書いていた期間は1ヶ月くらい
システム概要
フロントエンドをReact、バックエンドをFirebaseで作成しました。
Firebaseでは、Authentication(認証)、Firestore Database(DB)、Hosting(ホスティング)を使用しています。
スタイリングはMUI (Material-UI)です。
ソースコードはこちらです : https://github.com/yucatio/karugamo-seiriken
Firebaseを使ってよかったこと
開発期間を大幅に短縮できた
バックエンドをFirebaseにすることで開発期間を大幅に短縮できました。
特にユーザ認証は、コード数行で済むので本当に楽でした。
DBも設定フィルを書くだけなので開発期間がかなり短縮されました。
transactionが使える
Firestoreではtransactionが使えます。今回は、次に取得する整理券番号を排他的にカウントアップする動作に使用しました。
無料で使える
制限はありますが、これだけの機能を無料で使えるのはありがたいです。登録も簡単でした。
Firebaseで難しかったこと
メールアドレスとパスワードでの認証
Firebaseではメールアドレスとパスワードでの認証もサポートしています。しかし認証するまでのフェーズが多く、初回リリースでの実装は見送りました。
DBのuniq設定
Firestoreにはuniqの設定がありません。uniqにするには少し複雑なコードとセキュリティルールが必要になります。
MUI(Material-UI)を使ってよかったこと
今回はスタイルにMUI(Material-UI)をしようしました。個人的にかなり気に入っています。
コンポーネントが充実している
今っぽいUIを作るのに必要なコンポーネントがそろっています。今回は、
Drawer
Snackbar(画面下部の"整理券を作成しました"と書かれている部分)
Accordion
Dialog
などを使用しました。
そのほかのコンポーネントは公式ページをご覧ください。
プロトタイプ開発
ここからは開発方法の話です。今回はプロトタイプモデル+独自開発方法で開発しました。割とうまくいったので記載しておきます。
プロトタイプ1
最初のプロトタイプ（試作品）では、機能のみ実装しました。具体的にはサーバとの通信部分とページの遷移をプログラミングしました。スタイルを全く当てず、素のHTMLのままプログラミングを進めます。殺風景な画面がつらかったです。
メニュー
新規登録画面
プロトタイプ2
2つ目のプロトタイプでは、画面デザインのみコーディングしました。サーバとは接続しません。文字の部分もサーバからとってきたものではなく直接打ち込んでいます。自分のデザインセンスのなさがつらかったです。
作成した整理券一覧
取得した整理券一覧
プロトタイプ3
3つ目のプロトタイプでは、プロトタイプ1と2を合わせました。やっとアプリらしくなってきました。しかしコードが長くなりつらかったです。
DBに登録した内容が表示されている
完成版
完成版ではプロトタイプ3をリファクタリングしながら実装しました。具体的にはコンポーネントを分割したり、定数は変数に格納して使うなどです。リファクタリングが終わったら追加の機能開発をいくつかしました。
トップページ。ロゴを作成したりフッターをつけました
整理券の作成画面。リッチテキストエディタの機能を追加しました
終わりに
この記事が、個人開発をしている人、Firebaseを使おうか迷っている人に少しでも役立つことを願っています。
うまくいったこと、いかなかったことは他にもたくさんあるので別記事で書いていきたいです。
Discussion