jpskill.com
📦 その他 コミュニティ

internationalization-helper

多言語アプリ開発で、プログラムに直接書かれた文字を抜き出して翻訳ファイルを管理し、翻訳の網羅性を確認することで、国際化対応を効率的に進めるSkill。

📜 元の英語説明(参考)

Extracts hardcoded strings for i18n, manages translation files, and ensures locale coverage. Use when working with multi-language apps, translations, or user mentions i18n, localization, or languages.

🇯🇵 日本人クリエイター向け解説

一言でいうと

多言語アプリ開発で、プログラムに直接書かれた文字を抜き出して翻訳ファイルを管理し、翻訳の網羅性を確認することで、国際化対応を効率的に進めるSkill。

※ jpskill.com 編集部が日本のビジネス現場向けに補足した解説です。Skill本体の挙動とは独立した参考情報です。

⚡ おすすめ: コマンド1行でインストール(60秒)

下記のコマンドをコピーしてターミナル(Mac/Linux)または PowerShell(Windows)に貼り付けてください。 ダウンロード → 解凍 → 配置まで全自動。

🍎 Mac / 🐧 Linux 
mkdir -p ~/.claude/skills && cd ~/.claude/skills && curl -L -o internationalization-helper.zip https://jpskill.com/download/18109.zip && unzip -o internationalization-helper.zip && rm internationalization-helper.zip
🪟 Windows (PowerShell) 
$d = "$env:USERPROFILE\.claude\skills"; ni -Force -ItemType Directory $d | Out-Null; iwr https://jpskill.com/download/18109.zip -OutFile "$d\internationalization-helper.zip"; Expand-Archive "$d\internationalization-helper.zip" -DestinationPath $d -Force; ri "$d\internationalization-helper.zip"

完了後、Claude Code を再起動 → 普通に「動画プロンプト作って」のように話しかけるだけで自動発動します。

💾 手動でダウンロードしたい(コマンドが難しい人向け)
  1. 1. 下の青いボタンを押して internationalization-helper.zip をダウンロード
  2. 2. ZIPファイルをダブルクリックで解凍 → internationalization-helper フォルダができる
  3. 3. そのフォルダを C:\Users\あなたの名前\.claude\skills\(Win)または ~/.claude/skills/(Mac)へ移動
  4. 4. Claude Code を再起動
⬇ .zip でダウンロード(推奨) ⬇ .skill 形式(上級者用) 元のソース ↗

⚠️ ダウンロード・利用は自己責任でお願いします。当サイトは内容・動作・安全性について責任を負いません。

🎯 このSkillでできること

下記の説明文を読むと、このSkillがあなたに何をしてくれるかが分かります。Claudeにこの分野の依頼をすると、自動で発動します。

📦 インストール方法 (3ステップ)

  1. 1. 上の「ダウンロード」ボタンを押して .skill ファイルを取得
  2. 2. ファイル名の拡張子を .skill から .zip に変えて展開(macは自動展開可)
  3. 3. 展開してできたフォルダを、ホームフォルダの .claude/skills/ に置く
    • · macOS / Linux: ~/.claude/skills/
    • · Windows: %USERPROFILE%\.claude\skills\

Claude Code を再起動すれば完了。「このSkillを使って…」と話しかけなくても、関連する依頼で自動的に呼び出されます。

詳しい使い方ガイドを見る →
最終更新
2026-05-18
取得日時
2026-05-18
同梱ファイル
1

📖 Skill本文(日本語訳)

※ 原文(英語/中国語)を Gemini で日本語化したものです。Claude 自身は原文を読みます。誤訳がある場合は原文をご確認ください。

国際化ヘルパー

多言語アプリケーションにおける国際化 (i18n) とローカリゼーション (l10n) の管理を支援します。

どのような時に使うか

  • ユーザーから i18n のサポートを求められた場合
  • 新しい言語を追加する場合
  • 未翻訳の文字列を見つける場合
  • 翻訳ファイルを管理する場合
  • ユーザーが「translation」、「i18n」、「l10n」、「locale」に言及した場合

指示

1. i18n フレームワークの検出

JavaScript/React:

  • react-i18next
  • react-intl (FormatJS)
  • i18next
  • LinguiJS

Vue:

  • vue-i18n

Python:

  • gettext
  • Django i18n
  • Flask-Babel

Ruby/Rails:

  • I18n gem (組み込み)

インポート、設定ファイル、または翻訳ディレクトリを探してください。

2. ハードコードされた文字列の検索

未翻訳のテキストを検索します。

// 悪い例: ハードコード
<button>Submit</button>
<p>Welcome, {user.name}!</p>

// 良い例: 翻訳済み
<button>{t('common.submit')}</button>
<p>{t('welcome.message', { name: user.name })}</p>

検索パターン:

  • JSX/テンプレートタグ内の文字列
  • 警告/エラーメッセージ
  • フォームのラベルとプレースホルダー
  • ボタンのテキスト
  • バリデーションメッセージ

除外: コードコメント、console.log、テスト文字列

3. 翻訳ファイルへの抽出

React-i18next 形式 (JSON):

{
  "common": {
    "submit": "Submit",
    "cancel": "Cancel"
  },
  "welcome": {
    "message": "Welcome, {{name}}!"
  }
}

Gettext 形式 (.po):

msgid "submit_button"
msgstr "Submit"

msgid "welcome_message"
msgstr "Welcome, %(name)s!"

4. 翻訳キーの整理

