今回は僕が製作したアプリの一つの「Flexible Todos」を開発して感じたこと、反省点などをまとめたいと思います。
使用した技術、ライブラリ等(2023/02/27時点)
- React(v17.0.2)
- React-Beautiful-DND(v13.1.1)
- uuid(v8.3.2)
このアプリで出来ること
まずこのアプリは以下の画像の通り、今日することをTodoリスト形式にまとめることができます。
なお、「Today」と書かれたタイトル部分も自分で好きなように変更ができます。
ここまでは普通のTodoアプリなのですが、もう一つ機能があります。
それは自分の作成したTodoをドラッグ＆ドロップ出来ることです。
試しに、Todoリストの横にある「＋」ボタンを押して、新しいリストを作成します。
そしてできたリストの中にまた適当にやることを入力して...
それをドラッグ＆ドロップすると...
このように各リストを入れ替えることができます。
あと各Todoも順番を入れ替えることができます。
これらの機能は「react-beautiful-dnd」というReactライブラリを使用して実現しています。
仕組み
下記GitHub/サイトを参考にしました。
React-beautiful-dndのGitHub
react-beautiful-dndで順序をドラッグ＆ドロップで入れ替える
改善したい点
- データベースとの連携
今回作ったアプリは自分で追加したTodoをデータベースに保管する機能が無く、一度ブラウザを閉じたり、再読み込みした場合、追加したTodoは全て消えてしまうので何かしらのデータを保管する機能を追加できたらいいなと思っています。
このアプリを開発して感じたこと
今回このアプリを作ろうと思った理由は、よくJavaScriptでTodoアプリを作る解説を見かけるのですが、それらに＋α何かしらの機能をつけて見たいと思ったのがキッカケです。
いままでは参考書やインターネットなどで調べコピペでアプリを開発していたので、成長を感じれなかったのですが、今回はJavaScript/Reactの理解が深まった気がしています。