翻訳するならIntLayerがいいっていう話

IntLayer

保守性と拡張性に重点を置いた国際化（i18n）ソリューション

とのこと。ウェブサイトを多言語対応にするのであればi18n-nextなどが有名だが、導入がちょっとめんどくさかったりJSONでしか翻訳に対応していなかったり不満がありました。

それに対してIntLayerはVite, React, Next等の主要なフレームワークに対応しつつ、TypeScriptで翻訳の定義を書ける上にTypeScriptのTypeSafeな最大にして最強のメリットを享受できるという強みがあります。

それならもう使ってみるしかないって話です。

導入

公式サイトの導入手順をそのままなぞるだけで動きます。

特別なことは一切必要ありません。

面白いのが通常の翻訳とは違う書き方ができるところです。

1
import { cond, type Dictionary } from "intlayer";
2

3
const myConditionalContent = {
4
  key: "my_key",
5
  content: {
6
    myCondition: cond({
7
      true: "条件がtrueの場合のコンテンツ",
8
      false: "条件がfalseの場合のコンテンツ",
9
      fallback: "条件が失敗した場合のコンテンツ", // オプション
10
    }),
11
  },
12
} satisfies Dictionary;
13

14
export default myConditionalContent;

公式サイトにもありますが、このようにbooleanで分岐させることができます。

1
import { insert, type Dictionary } from "intlayer";
2

3
const myInsertionContent = {
4
  key: "my_key",
5
  content: {
6
    myInsertion: insert(
7
      "こんにちは、私の名前は{{name}}で、年齢は{{age}}歳です！"
8
    ),
9
  },
10
} satisfies Dictionary;
11

12
export default myInsertionContent;

変数展開する場合はこのように書けます。

1
import { insert, t, type Dictionary } from "intlayer";
2

3
const myInsertionContent = {
4
  key: "my_key",
5
  content: {
6
    myInsertion: insert(t({
7
      ja: "こんにちは、私の名前は{{name}}で、年齢は{{age}}歳です！",
8
      en: "Hello, I'm {{name}}, age of {{ age }}!"
9
    })),
10
  },
11
} satisfies Dictionary;
12

13
export default myInsertionContent;

もし英語にも翻訳したい場合にはtをinsertの内部に入れます。

これを利用する場合には、

content.myInsertion({ name: 'Me', age: '16' })という感じで使います。文字列を取得した場合には最後に.valueをつけます。

TypeSafeなので変数の洩れがあった場合にはtscがエラーを返してビルドに失敗します。

まとめ

いや、これみんな使おう。