システムの言語設定（ロケール）を取得する

システムの言語設定（ロケール）を取得する方法を解説します。
アプリの国際化（i18n）対応や、日付・通貨のフォーマット設定に利用できます。

前提条件

@tauri-apps/plugin-os が必要です。

npm run tauri add os

Permissions (権限) の設定

src-tauri/capabilities/default.json に以下の権限を追加します。

{
    "permissions": [
        ...,
        "os:default"
    ]
}

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

2つのアプローチがあります。
1. OS プラグイン: システム設定のロケールを取得 (ja-JP 等)。
2. Web 標準 API: ブラウザ（WebView）が認識しているロケールを取得。

1. OS プラグインを使用 (推奨)

システム設定を確実に取得したい場合はこちらを使用します。

import { locale } from '@tauri-apps/plugin-os';

async function checkLocale() {
  const loc = await locale();
  console.log(`System Locale: ${loc}`); 
  // 例: "ja-JP", "en-US"
}
checkLocale();

2. Web 標準 API (Navigator)

Web アプリケーションとして一般的な方法です。WebView の設定に依存します。

const browserLocale = navigator.language;
console.log(`Navigator Language: ${browserLocale}`);

const languages = navigator.languages;
console.log(`Preferred Languages:`, languages);

実践例: Intl でのフォーマット

取得したロケールを使って日付を表示する例です。

import { locale } from '@tauri-apps/plugin-os';

async function showDate() {
  const currentLocale = await locale(); // "ja-JP" など
  
  // ロケールが無効な場合や null の場合のフォールバック
  const locSafe = currentLocale || 'en-US';

  const date = new Date();
  const fmt = new Intl.DateTimeFormat(locSafe, { dateStyle: 'full' }).format(date);
  
  console.log(fmt); 
  // ja-JP なら "2023年12月31日日曜日"
}

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

Rust 側でシステムのロケールを取得するには sys-locale クレートが一般的です。

依存関係の追加 (Rust)

src-tauri/Cargo.toml に以下の依存関係を追加します。

[dependencies]
sys-locale = "0.3"

Rust 実装

use tauri::command;

#[command]
fn get_backend_locale() -> String {
    sys_locale::get_locale().unwrap_or_else(|| "en-US".to_string())
}

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

フロントエンドからの呼び出し

import { invoke } from '@tauri-apps/api/core';

invoke<string>('get_backend_locale').then(loc => {
    console.log(`Backend Locale: ${loc}`);
});