ベストプラクティス:

  • 機能ごとの名前空間: users.profile.title
  • 一般的な文字列のグループ化: common.buttons.save
  • コンテンツではなくコンテキストを記述: errors.login.invalid ( errors.wrong_password ではない)
  • 一貫性のある命名規則

5. 翻訳カバレッジの確認

ロケールファイルを比較して、不足している翻訳を見つけます。

en.json: 150 keys
es.json: 142 keys (missing 8)
fr.json: 150 keys ✓

Missing in es.json:
- users.profile.bio
- settings.privacy.title
[...]

6. 複数形の処理

言語によって複数形のルールが異なります。

// react-i18next
t('items', { count: 0 })  // "0 items"
t('items', { count: 1 })  // "1 item"
t('items', { count: 5 })  // "5 items"

// 翻訳ファイル
{
  "items_zero": "{{count}} items",
  "items_one": "{{count}} item",
  "items_other": "{{count}} items"
}

7. 日付、時刻、数値のフォーマット

ロケール対応のフォーマットを使用します。

// Numbers
const price = new Intl.NumberFormat('en-US', {
  style: 'currency',
  currency: 'USD'
}).format(29.99);

// Dates
const date = new Intl.DateTimeFormat('fr-FR').format(new Date());

8. RTL (右から左) のサポート

アラビア語、ヘブライ語の場合:

  • CSS: direction: rtl;
  • HTML: <html dir="rtl">
  • 論理プロパティ: margin-left の代わりに margin-inline-start

9. 翻訳テンプレートの生成

新しいロケールのテンプレートを作成します。

# ベース言語からキーをコピーし、値を空にする
cp locales/en.json locales/de.json
# 翻訳用にマーク

10. ベストプラクティス

  • 翻訳を別のファイルに保持する
  • キーとしてソーステキストではなくキーを使用する
  • 翻訳者にコンテキストを提供する
  • 長い文字列でテストする (ドイツ語は長くなることが多い)
  • 複雑な文字列には ICU MessageFormat を使用する
  • 翻訳された文字列を連結しない
  • すべてのユーザーに表示されるテキストを抽出する

サポートファイル

  • templates/i18n-config.js: 設定例
  • templates/locale-file.json: 翻訳ファイルテンプレート
📜 原文 SKILL.md(Claudeが読む英語/中国語)を展開

Internationalization Helper

Helps manage internationalization (i18n) and localization (l10n) in multi-language applications.

When to Use

  • User requests i18n support
  • Adding new languages
  • Finding untranslated strings
  • Managing translation files
  • User mentions "translation", "i18n", "l10n", "locale"

Instructions

1. Detect i18n Framework

JavaScript/React:

  • react-i18next
  • react-intl (FormatJS)
  • i18next
  • LinguiJS

Vue:

  • vue-i18n

Python:

  • gettext
  • Django i18n
  • Flask-Babel

Ruby/Rails:

  • I18n gem (built-in)

Look for imports, config files, or translation directories.

2. Find Hardcoded Strings

Search for untranslated text:

// Bad: Hardcoded
<button>Submit</button>
<p>Welcome, {user.name}!</p>

// Good: Translated
<button>{t('common.submit')}</button>
<p>{t('welcome.message', { name: user.name })}</p>

Search patterns:

  • Strings in JSX/template tags
  • Alert/error messages
  • Form labels and placeholders
  • Button text
  • Validation messages

Exclude: code comments, console.log, test strings

3. Extract to Translation Files

React-i18next format (JSON):

{
  "common": {
    "submit": "Submit",
    "cancel": "Cancel"
  },
  "welcome": {
    "message": "Welcome, {{name}}!"
  }
}

Gettext format (.po):

msgid "submit_button"
msgstr "Submit"

msgid "welcome_message"
msgstr "Welcome, %(name)s!"

4. Organize Translation Keys

Best practices:

  • Namespace by feature: users.profile.title
  • Group common strings: common.buttons.save
  • Describe context, not content: errors.login.invalid not errors.wrong_password
  • Consistent naming convention

5. Check Translation Coverage

Compare locale files to find missing translations:

en.json: 150 keys
es.json: 142 keys (missing 8)
fr.json: 150 keys ✓

Missing in es.json:
- users.profile.bio
- settings.privacy.title
[...]

6. Handle Pluralization

Different languages have different plural rules:

// react-i18next
t('items', { count: 0 })  // "0 items"
t('items', { count: 1 })  // "1 item"
t('items', { count: 5 })  // "5 items"

// Translation file
{
  "items_zero": "{{count}} items",
  "items_one": "{{count}} item",
  "items_other": "{{count}} items"
}

7. Date, Time, Number Formatting

Use locale-aware formatting:

// Numbers
const price = new Intl.NumberFormat('en-US', {
  style: 'currency',
  currency: 'USD'
}).format(29.99);

// Dates
const date = new Intl.DateTimeFormat('fr-FR').format(new Date());

8. RTL (Right-to-Left) Support

For Arabic, Hebrew:

  • CSS: direction: rtl;
  • HTML: <html dir="rtl">
  • Logical properties: margin-inline-start instead of margin-left

9. Generate Translation Template

Create template for new locale:

# Copy keys from base language, empty values
cp locales/en.json locales/de.json
# Mark for translation

10. Best Practices

  • Keep translations in separate files
  • Use keys, not source text as keys
  • Provide context to translators
  • Test with long strings (German often longer)
  • Use ICU MessageFormat for complex strings
  • Avoid concatenating translated strings
  • Extract all user-facing text

Supporting Files

  • templates/i18n-config.js: Configuration examples
  • templates/locale-file.json: Translation file template