はじめに

良い人生を送るために良い習慣、いわゆるルーティーンを身に着けたいと思っている人は多いと思います。自分もその一人です。
しかし、一日や二日では習慣を身につけるのは困難で、長く続ける必要があります(一説には二十日続けてやっと習慣になるとか)。
そこで、毎日こなしていきたいルーティーンをチェックリストにして、習慣づける手助けをしてくれるWebアプリRoutine Checkerを作りました。

使い方

右下の＋(プラス)のボタンをクリックして

入力フォームに内容を入力して追加ボタンを押すだけで

ルーティーンが追加されます。

左にチェックマークがあるので、こなしたルーティーンにチェックを付けていってください。

右のごみ箱のマークは削除ボタンです。

テーブルのヘッダー部分にあるチェック欄をチェックするとすべてのルーティーンにチェックが付きます。(ゴミ箱マークは全削除)

デフォルトでは毎日0時にチェックマークが外されてリセットされますが

リセット時間は自分で好きに設定できます。

使用した技術

React.js

TypeScriptを使用しました。localStorageでリセット時間の状態を管理をしています。

styled-components

使い勝手が良いので毎回使っています。

material-ui

ルーティーンのテーブル表で使いました。少し文字の大きさが小さくて見づらい感じがするので、後で修正するかもしれません。

Dexie.js

ルーティーンのデータ管理でindexedDBを使いたかったので使用しました。
チェックの有無を真偽値で管理したかったのですが、Dexie.jsでは不具合が起きるので、やむを得ず0と1の数値で代用しています。

まとめ

前回の記事

でも書いたように、今回で公開しているWebアプリの数が二十になりました。
特に二十という数字にはこだわりが無いのですが、Webアプリの開発と公開をするということに慣れたかったので、出来るだけ多くこなしたかったという思いがありました。
中身の無い奴が数を誇るとはよく言われますが、慣れるには数をこなすのが一番だと思います。
おかげでWebアプリ開発特有のめんどくささにも慣れました。エラーを恐れることも無くなって、無駄ではなかったなと実感しています。
今見返すとクオリティをもっと上げられるかなと思う部分もありますが、自分の持っているアイディアとスキルをフル活用して開発したので、あまり悔いはありません。
これからも個人開発を続けていきますが、さすがに制作ペースは落としていきたいと思います。