【Remixで個人開発】投資シュミレーションアプリつくりました
制作物はこちら！
このアプリでできること
- NISAやiDeCoなどの投資の種類別に資産推移をみることができる！
- さらに、NISAとiDeCoの組み合わせのシュミレーションもできる
- NISAの投資限度額を超えた場合でも運用額を確認できる
- iDeCoの減税額もわかる
- どっちがいいかよくわからない！という人におすすめもリコメンドしてもらえる！
制作の流れなど
- アプリの仕様を考える
- アプリに盛り込みたい機能
- データの持ち方
- アプリのデザインと技術選定を考える
- ページ構成
- アプリの仕様を満たす技術選定
- フレームワーク、ライブラリ、ホスティング
- 実装する
具体的に考えたこと
アプリの仕様について
今回はwebアプリで、簡単に投資シュミレーションができるアプリを作成しようとした。
アプリに盛り込みたい機能としては、以下を考えた。
- まずは自分でNISAかiDeCoかを選びたい人と、アプリで診断してほしい人を分けたい
- NISAでは投資限度額までしか元本を投資できないようにする。ただし運用は可能なため、運用収益は計算し続けるようにする
- iDeCoではユーザーの属性によって掛け金のチェックを入れつつ、節税額も表示する
- NISAとiDeCoを組み合わせた総投資元本と総運用収益もグラフ化する
- アプリで診断機能では、おすすめの投資の種類は診断できるが、柔軟に他の選択肢も選べるようにする
また、上記を考えた上で、データに関しては以下のように考えた。
今回の仕様を満たす上でDB（バックエンド）の処理は不要
（DBが必要となるのは、例えばユーザー登録をしてもらってユーザー毎にデータを保存したいなどのケースだと思うが、今回はユーザーが入力した値をもとに計算したりするのみなので）
アプリの仕様を満たす技術選定について
webアプリなのでSPAであることは前提とした。
また、SPAの中ではReactが圧倒的なシェアを誇ることと、実務経験があることからReactを選んだ。
次にReactのFWを使うかどうか考えた上で、Remixを採用した。
現在React開発は素のReact、Next.js、Remixが候補に挙がると思うが、
素のReactはルーティングを自前で用意する必要があること、ディレクトリ構成などを自分で考える必要があることなどから見送った。
また、Next.jsは様々な機能（レンダリングの選択肢の広さ）、拡張性の高さなどから、今回はそこまでスケールアップしたアプリをつくる必要性がないと考えたので採用しなかった。
逆にRemixはシンプルな構成である程度書き方などは縛りがあるものの、学習量も少ないので、さくっと何かを作成したい今回のようなケースには最適であった。
また、コンポーネントライブラリとしてはHerouiを採用した。
自分はデザインの経験やCSSなどにそこまで詳しくはないため、基本的にはスタイルつきコンポーネントの中から選んだ。
さらに過去の実務でTailwindCSSでスタイルをあてていたため、TailwindCSSでスタイルをあてやすいライブラリも条件だった。
最後にホスティングはvercelを採用した。
以前の個人開発はHerokuを採用していたが、有料であることがネックだったので、無料のホスティングサービスの中から選定した。
自分のポートフォリオをvercelでデプロイした経験があり、Herokuよりもはるかに簡単だったので、今回もvercelにした。
アプリのデザインについて
自分ではデザインは難しいと感じたので、いろんなツールを参考にした。
以下のようなカラーパレットでメインカラーを選んでみたり
stichでデザインのサンプルを提案してもらったりした。
ただ、やっぱりデザインは納得できていないので、デザイナーさん尊敬である。
まとめ
今までも個人開発には挑戦してきたが、今回は自分的に納得できるものが作成できた。
ただやはりデザインに関してはちょっとダサさを感じるので、デザインの勉強もしたいと思う。
Discussion