> ## Documentation Index
> Fetch the complete documentation index at: https://translations.mintlify.site/llms.txt
> Use this file to discover all available pages before exploring further.

> Lock v11 は複数言語をサポートしており、カスタム言語ファイルを追加できるほか、Lock ウィジェットに表示される特定のテキストの値をカスタマイズすることもできます。

# Lock の国際化

export const AuthCodeBlock = ({filename, icon, language, highlight, children}) => {
  const [displayText, setDisplayText] = useState(children);
  const [copyText, setCopyText] = useState(children);
  const wrapperRef = React.useRef(null);
  useEffect(() => {
    let unsubscribe = null;
    function init() {
      if (!window.autorun || !window.rootStore) {
        return;
      }
      unsubscribe = window.autorun(() => {
        let processedChildrenForDisplay = children;
        let processedChildrenForCopy = children;
        for (const [key, value] of window.rootStore.variableStore.values.entries()) {
          const escapedKey = key.replaceAll(/[.*+?^${}()|[\]\\]/g, (String.raw)`\$&`);
          let displayValue = value;
          if (key === "{yourClientSecret}" && value !== "{yourClientSecret}") {
            displayValue = value.substring(0, 3) + "*****マスク済み*****";
          }
          processedChildrenForDisplay = processedChildrenForDisplay.replaceAll(new RegExp(escapedKey, "g"), displayValue);
          processedChildrenForCopy = processedChildrenForCopy.replaceAll(new RegExp(escapedKey, "g"), value);
        }
        setDisplayText(processedChildrenForDisplay);
        setCopyText(processedChildrenForCopy);
      });
    }
    if (window.rootStore) {
      init();
    } else {
      window.addEventListener("adu:storeReady", init);
    }
    return () => {
      window.removeEventListener("adu:storeReady", init);
      unsubscribe?.();
    };
  }, [children]);
  useEffect(() => {
    if (!wrapperRef.current) return;
    const originalWriteText = navigator.clipboard.writeText.bind(navigator.clipboard);
    let isOverriding = false;
    const handleClick = e => {
      const button = e.target.closest('[data-testid="copy-code-button"]');
      if (!button || !wrapperRef.current.contains(button)) return;
      isOverriding = true;
      navigator.clipboard.writeText = text => {
        if (isOverriding) {
          isOverriding = false;
          navigator.clipboard.writeText = originalWriteText;
          return originalWriteText(copyText);
        }
        return originalWriteText(text);
      };
      setTimeout(() => {
        if (isOverriding) {
          isOverriding = false;
          navigator.clipboard.writeText = originalWriteText;
        }
      }, 100);
    };
    const wrapper = wrapperRef.current;
    wrapper.addEventListener('click', handleClick, true);
    return () => {
      wrapper.removeEventListener('click', handleClick, true);
      if (navigator.clipboard.writeText !== originalWriteText) {
        navigator.clipboard.writeText = originalWriteText;
      }
    };
  }, [copyText]);
  return <div ref={wrapperRef}>
      <CodeBlock filename={filename} icon={icon} language={language} lines highlight={highlight}>
        {displayText}
      </CodeBlock>
    </div>;
};

`language` 構成オプションを使用すると、Lock の言語を変更できます。これにより、Lock の `i18n` ディレクトリから該当する言語ファイルが読み込まれます。

<div id="provided-languages">
  ## 対応言語
</div>

