React react-i18next で日英切り替え Ark 生物紹介サイトを作る

why

kei-s-lifehack.hatenablog.com

前回の記事で、react-i18next で二言語の切り替えができるようになった

これを使って何かを作りたい！

Hatena ではなく、自分で攻略サイトを作りたい

Next.js で react-i18next が使えそうにないことからガッツリはつくれないが、

生物紹介の2言語版ならできるだろう

1 ページ構成で bootstrap で右上に切り替えボタンを表示する予定

Result

問題点

map してないから全部 return のとこに書かないといけない。構造化して map できるか試してない

json から 引っ張って画像を出せるか試してない

json の string に書くのがめっちゃめんどくさい

Markdown の読み取りのライブラリと matter での配列変換はあるんだから、そこから持ってくれば json なんかを試すより楽にテキストが書けるか...

と思うけどそもそも fs でファイルを読み取るのがフロントではできない、Next がいる。

json ではなく markdown から引っ張ってきて当てられるかいろいろ組まないと、テキストを入れる手間がやばい、もしくは cms と組み合わせるか、

それをするには http ちゃんと使えないと無理。

git init

久しぶりに React のみで立ち上げたので 再び npm と git で立ち上げるやり方を思い出す

npm create-react-app ark-ab-dinos

CRA で React App 作成

cd ark-ab-dinos

そのプロジェクトに移動

GitHub で Repository を作成

git@github.com:kaede0902/ark-ab-dinos.git

ssh url 発行して copy

git init

git remote add origin git@github.com:kaede0902/ark-ab-dinos.git

git add .gitignore

git add .

初期化して git のリモートとローカルの接続

テキスト、辞書ファイルとして locale/ を作る

src/locales/en.json

と ja.json を作る

i18n react-i18next をセット

i18n, initReactI18next, useTransition,

切り替え用の

useEffect, useState,

をセットする

前回の記事と同様。てか App.js を copy

i18next, react-i18next を npm i

中身を書き換える

locales を書き換えた

タイトルを変えていない

title を toggle できるようにする

  useEffect( () => {
    i18n.changeLanguage(lang)
    document.title = lang
  } ,[lang, i18n]);

これで ja, en にタブの名前がなったが、これではおかしい

  useEffect( () => {
    i18n.changeLanguage(lang)
    document.title = t('welcome')
  } ,[lang, i18n]);

useEffect で doc.title に t 関数で welcome のテキストを表示するようにできたが

react_devtools_backend.js:2430 src/App.js Line 31:6: React Hook useEffect has a missing dependency: 't'. Either include it or remove the dependency array react-hooks/exhaustive-deps

警告が出てしまう。

直前で t を定義してるんだが...

動いているのでとりあえずこれでよしとする。

問題が発生したらシンプルに

document.title = `Ark Abberation Dinos (${lang})`

こうする。

[

タイトルを動的に一応反映できた。ja en で三項演算子使って適切なタイトルのテキスト仕込めば行けそう。

  "rava": "ラヴェジャー",
  "rava_desc": "野生では出血攻撃を持つ。ラプターやオオカミと同様にパックボーナスで攻防が倍増する仲間にしても単体ではオオカミと比べると火力が低く、ラプターの倍の硬さの強さしかない。しかしこのサイズで 500kg 以上も掲載量があり、 Zipline を昇り降りできるのがかなり有用。"

これと

  "rava": "Ravager",
  "rava_desc": "Only wild one has bleed attack."

これを json に仕込むことで

生物紹介を出せた！！！