🐥

給与試算ツール TEDORI をリリースしました。

2020/12/20に公開

Angular

Firebase

Web

idea

2020年11月に、私の初めての個人開発アプリである 給与試算ツール TEDORIをリリースしました。
この記事では、TEDORIのご紹介と、リリースまでの経緯をご紹介します。

TEDORIとは

TEDORIとは、フォームに入力された給与条件を元に、手取り額や事業者負担額を自動計算できるWebアプリです。

2件同時計算や、Googleアカウントとの連携で条件保存が可能です。

就職活動中の方だけでなく、企業の採用活動や、家庭でのライフプラン設計時など多様な場面で、ちょっとした試算を行いたい時にWebブラウザから気軽にご利用いただけます。

TEDORIの機能

各種自動計算

社会保険料控除額 , 源泉所得税額控除額 , 社会保険料事業者負担額の自動計算を行います。

2件同時計算

給与試算シミュレーションができるWebサイトはいくつかあると思いますが、同時計算を行えるサイトが見当たらなかったので、計算時に2件同時計算を行えるように実装しました。

試算条件の保存・閲覧

Googleアカウントでログインすると、試算時に入力したデータを保存することが可能です。ログイン後に閲覧できるマイページにて保存した条件と試算結果を閲覧できます。

保存した条件の絞り込み検索

マイページで閲覧可能な保存条件を、条件名や基本給などで検索, 絞り込み表示が可能です。

開発した理由

私は、普段、メインでWeb制作のお仕事と、月に1~2日程度、飲食店経理のお仕事をしています。
経理の仕事で、従業員を雇用した場合の給与試算の依頼がたまにあり、簡単に自動計算かつその結果を保存できるツールが欲しいと感じたので、自作する事にしました。

採用技術

フロントエンド: Angular
バックエンド: Cloud Functions
DB: Cloud FIrestore
認証機能: Firebase Authentication
検索機能: Algolia
CI: Github Actions

技術選定の経緯

以前から、SPA開発に興味があり、React / Vue.js / Angularのいずれかの導入を検討していました。
DBについては、JSフレームワーク学習時によく触っていたFirebaseの採用は確定でした。
開発当時、直近で学習していたのがAngularだったことや、AngularFireを採用することで、Firebaseとの連携が比較的楽に実装できそうだったので、今回はAngularを採用する事にしました。
Angularをキャッチアップする際に使用していた教材に、Github Actionsの記事もあったので、CIについては、こちらを採用しました。

開発期間

2020年7月半ばに開発をはじめ、9月からWebアプリ開発支援サービス「CAMP」を利用し、メンターによるコードレビューを受け、Firebase周りの実装をCloud Functionsに移行する, 検索機能を実装するなどの改善を経て、11月1日にリリースしました。

こだわった点

ログインなしでも基本機能は使えること

あくまでも試算なので、保存機能は必須ではないはず。となると、基本機能を使う上で、アカウント連携するメリットはないので、基本機能（試算）は、ログインなしでも利用できる設計にしたいと考えました。

条件入力フォーム使いやすさ

試算ツール自体は、検索すると色々あるようなので、他との差別化として、使いやすさを意識しました。PCでの操作の場合は、極力1画面内に、フォームが収まる事を意識しています。

締め

機能自体はとてもシンプルですが、今回の個人開発で学ぶことはたくさんありました。技術面の習得はもちろんですが、ユーザビリティを考慮した細かい実装は、チュートリアルで学ぶだけでは到底身につかないものでした。
Angularのキャッチアップでは、RxJSの理解に苦労しましたが、流れを理解するとFirebaseのデータ取得を簡潔に書けるので、非常に気に入っています。
先述のWebアプリ開発支援サービス「CAMP」が主宰するハッカソンにも参加しているので、チームハッカソンで開発したアプリも今後リリースしたいなと思います。
まだまだ、わからない事も多くて大変だけど、開発は楽しいですね！

最後まで読んでいただき、ありがとうございました！