react-admin

React-adminは、React + Redux + Redux-Saga + React-Query + MUI + React-Router + React Hook Formなどを活用した、管理サイトのために設計されたフロントエンドフレームワークです。

デモはこちらです。

管理サイトだけでなく、データ中心の会員制のサイトなどにも使えます。

実際に仕事でちょっとした会員制のWebサイトを短納期で作れました。シンプルで保守性の高いプログラムにできます。

ra-language-japanese

デフォルトは英語ですが、フレームワーク自体が翻訳対応しており、翻訳キーと翻訳文字列を対にしたオブジェクトを渡すことで日本語化できます。

日本では知名度が低いのか、最新の翻訳ファイルが見つけられませんでした。とてもお世話になっているので、少しでも貢献できれば。ということで翻訳を公開しました。

先程の公式ドキュメントからもリンクしています。

インストール

バージョン 4 ～ 5

npm install @bicstone/ra-language-japanese@latest
# or
yarn add @bicstone/ra-language-japanese@latest
# or
pnpm add @bicstone/ra-language-japanese@latest

バージョン 2 ～ 3

npm install @bicstone/ra-language-japanese@3
# or
yarn add @bicstone/ra-language-japanese@3
# or
pnpm add @bicstone/ra-language-japanese@3

使用方法

React-admin v2系では、次のように使用できます。

import japaneseMessages from '@bicstone/ra-language-japanese';

const messages = {
  ja: japaneseMessages
};
const i18nProvider = locale => messages\[locale\];

<Admin locale="ja" i18nProvider={i18nProvider}>
...
</Admin>

v3系以降では、フックが採用されているため、ra-i18n-polyglot をimportする必要があります。

import japaneseMessages from '@bicstone/ra-language-japanese';
import polyglotI18nProvider from 'ra-i18n-polyglot';

const messages = {
  ja: japaneseMessages
};
const i18nProvider = polyglotI18nProvider(locale => messages\[locale\]);

<Admin locale="ja" i18nProvider={i18nProvider}>
...
</Admin>

まとめ

もし、便利だと思ったらスター頂ければ幸いです。実はしばらくBacklogを使用しておらず、多くの方に使用していただいているという責任感で維持している状態です。反響があると、維持するモチベーションに繋がります。

よろしくお願いいたします。