概要

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

モチベーション

「ブラウンフィールド」と「グリーンフィールド」という用語は、不動産開発の分野から借用されたものです。グリーンフィールドは既存の構造物がない土地を指し、ブラウンフィールドは既存の構造物がある土地を指します。i18n の文脈では、これは i18n インフラが存在しないアプリ（グリーンフィールド）と、すでに i18n インフラを備えたアプリ（ブラウンフィールド）の違いに相当します。

これまで当社のライブラリは、「グリーンフィールド」なアプリの国際化に非常に強くフォーカスしてきました。たとえば <T> コンポーネントや useGT() フックなどです。

「ブラウンフィールド」なアプリ向けに特化して用意してきたインフラは、next-intl の dictionary パターンに倣った const t = useTranslations() と const t = getTranslations() フックのみです。しかし、当社の t() 関数には制約があり、文字列しか返せず、dictionary のサブツリーは返せませんでした。

ここから分かったのは、開発者はしばしば、i18n ライブラリに対して単なる文字列ではなく dictionary のサブツリーを返してくれることを期待しているという点です。そのため、開発者が他の i18n ライブラリから移行する際に、gt-next がこの機能をサポートしていることが重要になります。

使用方法

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

{
  "cards": [
    {
      "title": "カード1",
      "description": "カード1の説明"
    },
    {
      "title": "カード2",
      "description": "カード2の説明"
    },
    {
      "title": "カード3",
      "description": "カード3の説明"
    }
  ]
}

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

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() 関数は、green field / brown field のいずれのアプリケーションに対しても gt-next をより柔軟にするうえで、大きな前進となる機能です。開発者が辞書のサブツリーを直接扱えるようにすることで、既存アプリケーションの国際化における大きな摩擦要因を取り除いています。

この拡張により、gt-next はモダンな i18n ライブラリにチームが期待する開発者体験にさらに近づき、翻訳済みコンテンツの反復処理が容易になり、より動的でメンテナンスしやすい国際化対応アプリケーションを構築しやすくなります。