mcpField
I
internationalization-i18n

internationalization-i18n

github.com/secondsky開発240449 回インストール5 週間前に更新
リポジトリ

internationalization-i18n について

多言語対応、翻訳管理、ロケールに応じた書式設定を支援する開発スキルです。i18next の例、複数形、日付と数値の書式設定、RTL のパターンを含みます。

主な機能

  1. 01React i18next のセットアップ
  2. 02複数形のパターン
  3. 03日付と数値の書式設定
  4. 04右から左へのレイアウト対応
  5. 05React-Intl と gettext の資料
  6. 06翻訳管理の実践方法

活用シーン

  1. 01React アプリへの言語選択機能追加
  2. 02ロケール別の日付と数値の書式設定
  3. 03翻訳の複数形への対応
  4. 04RTL 言語向けのレイアウト調整

インストール

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

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

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

同梱ファイルreferences/frameworks.md

詳細

国際化（i18n）

適切な翻訳管理と書式設定を備えた多言語対応を実装します。

i18next のセットアップ（React）

import i18n from 'i18next';
import { initReactI18next } from 'react-i18next';
import LanguageDetector from 'i18next-browser-languagedetector';

i18n
  .use(LanguageDetector)
  .use(initReactI18next)
  .init({
    fallbackLng: 'en',
    interpolation: { escapeValue: false },
    resources: {
      en: { translation: { welcome: 'Welcome, {{name}}!' } },
      es: { translation: { welcome: '¡Bienvenido, {{name}}!' } }
    }
  });

// Usage
const { t } = useTranslation();
<h1>{t('welcome', { name: 'John' })}</h1>

複数形

// Translation file
{
  "items": "{{count}} item",
  "items_plural": "{{count}} items",
  "items_zero": "No items"
}

// Usage
t('items', { count: 0 })  // "No items"
t('items', { count: 1 })  // "1 item"
t('items', { count: 5 })  // "5 items"

日付と数値の書式設定

// Dates
new Intl.DateTimeFormat('de-DE', {
  dateStyle: 'long',
  timeStyle: 'short'
}).format(new Date());

// Numbers
new Intl.NumberFormat('en-US', {
  style: 'currency',
  currency: 'USD'
}).format(1234.56);  // "$1,234.56"

// Relative time
new Intl.RelativeTimeFormat('en', { numeric: 'auto' })
  .format(-1, 'day');  // "yesterday"

RTL のサポート

/* Use logical properties */
.container {
  margin-inline-start: 1rem;  /* margin-left in LTR, margin-right in RTL */
  padding-inline-end: 1rem;
}

/* Direction attribute */
html[dir="rtl"] .icon {
  transform: scaleX(-1);
}

その他のフレームワーク

以下を参照してください：references/frameworks.md

  • React-Intl（Format.js）の完全な実装
  • Flask/Babel を使用した Python gettext
  • RTL 言語のサポートパターン
  • ICU Message Format の例

ベストプラクティス

  • ユーザーに表示されるすべての文字列を抽出します
  • 複雑な翻訳には ICU メッセージ形式を使用します
  • 疑似ローカライズでテストします
  • 最初から RTL をサポートします
  • 翻訳された文字列を連結しないでください
  • 本番環境ではプロの翻訳者を利用します

コメント

Markdown 対応