Zenn
🐾

i18nextで処理済みのテキストをUI上で少しだけ見やすくするPostProcessorを仕掛ける

2021/06/01に公開
JavaScript
i18n
i18next
tech

多言語化対応時、どこを多言語化処理したか画面上からわかりやすくしたかった。

PostProcessorを作る

i18nextの場合、pluginの仕組みがあり、今回の要望はPostProcessorで処理できた

Processor自体は下記ぐらいの簡素なもので済んだ。

import i18n, { PostProcessorModule, TOptions } from "i18next"

const markingProcessor: PostProcessorModule = {
  type: 'postProcessor',
  name: 'marking',
  process: (value: string, _key: string, _options: TOptions, _translator: any) => {
    /* こんにちは -> [こんにちは] と表示する*/
    return `[${value}]`
  }
}

こうすると変換された結果が[こんにちは]のように表示されるので、UI上から確認して作業が進めやすくなるPluginとなる。

PostProcessorを使う

あとは初期化時にuseで指定し、postProcessとして指定すれば利用できる。

i18n
  .use(markingProcessor)
  .init({
    // ...
    postProcess: ["marking"]
    // ...
  })

実際は開発時のみになるはずなので、下記のようにprocess.env.NODE_ENV等を見て処理するのが良いだろう

.init({
    // ...
    postProcess: process.env.NODE_ENV === "development" ? ["marking"] : []
    // ...
  })

ちょっと応用

例えばキー名も一緒に出したいならこんな具合だろう

const markingProcessor: PostProcessorModule = {
  type: 'postProcessor',
  name: 'marking',
  process: (value: string, key: string, _options: TOptions, translator: any) => {
    // const resolved = translator.t(key)
    /* return manipulated value */
    return `[${key}:${value}]`
  }
}

また、キーが存在しているかどうかでマークを変えるならこんなことも出来るだろう

const markingProcessor: PostProcessorModule = {
  type: 'postProcessor',
  name: 'marking',
  process: (value: string, key: string, _options: TOptions, translator: any) => {
    const exist = translator.exists(key) ? "✅" : "❌"
    return `${exist}:${value}`
  }
}

ちなみにtranslatorはtypeof i18nに近いが微妙に過不足があり、公式の型定義上現在anyとなっている。正確なところを知るならTranslator.jsを見るのが一番正確になってしまっている。

GitHubで編集を提案

Discussion