フロントエンドエンジニア的家族サービスのすすめ(RailsとReactで家計簿作った)

ちょっと前に家族サービスと称してRails + Reactで家計簿作ってみたんですけど家族も喜んでもらえてなおかつスキルアップもできる「家族サービス」をおすすめしたいなと思います。

Ads

家族サービスしてますか

皆さんは家族サービスしてますか?今回はフロントエンドエンジニア的「家族サービス」のすすめです。

家族構成

僕の家族構成ですが、僕、妻、長男3歳、次男1歳の4人家族です。(2017/08/22時点)です。子供達はまだまだ小さく手がかかります。

休日の過ごし方

主な休日な過ごし方は、子供達と公園に行ったり、家族で買い物に行ったりします。基本的には子供中心ですね。
特に長男は動物にはまっていて、動物園に連れて行くとめちゃくちゃテンションが上がります。
そして家では動物図鑑を広げて、「ライオン」とか「キリン」と僕に教えてくれます笑

よくある感じでは家族サービスできている・・・気がする。

「あんたなんか全然できてないわよ」「もっと家族サービスして」と言われるかもしれないけどそれは別の話として、さて、これからが本題です。

フロントエンドエンジニアとして何かできないか?

何かできないかというよりかは、何か作ろう!!って思いました。何かしら家族の役に立つものを作ってしかもスキルアップに繋がるのがいいんじゃね?ってことでまずはリサーチ!!

妻に相談

僕: 「家事、育児でPCとかスマホでこんなことできたらいいなーとかない?」
妻: 「ん〜」

だいたい、こうゆう聞き方って思った返答ないんですよね。
何日か考えてもらったり、色々質問しました。内容忘れたけど・・・

妻: 「家計簿がスマホでサクッとできたら嬉しいかも」

ほうほう!なるほど!あるじゃん!!

要望としては

  • 今はエクセルで家計簿やっている
  • PCの起動が遅くて面倒臭い
  • スマホで片手間でできるといい
  • アプリも試したけど繰越処理ができるものがなかった

この辺が満たせればちゃんと使ってくれそうってことで早速作ることにしました。

よし!家計簿作ろう!

ということでウチの家族専用のWEB家計簿アプリを作ることにしました。今回は技術的にこんなことやりましたとかしません。家族で使えるサービスをこんな感じで作りましたっていうご紹介です。

作る上で必須なこと

  • レスポンシブな家計簿
  • お金がかからないように(できる限り無料で)
  • 繰越処理ができる

大まかにこんな感じです。その上で技術選定したんですが、完全に自分のスキルアップ目的です。Ruby on Railsの勉強をしていたので、Railsは必須としてあとはフロント周りどうしようかなくらいです。

開発で使った技術的なもの

ざっくりこんな感じです。フロントをReactにしたのは慣れているのもあったんですけど、immutable.jsを使いたかったのと、実際の仕事で使っていて「こここうしたいな」とか「もっとここはいい感じにできそう」とかあってその辺を試したかったからです。

フロントの設計としては、以前の記事のReact + ReduxのプロジェクトにAtomic DesignとImmutable.jsを使ったらいい感じになった話と同じです。

  • Ruby on Rails
  • MySQL
  • React
  • Redux
  • Redux-form
  • immutable.js

実際の制作物

んで、実際の制作物としては以下のような感じです。サービス名のMuffinはどうしようかなと思ってたところで「息子が食べていたから」と「マフィンの語源は貴婦人の手を昔あたためた「マフ」からきているそうです」というのを見つけてちょうどいいじゃんってことで。

Heroku

Herokuにしました。理由としてはまー無料だからですね。ただ、デプロイが時間かかってtimeoutしてしまうこともしばしば。

デプロイ方法等はこちらで紹介しています。
HerokuにRails + React + webpackのプロジェクトをデプロイする | ichimaruni-design

IP制限とBasic認証

一応プライベートな情報なのでこの辺はやっておきました。

ページはこんな感じ

妻の要望の繰越処理は毎月1日に繰越処理ができるようにアラートされるようにしています。

indexページ

グラフで可視化できるように

業務でReactで使えるグラフライブラリ「Recharts」の使い方 | ichimaruni-design

グラフで分析

レスポンシブにも対応

これも要望通り!

レスポンシブに対応2

レスポンシブに対応3

運用について

あとは開発時〜実際の運用するにあたりコードについてはGitHubのprivateリポジトリを使用しています。あとタスクや要望については都度issue化しています。

PrivateリポジトリをBitbucketからGitHub管理にした5つの理由 | ichimaruni-design

まとめ

この家計簿を作ったのが今年の3月くらいだったんですけど、現在も妻は使ってくれていて安定稼働しているようです。

家族サービスということで作った家計簿ですが、家族にも喜んでもらえてなおかつスキルアップに繋がり良い試みでした。やはり何かを作ると気づきがあったり、ハマりポイントがあったりして知見が増えますね。いい感じです。

あと、誰かに使ってもらうと「ここをこうしてほしい」とか「ここにこの数値が出てたら嬉しい」とかただ作っただけでは気づかない部分もあるのでいいですね。
今後も家族サービス続けていければなと思います!

いいなと思ったらシェアお願いします

Ads

同じカテゴリーの記事

ページの先頭へ