言語ファイルについては、[i18n ディレクトリ](https://github.com/auth0/lock/blob/master/src/i18n/)を参照してください。

| 言語              | コード       | 原文                                                                      |
| --------------- | --------- | ----------------------------------------------------------------------- |
| アフリカーンス語        | `'af'`    | [af.js](https://github.com/auth0/lock/blob/master/src/i18n/af.js)       |
| カタルーニャ語         | `'ca'`    | [ca.js](https://github.com/auth0/lock/blob/master/src/i18n/ca.js)       |
| 中国語             | `'zh'`    | [zh.js](https://github.com/auth0/lock/blob/master/src/i18n/zh.js)       |
| 中国語 (台湾)        | `'zh-tw'` | [zh-tw.js](https://github.com/auth0/lock/blob/master/src/i18n/zh-tw.js) |
| クロアチア語          | `'hr'`    | [hr.js](https://github.com/auth0/lock/blob/master/src/i18n/hr.js)       |
| チェコ語            | `'cs'`    | [cs.js](https://github.com/auth0/lock/blob/master/src/i18n/cs.js)       |
| デンマーク語          | `'da'`    | [da.js](https://github.com/auth0/lock/blob/master/src/i18n/da.js)       |
| オランダ語           | `'nl'`    | [nl.js](https://github.com/auth0/lock/blob/master/src/i18n/nl.js)       |
| 英語              | `'en'`    | [en.js](https://github.com/auth0/lock/blob/master/src/i18n/en.js)       |
| エストニア語          | `'et'`    | [et.js](https://github.com/auth0/lock/blob/master/src/i18n/et.js)       |
| ペルシャ語 (ファルシ)    | `'fa'`    | [fa.js](https://github.com/auth0/lock/blob/master/src/i18n/fa.js)       |
| フィンランド語         | `'fi'`    | [fi.js](https://github.com/auth0/lock/blob/master/src/i18n/fi.js)       |
| フランス語           | `'fr'`    | [fr.js](https://github.com/auth0/lock/blob/master/src/i18n/fr.js)       |
| ドイツ語            | `'de'`    | [de.js](https://github.com/auth0/lock/blob/master/src/i18n/de.js)       |
| ギリシャ語           | `'el`     | [el.js](https://github.com/auth0/lock/blob/master/src/i18n/el.js)       |
| ヘブライ語           | `'he'`    | [he.js](https://github.com/auth0/lock/blob/master/src/i18n/he.js)       |
| ハンガリー語          | `'hu'`    | [hu.js](https://github.com/auth0/lock/blob/master/src/i18n/hu.js)       |
| イタリア語           | `'it'`    | [it.js](https://github.com/auth0/lock/blob/master/src/i18n/it.js)       |
| 日本語             | `'ja'`    | [ja.js](https://github.com/auth0/lock/blob/master/src/i18n/ja.js)       |
| 韓国語             | `'ko'`    | [ko.js](https://github.com/auth0/lock/blob/master/src/i18n/ko.js)       |
| リトアニア語          | `'lt'`    | [lt.js](https://github.com/auth0/lock/blob/master/src/i18n/lt.js)       |
| ノルウェー語          | `'no'`    | [no.js](https://github.com/auth0/lock/blob/master/src/i18n/no.js)       |
| ノルウェー語 (ブークモール) | `'nb'`    | [nb.js](https://github.com/auth0/lock/blob/master/src/i18n/nb.js)       |
| ノルウェー語 (ニーノシュク) | `'nn'`    | [nn.js](https://github.com/auth0/lock/blob/master/src/i18n/nn.js)       |
| ポーランド語          | `'pl'`    | [pl.js](https://github.com/auth0/lock/blob/master/src/i18n/pl.js)       |
| ポルトガル語 (ブラジル)   | `'pt-br'` | [pt-br.js](https://github.com/auth0/lock/blob/master/src/i18n/pt-br.js) |
| ルーマニア語          | `'ro'`    | [ro.js](https://github.com/auth0/lock/blob/master/src/i18n/ro.js)       |
| ロシア語            | `'ru'`    | [ru.js](https://github.com/auth0/lock/blob/master/src/i18n/ru.js)       |
| スロバキア語          | `'sk'`    | [sk.js](https://github.com/auth0/lock/blob/master/src/i18n/sk.js)       |
| スロベニア語          | `'sl'`    | [sl.js](https://github.com/auth0/lock/blob/master/src/i18n/sl.js)       |
| スペイン語           | `'es'`    | [es.js](https://github.com/auth0/lock/blob/master/src/i18n/es.js)       |
| スウェーデン語         | `'sv'`    | [sv.js](https://github.com/auth0/lock/blob/master/src/i18n/sv.js)       |
| トルコ語            | `'tr'`    | [tr.js](https://github.com/auth0/lock/blob/master/src/i18n/tr.js)       |
| ウクライナ語          | `'ua'`    | [ua.js](https://github.com/auth0/lock/blob/master/src/i18n/uk.js)       |
| ベトナム語           | `'vi'`    | [vi.js](https://github.com/auth0/lock/blob/master/src/i18n/vi.js)       |

<div id="set-language-option">
  ## 言語オプションを設定する
</div>

次の例を使用するには、まずページに Lock を含める必要があります。

`<script src="https://cdn.auth0.com/js/lock/11.14/lock.min.js"></script>`

次に、`options` オブジェクトを定義し、`language` オプションを指定します。`language` オプションには、[Lock の](https://github.com/auth0/lock/tree/master/src/i18n) `i18n` ディレクトリ内にある対応するファイル名と一致する文字列を指定する必要があります。最後に、Lock をインスタンス化します。

export const codeExample1 = `// サポート対象の言語を選択
var options = {
  language: 'es'
};

// Auth0Lock を初期化
var lock = new Auth0Lock(
  '{yourClientId}',
  '{yourDomain}',
  options
);`;

<AuthCodeBlock children={codeExample1} language="javascript" />

Lock の翻訳データは、さまざまな翻訳を表すキーと値のペアで構成された言語ファイルから読み込まれます。言語によっては一部の値が欠けている場合があり、その場合は `language does not have property <missing prop>` という警告が表示されます。不足している値を追加するには、[pull request](https://github.com/auth0/lock/tree/master/src/i18n) を送信してください。または、Lock の `options` で不足している値を定義することもできます (以下を参照) 。

<div id="replace-dictionary-terms">
  ## 辞書項目を置き換える
</div>

`languageDictionary` オプションを使用すると、独自の特定の辞書項目をカスタマイズすることもできます。これは、サポートされている言語のいずれかを使用していても、一部の項目の文言だけを変更したい場合に便利です。たとえば、`title` の表現を変えたり、他のラベルの表示方法をユーザー向けに調整したりしながら、ウィジェット内のそれ以外のテキストはそのままにしておけます。

export const codeExample2 = `// languageDictionary の一部の属性をカスタマイズ
var options = {
  languageDictionary: {
    emailInputPlaceholder: "something@youremail.com",
    title: "ログインする"
  },
};

// Auth0Lock を初期化
var lock = new Auth0Lock(
  '{yourClientId}',
  '{yourDomain}',
  options
);`;

<AuthCodeBlock children={codeExample2} language="javascript" />

利用可能な `languageDictionary` プロパティ名の例と、`language` ファイルの構成方法については、[Lock の英語辞書ファイル](https://github.com/auth0/lock/blob/master/src/i18n/en.js)を参照してください。

文字列値 (URL) を受け取る `languageBaseUrl` オプションは、Auth0 が提供する翻訳の言語ソース URL を上書きします。デフォルトでは、提供されている言語翻訳の保存先である Auth0 の CDN URL `https://cdn.auth0.com` を使用します。別の値を指定すると、アプリケーションの必要に応じて、言語翻訳のソースとして独自の URL を使用できます。言語ソースは JavaScript ファイルである必要があります。