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

# Lockの国際化

> Lock v11は複数の言語をサポートしており、それ以外のカスタム言語ファイルの追加と、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) + "*****MASKED*****";
          }
          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>;
};

Lockの言語は、`language`構成オプションを使用して変更できます。これにより、対応する言語ファイルがLockの`i18n`ディレクトリから取得されます。

## 提供言語

[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) |

## 言語オプションを設定する

以下の例を使用するには、まずページに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 = `// Select a supported language
var options = {
  language: 'es'
};

// Initiating our Auth0Lock
var lock = new Auth0Lock(
  '{yourClientId}',
  '{yourDomain}',
  options
);`;

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

Lockの翻訳データは、さまざまな翻訳を表すキー/値ペアのある言語ファイルから取得されます。一部の言語に欠落している値があり、その場合は「`language does not have property <missing prop>`（言語にプロパティがありません）」という警告が表示されます。このように欠落している値に遭遇した場合は、追加するためにぜひ[プル要求](https://github.com/auth0/lock/tree/master/src/i18n)を提出してください。もしくは、Lockの`options`で欠落している値を定義することもできます（下記参照）。

## 辞書の用語を置き換える

さらに、独自の辞書項目を`languageDictionary`オプションを使ってカスタマイズすることも可能です。この機能は、サポートされている言語を使用しつつ、いくつかの項目の文言を変更したい場合に便利です。たとえば、ユーザーに表示される`title`、あるいはその他のラベルの言葉を変更して、ウィジェットのそれ以外のテキストはそのまま使いたい場合です。

export const codeExample2 = `// Customize some languageDictionary attributes
var options = {
  languageDictionary: {
    emailInputPlaceholder: "something@youremail.com",
    title: "Log me in"
  },
};

// Initiating our 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`を使用します。ここに別の値を入力すると、アプリケーションの必要に応じて言語翻訳に独自のソースを使用することができます。言語ソースはJavaScriptファイルでなければなりません。