mcpField
I
internationalization-i18n

internationalization-i18n

github.com/mindrally開発287985 回インストール3 週間前に更新
リポジトリ

internationalization-i18n について

Web・モバイルアプリ開発者向けの国際化ガイダンススキルです。翻訳の構成、ロケール対応の書式、RTL レイアウト、テスト手法を扱います。

主な機能

  1. 01翻訳キーの整理
  2. 02ロケールに応じた日付と数値の書式
  3. 03RTL レイアウトの指針
  4. 04ローカライズのテスト手法

活用シーン

  1. 01Web アプリへの言語対応の追加
  2. 02React Native アプリのローカライズ
  3. 03ロケール別の日付と通貨の書式設定
  4. 04RTL レイアウトとテキスト拡張の確認

インストール

コマンドをコピーしてターミナルで実行します。

$npx skills add https://github.com/mindrally/skills --skill internationalization-i18n

インストール後、Claude Code で/internationalization-i18nを入力して読み込まれたか確認します。

詳細

国際化（i18n）

Web アプリケーションとモバイルアプリケーションの国際化に精通しています。アプリケーションをさまざまな言語、地域、文化に容易に適応できるよう、以下のガイドラインを適用してください。

基本原則

  • 正確な例を用いて、簡潔で技術的な TypeScript コードを記述します
  • 関数型および宣言型のプログラミングパターンを使用し、クラスは避けます
  • ユーザー向けのすべてのテキストを国際化し、ローカライズに対応させます
  • 助動詞を含む説明的な変数名を使用します（isLoading、hasError）
  • テキストの拡張を想定して設計します（言語によっては、必要なスペースが30～50％増加します）

Web アプリケーションの i18n

React/Next.js アプリケーション
  • Web アプリケーションには i18next と react-i18next を使用します
  • 名前空間ベースで翻訳を整理します
  • 翻訳内の動的な値には補間を使用します
  • 数に基づくテキストには複数形化機能を活用します
  • 必要に応じて、コンテキストベースの翻訳を実装します
実装パターン
// Use translation hooks
const { t } = useTranslation('common');

// Basic translation
<h1>{t('welcome.title')}</h1>

// With interpolation
<p>{t('greeting', { name: userName })}</p>

// With pluralization
<span>{t('items', { count: itemCount })}</span>
Nuxt.js アプリケーション
  • Vue アプリケーションには @nuxtjs/i18n モジュールを使用します
  • ローカライズされたルートで SEO のベストプラクティスを実装します
  • 翻訳には useI18n コンポーザブルを使用します
  • 翻訳ファイルの遅延読み込みを活用します

React Native/Expo アプリケーション

モバイルの i18n 設定
  • React Native アプリには expo-localization を使用します
  • 翻訳には react-native-i18n または i18n-js を使用します
  • デバイスのロケールを自動検出します
  • フォールバック言語に対応します
モバイル固有の考慮事項
  • RTL（右から左）レイアウトに対応します
  • アクセシビリティのため、適切なテキストの拡大縮小を確保します
  • デバイスのロケール変更を動的に処理します
  • システム言語が異なるデバイスでテストします

翻訳ファイルの整理

ファイル構成
locales/
  en/
    common.json
    auth.json
    errors.json
  es/
    common.json
    auth.json
    errors.json
  fr/
    common.json
    auth.json
    errors.json
翻訳キーのベストプラクティス
  • 説明的な階層型キーを使用します（例：auth.login.button、errors.network.timeout）
  • 可能な限り、翻訳に HTML を埋め込まないようにします
  • 文脈に応じた意味の明確な翻訳にします
  • 翻訳者向けに翻訳の文脈を記載します

ロケールに応じた書式設定

日付と時刻
  • 日付の書式設定には Intl.DateTimeFormat を使用します
  • ユーザーのロケール設定を尊重します
  • 日付は UTC で保存し、現地のタイムゾーンで表示します
  • 複数の日付書式設定に対応します
数値と通貨
  • 数値の書式設定には Intl.NumberFormat を使用します
  • ユーザーの希望する書式で通貨を表示します
  • ロケールごとの小数点区切りと桁区切りを処理します
  • 必要に応じて、右から左への数値表示に対応します
並べ替えと比較
  • ロケールに応じた文字列比較には Intl.Collator を使用します
  • ロケール固有の並べ替え規則を実装します
  • 発音区別符号や特殊文字を正しく処理します

RTL（右から左）への対応

レイアウトに関する考慮事項
  • CSS 論理プロパティ（margin-inline-start、padding-inline-end）を使用します
  • 双方向テキストに対応します
  • RTL 言語向けに UI レイアウトを反転します
  • RTL 言語（アラビア語、ヘブライ語など）で十分にテストします
実装
/* Use logical properties */
.element {
  margin-inline-start: 1rem;
  padding-inline-end: 0.5rem;
}

ベストプラクティス

開発ガイドライン
  • ユーザー向けの文字列をハードコードしないでください
  • すべてのテキストを翻訳ファイルに抽出します
  • 複雑な翻訳には ICU メッセージ形式を使用します
  • 翻訳が見つからない場合のフォールバック機構を実装します
  • ページを再読み込みせずに言語を切り替えられるようにします
コンテンツに関する考慮事項
  • 画像内のテキストは避け、可能であれば CSS/SVG のテキストを使用します
  • テキストの拡張に対応できる柔軟なレイアウトを設計します
  • アイコンだけでなく、テキストラベル付きのアイコンを使用します
  • 画像や色に関する文化的な違いを考慮します
テスト要件
  • 開発中に擬似ローカライズでテストします
  • テキストがコンテナーからはみ出さないことを確認します
  • リリース前に実際の翻訳でテストします
  • ネイティブスピーカーと RTL レイアウトを確認します
  • 複数のロケールで通貨と日付の書式をテストします

i18n の状態管理

ユーザー設定の保存
  • 言語の状態管理には Zustand または React Context を使用します
  • 言語設定を永続化します（localStorage、AsyncStorage）
  • 言語設定をユーザーアカウントと同期します
  • 正しいロケールでサーバーサイドレンダリングを処理します
データの取得
  • 翻訳済みコンテンツのキャッシュには TanStack React Query を使用します
  • 必要に応じて、言語変更時にクエリを無効化します
  • API からロケール固有のコンテンツを取得します
  • 翻訳の読み込み状態を適切に処理します

エラー処理

  • 翻訳されたエラーメッセージを表示します
  • 翻訳がない場合はデフォルト言語にフォールバックします
  • 開発環境では、欠落している翻訳キーをログに記録します
  • エラー表示では、RTL／LTR のテキスト方向に対応します
  • ローカライズされたエラーメッセージを使用し、実行時検証には Zod を使用します

コメント

Markdown 対応