Amplify UI Componentsの日本語化

#概要
Nuxt+Amplifyで認証周りを組むことを想定していますが、そのままVueを使ってもReactでもAngularでも可能かと思います。

こちらを日本語化していきます。

結論の前に

2020年の4月くらいにAmplify UI Componentsに新バージョンがリリースされた模様です。
具体的には
Latest @aws-amplify/ui-<framework> と Legacy 版である aws-amplify-<framework>
でして、現時点で Amplify hogehogeみたいな形でググると大体Legacy版のブログやQiita記事が出てきます。
最初よくわからなかったのでLegacy版でコーディングしていましたが、Latest版の恩恵が大きいので、後に続く方は必ずLatest版を使いましょう。
ちなみに自分は公式ドキュメントがすべて英語なため読み解くのが面倒だったので、楽をしようとしたらやり直す羽目になりました。

日本語化について

Latest版では日本語化についてもちゃんと公式ドキュメントに書いていました。
https://docs.amplify.aws/ui/customization/translations/q/framework/vue
旧版では見受けられなかったので、新版の恩恵の一つかもしれません。

実装

実際上記のドキュメントから自分がどのように実装しているかが下記になります。
ちなみに私はNuxtどころかVueを使うのが初めてで、ろくすっぽ公式ドキュメントを読んでいないのでベストプラクティスかどうかわかりません。良い方法あれば教えて下さい。
Nuxtで開発した場合、まずはAmplify用の初期設定ファイルをplugin直下に作ると思うので、そちらに日本語化の処理を書きます。
多分vueで構築している場合はmain.jsです。

amplify.js

import Vue from 'vue'
import Amplify, * as AmplifyModules from 'aws-amplify'
import '@aws-amplify/ui-vue'
import awsExports from '../src/aws-exports'
import { vocabularies } from './dictionary.js'

AmplifyModules.I18n.putVocabulariesForLanguage('ja', vocabularies)

Vue.prototype.$Amplify = AmplifyModules
Vue.use(AmplifyModules)
Amplify.configure(awsExports)

公式通りですね。
I18クラスのputVocabulariesForLanguageメソッドを呼び出します。
第一引数に翻訳する言語をstringで、第二引数に実際の翻訳する対象の箇所と翻訳語の日本語をobjectで指定します。私は変換ファイルを別途pluginフォルダ内に作成しています。
第2引数を具体的に説明すると、上記画像の中で Sign in to your accountという英語を日本語化したいとします。すると

dictionary.js

{[Translations.SIGN_IN_HEADER_TEXT]: 'ログイン',}

このような形のObjectを作ります。
ではどの英語がどのkeyに対応しているのかといいますと、下記のリンクに書いています。
https://github.com/aws-amplify/amplify-js/blob/main/packages/amplify-ui-components/src/common/Translations.ts

ちなみにエラーメッセージ系は下記でした。
https://github.com/aws-amplify/amplify-js/blob/main/packages/auth/src/common/AuthErrorStrings.ts

では上記を元に辞書ファイルを作っていきましょう。
表示してほしくない文字列は空文字にしています。
※なお、Qiitaの仕様で括らないと表示されないためkeyをシングルクォーテーションでくくっていますが、実際は外してください。

dictionary.js

import { Translations } from '@aws-amplify/ui-components'

export const vocabularies = {
  '[Translations.CREATE_ACCOUNT_TEXT]': 'アカウントの作成',
  '[Translations.EMAIL_LABEL]': 'メールアドレス *', 
  '[Translations.EMAIL_PLACEHOLDER]': ' ',
  '[Translations.FORGOT_PASSWORD_TEXT]': 'パスワードをお忘れの場合',
  '[Translations.PASSWORD_LABEL]': 'パスワード *',
  '[Translations.PASSWORD_PLACEHOLDER]': ' ', 
  '[Translations.RESET_PASSWORD_TEXT]': 'パスワードを変更する',
  '[Translations.SIGN_IN_ACTION]': 'ログイン',
  '[Translations.SIGN_IN_HEADER_TEXT]': 'ログイン',
}

このように翻訳用のObjectを用意してあげると、、、

成功しました。
placeholderとか不要なので空文字にしてます。

学び

1. 英語でもめんどくさがらずに、ちゃんと公式を読みにいきましょう。
   読んだら読んだで大した量ではないです。

2. Amplify UI Componentsは最新版を利用しましょう。
   公式通りTutorialを進めたら最新版で構築するような流れになっています。

お願い

一部エラーメッセージの定義ファイルがどこにあるのかわかりませんでした。
もし発見された方は教えていただけますと幸いです。

エラーメッセージ例
Custom auth lambda trigger is not configured for the user pool.
An account with the given email already exists.