🚀
お母さんのために家族の食事スケジュールを管理するアプリを作った話
URL
背景
最近、よく飲み会に行ったり友達とご飯を食べることが多く、お母さんに「今日の夜ご飯いらないよ」とか、「お昼はいらないけど夜は食べるよ」とかをよく注文していたんですが、これって僕からすれば覚えてられるだろ！って思う一方、お母さんからすると兄弟3人分（うちは三人兄弟）覚えていなきゃいけないので、かなり大変だということに気付きました。
そのため、家族だけで食事のスケジュールを管理できるようなアプリがあったら良さそう！と思い、作成しました。
仕様
- 入力側（食事のスケジュールを入れる側）と、管理側（食事のスケジュールを閲覧する）の2つのロールに別れる。
- 入力側はスケジュール入力のみ。管理側はスケジュールの閲覧のみ
- 誰が入力しているかを把握するため、ユーザ認証が必要
要件
- 価値があるか分からないので、なるたけ開発コストがかからない且つ、まずは身内のみで挑戦
- 入力、閲覧にはなるべくコストがかからないように
実際の画面
一応外部公開もしているのですが、今は家族のFirebaseIdのみで判定しているので、実際に入力画面をいじくることはできますが、入力しても意味が無いです。また、管理画面は現在お母さんのIDのみ出すようにしているので、こちらはいじくることができません。
- ログイン画面
- 管理画面
- 入力画面
- ホーム画面追加時（PWA対応）
技術スタック
- Next.js
- 普段Reactのみで開発していたのですが、最近の流行りということで素振りしたかったです。SSR, SSG等の最適化がおそらく全然上手く出来ていないので、恩恵を受けれているかは微妙。
- ページネーションがかなり楽でした。また、「ページ」と「コンポーネント」の違いがはっきりしていて、とても作りやすかったです。
- apiに関してもかなり開発しやすかったです
- デプロイも楽でした。脳死で出来ました。
- ChakuraUI
- こちらも使ってみたかったです。可愛い。
- Firebase
- 認証、DB周りは全てお任せしました。スケールしないらしいですが、個人開発であれば本当に十分でお世話になっています。
- recoil
- 状態管理のフレームワークですが、常日頃からContextじゃ足りないの？って思っていたので、使ってみました。ユーザのログイン情報と、スケジュールの内容をこれで管理しています。
学び
- 要件の「閲覧にはコストがかからないように」という点で、実際に家族に使ってもらい毎回ログインするのが面倒という意見をもらったので、Cookiesでセッション管理しました。（確か二週間ぐらいしていたはず）セッション管理は初めてだったので、勉強になりました
- お母さんが、「お弁当いらないときもこれで管理したい」と言っており、今まで食事をいるか要らないかの二値(true, false)で管理していたので、データ構造から変えなければいけないことになりました。（まだやってない）データ構造決めるときに、このあたりを考慮に含められなかったのが敗因ですが、これ実務とかで起こると地獄だなあと思いました。
- SSG, SSRの感覚がつかめてなかったですが、これを作ったことにより結構つかめました。（このアプリでは上手く出来てないですが、作った後色々勉強しなおして、「あーあの時こうすればよかったんか」みたいな感じ）
雑感
- 需要があれば、誰でも使えるようにしたいなって思ってます。
- （家族グループを作成して、招待コードみたいなの発行して頑張ればいけそうだなってぼんやり思ってる）
- 思ったより、妹達が食事がいらない時が無く導入するのがなかなか難しいです。妹が大学生になったりしたらもう少し活躍するかもなって思ってます。
- UIに関しては割とすっきりしているのと、操作が直観的に作れたので満足してます。まあ機能が少ないというのもありますが。
Discussion