💸

Recoilで多機能な割り勘電卓を作った

2022/05/15に公開

どんな割り勘電卓を作ったか

Recoilを使うことで、リアルタイムで変更を確認できる多機能な割り勘電卓を作りました。
https://warikan-dentaku.vercel.app

具体的な機能は下記のようになっています。

値を変更するとリアルタイムで変更が確認できる
お会計と支払人数を指定すると一人当たりの支払金額が計算できる
1/10/50/100/500/1000円単位で端数を切り上げることができる
異なる支払金額と人数を指定できる
- 普通に支払う人の金額との比率で入力することができる(1.5倍など)
- 金額を固定して入力することができる(1480円など)
支払人数を変更したい場合は+/-ボタンから即時に変更できる
シェアボタンからリンクをシェアすることで計算結果を共有することができる

単純に自分が欲しいからという理由で作りました。

友人と飲み会をしたときや買い出しをしたときなどに割り勘をすることが多いのですが、そのときに「お釣りはいらないから適当に計算しといて〜」という人や「たくさん飲み食いしたから多めに払うよ〜」とか言う人が多くて、計算がめんどくさかったので作りました。

ここ最近も実際に活躍してくれています。

この割り勘電卓を作るにあたって使用した技術を紹介します。

言わずと知れたReact製フレームワークです。

こういった点からNext.jsを選択しました。勉強も兼ねて他のフレームワークや技術も検討したのですが、サクッと作りたかったのでやめました。

Vercelにデプロイしているのでインフラも深く考えずにリリースできました。

検索結果の上位に出てくる既存の割り勘電卓を色々見たのですが、SEOが強いだけの古めかしい電卓が出てきて、フォームを送信しないと結果が見られないようなUXが悪い電卓ばかり出てきたので、リアルタイムで変更を検知できるようにRecoilでState管理を行いました。

最初はuseState()だけで管理していたのですが、機能を増やしていったときにRecoilの方が便利だなということになり導入しました。

今回は作ったのは一般的に使うツールなので、独自のデザインを組むよりもユーザーが直感的にわかるUIを作る必要があると思い、UIコンポーネントライブラリのMaterial UIを導入しました。

結果的に実装コストも下がり、サクッと実装することができました。

この割り勘電卓のほとんどの機能はRecoilの中に詰め込まれています。

この割り勘電卓を作っていて思ったのですが、支払人数に矛盾が生まれないようにしたりとか、金額がマイナスにならないようにとか依存関係が意外とあって、少し悩む部分もありました。

ただ、Recoilで細かくAtomを作って、あとはSelectorでどうにかするようにすることで最小限のコードで実装することができたかなと思っています。

コードの詳細についてはぼちぼち記事にできたらなと思っています。

モダンな技術を積極的に採用していくことで、少ないコードでサクッと多機能な電卓を実装することができました。

今までなんとなく面白そうなWebサービスを作ったり、ブログを作ったりしましたが、ここまで実用的なサービス(ツール)を作ったのは初めてなので、ぜひみなさんにも使ってほしいなと思いました。

OGPやapple-touch-iconなども丁寧に設定したので、積極的にシェアしたりスマホのホーム画面に追加したりしてくれたら嬉しいです。