メッセージの管理
次に挙げる品質観点の向上を目的として、メッセージを集約的に管理します。
- 同一文言の集約、文体や体裁の統一(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;