50倍高速なi18n(多言語)対応をLisan.jsでしてみる with React

こんにちは、UIデザイナ兼フロントエンジニアのロモットです。
Lisan.jsという 超高速をうたう国際化ライブラリ を試してみました。

概要

フロントエンドJSにおいて
他の国際化ライブラリよりも 50倍高速 かつ 軽量 だとうたう Lisan.js を使ってみます。
プラグインを使用することでローカライゼーション(l10n)も行うことが可能なようです。

create-react-app で作成したReactアプリを前提にしています。

• Lisan.jsをインストールする
• React(JSX)でも使えるようにしてみる
• 開発中に辞書を更新されるようにする

インストール

yarnの場合

yarn add lisan // 本体
yarn add lisan-cli -D // 開発/デプロイ用クライアント

環境設定

開発中にLisanの辞書更新で自動更新される＆ビルド時に辞書がコンパイルされるようにします。

ディレクトリの作成

辞書ファイルを置く場所と出力先を用意します。
makedirなどや普通にディレクトリ作成。
今回はcreate-react-appベースなので以下のようにします。

入力元: src/translations
出力先: public/dictionaries/

Gitを使用しているなら.gitignoreで出力先を含めないようにします。

# dependencies
/node_modules
...
# dictionaries
/public/dictionaries

環境設定ファイル(.lisanrc)の用意

プロジェクトのルートディレクトリに.lisanrcを置きます。

.lisanrc

{
  "compile": {
    "inputDir": "src/translations", // 辞書ファイルのディレクトリ
    "outputDir": "public/dictionaries", // 出力先ディレクトリ
    "returnArray": true
  }
}

スクリプトの用意

package.jsonに以下を追加します(環境にあわせて適宜変更してください)

"scripts": {
  "lisan:compile": "lisan compile",
  "start": "yarn run lisan:compile -w & yarn run react-scripts start", // 開発時に辞書もwatch
  "build": "yarn run lisan:compile & react-scripts build", // ビルド時に辞書をコンパイル
  ...
}

辞書ファイルの用意

必要なディレクトリにJSON5形式(コメント可JSON)の辞書ファイルを置きます。

日本語辞書
src/translations/ja/main.json

{
  "locale": "ja",
  "entries": {
    "hello.world": "ハローワールド",
    "hello.person": "ハロー ${person}"
  }
}

英語辞書
src/translations/en/main.json

{
  "locale": "en",
  "entries": {
    "hello.world": "Hello World",
    "hello.person": "Hello ${person}"
  }
}

Reactで表示してみる

App.js

import React, { useEffect, useState } from "react";
import { lisan, t } from "lisan";
...

function App() {
  const [loaded, setLoaded] = useState(false); // ロード中
  const [language, setLanguage] = useState("ja"); // ロケール

  // stateのlanguageが変更された場合にロケールを変更する
  useEffect(() => {
    updateLanguage(language);
  }, [language]);

  // ロケールの変更
  const updateLanguage = (lang) => {
    lisan.setLocaleName(lang);

    import(`../../public/dictionaries/${lang}/main`).then((dict) => {
      lisan.add(dict);
      setLoaded(true); // ロード終了
      setLanguage(lang); // language変更
    });
  };

  let user = {
    name: 'ユーザーさん'
  }
  return (
    <>
      {/* ハローワールド */}
      <p>{t("hello.world")}</p>
      {/* ハローユーザーさん */}
      <p>{t("hello.person", {
        person: <strong>{user.name}</strong>,
      })}</p>
    </>
  )
};

で、本当に高速なの？

公式にある単純な正規表現での置き換えとの比較ベンチマークを実行してみましたが、
手元のMacBookProだと 30倍程度高速 なようです。

たしかに高速なようですが、他ライブラリとの比較までは行っていません。
公式では実際のi18nライブラリでは単純な正規表現よりも複雑になるため 50倍程度高速 と主張しているようです。

なにかの参考になれば幸いです。