はじめに
前回のUI編では、Tauri × Next.jsの構成で、ユーザーがタスクを入力・追加できるインターフェースを実装しました。
今回はその追加機能として、タスクに「期限日」を設定できるフォームの拡張を行い、さらに削除機能の実装まで解説していきます。見た目や操作性も考慮したUI設計を意識して進めていきます。
① タスク入力に「期限日」フィールドを追加する
まずは、従来のテキスト入力に加え、期限日を入力できるようフォームを拡張します。期限日にはHTMLの<input type="date">を使用し、状態として日付情報をReactのuseStateで管理します。
状態管理の追加
const [task, setTask] = useState("");
const [dueDate, setDueDate] = useState("");
// タスク一覧はオブジェクトで管理
const [todos, setTodos] = useState<{ text: string; due: string }[]>([]);入力フォームの変更
期限日入力欄を追加したフォームは以下のようになります。
<div className="flex flex-col gap-4 mb-6">
<input
type="text"
value={task}
onChange={(e) => setTask(e.target.value)}
placeholder="タスクを入力..."
className="px-4 py-2 border rounded-lg text-black"
/>
<input
type="date"
value={dueDate}
onChange={(e) => setDueDate(e.target.value)}
className="px-4 py-2 border rounded-lg text-black"
/>
<button
onClick={handleAdd}
className="bg-blue-500 hover:bg-blue-600 text-white px-4 py-2 rounded-lg"
>
追加
</button>
</div>追加ボタンの処理
タスク名と期限日の両方が入力されている場合のみリストに追加するようにバリデーションを行います。
const handleAdd = () => {
if (!task.trim() || !dueDate) return;
setTodos([...todos, { text: task.trim(), due: dueDate }]);
setTask("");
setDueDate("");
};実行結果
実行後は、下記の画像のように期限日が日付形式で入力できるようになりました
- 「タスク」と「期限日」を入力しないと追加できない（バリデーション）
- リストには期限日付きで表示される
- 期限日はブラウザ依存でカレンダー入力が可能
② タスクを期限付きでリスト表示
次に、タスクオブジェクトにdueプロパティがあるため、それを表示に反映します。Tailwind CSSで日付と内容を見やすく分けて表示します。
<ul className="space-y-2">
{todos.map((todo, index) => (
<li key={index} className="p-4 bg-blue-50 border rounded-lg flex justify-between items-center">
<div>
<p className="font-medium text-gray-800">{todo.text}</p>
<p className="text-sm text-gray-500">期限: {todo.due}</p>
</div>
<button
onClick={() => handleDelete(index)}
className="text-red-500 hover:text-red-700"
aria-label="削除"
>
削除
</button>
</li>
))}
</ul>表示結果：
- 「タスク名」と「期限日」が視覚的に分かれて表示される
- 日付フォーマットはブラウザのロケール設定に依存
③ タスクを削除する処理の実装
最後に、各タスクに削除ボタンを配置し、該当のインデックスを基にリストから除外します。filterを使って状態を更新します。
const handleDelete = (index: number) => {
setTodos(todos.filter((_, i) => i !== index));
};動作確認：
- 削除ボタンを押すと、対象のタスクが即座に消える
まとめ
今回は、タスクに期限日入力フィールドを追加し、期限付きでのタスク追加・表示・削除を実装しました。これにより、実用的なTodoアプリに一歩近づきました。
次回は、Tauri + Rustを用いたローカルファイル保存機能に取り組み、入力したデータがアプリ終了後も保持されるように改良します。
次の記事：【ファイル保存編】Tauriでローカルにデータを保存する – Todoアプリを作る④
🔗 関連記事：
✅ 第1回：Tauriとは？環境構築とプロジェクト初期化
✅ 第2回：Tauri × Next.jsでTodoリスト画面を作ろう
