はじめに
シンプルだけど様々なギミックを仕込んだToDoリストです。
タイトルはキングスマンのセリフである「Manners maketh man(礼節が人を作る)」をオマージュしました。
「Tasks Maketh Man(文法合ってるかわからん)」でタスクが人を作る、自らに課したタスクをこなして人間を磨け、というニュアンスです。
こちらからどうぞ→Tasks Maketh Man List
使い方
- New Taskボタンをクリックして表示させた書き込みフォームに、
各項目を入力して(入力は任意)、追加ボタンをクリックするとタスクが追加されます。
- Checkボタンをクリックするとタスクの詳細が表示され(表示は端末によって異なる)、
この状態でOKボタンをクリックすると、タスクが完了したことになります(そのタスクは消えます)。
- また、タスクの達成数によってヘッダーの色が緑→銀→金に変わります。
- なおこの達成数はReset Achievementボタンをクリックするとリセットされ、ヘッダーの色も元に戻ります。
- また、期日を設定したタスク(赤くなっている)が過ぎていると、達成完了の処理をした際にペナルティとして達成数がリセットされヘッダーが元に戻ります。
- 追加したタスクを全削除するにはReset Taskボタンをクリックしてください。
なお、削除するタスクに期日が過ぎているものがあるとペナルティとして達成数がリセットされて、ヘッダーの色も初期状態に戻ります。
- localStorageを使用しているので、ブラウザのシークレットモードやプライベートモードで使用すると上手く動作しないのでご注意ください。
Manners maketh man(礼節が人を作る)
- ちなみに、サンプルページで使い方を確認できます(sampleボタンをクリック)。
使用した技術
React.js
達成したタスクの数に応じてページのスタイルをヌルっと変えたかったので今回もReact.jsを使いました。慣れると本当に使いやすいです。
例によってlocalStorageにデータを格納しました。
設定した期日を過ぎているかどうかの判定は、
期日と現在時刻のUNIX時間を取得して現在時刻の方の値の方が
- 小さければセーフ
- 大きければアウト
という感じでやっています。
使用したライブラリ
過去の反省を踏まえて、TypeScriptを使用しました。
多分開発期間よりも勉強した期間の方が長かったように感じます。
こうして一つWebアプリを作り終えて多少自信は付きましたが、2023年当時はまだ慣れていなかったので苦しみました。
慣れれば良い言語だと思います(ただし、コードエディターの補完機能必須)。
まとめ
前回作ったアプリの開発で精魂尽き果てたので、今回はバックエンドを使わず楽をしようと簡単なToDoリストを作るつもりが、後からギミックのアイディアが湧いてきたり、TypeScriptでコンポーネントに渡すpropsでエラーが出て一日潰れたりして難航しました。
疲れはしましたが、円ドルの開発で疲弊しきっていた2023年秋頃の心身にとって良い気分転換になりました。
スマホで使うならブラウザで使うよりも、PWAでアプリのように使った方が良いと思います。
ちなみにファビコンのマークはキングスマンの2作目で出てきたゴールデンサークルのマークをパクりました。
後ろのやつ
