Material-UI Pickersの日本語化について

Material-UI Pickersの日本語化について

Material UIを使用することにしたので色々と試している。そんな中で、日付を扱うための設定が必要になりMaterial-UI Pickersを使用することにした。

使うことはできるけれども設定を変更したいと思い調べた内容についてメモする。

前提

ReactとMaterial UIを使用している。また、日付の扱いはdate-fnsを使用している。

日本語にしたい

Material-UI Pickersのローカライズについて、公式ドキュメントでは以下の説明がある。

Date-fns localization - @material-ui/pickers

date-fnsを使用している限りには上記の設定で50％程度日本語化はできる。

ただ、このままだとカレンダーをポップアップしたときになんかおかしな日本語になる。

そこで、MuiPickersUtilsProviderへ設定しているDateFnsUtilsをオーバーライドして出力内容を変更する。

import format from 'date-fns/format';
import DateFnsUtils from '@date-io/date-fns';

export class ExtendDateFnsUtils extends DateFnsUtils {
  getCalendarHeaderText(date: Date) {
    return format(date, 'yyyy MMM', { locale: this.locale });
  }

  getDatePickerHeaderText(date: Date) {
    return format(date, 'MMMd日', { locale: this.locale });
  }
}

date-fnsのformat関数では第3引数にlocaleを指定できるのでMuiPickersUtilsProviderで指定しているlocaleを使用したフォーマットへ変更する。

date-fns - modern JavaScript date utility library

これにより以下の通り表示される。

決定ボタンとキャンセルボタン

決定ボタンとキャンセルボタンはModal Wrapperにそれぞれの変更用のpropsが公開されているので指定すれば良い。

<DatePicker
  ...
  okLabel="決定"
  cancelLabel="キャンセル"
  ...
/>

決定ボタンとキャンセルボタンの位置を左右逆転するほうがしっくり来る。ただ、これはちょっと難しそう。

github.com

そのうち何かいい方法が思いついたら考えることにする。

追記

上記で見ていたソースコードは4.x-alphaだったので3.2系はこちらが正しかった。

github.com

参考

この内容は下記のブログの内容を参考にしました。とても助かりました。ありがとうございます。

Material-UI Pickersで日本語化・フォーマット変更する | エンジニアブログ

Reactを学び始めて2.5ヶ月くらい

時間のある限りReactで画面を作っている。これまで画面はBootstrapが多かったけど、今回はIntroduction - Semantic UI Reactを使用している。

Reactで画面を作っていていい点と悪い点をちょっと考えてみる。

いい点

• データが変われば表示が変わるので、画面は宣言的に作ることができる。
• いろいろなコンポーネントがOSSで提供されているので、やりたいことはたいていできそうな気がする。
• JSXに慣れたせいか、HTMLがアセンブラのように思えてくる。

悪い点

• なぜかデータが反映されていないことがあってハマる。大抵は使い方を間違えている。
• 利用するコンポーネントでこれ使えないかなぁと思って試してみると使えるpropsが結構ある。ドキュメントに記載していないのはアタリマエのことだからか？

いい点というか、すごく驚いていることだけど、JSXがとても素晴らしいと感じるようになってきた。なんかHTMLを直接書くよりJSXで書くほうがわかりやすく、抽象度が適切な気がする。

例えば、SemanticUI Reactにはいろいろなコンポーネントがあるけれども、ButtonはJSXではこう書く。

<Button primary>Primary</Button>

するとHTMLとしてはこのように出力される。

<button class="ui primary button">Primary</button>

そんなに変わりがないじゃないかと思うかもしれないけど、JSXではデザインやその他いろいろなことを担当するCSSを基本的には直接書く必要はない。もちろん、書くこともできるけど。

CSSはすごく良くできているし、欠かせないものだけど、CSSを適用するためのクラスというものが抽象度が高すぎて扱いづらい。例えば、上の例だと、ui primary buttonトクラスが定義されている。

それぞれデザイン的な役割を担っているけど、ボタンタグなのにbuttonというクラスを書くのはやはり違和感があるし、ボタンタグはUIに関するものなのにuiと書くのも冗長な気がする。

別な例で行くと、Disableのケースなんかも同じことが言えると思う。

<Button disabled>Disabled</Button>

これはDisable状態のボタンタグを生成するJSX。この結果生成されるHTMLは次のようになる。

<button class="ui disabled button" disabled="" tabindex="-1">Disabled</button>

なんと、disabledだけではなく、クラスにはui disabled buttonがついており、tabindex="-1"まで設定されている。

つまり、ただボタンタグの状態を変更したいだけだけどHTMLとCSSレベルではいろいろやらないといけない事が多い。

ここまで書いて間違っていることに気づいた。JSXではなくて、コンポーネントのことだ。JSXはコンポーネントを支える仕組みだからメリットを明確にしているのはコンポーネントで、コンポーネントを扱いやすくしているのがJSXだ。

いずれにしても、コンポーネントをJSXを利用して記述するようになってから、HTMLを直接記述することはTypeScriptを利用しているひとがJavaScriptを書くのと同じくらいの辛さがある状況になった。HTMLを直接書くことは低レイヤーを扱うのに似ているかもしれない。

ただ、いまのところコンポーネントを使う側でしかないからメリットを享受しているだけかもしれない。もう少ししたら考えが変わるかな...?

いずれにしてもReactはたのしい。

Reactを学び始めて2ヶ月くらい

自分のシステムを作ろうとし始める。Firebase AuthとFirestoreを利用すれば実現できそうと感じる。ただ、Firestoreの設計はしたことがない。しかも、以前NoSQLを利用したときはちょっと残念な結果になったので躊躇している。

ここで認証をどうやってReduxに組み込むのかわからないで困る。最終的にはReduxSagaを利用して認証を行うことにしたけれども、他にもいろいろと方法があるらしい。

サインアップしたユーザーのカスタム属性とか設定できるのだろうか？と思いつつも認証時のトリガーを使用すればうまくいくらしい情報などをゲットしたので、この方向で進むことにする。

Firebase Authentication トリガー

この頃はReduxのストアー(State)をまだ利用しないで画面を作ることだけに注力していた。画面描画の初期表示に必要な非同期通信だけはReduxSagaを使用していたけど、画面の表示はuseStateで処理していた。保存処理とかは実装しないで画面でできることを試している状態が続いていた。

useStateとかuseEffect便利ーとか思っていた。のちのちReduxを導入するとこの辺をどう使うか悩むことになる。