「はい・いいえ」の確認ダイアログを出す

Recipe ID: dlg-002

ユーザーに「はい」か「いいえ」(または OK/Cancel)の選択を求める確認ダイアログを表示する方法を紹介します。

前提条件

プラグインの追加

ダイアログ機能を利用するには dialog プラグインが必要です。

npm run tauri add dialog

src-tauri/src/lib.rs.plugin(tauri_plugin_dialog::init()) が追加されていることを確認してください。

Permissions (権限) の設定

src-tauri/capabilities/default.jsondialog:allow-confirm (または allow-ask) 権限を追加します。

{
  "permissions": [
    ...,
    "dialog:default",
    "dialog:allow-confirm"
  ]
}

1. フロントエンドから作成する (TypeScript)

@tauri-apps/plugin-dialogconfirm() 関数を使用します。

基本的な確認ダイアログ

ユーザーが「OK(はい)」を押すと true、「Cancel(いいえ)」を押すと false が返されます。

import { confirm } from '@tauri-apps/plugin-dialog';

const answer = await confirm('本当に実行しますか?');

if (answer) {
  console.log('ユーザーは「OK」を選択しました');
} else {
  console.log('ユーザーは「Cancel」を選択しました');
}

警告表示としての使用

kind: 'warning' を指定することで、ファイル削除などの取り返しのつかない操作の前に注意を喚起できます。

import { confirm } from '@tauri-apps/plugin-dialog';

const shouldDelete = await confirm('このファイルは永久に削除されます。\n本当によろしいですか?', {
  title: '削除の確認',
  kind: 'warning',
});

if (shouldDelete) {
  // 削除処理を実行
}

ボタンラベルのカスタマイズ

okLabelcancelLabel を使ってボタンのテキストを変更できます。

import { confirm } from '@tauri-apps/plugin-dialog';

const isConfirmed = await confirm('変更を保存せずに閉じますか?', {
  title: '未保存の変更',
  kind: 'info',
  okLabel: '保存せずに閉じる',
  cancelLabel: 'キャンセル',
});

2. バックエンドから作成する (Rust)

Rust 側で以下のように確認ダイアログを表示できます。

確認ダイアログの表示

use tauri_plugin_dialog::{DialogExt, MessageDialogKind, MessageDialogButtons};

// フロントエンドから呼び出し可能なコマンド
#[tauri::command]
fn show_confirm_dialog(app_handle: tauri::AppHandle) {
    app_handle.dialog()
        .message("本当に実行しますか?")
        .kind(MessageDialogKind::Warning)
        .title("確認")
        .buttons(MessageDialogButtons::YesNo)
        .show(|result| {
            match result {
                true => println!("ユーザーは「はい」を選択しました"),
                false => println!("ユーザーは「いいえ」を選択しました"),
            }
        });
}

#[cfg_attr(mobile, tauri::mobile_entry_point)]
pub fn run() {
    tauri::Builder::default()
        .plugin(tauri_plugin_dialog::init())
        .invoke_handler(tauri::generate_handler![show_confirm_dialog])
        .run(tauri::generate_context!())
        .expect("error while running tauri application");
}

補足

  • ブロッキング: Rust の show メソッドはノンブロッキングで、コールバックで結果を受け取ります。同期的に待ちたい場合は show_blocking が使える場合があります(プラットフォームによる)。