Upgrade to Pro — share decks privately, control downloads, hide ads and more …

20191219-react-lightning-talk

45f4267b754d9b0e55f3eeb3aaa66b41?s=47 diostray
December 19, 2019

 20191219-react-lightning-talk

45f4267b754d9b0e55f3eeb3aaa66b41?s=128

diostray

December 19, 2019
Tweet

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を⽣成するところが、同じことを何度も書く必要アリ ただこうすると⼊⼒補完が 効かなくなるので痛し痒し…