localesファイルを項目でまとめるようにリファクタリング

[tegnike]

No description provided.

[github-actions]

Issue分析結果:

[
  {
    "file_path": "locales/ja/translation.json",
    "reason": "日本語の翻訳ファイルであり、リファクタリングの対象となる可能性が高いです。"
  },
  {
    "file_path": "locales/zh/translation.json",
    "reason": "中国語の翻訳ファイルであり、リファクタリングの対象となる可能性が高いです。"
  },
  {
    "file_path": "locales/ko/translation.json",
    "reason": "韓国語の翻訳ファイルであり、リファクタリングの対象となる可能性が高いです。"
  },
  {
    "file_path": "locales/en/translation.json",
    "reason": "英語の翻訳ファイルであり、リファクタリングの対象となる可能性が高いです。"
  },
  {
    "file_path": "src/lib/i18n.js",
    "reason": "i18nの設定ファイルであり、localesファイルの構造変更に伴い修正が必要になる可能性があります。"
  },
  {
    "file_path": "src/pages/_app.tsx",
    "reason": "アプリケーションのエントリーポイントであり、多言語対応の初期化を行っているため、localesファイルの変更に影響を受ける可能性があります。"
  },
  {
    "file_path": "src/components/introduction.tsx",
    "reason": "多言語対応を実装しているコンポーネントであり、localesファイルの構造変更に伴い修正が必要になる可能性があります。"
  },
  {
    "file_path": "src/components/menu.tsx",
    "reason": "多言語対応を使用しているコンポーネントであり、localesファイルの構造変更に伴い修正が必要になる可能性があります。"
  },
  {
    "file_path": "src/components/settings.tsx",
    "reason": "言語設定を含む設定コンポーネントであり、localesファイルの構造変更に伴い修正が必要になる可能性があります。"
  },
  {
    "file_path": "src/components/messageInputContainer.tsx",
    "reason": "ユーザー入力を処理するコンポーネントであり、多言語対応に関連する可能性があります。"
  },
  {
    "file_path": "src/pages/index.tsx",
    "reason": "メインページコンポーネントであり、多言語対応を使用している可能性が高いです。"
  },
  {
    "file_path": "src/features/chat/aiChatFactory.ts",
    "reason": "AIチャット機能を提供するファイルであり、多言語対応に関連する可能性があります。"
  },
  {
    "file_path": "src/features/messages/messages.ts",
    "reason": "メッセージ関連の機能を提供するファイルであり、多言語対応に関連する可能性があります。"
  },
  {
    "file_path": "src/features/constants/systemPromptConstants.ts",
    "reason": "システムプロンプトの定数を定義しているファイルであり、多言語対応に関連する可能性があります。"
  },
  {
    "file_path": "package.json",
    "reason": "プロジェクトの依存関係を管理するファイルであり、i18nextやreact-i18nextなどの多言語関連パッケージの設定が含まれている可能性があります。"
  }
]

コード改善案:

このIssueは、localesファイルの項目をまとめてリファクタリングすることを目的としています。現在のコード構造では、各言語（日本語、英語、中国語、韓国語）ごとに翻訳ファイルが個別に存在し、それぞれのファイル内で翻訳キーと値がフラットに並べられています。これは、大規模なアプリケーションでは管理が難しくなる可能性があります。また、関連する項目がグループ化されていないため、翻訳の一貫性を保つことや、特定の機能に関連する翻訳を見つけることが困難になる可能性があります。 1. 翻訳キーの階層構造化 説明: 現在のフラットな構造を、関連する項目をグループ化した階層構造に変更することで、翻訳の管理が容易になります。これにより、特定の機能や画面に関連する翻訳を素早く見つけることができ、また新しい翻訳を追加する際の一貫性も保ちやすくなります。

改善後のコード例:

