Angularでシンプルな概算見積もりツールを作ってみた
Development
2020.06.30
作ったもの
使用フレームワーク
作った背景
- Angularを学習中なので何か簡単なツールを作りたかった
- Web制作の仕事を依頼されるとき、正式な見積書を作る前に「これ頼んだ場合いくらくらいかかる？」と概算を聞かれることが多く、サクッと計算できるツールがほしかった
- わざわざfreeeやエクセルを立ち上げるのが面倒臭かった
- 人日計算で見積もれるツールが自分の知る限りなかった
こだわりポイント
データ保存機能
リロードしたら消えちゃうのは使い勝手が悪いので、ブラウザのローカルストレージに一時保存するようにしました。
順序入れ替え機能
概算だしいらないかなーと思ったけど、freeeとかでもできるので実装してみました。
Angular MaterialのDrag and Dropで簡単に実装できました。
クリップボードにコピーと通知
メールとかチャットとかに貼り付けるのにコピーしやすいようにボタンを実装しました。
コピーした感を出したかったのでメッセージを表示するようにしたのですが、Angular MaterialのSnackbarで簡単にできました。
まとめ
結論：Angular Material超便利！
シンプルだし簡単に実装できるかと思ったらReactive formsがけっこう癖があって少し苦戦したところもありました。
でもAngular触ってて楽しいです。React・VueよりAngular派になりそうな最近です。
今回は1ページで完結してしまったので、次はページ遷移を含むSPAにチャレンジしたいと思います。
今年中にはFirestoreやFirebase Authenticationを使ったそれなりのWebサービスを作りたいなーと漠然と構想を練っていたりします。
それではまた。
