概要

gt-next 6.3.0 では、人間の開発者と AI 開発者の両方にとって使いやすいライブラリに、さらに近づきました。今回のリリースにおける指針は、i18n に必要な本質的な機能を導入しつつ、既存コードへの影響を最小限に抑えること でした。

これを実現するために、コードベースのどこからでも文字列を翻訳できる新しい msg() 関数を導入しました。以前は、文字列を翻訳するために、開発者は useGT() や getGT() から取得した t() 関数をコールスタックの上位へと渡していく必要がありました。msg() を使えば、文字列を一度ラップしておき、レンダー時に m() を通すだけで済みます。

比較

これまでは、文字列をラップするには t() 関数を複数のレイヤーにわたって渡す必要がありました。

export const greeting1 = 'こんにちは、世界！'
export const getGreeting2 = (t: any) => t('こんにちは、世界！')

import { greeting1, getGreeting2 } from './constants'

export default function Page() {
  const t = useGT()
  return (
    <div>
      {greeting1}
      {getGreeting2(t)}
    </div>
  )
}

これで、msg() を使えば、文字列を定数として直接宣言できるようになりました。唯一の条件は、表示する際に必ずそれらを m()（useMessages() または getMessages() で取得したもの）に渡すことです。

export const greeting1 = 'こんにちは、世界！'
export const greeting2 = msg('こんにちは、世界！')

import { greeting1, greeting2 } from './constants'

export default function Page() {
  const m = useMessages()
  return (
    <div>
      {greeting1}
      {m(greeting2)}
    </div>
  )
}

エンコードとデコード

補間をサポートするために、msg() 関数はプレーンな文字列ではなく、エンコード済みのメッセージを返します。形式は次のとおりです。

<補間コンテンツ>:<base64エンコード文字列>

base64 でエンコードされた部分には、次の内容を持つ JSON オブジェクトが含まれます：

• $_hash: 元の文字列のハッシュ
• $_source: メッセージに埋め込まれたパラメータ
• $id: カスタムの一意な識別子（指定されている場合）
• $context: メッセージのコンテキスト（指定されている場合）
• 補間に含まれる任意の変数

この設計により、文字列の直接比較の方法は多少変わりますが、型付けやコード構造への影響は最小限に抑えられます。補間後の内容にアクセスするには、decodeMsg() を使用します。

エンコードされた文字列を使う理由

エンコードされた文字列を使わない場合、msg() は追加メタデータを含むカスタムオブジェクト型を返す必要があります。これはエンコード／デコードという発想としては機能しますが、厳密な型付けを行う場合には問題が生じます。

このケースで i18n の影響を最小限に抑える最良の方法は、メタデータを含んだ文字列だけを返すようにすることだ、という結論に至りました。

例

i18n を適用していない元のコード:

const name = 'John'
const message = `Hello, ${name}!`

if (message.length > 10) {
  console.log('メッセージが長すぎます')
} else {
  console.log('メッセージは適切な長さです')
}

msg() と decodeMsg() を使用する場合:

import { msg, decodeMsg } from 'gt-next'

const name = 'John'
const message = msg('こんにちは、{name}さん!', { name })

if (decodeMsg(message).length > 10) {
  console.log('メッセージが長すぎます')
} else {
  console.log('メッセージは適切な長さです')
}

その他

msg() を呼び出した際にすでに補間されているパラメータでも、t() 関数内で上書きできます。

import { msg, useMessages } from 'gt-next'

const message = msg('こんにちは、{name}さん！', { name: 'John' })

export default function Page() {
  const m = useMessages()
  return <div>{m(message, { name: 'Jane' })}</div> // 「こんにちは、Janeさん！」を返します
}

まとめ

このリリースでは、gt-next をより開発者にとって使いやすくすると同時に、i18n のオーバーヘッドを最小限に抑えることに注力しています。t() 関数をコールスタック全体で受け渡す必要をなくすことで、新しい msg() 関数は文字列を翻訳するための、よりクリーンで直感的な方法を提供し、i18n プロセスを大幅に単純化します。