translate について
React i18next プロジェクトのフロントエンド翻訳ファイルを管理するスキルです。言語間でのキーの追加・削除、並べ替え、整合性確認、固定訳語の適用を案内します。
主な機能
- 01各言語へのキー追加と削除
- 02JSON キーの一貫した並べ替え
- 03英語を基準にしたキー照合
- 04固定訳語の適用
- 05VeChain Kit の言語同期
活用シーン
- 01UI 文言を各言語に追加
- 02不要になった翻訳キーの削除
- 03言語ファイルの不足・余分なキー確認
- 04アプリと VeChain Kit の言語同期
インストール
コマンドをコピーしてターミナルで実行します。
$
npx skills add https:/ / github.com/ vechain/ vechain-ai-skills --skill translateインストール後、Claude Code で/translateを入力して読み込まれたか確認します。
詳細
翻訳スキル
apps/frontend/src/i18n/languages/ 内の翻訳ファイルを管理します。
翻訳ファイル
- 15 言語:en(ソース)、de、es、fr、hi、it、ja、ko、nl、pt、sv、tr、tw、vi、zh
- 形式:フラットな JSON キーと値のペア(キー = 英語のフレーズ)
- 補間:
{{variableName}} - ライブラリ:
apps/frontend/src/i18n/index.tsxで設定されたreact-i18next - 言語リストは
apps/frontend/src/i18n/index.tsxのlanguages配列で定義されています
新しい翻訳キーを追加する場合
- 英語の値を指定して、新しいキーを
en.jsonに追加します - 他のすべての言語ファイルに同じキーを追加し、各ファイルの言語に合わせて正しく翻訳します
- すべてのファイルに追加した後、すべての翻訳ファイルをキーのアルファベット順(大文字と小文字を区別しない)に並べ替えます
翻訳キーを削除する場合
- 15 個すべての言語ファイルからキーを削除します
- 削除後もファイルの並び順を維持します
並べ替えのルール
- すべての翻訳 JSON ファイルは、キーをアルファベット順(大文字と小文字を区別しない)に並べ替える必要があります
- 並べ替えは
en.jsonだけでなく、すべての言語ファイルに適用します - 変更後は必ずキーの順序を確認します
並べ替えの手順
apps/frontend/src/i18n/languages/ 内の各 .json ファイルについて、以下を実行します。
- JSON を解析します
- すべてのキーを取得し、大文字と小文字を区別せずに並べ替えます
- キーを並べ替えたオブジェクトを再構築します
- 2 スペースのインデントと末尾の改行を付けて書き戻します
Node.js スクリプトまたは jq を使って並べ替えます。Node.js を使う例:
node -e "
const fs = require('fs');
const glob = require('glob');
const files = glob.sync('apps/frontend/src/i18n/languages/*.json');
files.forEach(f => {
const obj = JSON.parse(fs.readFileSync(f, 'utf8'));
const sorted = Object.keys(obj)
.sort((a, b) => a.localeCompare(b, undefined, { sensitivity: 'base' }))
.reduce((acc, key) => { acc[key] = obj[key]; return acc; }, {});
fs.writeFileSync(f, JSON.stringify(sorted, null, 2) + '\n');
});
"
同期チェック
翻訳を変更した後は、以下を確認します。
en.jsonに、コード内に存在するすべてのキーがあること(t("...") の使用箇所を検索します)- 英語以外のすべてのファイルのキーが、
en.jsonと完全に一致すること - 英語以外のファイルで不足しているキーには、各ファイルの言語に合わせた正しい翻訳を追加すること
- 英語以外のファイルにある余分なキー(
en.jsonにないキー)は削除すること - すべてのファイルでキーがアルファベット順に並んでいること
固定語
apps/frontend/src/i18n/fixedWords.json を参照してください。言語コードごとにグループ化されています("all" はすべての言語に適用されます)。
用途は 2 つあります。
- 翻訳しない語 — 値を英単語と同じにします(例:
"round": "round"にすると、イタリア語でも「round」を英語のまま使用します) - 固定の訳語 — その概念に対して必ず使う翻訳を値に指定します(例:
"endorsement": "supporto"は、イタリア語で endorsement に常に「supporto」を使うことを意味します)
翻訳する際は、必ず最初にこのファイルを確認します。対象言語に固定の訳語がある場合は、すべての文で一貫して使用してください。
VeChain Kit:双方向の言語同期
アプリで @vechain/vechain-kit を使用している場合は、Kit の UI 言語をホストアプリと同期させます。
- アプリ → Kit:
VeChainKitProvider内でi18n.on("languageChanged", ...)を購読し、useCurrentLanguage()のsetLanguage(lng)を呼び出します。これにより、アプリ内でユーザーが言語を変更すると(例:フッターのセレクター)、Kit の言語も更新されます。 - Kit → アプリ:
VeChainKitProviderにlanguage={i18n.language}とonLanguageChange={(lng) => i18n.changeLanguage(lng)}を渡します。これにより、Kit 内でユーザーが言語を変更すると(例:ウォレットモーダル)、アプリの言語も更新されます。
完全な実装パターンについては、vechain-kit スキルのリファレンス translations-vechain-kit.md を参照してください。
pre-commit と ESLint(不足キー/未使用キー)
en.jsonの未使用キー: コード内(t("...")、i18nKey="...")で一度も使われていないen.jsonのキーを検出するスクリプトを実行し、0 以外の終了コードを返して pre-commit を失敗させます。en.jsonまたはコードがステージングされたときに実行します。- 他のロケールの不足キー: 各ロケールのキーと
en.jsonのキーを比較し、不足キーまたは余分なキーがある場合に失敗するスクリプトを実行します。翻訳ファイルがステージングされたとき、または CI で実行します。 - ESLint: エディターまたは lint で不足キーを検出するために、必要に応じて
eslint-plugin-i18next(または同様のプラグイン)を追加します。
概要表については、vechain-kit スキルのリファレンス translations-vechain-kit.md を参照してください。
コメント
Markdown 対応