20191219-react-lightning-talk

Transcript

1. 本気出して多⾔語化対応してみた 2019/12/19 Startup × React LT⼤会 @diostray
2. c o n f i d e n t i a l ⾃⼰紹介: ⼩佐野 洋 (Osano Hiroshi) 1 n React歴: 2019年4⽉辺りから n そのちょっと前は当社の別プロダクトで Angular 触ってた n さらにその前は別の会社で jQuery と時々発狂しながら 戯れてたこともある n Android / サーバーサイド / インフラ もそれなりに
3. c o n f i d e n t i a l 今のReactアプリの技術スタック （⼀部） 2 n TypeScript (いつもの) n mobx (ステート管理) n validatorjs (バリデーション) n react-intl (国際化) n styled-components (いつもの) n luxon (⽇付/時刻関係) n libphonenumber (電話番号) n semantic-ui-react (デザインシステム) n card-validator (クレカ⼊⼒) n zengin-code (銀⾏ / ⽀店コード) このあたりを話します
4. c o n f i d e n t i a l デモ 3
5. c o n f i d e n t i a l 結構がんばって多⾔語化した 4 n 少しの変更 (数箇所) でアプリ内の⾔語が⼤体切り替わる u ⽇本語 / 英語だけしか対応してないので微妙 n なんだったら⽇付のタイムゾーンも切り替えることができる n 電話番号のフォーマットまで対応済みという安⼼仕様
6. c o n f i d e n t i a l つらみ （バリデーション） 5 n validatorjs は国際化対応 (⼀応) しているけど、⽇本語未対応 -> メッセージ管理を react-intl に移譲する必要があった
7. c o n f i d e n t i a l つらみ （バリデーション） 6 n validatorjs は国際化対応 (⼀応) しているけど、⽇本語未対応 -> メッセージ管理を react-intl に移譲する必要があった
8. c o n f i d e n t i a l つらみ（⽇付 / 時刻） 7 n 標準APIの Date が クソ 残念なのでライブラリ (luxon) ⼊れる必要があった u UTC のデータを JST で表⽰したい時、インスタンスを切り替える必要アリ (多分) u 曜⽇の⽇本語化が微妙 n Duration も使いたかったので結果オーライ
9. c o n f i d e n t i a l つらみ（デザインシステム） 8 n react-intl の FormattedMessage を <input placeholder={} /> の中に⼊れると 漏れなくバグる
10. c o n f i d e n t i a l つらみ（コード関係） 9 n react-intl のメッセージIDを⽣成するところが、同じことを何度も書く必要アリ ただこうすると⼊⼒補完が 効かなくなるので痛し痒し…