プロジェクトに新しい言語を追加したり、既存の翻訳メッセージ(json)を更新した際の標準手順とコマンド
このプロジェクトでは、多言語対応(I18n)に @inlang/paraglide-js を採用しています。
新しい言語の追加や、文言の修正を行った際は、以下の手順に従って翻訳ファイルを更新し、Paraglideの再コンパイルを実行します。
翻訳ファイルは clients/web/messages/ ディレクトリ内に言語ごとのJSONファイルとして配置されています。
messages/en.json (ベース言語)messages/es.jsonmessages/ja.json新しい言語を追加する場合の流れ:
clients/web/project.inlang/settings.json を開きます。languageTags 配列に新しい言語コード(例: "fr")を追加します。clients/web/messages/ フォルダ内に新しいJSONファイル(例: fr.json)を作成し、ベースとなる英語のキー構造にあわせて翻訳を記述します。メッセージJSONを追加・変更しただけでは、アプリ側には反映されません。
必ず以下のコンパイルコマンドを実行して、静的な型付き翻訳辞書(src/lib/paraglide/)を再生成する必要があります。
# clients/web ディレクトリに移動
cd clients/web
# Paraglideのコンパイルを実行し、出力を src/lib/paraglide に指定する
pnpm exec paraglide-js compile --project ./project.inlang --outdir ./src/lib/paraglide
[!WARNING] Viteサーバー(
npm run dev)を実行中であっても、JSONの変更を自動検知しない場合があります。新しい文言を追加したり言語を増やした場合は、必ず上記の手動コンパイルを実行し、生成された*.jsファイルに差分が出ていることを確認してください。
Svelteコンポーネント内では、自動生成された $lib/paraglide/messages モジュールから翻訳関数をインポートして使用します。
例:
<script lang="ts">
import * as m from '$lib/paraglide/messages';
import { setLocale, locales, type AvailableLanguageTag } from '$lib/paraglide/runtime';
</script>
<!-- 翻訳されたテキストの表示 -->
<h1>{m.home_hero_title()}</h1>
<!-- 言語切り替えメソッドの実行 -->
<button onclick={() => setLocale('ja' as AvailableLanguageTag)}>日本語</button>
言語の切り替えや、現在サポートされている言語のリスト (locales) を取得するには $lib/paraglide/runtime を利用します。