【UI編】Tauri×Next.jsでTodoリスト画面を作ろう – Todoアプリを作る②

はじめに

前回の第1回記事では、TauriとNext.js（App Router構成）を使ったデスクトップアプリの開発環境を整えました。

今回はその続きとして、Tauri TodoアプリのUIを構築します。Tailwind CSSは初期設定で導入済みのため、TailwindCSSを使って簡単なデザインも実装していきます。

UI構成の概要

作成する画面には以下の要素を含めます。

• アプリ名と説明を表示するヘッダー
• Todo入力フォームと追加ボタン
• 入力されたTodoをカード形式でリスト表示

ディレクトリ構成（App Router + src配下）

Next.js App Router構成では以下のような配置になります。

/src
├── app
│   └── page.tsx
├── components
│   └── TodoCard.tsx

TodoCardコンポーネントの実装

src/components/TodoCard.tsx に以下のようなUIを記述します。

'use client';

import { useState } from "react";

export default function TodoCard() {
  const [task, setTask] = useState("");
  const [todos, setTodos] = useState<string[]>([]);

  const handleAdd = () => {
    if (!task.trim()) return;
    setTodos([...todos, task.trim()]);
    setTask("");
  };

  return (
    <div className="max-w-xl mx-auto mt-20 p-8 bg-white rounded-2xl shadow-xl border border-gray-200">
      <h1 className="text-3xl font-bold mb-2 text-center text-gray-800">My Todo App</h1>
      <p className="text-center text-gray-500 mb-6">今日やることを整理しましょう</p>

      <div className="flex items-center gap-2 mb-6">
        <input
          type="text"
          className="flex-1 px-4 py-2 border rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-400 text-black"
          placeholder="タスクを入力..."
          value={task}
          onChange={(e) => setTask(e.target.value)}
        />
        <button
          onClick={handleAdd}
          className="bg-blue-500 hover:bg-blue-600 text-white font-semibold px-4 py-2 rounded-lg transition duration-150"
        >
          追加
        </button>
      </div>

      <ul className="space-y-2">
        {todos.map((todo, index) => (
          <li
            key={index}
            className="px-4 py-3 bg-blue-50 border border-blue-100 rounded-lg text-gray-800 shadow-sm"
          >
            {todo}
          </li>
        ))}
      </ul>
    </div>
  );
}

実行結果

• 中央に白いカードUIが表示される
• タスク入力後にリスト表示され、見た目も整っている
• モバイルでも快適に操作可能

トップページへの組み込み

src/app/page.tsx にコンポーネントを読み込み、ページに表示させます。

import TodoCard from "@/components/TodoCard";

export default function Home() {
  return (
    <main className="bg-gradient-to-br from-blue-50 to-white min-h-screen py-10 px-4">
      <TodoCard />
    </main>
  );
}

実行結果

ページを起動すると、簡単にテキストを入力するだけのTodo UIが表示されます。簡単なUIについてはTailwind CSSを活かしています。

まとめ

今回は、Next.js App Router構成に沿った簡単なTodoリストUIの構築を行いました。

次回は、Todoの削除機能やローカル保存など、より実用的な機能の実装を行います。TauriとRustの力を活かして、ネイティブアプリらしいデータ永続化処理を組み込んでいきましょう。

今回簡単に使ったTailwind cssのデザインで参考になるコンポーネント集もぜひ活用してください：
👉 https://tailwindui.com/