この記事では、先日更新したTaskNotes（デスクトップアプリケーション）の追加機能について紹介します。
TODOリストとメモ書き機能を備えたツールになっていますので、
Windowsでメモ帳や付箋などを使って、タスク管理している人は一度このアプリを試してみてもらえると幸いです。
このアプリは、現役プログラマーの筆者が、趣味で作成しているツールです。
Electron + React + TypeScript などの技術を使って実装しています。
最近の更新内容 (version 0.3)
version0.3で追加した改修は下記のとおり。
- ゴミ箱にアニメーション追加
- テキストファイルへエクスポート機能追加
- UI調整
- タスクなし時の画面調整
- 内部処理最適化
- 再レンダリング処理の最適化
- エクスポート機能
UI調整 （Fontサイズ）
メモ欄のフォントサイズを自由に変更できるようになっています。
右上のテキストアイコンをクリックして、リアルタイムにサイズ調整できます。
削除モード
削除モードに切り替えた際、ゴミ箱アイコンがアニメーションするように調整しました。
マウスを重ねたときに、ゴミ箱ボタンが震えるようなアニメーションをします。
エクスポート機能
TaskNotesに記載した、タスクとメモは、アプリ側に自動保存されますが、
テキストで吐き出したい場合に使えるエクスポート機能を用意しました。
吐き出し時には、全タスク・完了タスクのみ・未完了タスクのみを選択できるようにしています。
1日の作業が終わったときに、エクスポートしてテキストファイルを残しておくと
日々の業務で残した記録を保管しておけます。
タスクがない場合の挙動調整
タスクがない場合、追加ボタンが明滅するようにしました。
また、追加ボタンを押すことを促すメッセージを表示するようにしています。
再レンダリングの最適化
Reactで気を付けないといけない箇所が、コンポーネントの再レンダリング。
一つのタスクしか編集していないのに、全リストに再レンダリング処理が走っていました。
Chrome(Chromium)のDevToolsを使うと、再レンダリングの挙動を確認することができます。
DevTools > React Profiler
で再レンダリングされているコンポーネントツリーが見れるので、それを使うと調査ができました。
グレーで表示されている箇所が、memo化で再レンダリングを抑止できている箇所なんですが、
以前は、memo化できてない部分があり、レスポンスに影響がありました。
今は、快適に動作しているかと思います。
まとめ
エクスポート機能もできたので、概ね自分が実装したかった機能は揃った段階まできました。
あとは、操作時のアニメーションだったりの手触り感を上げていければと思っています。
興味のあるかたは、使ってみたりコメントなどご意見いただけますと幸いです。
DLリンクはこちらから
追記(2022/05/03)
一時的にストアを停止しました。
Microsoft Storeにて販売できるように準備していますので、お待ちください。
