i18nによる日本語、英語の多言語対応 #1989
Open
i18nによる日本語、英語の多言語対応 #1989
Conversation
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
…トやバリデーションメッセージをローカライズ
…をローカライズ。合計電力制限を定数化し、関連するロジックを更新。
…デーションメッセージをローカライズ
…リデーションメッセージをローカライズ
…やバリデーションメッセージをローカライズ
…装。バリデーションメッセージも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
Contributor
Author
|
@copilot コードレビューして |
4 tasks
| {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関数で翻訳してから表示しないとね！
Comment on lines
+31
to
+37
| 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 })って感じで✨
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
対応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 など該当ファイルへ追記してください