React 多言語対応

React 多言語対応プロダクトデザイン部　松岡龍紀

目次 ▼　Webサイトにおける「多言語化対応」とは ▼　Reactで多言語化対応する術 ▼　やってみる

Webサイトにおける「多言語化対応」とは

Webサイト上のコンテンツを自国以外の言語を利用して、外国人向けにフォーマットすること。また、多言語対応には様々なポイントや課題があるが、その中で下記が挙げられる。 • ニーズに応じて取捨選択 • 技術的にコストがかかると同時に予算工数にも影響が出てくる懸念英語日本語

Reactで多言語対応する術 ※これから紹介するのは、あくまで一例で他にもやり方はあります。

• Format.JS • react-i18next

Format.JS • <Formatted**> コンポーネントを使用して多言語化を実現する。 • フォーマット機能も提供されている。こんにちは 2016年4月05日

react-i18next • ビルトインされているメソッドを使用する。 • 記述がシンプル。 • 併用できるパッケージが多数ある。こんにちは

やってみる

ディレクトリ構成

ディレクトリ構成後々使用するメソッドで型を得るためにアンビエントで型を定義。言語管理するためのjsonファイルと、設定ファイル。

use 使用するパッケージ (プラグイン)を登録 lng デフォルトで使用する言語 debug デバッグ情報表示有無 defaultNS 使用するネームスペース。複数の言語ファイルを使用するときなどに活用。
resources 翻訳に使用する元ファイルを登録。 etc https://www.i18next.com/overview/conﬁguration-options conﬁg.ts

テキストにアクセスするためのkeyと翻訳に使用したいテキストをvalueに設定。例では、言語ごとにファイルを分けて、中身をコンポーネント名で分割している。ネームスペースをうまく使えば、コンポーネントごとにファイルを分割できたりする。 json 日本語英語

useTranslationからtメソッドを取得。翻訳対象の要素にtメソッドをかまして多言語化する。 tメソッドの引数にjsonファイルで定義したkey でアクセスし対象要素を表示できる。 ComponentA.tsx

アンビエントで定義した型ファイルを用意すれば、tメソッドに型が適用される。 jsonに定義されていない内容にアクセスすると型エラーになると同時にコード補完もされるのでケアレスミスの回避にもつながる。 ComponentA.tsx

ルートコンポーネントでconﬁgファイルを importすることでi18nを適用できる。 i18nextから生えているchangeLanguage メソッドを使用してボタン切り替えで言語切替をできる。 App.tsx

https://github.com/bita-matsuoka/react-i18next 今回用意したコード

• i18next-browser-languageDetector ブラウザの言語設定を自動判別してその言語を適用させるパッケージ。 • i18next-http-backend ファイルシステムから言語ファイルをロードするためのパッケージ。 • locize 言語ファイルを管理できるプラットフォーム。エンジニアが関わらずとも翻訳チームだけで運用可能にできたり、文言修正のコストを削減できた
りする。 etc … https://www.i18next.com/overview/plugins-and-utils 有用なパッケージ

参考文献 • react-i18next　https://react.i18next.com/ • react-18next sample code https://github.com/i18next/react-i18next/tree/master/example/react-typescript • Format.JS　https://formatjs.io/

React 多言語対応

React 多言語対応

tatsuaki

Other Decks in Programming

Featured

Transcript