{
  "settings": {
    "general": "■ 基本設定",
    "ai": "■ AI設定",
    "youtube": "■ YouTube設定",
    "voice": "■ 音声設定",
    "slide": "■ スライド設定",
    "other": "■ その他"
  },
  "modes": {
    "externalConnection": {
      "label": "外部連携モード（WebSocket, β版）",
      "description": "APIを利用してAIキャラの発言を外部から指示することができます。"
    },
    "youtube": {
      "label": "YouTubeモード",
      "info": "先頭が「#」のコメントは無視されます。"
    },
    "conversationContinuity": {
      "label": "会話継続モード（ベータ版）",
      "info": "コメントが無いときにAIが自ら会話を継続しようとするモードです。現在OpenAI, Anthropic Claude, Google Geminiのみ対応しています。",
      "warning": "一度の回答で複数回LLMを呼び出すため、API利用料が増える可能性があります。ご注意ください。",
      "stability": "gpt-4o, gpt-4-turbo, claude-3-opus, claude-3.5-sonnetで比較的安定動作します。"
    }
  },
  // ... 他の翻訳キーも同様に階層化
}

2. 共通の接頭辞を持つキーのグループ化
   説明: 現在、多くのキーが共通の接頭辞（例：「Using」や「API」）を持っています。これらをグループ化することで、関連する設定や機能をより明確に表現できます。

   改善後のコード例:

   {
     "ai": {
       "services": {
         "openai": {
           "label": "OpenAI API キー",
           "info": "OpenAIを使用しています。多言語に対応可能です。AI サービスで OpenAI を選択している場合は下記の API キーを設定する必要はありません。"
         },
         "anthropic": {
           "label": "Anthropic API キー"
         },
         // ... 他のAIサービスも同様に
       }
     },
     "voice": {
       "engines": {
         "koeiromap": {
           "label": "Koeiromapを使用する",
           "info": "KoemotionのKoeiromap APIを使用しています。日本語のみに対応しています。詳しくは下記をご覧ください。"
         },
         "voicevox": {
           "label": "VOICEVOXを使用する",
           "info": "VOICEVOXを使用しています。日本語のみに対応しています。ローカルAPIを使用するので下記のサイトから環境にあったアプリをダウンロードし、起動しておく必要があります。"
         },
         // ... 他の音声エンジンも同様に
       }
     }
   }

3. 繰り返し使用される文字列の変数化
   説明: 「API キー」や「使用する」などの頻繁に使用される文字列を変数化することで、翻訳の一貫性を保ち、将来的な変更も容易になります。

   改善後のコード例:

   {
     "common": {
       "apiKey": "API キー",
       "use": "使用する",
       "settings": "設定",
       "info": "情報"
     },
     "ai": {
       "services": {
         "openai": {
           "label": "{{common.apiKey}} (OpenAI)",
           "use": "OpenAIを{{common.use}}"
         },
         // ... 他のサービスも同様に
       }
     }
   }

4. エラーメッセージの集約
   説明: 現在、エラーメッセージは "Errors" オブジェクト内にまとめられていますが、さらにカテゴリごとにグループ化することで、エラーの管理と拡張が容易になります。

   改善後のコード例:

   {
     "errors": {
       "api": {
         "emptyKey": "APIキーが設定されていません",
         "invalidProperty": "AI サービスの設定値が正しくありません",
         "executionError": "AI API 実行時にエラーが発生しました"
       },
       "service": {
         "invalidSelection": "選択している AI サービスが正しくありません",
         "methodNotAllowed": "リクエストが適切でありません"
       },
       "tts": {
         "serviceError": "{{serviceName}} TTS サービスでエラーが発生しました: {{message}}"
       },
       "general": {
         "unexpected": "予期せぬエラーが発生しました"
       }
     }
   }

これらの改善を実施することで、翻訳ファイルの構造が大幅に改善され、以下のような利点が得られます：

1. 管理の容易さ: 関連する翻訳項目がグループ化されることで、特定の機能や画面に関連する翻訳を素早く見つけ、更新することができます。

2. 一貫性の向上: 共通の文字列を変数化し、統一された構造を持つことで、翻訳の一貫性が向上します。

3. 拡張性: 階層構造を採用することで、新しい機能や設定を追加する際に、関連する場所に容易に翻訳を追加できます。

4. 可読性: グループ化された構造により、翻訳ファイル全体の見通しが良くなり、開発者や翻訳者がファイルの内容を理解しやすくなります。

5. メン