概要

gt-next 6.6.0 では、「ブラウンフィールド」のアプリを国際化するための新たなアプローチを導入します。翻訳済みの辞書構造を返せる t.obj() 関数を追加しました。

背景

"ブラウンフィールド" と "グリーンフィールド" は、不動産開発に由来する用語です。グリーンフィールド は既存の建物や構造物がない土地、ブラウンフィールド は既存の建物や構造物がある土地を指します。i18n の文脈では、これは i18n の基盤がないアプリ (グリーンフィールド) と、すでに i18n の基盤があるアプリ (ブラウンフィールド) を意味します。

これまで私たちのライブラリは、"グリーンフィールド" アプリの国際化に強くフォーカスしてきました。たとえば、<T> コンポーネントや useGT() フックがその例です。

一方で、"ブラウンフィールド" アプリ向けに私たちが特に用意してきた仕組みは、next-intl の辞書パターンをもとにした const t = useTranslations() と const t = getTranslations() だけでした。ただし、これまでの t() 関数には制限があり、返せるのは文字列だけで、辞書のサブツリーは返せませんでした。

私たちがわかったのは、開発者は i18n ライブラリに対して、文字列だけでなく辞書のサブツリーも返せることを期待している場合が多い、ということです。そのため、他の i18n ライブラリから移行する開発者にとって、gt-next がこの機能をサポートしていることは重要です。

使い方

反復処理したい項目のリストを含む、次のような辞書構造を考えてみましょう。

{
  "cards": [
    {
      "title": "Card 1",
      "description": "Card 1 description"
    },
    {
      "title": "Card 2",
      "description": "Card 2 description"
    },
    {
      "title": "Card 3",
      "description": "Card 3 description"
    }
  ]
}

従来の方法では、各項目にはそれぞれの正確なキーを使って個別にアクセスする必要がありました。

import { useTranslations } from 'gt-next'

export default function Page() {
  const t = useTranslations()

  return (
    <>
      <div>
        {t('cards.0.title')}
        {t('cards.0.description')}
      </div>
      <div>
        {t('cards.1.title')}
        {t('cards.1.description')}
      </div>
      <div>
        {t('cards.2.title')}
        {t('cards.2.description')}
      </div>
    </>
  )
}

このやり方は、明らかにスケールせず、保守性もありません。

新しい t.obj() 関数を使うと、辞書構造をサブツリーとして扱ってアクセスできます。

import { useTranslations } from 'gt-next'

export default function Page() {
  const t = useTranslations()

  return (
    <>
      <div>
        {t.obj('cards').map((card) => (
          <div key={card.title}>
            {card.title}
            {card.description}
          </div>
        ))}
      </div>
    </>
  )
}

結論

t.obj() 関数は、gt-next をグリーンフィールドとブラウンフィールドの両方のアプリケーションで、より柔軟に活用できるようにする大きな前進です。開発者が辞書のサブツリーを直接扱えるようになることで、既存アプリケーションの国際化における大きな障壁が取り除かれます。

この機能強化により、gt-next は、チームが最新の i18n ライブラリに求める開発者体験にさらに近づき、翻訳済みコンテンツを扱いながら繰り返し改善を進めたり、より動的で保守しやすい国際化アプリケーションを構築したりしやすくなります。