React Intl【JSライブラリ1日1個】
JSライブラリを1日1つ紹介する
1日1つJSのライブラリを調べます。
① ライブラリに関するドキュメントを最初から最後まで読む
② 実際に使ってみる or 使い方を調べる
③ ライブラリを3行で説明する
本日は、React Intlのドキュメントを読んで実際に業務で使っているところを調べました。
実際に使ってみる
これはアプリを翻訳するために使われるライブラリです。（なんとYahoo製！）
ちなみに会社の人にintlってなんて読みますか？と聞いたら、以下のように返ってきました。（真顔）
私も読み方はintl派です！
こちらのドキュメントによると、「FormattedHoge」という命名規則になっているコンポーネントは、このReact Intlからimportされるコンポーネントだということがわかりました。
react-intl/Components.md at master · formatjs/react-intl · GitHub
使い方はこちらのブログがとても参考になりました。
blog.mitsuruog.info
わからなかったところ
弊社のアプリでは、言語設定ファイルがいくつかあるのですが、独自の言語ファイルもあります。（英語だけで何種類かある）
その独自のファイルを設定する方法を追ってみたかったのですが、時間切れとなってしまいました...
3行以内でまとめる
React Intlを導入すると、
- アプリの多言語対応ができる。
フィードバック
- 読み方
ちなみに読み方はweblioで発音が聞けるので聞いてみてください。
https://ejje.weblio.jp/content/intl
- 使い方について
ドキュメントにも書いてあったと思いますが、 react-intl 自体は formatjs の Intl core library というのをラップしたものなので、実は使い方は core の intl-messageformat をみたほうがわかりやすいかもしれません。
https://github.com/formatjs/formatjs/tree/master/packages/intl-messageformat
- react-intl の React っぽさ
一方で react-intl の React っぽい見所といえば、もともとあったinjectIntlの実装とHooks版のuseIntlの比較でしょうか。injectIntl では Component をラップしていたものが useIntl だとスッキリかけている感じがわかると思います。でもそれぞれ結局、Contextに渡された 各locale の messages と core のメソッド群を参照しているだけですよね。
https://github.com/formatjs/react-intl/blob/master/src/components/injectIntl.tsx
https://github.com/formatjs/react-intl/blob/master/src/components/useIntl.ts
- 最近社内で話題のISO8601
最近社内では ISO8601が話題ですが、国際的な仕組みとしては国コード、言語コード、通貨コードもISOで規定されており、多言語化対応の時には意識することも多いので、押さえておくといざという時困らないと思います。
通貨コード: ISO4217 https://ja.wikipedia.org/wiki/ISO_4217
国名コード: ISO3166-1 https://ja.wikipedia.org/wiki/ISO_3166-1
言語コード: ISO639-1 https://ja.wikipedia.org/wiki/ISO_639-1コード一覧
上記はソフトウェア業界に限らず使われる国際標準ですが、これらを使って技術標準としてまとめているのがBCP47という規格です。”ja-JP” みたいな表記、どこかでみたことありますよね。
https://ja.wikipedia.org/wiki/IETF言語タグ
以上です！
