mcpField
I
i18n-localization

i18n-localization

github.com/vudovn開発8.2k211 回インストール9 週間前に更新
リポジトリ

i18n-localization について

多言語アプリを開発する人向けの国際化・ローカライズ実践ガイドです。実装パターン、RTL 対応、書式設定、チェック用スクリプトを扱います。

主な機能

  1. 01React、Next.js、Python の実装例
  2. 02翻訳キーと名前空間
  3. 03ロケール別の日付・数値書式
  4. 04複数形と ICU メッセージ
  5. 05RTL レイアウトの指針
  6. 06ハードコード文字列の検査

活用シーン

  1. 01公開アプリのローカライズ計画
  2. 02機能への翻訳対応の追加
  3. 03翻訳漏れのプロジェクト検査

インストール

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

$npx skills add https://github.com/vudovn/ag-kit --skill i18n-localization

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

同梱ファイルscripts/i18n_checker.py

詳細

i18n と ローカライゼーション

国際化 (i18n) とローカライゼーション (L10n) のベストプラクティスです。

1. 基本概念

用語意味
i18n国際化 - アプリを翻訳可能にすること
L10nローカライゼーション - 実際の翻訳
Locale言語 + 地域 (en-US, tr-TR)
RTL右から左へ書く言語 (アラビア語、ヘブライ語)

2. i18n を使うタイミング

プロジェクトの種類i18n は必要か？
公開 Web アプリ✅ はい
SaaS 製品✅ はい
社内ツール⚠️ 場合による
単一地域向けアプリ⚠️ 将来を考慮
個人プロジェクト❌ 任意

3. 実装パターン

React (react-i18next)
import { useTranslation } from 'react-i18next';

function Welcome() {
  const { t } = useTranslation();
  return <h1>{t('welcome.title')}</h1>;
}
Next.js (next-intl)
import { useTranslations } from 'next-intl';

export default function Page() {
  const t = useTranslations('Home');
  return <h1>{t('title')}</h1>;
}
Python (gettext)
from gettext import gettext as _

print(_("Welcome to our app"))

4. ファイル構成

locales/
├── en/
│   ├── common.json
│   ├── auth.json
│   └── errors.json
├── tr/
│   ├── common.json
│   ├── auth.json
│   └── errors.json
└── ar/          # RTL
    └── ...

5. ベストプラクティス

DO ✅
  • 生のテキストではなく翻訳キーを使用する
  • 翻訳を機能ごとに名前空間で分ける
  • 複数形への対応をサポートする
  • 日付・数値の形式をロケールごとに扱う
  • 最初からRTLを想定して計画する
  • 複雑な文字列には ICU メッセージ形式を使用する
DON'T ❌
  • コンポーネント内に文字列をハードコードする
  • 翻訳済みの文字列を連結する
  • テキストの長さを想定する (ドイツ語は30%長い)
  • RTL レイアウトを忘れる
  • 同じファイル内で言語を混在させる

6. よくある問題

問題解決策
翻訳の欠落デフォルト言語にフォールバックする
文字列のハードコードリンターまたはチェックスクリプトを使用する
日付形式Intl.DateTimeFormat を使用する
数値形式Intl.NumberFormat を使用する
複数形ICU メッセージ形式を使用する

7. RTL サポート

/* CSS Logical Properties */
.container {
  margin-inline-start: 1rem;  /* Not margin-left */
  padding-inline-end: 1rem;   /* Not padding-right */
}

[dir="rtl"] .icon {
  transform: scaleX(-1);
}

8. チェックリスト

リリース前に確認します:

  • ユーザーに表示されるすべての文字列が翻訳キーを使用している
  • サポートするすべての言語のロケールファイルが存在する
  • 日付・数値の書式設定に Intl API を使用している
  • RTL レイアウトをテスト済み (該当する場合)
  • フォールバック言語が設定されている
  • コンポーネントに文字列がハードコードされていない

スクリプト

スクリプト目的コマンド
scripts/i18n_checker.pyハードコードされた文字列と翻訳の欠落を検出するpython scripts/i18n_checker.py <project_path>

コメント

Markdown 対応