React react-i18next 挨拶サイト 5言語の切り替えをできるようにした

why

kei-s-lifehack.hatenablog.com

前回の記事で

日英の切り替えだけ作って満足していたら

ブラッシュアップに対応言語に、中国語（簡体字）、中国語（繁体字）、スペイン語、韓国語、ポルトガル語を追加しろそれができれば、設計の最小限のレベルだ

と言われたので。

問題点

import xxJson from './locales/xx.json'

xx: {                  
  translation: xxJson, 
},                     

<button onClick={     
  () => setLang('xx') 
}>                    
  XXXXXX

言語ひとつ追加するたびにこれ毎回全箇所書くのシステムと呼べないだろ

言語追加するために button を何個も作らないといけない。map すれば楽になりそう。

button が多い。select にすればコンパクトになるけど、select で発火するのを実装する必要がある。クリックの回数が増える。

基礎機能

react-i18next-try の Repository を流用

繁体字どうするの

言語コードと国コード

繁体字は中国語のコードの zh 以外に何があるのかわからなかったが、

書体の問題なので、国-書体 として

zh-hans, zh-hant, にするべきらしい。

言語コードまとめ

www.science.co.il

これを参考にして

zh-hans, zh-hant, の簡体字、繁体字、

es, ko, pt, のスペイン、コリア、ポルトガル、を使用する。

とりあえず中国語を追加する

前提として前回の記事で日英切り替えができる状態になっている

locales/zh.json を作成

Google Translate で翻訳する

{
  "welcome": "欢迎光临 i18next",
  "changeLang": "用中文"
}

作成

import zhJson from './locales/zh.json'

    zh: {
      translation: zhJson,
    },

App.js で import して zh に当てると

f:id:kei_s_lifehack:20210306212213p:plain

ボタン固定で作成できた。しかし現在の言語をハイライトするか、もしくは非表示にしないと違和感があるな...

参考に厚労省のサイト見たら現在の言語が一番上に出ている設計になっていた。

f:id:kei_s_lifehack:20210320182959p:plain

切り替えると警告が出た

The following pages are translated by a machine translation system. Note that the machine translation system doesn't guarantee 100% correctness. Some proper nouns might not be translated correctly

機械翻訳機能、すごい！

挨拶一覧

Japanese, ja, こんにちわ, ようこそ,
English, en, Hello, Welcome to,
Chinese
  "welcome": "欢迎光临 i18next",
  "hello": "你好",
  "changeLang": "用中文"
Spanish
  "welcome": "Bienvenida a i18next",
  "hello": "Hola",
  "changeLang": "usar español"
Korean
  "welcome": "i18next에 오신 것을 환영합니다",
  "hello": "안녕하세요",
  "changeLang": "한국어 변경"