国際化

概要

国際化とは、コードとユーザーインターフェイスをローカリゼーションに対応させるように構造化するプロセスです。Yamada UIは、組み込まれている文字列の翻訳から日付・数値のフォーマットまで、多くのコンポーネントで様々なローカリゼーションをサポートしています。Yamada UIのコンポーネントを使用することで、これらの国際化が自動的に処理されます。

ローカリゼーション

ローカリゼーションとは、アプリケーションを特定の言語または地域に適応させるプロセスです。文字の翻訳に加えて、日付・数値のフォーマットからテキスト検索などの調整も含まれます。Yamada UIは、30以上のロケールでローカリゼーションをサポートしています。

ロケールを変更する

ロケールを変更する場合は、UIProviderのlocaleに値を設定します。

import { UIProvider } from "@yamada-ui/react"

const App = () => {
  return (
    <UIProvider locale="ja-JP">
      <App />
    </UIProvider>
  )
}

ラベルを変更する

ラベルを変更する場合は、CLIを使用してi18n-providerをダウンロードする必要があります。

• 1

  プロバイダーを追加する

  addコマンドを使用して、i18n-providerを追加します。

  pnpmnpmyarnbun

  pnpm yamada-cli add i18n-provider
  

• 2

  言語データを変更する

  i18n-providerのintlフォルダに各言語のデータがあります。変更する言語のデータを変更します。

  intl/ja-JP.ts

  import type { IntlData } from "."
  
  const data: IntlData = {
    /* ... */
    avatar: {
      "Avatar Icon": "ユーザーアイコン",
    },
    /* ... */
  }
  
  export default data
  

  言語のデータは、英語が基準になっており、英語のキーが各言語のデータと紐づきます。en-US.tsを変更した場合は、すべて言語データを修正する必要があります。変更しない場合、言語データの紐付けは失われてしまいます。

言語を追加する

言語を追加する場合は、CLIを使用してi18n-providerをダウンロードする必要があります。

• 1

  プロバイダーを追加する

  addコマンドを使用して、i18n-providerを追加します。

  pnpmnpmyarnbun

  pnpm yamada-cli add i18n-provider
  

• 2

  言語データを追加する

  i18n-providerのintlフォルダに各言語のデータがあります。新しい言語のデータを追加します。データは、intl/en-US.tsをコピー・ペーストして各値を変更します。

  intl/vi-VN.ts

  import type { IntlData } from "."
  
  const data: IntlData = {
    autocomplete: {
      "Clear value": "Giá trị xóa",
      "No results found": "Không tìm thấy kết quả",
    },
    /* ... */
  }
  
  export default data
  

• 3

  インデックスを更新する

  intl/index.tsに追加した言語データを追加します。

  intl/index.ts

  import arAE from "./ar-AE"
  /* ... */
  import viVN from "./vi-VN"
  
  /* ... */
  
  export default {
    "ar-AE": arAE,
    /* ... */
    "vi-VN": viVN,
  }
  

サポートされているロケール

• 日本語（日本）
• 英語（イギリス）
• 英語（米国）
• アラビア語（アラブ首長国連邦）
• ブルガリア語（ブルガリア）
• クロアチア語（クロアチア）
• チェコ語（チェコ共和国）
• デンマーク語（デンマーク）
• オランダ語（オランダ）
• エストニア語（エストニア）
• フィンランド語（フィンランド）
• フランス語（カナダ）
• フランス語（フランス）
• ドイツ語（ドイツ）
• ギリシャ語（ギリシャ）
• ヘブライ語（イスラエル）
• ハンガリー語（ハンガリー）
• イタリア語（イタリア）
• ラトビア語（ラトビア）
• リトアニア語（リトアニア）
• ノルウェー語（ノルウェー）
• ポーランド語（ポーランド）
• ポルトガル語（ブラジル）
• ルーマニア語（ルーマニア）
• ロシア語（ロシア）
• セルビア語（セルビア）
• スロバキア語（スロバキア）
• スロベニア語（スロベニア）
• スペイン語（スペイン）
• スウェーデン語（スウェーデン）
• トルコ語（トルコ）
• ウクライナ語（ウクライナ）
• 中国語（簡体字）
• 中国語（繁体字）
• 韓国語（韓国）

バンドルサイズの最適化

Yamada UIは、デフォルトで上記のすべての言語のデータを含んでいます。これは、多くのユーザーにとってそのまま使えるものですが、バンドルサイズが大きくなります。アプリケーションがこれらのすべてのロケールをサポートしない場合は、intl/index.tsから不要なデータを削除することで、バンドルサイズを最適化することができます。