😚
React100本ノック 3本目「Todo List」(解説付き)
Reactのお題を消化していく､React100本ノック｡
Reactの実力向上のため始めました｡
ノック2本目:Todo List
React100ノックの本家
実装
Todo Listを作成｡
タスク作成時のバリデーション､タスク入力フォームを学習できるテーマです｡
Todo Listならドラッグ&ドロップの要望もあるよね､ということで「dnd-kit」を使ってドラッグ&ドロップも実装しました｡
さらに工夫として新規タスクモーダルをエスケープキーで閉じるようにしています｡
ちょっとした操作性が大事ですよね｡
利用技術
- React
- TypeScript
- tailwindcss
- dnd-kit
画面
コード
解説
ここでも考慮しないといけないのはタスク名の最大値｡本家ではとくに触れられていませんが大事です｡
タスクの作成､表示に関してはとくに解説することはないのですが･･･
ドラッグ&ドロップ機能で苦戦しました｡
- ドラッグする起点をリストの左端に設定
- スマホ独自の挙動を考慮
して満足する挙動になりました｡
タスクの情報をAPI経由で登録・更新・削除できるとよりよい勉強になると思います｡
そのときはセキュリティに気をつけてください｡
React本
本で勉強したい人にはこちらをオススメ
Discussion