メッセージの管理
次に挙げる品質観点の向上を目的として、メッセージを集約的に管理します。
- 同一文言の集約、文体や体裁の統一(UI/UX)
- 保守性
- 多言語化対応への拡張性
メッセージの種類
管理対象とするメッセージは「ラベル」、「バリデーション」、「メッセージ」といったメッセージ種類に分類し、それぞれにルールを設けて管理します。 管理対象とするメッセージとメッセージの種類の関連付けを表したのが次の表となります。
| 管理対象とするメッセージ | メッセージの種類 | 主な使用箇所 | |
|---|---|---|---|
| ラベル | ラベル | 画面表示項目 | |
| 画面タイトル | |||
| 入力テキスト内のプレースホルダー | |||
| 操作ガイダンス | |||
| 入力エラーメッセージ | 単項目エラー | バリデーション | |
| 相関項目エラー | |||
| 操作メッセージ | 情報メッセージ | メッセージ | スナックバー |
| 警告メッセージ | |||
| エラーメッセージ | |||
| 確認メッセージ | ダイアログ | ||
メッセージキーの体系
メッセージは一意のメッセージキーとそのメッセージ文言として管理します。 メッセージキーの体系はメッセージの種類ごとに異なります。 以下、それぞれの種類に応じたメッセージ体系を説明します。
ラベル
ラベルのメッセージキーには日本語を用います。 メッセージキーとメッセージ文言は同じ値となります。 メッセージのプレースホルダーもそのままメッセージキーとして含めます。
ラベル
export const bundledMessages = {
/* 中略 */
パスワード: 'パスワード',
ホーム: 'ホーム',
'最大{0}件': '最大{0}件',
'ユーザー名とパスワードを入力してください。': 'ユーザー名とパスワードを入力してください。',
/* 中略 */
} as const;
バリデーション
メッセージキーにはvalidationをプレフィックスとしたピリオド区切りの英単語を用います。
英単語はバリデーションの種類を表すものとし、このアプリケーションのバリデーションライブラリとして採用するYupのAPIに対応したものとします。
メッセージのプレースホルダーはメッセージキーに含めません。
バリデーション
export const bundledMessages = {
/* 中略 */
'validation.string.required': '{0}は必須項目です。',
'validation.string.length': '{0}は{1}文字でなければなりません。',
'validation.string.min': '{0}は{1}文字以上でなければなりません。',
'validation.string.max': '{0}は{1}文字以下でなければなりません。',
/* 中略 */
} as const;
メッセージ
メッセージはユーザの操作確認や操作結果を通知するメッセージ文言を管理します。 メッセージキーには、メッセージの機能を表すピリオド区切りの英単語をプレフィックスとした、簡潔な日本語を用います。 メッセージ文言にプレースホルダーの指定がある場合、それが分かるようにメッセージキーにも含めます。 プレフィックスの種類は次の通りです。
| プレフィックス | メッセージの機能 |
|---|---|
| fw | 基盤部品、フレームワーク |
| app | アプリの共通メッセージ |
| app.[機能名] | アプリの個別メッセージ |
メッセージ
export const bundledMessages = {
/* 中略 */
'fw.コンフリクト': '処理が競合しました。',
'app.登録完了': '登録しました。',
'app.task.期限超過{0}件エラー': '期限を超過したタスクが{0}件です。確認してください。',
'app.task.タスク登録完了': 'タスクを登録しました。',
/* 中略 */
} as const;