> For AI agents: the complete documentation index is available at /vue-codemirror6/ja/llms.txt, the full documentation bundle is available at /vue-codemirror6/ja/llms-full.txt.

# 多言語化

CodeMirror は、検索・置換パネル、折りたたみマーカー、リンターのパネル、スクリーンリーダー向けの読み上げなど、独自の UI テキストを表示します。`phrases` プロパティに翻訳表を渡すと、これらを翻訳できます。キーは元の英語の文字列です。キーの一覧は CodeMirror の [翻訳の例](https://codemirror.net/examples/translate/) を参照してください。

## 翻訳表

Markdown エディタとして使い、UI を日本語に翻訳する例です。キーは、それを使うパッケージごとにまとめています。翻訳したいキーだけを書けば構いません。

```vue
<script lang="ts" setup vapor>
import { markdown } from '@codemirror/lang-markdown';
import { ref } from 'vue';
import CodeMirror from 'vue-codemirror6';

const value = ref('');
const lang = markdown();

/**
 * UI の翻訳(この例では日本語)
 *
 * @see {@link https://codemirror.net/examples/translate/}
 */
const phrases: Record<string, string> = {
  // @codemirror/view
  'Control character': '制御文字',
  // @codemirror/commands
  'Selection deleted': '選択範囲を削除しました',
  // @codemirror/language
  'Folded lines': '折りたたまれた行',
  'Unfolded lines': '展開された行',
  to: '〜',
  'folded code': '折りたたまれたコード',
  unfold: '展開',
  'Fold line': '行を折りたたむ',
  'Unfold line': '行を展開',
  // @codemirror/search
  'Go to line': '行へ移動',
  go: '移動',
  Find: '検索',
  Replace: '置換',
  next: '▼',
  previous: '▲',
  all: 'すべて',
  'match case': '大文字と小文字を区別',
  'by word': '単語単位',
  regexp: '正規表現',
  replace: '置換',
  'replace all': 'すべて置換',
  close: '閉じる',
  'current match': '現在の一致',
  'replaced $ matches': '$ 件を置換しました',
  'replaced match on line $': '$ 行目の一致を置換しました',
  'on line': '行',
  // @codemirror/autocomplete
  Completions: '補完候補',
  // @codemirror/lint
  Diagnostics: '診断',
  'No diagnostics': '問題はありません'
};
</script>

<template>
  <code-mirror v-model="value" basic :lang="lang" :phrases="phrases" />
</template>
```

`replaced $ matches` などのキーにある `$` は、CodeMirror が数値に置き換えるプレースホルダーです。翻訳後の文字列にも残してください。

## vue-i18n で言語を切り替える

`phrases` はリアクティブです。値を変えるとエディタを作り直さずに設定だけが更新されるので、`computed` を使えば vue-i18n の現在のロケールに追従させられます。

```vue
<script lang="ts" setup vapor>
import { computed } from 'vue';
import { useI18n } from 'vue-i18n';
import CodeMirror from 'vue-codemirror6';

const { locale } = useI18n();

/** ロケールごとの翻訳表 */
const phrasesByLocale: Record<string, Record<string, string>> = {
  ja: {
    Find: '検索',
    Replace: '置換',
    close: '閉じる'
    // ...
  },
  en: {} // 空の場合は CodeMirror の既定(英語)のテキストを使います
};

const phrases = computed(() => phrasesByLocale[locale.value]);
</script>

<template>
  <code-mirror basic :phrases="phrases" />
</template>
```

:::tip
翻訳表にないキーは CodeMirror の英語のテキストのまま表示されるので、一部だけ翻訳しても問題ありません。
:::