1つのプロジェクト。4つのSDK。同じ歩調で翻訳。
同じフレーズを langsys-js-react、langsys-js-vue、langsys-js-svelte、そしてそれらすべてがラップしている素の langsys-js-typescript ベースSDKでレンダリングし、1つの共有Langsysプロジェクトを読み込みます。ロケールを切り替えると、すべてのパネルが一斉に更新されるのを確認できます。
同じフレーズを3つの記述方法で比較できます。違いは各パネルの下にあるコードだけです。メッセージを 1 に進めると、すべてのバインディングが一度に再描画されます。文はフラットな形で書かれています。Langsys が翻訳時に各ロケールの複数形を生成するため、ブランチを自分で書く必要はありません。
langsys-js-reactHello, Sarah!
You have 3 new messages.
const t = useT();
const count = useSignal(countStore);
<p>{t('Hello, {name}!', 'LearnDemo', { name: 'Sarah' })}</p>
<p>{t('You have {count} new messages.', 'LearnDemo', { count })}</p>langsys-js-vueHello, Sarah!
You have 3 new messages.
const t = useT();
const count = useSignal(countStore);
<p>{{ t('Hello, {name}!', 'LearnDemo', { name: 'Sarah' }) }}</p>
<p>{{ t('You have {count} new messages.', 'LearnDemo', { count }) }}</p>langsys-js-svelteHello, Sarah!
You have 3 new messages.
import { t } from 'langsys-js-svelte';
<p>{$t('Hello, {name}!', 'LearnDemo', { name: 'Sarah' })}</p>
<p>{$t('You have {count} new messages.', 'LearnDemo', { count: $countStore })}</p>langsys-js-typescript import { t, tSignal } from 'langsys-js-typescript';
tSignal.subscribe(() => {
hello.textContent = t('Hello, {name}!', 'LearnDemo', { name: 'Sarah' });
messages.textContent = t('You have {count} new messages.', 'LearnDemo', { count });
});各パネルのブリッジ: useSignal(React) · useSignal(Vue) · $store(Svelte — アダプター不要) · signal.subscribe()(バニラ)。
フレームワークを選ぶ
基盤となるSDKは共通です。各ページでは、ライブデモとともに、それぞれのバインディングの作法を紹介します。
React
フック — useT()、useCurrentLocale()。
Vue
基本シグナルを ref にブリッジする Composable。
Svelte
ベースのシグナルは、すでに Svelte のストアコントラクトに対応しています。
TypeScript
フレームワークなし — ベース SDK が DOM を直接操作します。
Langsys は初めてですか?コンセプトでは、このデモの土台となる考え方を説明しています。フレーズがキーであること、ロケールストア、そして読み取り専用キーがブラウザで安全な理由です。