【発展編】Tauriアプリで通知を送ってみる – Todoアプリを作る⑥

はじめに

これまでのシリーズでは、Tauri × Next.js を使ってTodoアプリを作り、ローカルファイル保存やビルド・配布まで一通り実装してきました。

• 第1回：環境構築と初期化
• 第2回：UI作成
• 第3回：期限付きタスク
• 第4回：ファイル保存
• 第5回：ビルドと配布

さて、第6回では、Todoアプリに通知機能を追加してみます。タスクの追加時や、期限が近づいたときにデスクトップ通知を出せると、実用性が一段と増します。

Tauriアプリで通知を送る方法

Tauriには通知機能が標準で用意されています。
今回、使用するのは @tauri-apps/plugin-notification モジュールです。

Notifications

Send native notifications to the user.

v2.tauri.app

必要なモジュールをインストール

まずは、Tauriの通知APIが含まれているパッケージを導入します。
このコマンドで、rust側の設定やライブラリのインストールすべてが行われます。

npm run tauri add notification

通知を出すコード（テスト）

まずは、通知が出せるか確認するため、src/components/TodoCard.tsx の任意の場所（例：useEffect内）に以下を記述してみましょう。

import { sendNotification } from "@tauri-apps/plugin-notification";

sendNotification({ title: "Tauri通知テスト", body: "通知の送信に成功しました。" });

実行結果： OSの通知センターにタイトル付きの通知が表示されます。

macOSでは通知が画面右上に表示され、Windowsでは通知バナーとして表示されます。Tauriアプリがバックグラウンドでも通知される点が便利です。

期限日に通知を送る

次に、Todoの期限日が「今日」の場合に通知を出すように実装してみます。日付比較にはdayjsなどのライブラリを使うと便利です。

ライブラリのインストール

npm install dayjs

期限チェック処理の追加

編集ファイル： src/components/TodoCard.tsx

import dayjs from "dayjs";
import { sendNotification } from "@tauri-apps/plugin-notification";

useEffect(() => {
  todos.forEach((todo) => {
    const isToday = dayjs().isSame(dayjs(todo.due), "day");
    if (isToday) {
      sendNotification({
        title: "今日のタスク",
        body: `「${todo.text}」の期限は今日です。`,
      });
    }
  });
}, [todos]);

実行結果：

• アプリを起動すると、期限が「今日」のタスクがある場合に通知が表示されます
• さらに、タイトルには「今日のタスク」、本文にはタスク名が表示されます

通知について、詳しくは Tauri 公式の Notification API ドキュメントを参照してください：
👉 Tauri Notification API

まとめ

今回は、Tauriアプリに通知機能を追加し、タスク追加時や期限当日にデスクトップ通知を出す方法を紹介しました。
通知を活用することで、ユーザーの作業漏れを防ぐだけでなく、日常的に使ってもらえるアプリになります。

次回は、起動時のUI改善やテーマ切り替えなど、さらにユーザビリティを向上させるアイデアを取り上げていく予定です。

🔗 関連記事：
✅ 第1回：環境構築と初期化
✅ 第2回：UI作成
✅ 第3回：期限付きタスク
✅ 第4回：ファイル保存
✅ 第5回：ビルドと配布