0
0

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

【ルーティーン管理アプリ】Routine Checker【開発数二十個突破】

Posted at

はじめに

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

使い方

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

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

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

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

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

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

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

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

使用した技術

React.js

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

styled-components

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

material-ui

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

Dexie.js

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

まとめ

前回の記事

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

0
0
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
0
0

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?