<Translate> — content block
Welcome to our store
Browse the catalog in your language.
Svelte langsys-js-svelte
langsys-js-typescript をベースにした薄い Svelte 5 バインディングで、成熟した標準のバインディングです。基本シグナルはすでに Svelte のストアコントラクトを満たしているため、$ ストア構文で翻訳を読み取れます。
AI コーディングエージェントを使っていますか?次のプロンプトを渡してください
Add Langsys translation to this Svelte app.
1. Read https://docs.langsys.dev/llms.txt, then follow
https://docs.langsys.dev/learn/sdk/svelte/ for the install and setup.
2. The English text in the code is the translation key. Wrap user-facing
strings as they are: no keys file, no extraction step, and no
hand-written plural or gender branches (Langsys generates those).
3. Read the Langsys project id and API key from environment variables.
The write key is for development and servers only; anything shipped
to the browser gets the read-only key.
4. Keep brand names and user-generated content out of translation.インストール
npm install langsys-js-svelteプロジェクトやキーをまだお持ちでない場合は、クイックスタートで 2 分ほどで両方とも用意できます。
初期化する
import { writable } from 'svelte/store';
import { LangsysApp } from 'langsys-js-svelte';
const locale = writable('en-US'); // a standard Svelte writable
await LangsysApp.init({
projectid: import.meta.env.VITE_LANGSYS_PROJECT_ID,
key: import.meta.env.VITE_LANGSYS_API_KEY, // read-only in the browser
UserLocaleStore: locale,
});インタラクティブプレイグラウンド
フレーズとカテゴリを編集し、パラメーターをフィールドまたは生のJSONで設定してから、ロケールを切り替えて、実際のSDKがリアルタイムで翻訳する様子を確認しましょう。
例
count を 1 にして、また戻してみてください。文法もそれに合わせて変わります。このフレーズはフラットな形で書かれています。Langsys が翻訳時に各ロケール(基準ロケールを含む)の複数形を生成し、SDK が count に応じてブランチを選択します。ICU を手で書く必要はありません。 パラメーター
Output
Hello, Sarah! You have 3 new messages.
const value = $derived($t("Hello, {name}! You have {count} new messages.", "Greetings", {"name":"Sarah","count":3}));<script>
import { t } from 'langsys-js-svelte';
let name = 'Sarah';
</script>
<p>{$t('Hello, {name}!', 'Greetings', { name })}</p>どれを使えばよいですか?
| 翻訳中… | 使用 | 理由 |
|---|---|---|
| コード内のプレーンな文字列(ラベル、タイトル、メッセージなど)です。パラメーターも含められます。数は単純な形で記述すれば、Langsys が複数形を生成します。 | $t | 文字列を返します。コード内のフレーズが、そのまま検索キーであり、基準言語のデフォルトテキストにもなります。 |
| インラインのマークアップや動的な値を含む1つの文を、分割せずそのまま扱います。 | <Phrase> | インライン要素は中立的なトークンに置き換えられるため、翻訳者はマークアップの位置も含めて文全体を並べ替えることができ、実際の要素はレンダリング時に復元されます。 |
| ヒーロー、フッター、カードなど、複数のフレーズを含むマークアップの領域。 | <Translate> | 1 つのタグでその領域を 1 つのコンテンツブロックとして登録します。各テキストはそれぞれ個別のフレーズとして抽出され、マークアップ構造は保持されます。 |
| 絶対に翻訳してはいけないもの — ブランド名、コード、ID。 | <DontTranslate> | トークナイザーとレンダラーはそのサブツリーをスキップします。周囲の文は翻訳されますが、その部分は原文のまま残ります。 |
目安：文字列 → $t · マークアップを含む文 → <Phrase> · マークアップを含む領域 → <Translate> · 翻訳しないもの → <DontTranslate>。
左には各コンテンツコンポーネントをライブでレンダリングし、右にはそれを生成するコードを表示します。ペアの上にはそのデモのカットも掲載しています。
<script>
import { Translate } from 'langsys-js-svelte';
</script>
<Translate category="Home">
<h3>Welcome to our store</h3>
<p>Browse the catalog in your language.</p>
</Translate><Phrase> — params & markup
Hi %name%, you have %count% items in your cart.<Phrase category="Cart" params={{ name: 'Sarah', count: 3 }}>
Hi %name%, you have %count% items in your cart.
</Phrase><DontTranslate> — never translated
Welcome! This sentence always stays in English. Thanks for visiting!
<!-- Inside a translated region, the marked span alone stays verbatim. -->
<Translate category="Tour">
<p>Welcome! <DontTranslate>This sentence always stays in English.</DontTranslate> Thanks for visiting!</p>
</Translate>性の一致
スペイン語、フランス語、ロシア語では、対象となる人物に合わせて {username} has been invited が語形変化します。Langsys は、複数形と同じように、翻訳時にこれらの分岐を生成します。引数の名前は変数名に _gender を付けたもので、値は male、female、other のいずれかです。分かる場合は必ず渡してください。仕組みと、対応が必要なフレーズの見つけ方 →
<script>
import { t } from 'langsys-js-svelte';
export let user; // user.gender is 'male' | 'female' | 'other'
</script>
<!-- Pass the agreement argument alongside the value it inflects. -->
<p>{$t('{username} has been invited', 'Team',
{ username: user.name, username_gender: user.gender })}</p>性別がわからない場合は、'other' を明示的に渡してください。これが中立の分岐です。渡されていない場合でも、SDK が自動的に other の分岐を使用するため（langsys-js-typescript 0.6.4 以降）、文は正しく表示されます。
コンテンツブロック
<Translate> リージョンは 1 つのコンテンツブロックとして登録されます。このセクションは翻訳マネージャーで 1 つの単位として翻訳・レビューされますが、内部の各テキストはそれぞれ独立したフレーズです。別の場所で同じ文を書いた場合は、すでにある翻訳が再利用されます。
<Translate category="Home">
<h3>Welcome to our store</h3>
<p>Browse the catalog in your language.</p>
<p>Free shipping on orders over $50.</p>
</Translate>カテゴリ
他の i18n ライブラリでは、1つの単語が複数の意味を持ちうるため、すべての文字列にキーを考え出す必要があります。Langsys では文章はコード内にそのまま残り、その役割をカテゴリが担います。フレーズとそのカテゴリの組み合わせがキーになるので、同じ単語でも2つのカテゴリにあれば2つの翻訳になります。
<!-- The phrase plus its category is the key. -->
<a href="/">{$t('Home', 'Main menu')}</a> <!-- es: Inicio -->
<h2>{$t('Home', 'Home repairs')}</h2> <!-- es: Hogar -->属性
表示されるテキストが翻訳されても、プレースホルダー、画像の説明、スクリーンリーダー用のラベルが英語のままでは、フォームは半分しか翻訳されていません。<Translate>なら、これらも同じ処理で翻訳されます。placeholder、alt、title、aria-label、aria-placeholderがテキストと一緒に翻訳され、追加のマークアップは不要です。translate="no"を指定したものは、子要素も含めて翻訳の対象外になります。
<Translate category="Checkout">
<label>Email address</label>
<input placeholder="[email protected]" />
<img src="/lock.svg" alt="Secure checkout" />
<button aria-label="Place your order">
Place order
</button>
</Translate>数値と日付
数値や日付をパラメーターとして渡すと、SDK が CLDR(Unicode のロケールデータ)に従い、表示中のロケールに合わせて書式設定します。数値は Intl.NumberFormat、Date は Intl.DateTimeFormat で処理されます。対象は区切り文字だけではありません。桁区切りは形式そのものが異なり、1234567 は米国英語では 1,234,567、インド英語(en-IN)では 12,34,567 になります。
逆の注意点として、数値として渡したものはすべて数量として扱われます。注文番号は数量ではないため、文字列として渡してください。そうしないと、ドイツ語では注文番号が 1.048.576 のように表示されてしまいます。
<script lang="ts">
import { t } from 'langsys-js-svelte';
const renewsAt = new Date(2026, 2, 14); // 14 March 2026, local time
</script>
<p>{$t('Balance: {amount}', 'Billing', { amount: 1234.5 })}</p>
<p>{$t('Renews {when}', 'Billing', { when: renewsAt })}</p>
<!-- An order number is not a quantity: pass it as a string. -->
<p>{$t('Order {ref}', 'Billing', { ref: '1048576' })}</p>サーバーサイドレンダリング
カタログをサーバー(SvelteKit)で取得してクライアントに渡すと、SDK は再取得せずに起動できます。SDK はブラウザ上で翻訳を行うため、起動するまではサーバーでレンダリングされた HTML は基準言語のままです。
// SvelteKit: +layout.server.ts seeds the catalog, the client init reuses it.
LangsysApp.init({
projectid, key,
UserLocaleStore: locale,
initialTranslations, // fetched on the server
initialTranslationsLocale, // fetched on the server
ssrTokenStrategy: 'client',
});