初めに
良い人生を送るために良い習慣、いわゆるルーティーンを身に着けたいと思っている人は多いと思います。自分もその一人です。
しかし、一日や二日では習慣を身につけるのは困難で、長く続ける必要があります(一説には二十日続けてやっと習慣になるとか)。
そこで、毎日こなしていきたいルーティーンをチェックリストにして、習慣づける手助けをしてくれるWebアプリRoutine Checkerを作りました。
indexedDB三部作の最後になります。
indexedDB三部作の最後になります。
こちらからどうぞ→Routine Checker
使い方
- 右下の＋(プラス)のボタンをクリックして
入力フォームに内容を入力して追加ボタンを押すだけで
ルーティーンが追加されます。.webp)
- 左にチェックマークがあるので、こなしたルーティーンにチェックを付けていってください。
.webp)
- 右のごみ箱のマークは削除ボタンです。
.webp)
- テーブルのヘッダー部分にあるチェック欄をチェックするとすべてのルーティーンにチェックが付きます(ゴミ箱マークは全削除)。
.webp)
- デフォルトでは毎日0時にチェックマークが外されてリセットされます.。
.webp)
- リセット時間は自分で好きに設定できます。
.webp)
.webp)
.webp)
.webp)
.webp)
.webp)
.webp)
使用した技術
React.js
TypeScriptを使用しました。localStorageでリセット時間の状態を管理をしています。
styled-components
使い勝手が良いので毎回使っています。
material-ui
ルーティーンのテーブル表で使いました。
Dexie.js
ルーティーンのデータ管理でindexedDBを使いたかったので使用しました。
チェックの有無を真偽値で管理したかったのですが、Dexie.jsでは不具合が起きるので、やむを得ず0と1の数値で代用しています。
まとめ
実は時系列的にはこのWebアプリが一番最後(最近)に作ったもので、二十個目になります。
特に二十という数字にはこだわりが無いのですが、Webアプリの開発と公開をするということに慣れたかったので、出来るだけ多くこなしたかったという思いがありました。
中身の無い奴が数を誇るとはよく言われますが、慣れるには数をこなすのが一番だと思います。
おかげでWebアプリ開発特有のめんどくささにも慣れました。エラーを恐れることも無くなって、無駄ではなかったなと実感しています。
次回からはミニアプリ企画で作ったWebアプリの紹介をしていきます。
投稿
