ロケールストア

Langsys のリアクティブな動作は、現在のロケールを保持するストアという、ひとつの小さな状態に基づいています。これを設定するだけで、ツリー内のすべての翻訳が再レンダリングされます。リロードもルート変更も不要です。

視聴 · 0:36 ロケールストア

ひとつのストアですべてを動かす

LangsysApp.init() に UserLocaleStore を渡します。これはロケール文字列を保持するリアクティブな値で、お使いのフレームワークでリアクティブと呼ばれるものがそのまま使えます。Langsys のシグナル、Svelte の writable、Vue の ref などです。この値に書き込むと、SDK は t()、<Translate>、<Phrase> のすべてを新しいロケールで再解決します。

import { LangsysApp, createLocaleStore } from 'langsys-js-react';

const locale = createLocaleStore('en-US');   // one reactive store

await LangsysApp.init({
  projectid,
  key,                    // read-only in the browser
  UserLocaleStore: locale,
});

// Later — anywhere in the app:
locale.set('es-ES');      // every t(), <Translate>, <Phrase> re-renders

各フレームワークがネイティブに読み込みます

リアクティブな仕組みはフレームワークごとに異なりますが、モデルは共通です。アクティブなロケールの信頼できる唯一の情報源を、使い慣れた書き方で扱えます。

// React    — a hook returns the current t, re-rendering on change
const t = useT();

// Vue      — a composable ref, auto-unwrapped in templates
const t = useT();

// Svelte   — a store, auto-subscribed with $
$t('Hello, {name}!', 'Greetings', { name });

切り替えるとその場で再翻訳されます

ストアが変更されると、SDK は新しいロケールのカタログを取得します。ページを再読み込みせず、1 回のリクエストで取得し、届き次第すべてを再翻訳します。それまでは、ページは表示中の言語のままなので、原文に戻ってしまうことはありません。

補間と複数形

視聴 · 1:14 複数形の処理

Params は {placeholders} に値を埋め込みます。数を含む文はコード上ではシンプルなままです。Langsys が翻訳時に各言語の複数形を生成し、SDK が表示時にアクティブなロケールで該当する分岐を描画します。

t('You have {count} items', 'Cart', { count });

// You write that one flat sentence. Langsys generates each locale's plural
// forms during translation, and the SDK renders the branch your count matches:
// en → "1 item" / "3 items"   ·   es → "1 artículo" / "3 artículos"

並べて比較できる仕組み。すべてのバインディングが共通の langsys-js-typescript コアに処理を委譲しているため、1 つのストアで React、Vue、Svelte を同時に動かせます。比較デモでは、まさにこの仕組みによって、1 つのスイッチャーで 3 つすべてを完全に連動させています。

実際に試してみましょう。インタラクティブなプレイグラウンドでは、フレーズとパラメーターを編集し、ロケールを切り替えて、実際の SDK が再翻訳する様子を確認できます。