mcpField
I
i18n-localization

i18n-localization

github.com/davila7開発33.0k568 回インストール今日更新
リポジトリ

i18n-localization について

i18n-localizationは、アプリ開発者向けの国際化・ローカライズ実践ガイドです。実装パターンやロケールファイルの構成、RTL対応、リリース前の確認項目を扱い、ハードコード文字列と翻訳漏れの検出スクリプトも含みます。

主な機能

  1. 01i18nとL10nの概念解説
  2. 02React、Next.js、Pythonの例
  3. 03ロケールファイル構成の説明
  4. 04複数形・日付・数値形式への対応
  5. 05RTLレイアウトの指針
  6. 06翻訳チェック用スクリプト

活用シーン

  1. 01アプリの多言語対応を計画
  2. 02React、Next.js、Pythonアプリへの翻訳導入
  3. 03ハードコード文字列と翻訳漏れの確認
  4. 04RTLレイアウトとローカライズ形式のテスト

インストール

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

$npx skills add https://github.com/davila7/claude-code-templates --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 対応