i18nによる日本語、英語の多言語対応#1989
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 })って感じで✨
|
@codex 日本語でレビューしてください |
|
Codex Review: Didn't find any major issues. Nice work! ℹ️ About Codex in GitHubYour team has set up Codex to review pull requests in this repo. Reviews are triggered when you
If Codex has suggestions, it will comment; otherwise it will react with 👍. Codex can also answer questions or update the PR. Try commenting "@codex address that feedback". |
YosukeIida
left a comment
YosukeIida
left a comment
There was a problem hiding this comment.
静的要素については良さそう LGTM
プルダウンの選択肢(動的要素？)の英語対応は別issueなら mergeでokかと．
対応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 など該当ファイルへ追記してください