はてなブックマーク

Deleted articles cannot be recovered. Draft of this article would be also deleted. Are you sure you want to delete this article? はじめに 前回までにドラック＆ドロップでタスクの進捗状態を変更する機能が実装できました。 今回はそれに加え完了したタスクを削除する機能、モーダルでタスクの内容を変更する機能を実装しました。 今回実装できた内容 Redux toolkitを導入してグローバルな状態管理ができるようになった 新しい機能実装に対応できるディレクトリ構成を検討できた Material UIを導入してModalを実装できた onDragとonClickイベントを持つDOM要素のイベントを制御できた 前回までのあらすじ 今までの内容 Next.jsでTODOアプリを

return ( <> {/* colsはstatusesに設定した状態の数に合わせる */} <div className={`grid grid-cols-${statuses.length}`}> {statuses.map((status, i) => { // filterを使用してTodoListの状態に応じてフィルタリングする const filteredTodoList = todoItemList.filter( // statusが"All"の場合はフィルタリングしない (item) => status === "All" || item.status === status ); return ( <div key={i} className="mx-2 px-4 py-2 rounded-lg bg-gray-200"> {/* statusに対応したタグを設置 */