【更新】React.js + TypeScriptで制作したToDoリスト「Tasks Maketh Man List」

はじめに

シンプルだけど様々なギミックを仕込んだToDoリストを作りました。
タイトルはキングスマンのセリフである「Manners maketh man(礼節が人を作る)」をパクりましたオマージュしました。
「Tasks Maketh Man(文法合ってるかわからん)」でタスクが人を作る、自らに課したタスクをこなして人間を磨け、というニュアンスです。
ただのToDoリストだと芸が無いから色々ギミックを仕込みました。
Tasks Maketh Man List

動機

前回作ったアプリの開発で精魂尽き果てたので、気分転換に簡単なWebアプリを作ろうと思いToDoリストを選びました。
とにかくバックエンドを使わないものなら何でもよかった。
あと、TypeScriptを使って一つ何かを作りたかった。

使い方

本当にシンプルなToDoリストで説明するまでもないのですが…

• New Taskボタンをクリックして
  
• 書き込みフォームを表示させる
  
• 各項目を入力していき(入力は任意)
  
• 追加ボタンをクリックして
  
• タスクが追加されます。
  
• Checkボタンをクリックすると
  
• タスクの詳細が表示されます。
  
• この状態でOKボタンをクリックすると
  
• タスクが完了したことになります。(そのタスクは消えます)
  
• また、タスクの達成数によってヘッダーの色が緑→銀→金に変わります。
  
• なおこの達成数はReset Achievementボタンをクリックするとリセットされ、ヘッダーの色も元に戻ります。
  
  ↓
  
• また、期日を設定したタスクが過ぎていると、達成完了の処理をした際にペナルティとして達成数がリセットされヘッダーが元に戻ります。
  
• 追加したタスクを全削除するにはReset Taskボタンをクリックしてください。
  
  なお削除するタスクに期日が過ぎているものがあるとペナルティとして達成数がリセットされます。

使い方をまとめた動画のリンクを貼っておきます。 → 使い方

ちなみに、今回もlocalStorageを使用しているので、ブラウザのシークレットモードやプライベートモードで使用すると上手く動作しないのでご注意ください。
今回のアプリはPWAとして使った方が良いかもしれません。

使用した技術

React.js

達成したタスクの数に応じてページのスタイルをヌルっと変えたかったので今回もReact.jsを使いました。慣れると本当に使いやすいです。

使用したライブラリ

react-bootstrap

react-router-dom

TypeScript

前回の反省を踏まえて、TypeScriptを使用しました。
多分開発期間よりも勉強した期間の方が長かったように感じます。
こうして一つWebアプリを作り終えた今でも、まだまだ完全にマスターできたとは言い難いので精進していきます。

まとめ

完走した感想ですが、楽をしようとToDoリストを作っていたのに後からギミックのアイディアが湧いてきたりTypeScriptでコンポーネントに渡すpropsでエラーが出て一日潰れたりして、前回のフロント開発より難航しました。
TypeScriptについては別の記事に書くかもしれないです。多分。
まあ疲れはしましたが、気分転換にはなったので良しとします。
それと、ユーザーがアクションを起こす系のWebアプリで挙動を確認する際手作業だと面倒だったので、テストか何かを出来るようにしたいと思いました。