Conversation
…トやバリデーションメッセージをローカライズ
…をローカライズ。合計電力制限を定数化し、関連するロジックを更新。
…デーションメッセージをローカライズ
…リデーションメッセージをローカライズ
…やバリデーションメッセージをローカライズ
…装。バリデーションメッセージもi18nextに対応させて更新。
…イズ。カスタムフックからのテキスト取得を統一し、コードの可読性を向上。
…。カスタムフックを導入してテキスト取得を統一し、コードの可読性を向上。
…フックを導入してテキスト取得を統一し、コードの可読性を向上。
…トをローカライズ。カスタムフックを通じてテキスト取得を統一し、コードの可読性を向上。
…フックを通じてテキスト取得を統一し、コードの可読性を向上。
…ーカライズ。カスタムフックを通じてテキスト取得を統一し、コードの可読性を向上。
…ムフックを通じてテキスト取得を統一し、コードの可読性を向上。
There was a problem hiding this comment.
Pull request overview
このPRは、Next.js 15アプリケーションに対してnext-i18nextを使用した日本語・英語の多言語対応を実装しています。主な変更点は、ハードコードされた文字列を翻訳キーに置き換え、各コンポーネントでカスタムフックを通じて翻訳テキストを取得するパターンへの移行です。
主な変更内容:
_app.tsxにappWithTranslationHOCを追加し、各ページにgetStaticPropsで翻訳データを提供- バリデーションスキーマ内のエラーメッセージを翻訳キーに変更
- 選択肢データ(
list.ts)をlabelKeyベースの構造に変更し、動的翻訳をサポート - 各コンポーネントに専用のテキスト取得フックを追加(例:
useWelcomeBoxTexts、useUserEditModalTexts) - エラーメッセージの翻訳処理を統一
Reviewed changes
Copilot reviewed 124 out of 125 changed files in this pull request and generated no comments.
Show a summary per file
| File | Description |
|---|---|
| user/src/pages/_app.tsx | next-i18nextのHOCを追加してアプリ全体に翻訳機能を提供 |
| user/src/pages/index.tsx, home/index.tsx | getStaticPropsで翻訳データを読み込み |
| user/src/utils/validate/validate.ts | zodスキーマのエラーメッセージを翻訳キーに変更 |
| user/src/utils/list.ts | 学年・学科リストをlabelKeyベースに変更し、動的翻訳をサポート |
| user/src/components/*/hooks.ts (多数) | 各コンポーネント用のテキスト取得フックを追加 |
| user/src/components/Form/* | フォーム部品で翻訳されたエラーメッセージとラベルを使用 |
| user/src/components/Applications/* | 申請関連コンポーネントの全テキストを翻訳キー化 |
| user/src/components/LanguageSwitcher/* | 言語切り替え用の新規コンポーネント |
| .cursorrules | 日本語出力指定を追加 |
Files not reviewed (1)
- user/pnpm-lock.yaml: Language not supported
|
@copilot コードレビューして |
| {note} | ||
| </p> | ||
| <p className="text-xs text-alert">{error}</p> | ||
| <p className="text-xs text-alert">{translateError(error)}</p> |
There was a problem hiding this comment.
内部のバリデーションメッセージキーをユーザーに表示してるよ💦 翻訳キーがそのまま表示されちゃうリスクがあるね!エラーメッセージは必ず翻訳してから表示するようにしないとダメだよ👊
| </ul> | ||
| <div className="max-w-[402px] break-words text-xs text-alert"> | ||
| {error} | ||
| {uploadTexts.translateError(error)} |
There was a problem hiding this comment.
エラーメッセージの翻訳が抜けてるよ💦 他のフォームコンポーネント (TextBox, Selector, Radio, Checkbox) と同じく、translateError関数で翻訳してから表示しないとね!
| REQUIRED_PRODUCT_NAME: 'applications.power.validation.productNameRequired', | ||
| REQUIRED_MANUFACTURER: 'applications.power.validation.manufacturerRequired', | ||
| REQUIRED_MODEL: 'applications.power.validation.modelRequired', | ||
| INVALID_URL: 'applications.power.validation.invalidUrl', | ||
| INVALID_NUMBER: 'applications.power.validation.invalidNumber', | ||
| MIN_POWER: 'applications.power.validation.minPower', | ||
| MAX_POWER: 'applications.power.validation.maxPower', |
There was a problem hiding this comment.
翻訳キーの構造が不自然だよ💦 POWER_LIMITの値(1500)が変わったら、翻訳ファイル側で対応できなくなっちゃうよね。定数を直接翻訳関数に渡して、動的に値を埋め込む形にした方がいいんじゃないかな? 例:t('applications.power.validation.maxPower', { limit: POWER_LIMIT })って感じで✨
対応Issue
resolve #1963
概要
user アプリ全体に i18next を導入し、日本語/英語の多言語対応を実装
Storybook と Next.js 双方で翻訳リソースを読み込む仕組みを整備し、コンポーネント単位の文言を国際化
ヘッダーと言語切替コンポーネントを追加し、利用者が即時に表示言語を切り替えられるように改善
実装詳細
next-i18next.config.ts や i18n/ 配下の辞書ファイルを追加し、共通メッセージ・フォーム文言・バリデーションメッセージを整理
app/layout.tsx などで appWithTranslation を適用し、useTranslation を各フォーム/入力コンポーネントに展開して文言ハードコードを解消
Storybook の preview.tsx に I18nextProvider を組み込み、ドキュメント/デザイン確認時も翻訳が反映されるように調整
LanguageSwitcher を新規作成して Header に組み込み、選択状態をグローバルに反映
既存フォーム群(例: VenueApplication, Stage, Employees など)を横断的にリファクタリングし、共通フック経由で翻訳キーを参照するよう統一
画面スクリーンショット等
なし
テスト項目
[ ] pnpm run lint
[ ] pnpm run type-check
[ ] ログインモーダルと言語切替の UI が言語変更に追随すること
[ ] Storybook 上で主要コンポーネントの翻訳が期待通りに表示されること
備考
新しい翻訳キーを追加する際は i18n/locales/{ja,en}/common.json など該当ファイルへ追記してください