# gt-next: General Translation Next.js SDK: useLocaleSelector
URL: https://generaltranslation.com/ja/docs/next/api/helpers/use-locale-selector.mdx
---
title: useLocaleSelector
description: useLocaleSelector フックの API リファレンス
---

{/* 自動生成: このファイルを直接編集しないでください。代わりに content/docs-templates/ 内のテンプレートを編集してください。 */}


## 概要

このフックは、現在のロケール、ロケールの一覧、[`useSetLocale`](/docs/next/api/helpers/use-set-locale) フック、およびロケールのプロパティを取得する関数を返します。
独自のロケールセレクターコンポーネントを作成する際に、手軽に使えるように設計されています。

独自実装したくない場合は、代わりに [`<LocaleSelector>`](/docs/next/api/components/locale-selector) コンポーネントを使用できます。

## リファレンス

### 戻り値

現在のロケール、ロケールの一覧、[`useSetLocale`](/docs/next/api/helpers/use-set-locale) フック、ならびにロケールのプロパティを取得する関数を含むオブジェクト。

***

## 例

### `<LocaleSelector>`

[`<LocaleSelector>`](/docs/next/api/components/locale-selector) コンポーネントの実装例です。

```jsx
export default function LocaleSelector({
  locales: _locales,
  ...props
}: {
  locales?: string[];
  [key: string]: any;
}): React.JSX.Element | null {
  // ロケールセレクターのプロパティを取得
  const { locale, locales, setLocale, getLocaleProperties } = useLocaleSelector(
    _locales ? _locales : undefined
  );

  // 表示名を取得
  const getDisplayName = (locale: string) => {
    return capitalizeLanguageName(
      getLocaleProperties(locale).nativeNameWithRegionCode
    );
  };

  // localesが返されない場合は何もレンダリングしないか、適切に処理する
  if (!locales || locales.length === 0 || !setLocale) {
    return null;
  }

  return (
    <select
      {...props}
      // currentLocaleが未定義の場合は空文字列にフォールバック
      value={locale || ''}
      onChange={(e) => setLocale(e.target.value)}
    >
      {/* ロケールが設定されていない場合のフォールバック（任意） */}
      {!locale && <option value='' />}

      {locales.map((locale) => (
        <option key={locale} value={locale} suppressHydrationWarning>
          {getDisplayName(locale)}
        </option>
      ))}
    </select>
  );
}
```

***


## 注意事項

* このフックはクライアントサイド専用です。
* ロケールコードの詳細は[こちら](/docs/core/locales)をご覧ください。

## 次のステップ

* [`<LocaleSelector>`](/docs/next/api/components/locale-selector) コンポーネントについて詳しくは、こちらを参照してください。
* [`useLocale`](/docs/next/api/helpers/use-locale) フックについて詳しくは、こちらを参照してください。