Vue Academy · レッスン

useI18n Composableとt()関数

Q: 「useI18n Composableとt()関数」で何を学びますか？

useI18n()、t('key')、テンプレート内の$t、locale.valueの切り替え、ロケール検出 ブラウザで直接実行するハンズオンコードでVue Academyを演習し、24時間対応のAIチューターがレッスンを進める中での質問に答えます。

useI18n()、t('key')、テンプレート内の$t、locale.valueの切り替え、ロケール検出

「useI18n Composableとt()関数」はCoddyKit上の無料Vue Academyレッスンです。これはレッスン2/4です。下記で完全なレッスンを無料で読むことができます。その後、ブラウザ内の組み込みコードエディタと24時間対応のAIチューターでハンズオン演習できます。これはVue Academy学習パスの一部であり、ウェブとCoddyKitアプリ全体で進捗が同期されます。 Vue Academyコースには全4レッスンが含まれています。

script setupでの翻訳

Composition APIモードでは、コンポーネントはuseI18n() composableを通じて翻訳機能にアクセスします。これにより、t関数やリアクティブなlocale refなどを取得できます。

useI18nの呼び出し

<script setup>内でuseI18n()を呼び出し、必要なものを分割代入します。

import { useI18n } from "vue-i18n"

const { t, locale } = useI18n()

t関数

t(key)は、アクティブなロケールの翻訳済み文字列を返します。テンプレートにおける$tに相当する、スクリプト側の関数です。

const { t } = useI18n()

const title = t("greeting") // "Hello" when locale is en

tによる補間

テンプレートの場合と同様に、名前付きの値を持つオブジェクトを2番目の引数として渡すと、プレースホルダーを置き換えられます。

const { t } = useI18n()

const msg = t("welcome", { name: "Alice" })
// message "Welcome, {name}!" => "Welcome, Alice!"

動的な文字列にtを使う

tは通常の関数なので、スクリプトのロジック内のどこでも使用できます。たとえば、トーストメッセージ、算出ラベル、バリデーションテキストの組み立てに使えます。

import { computed } from "vue"
const { t } = useI18n()

const label = computed(() => t("nav.home"))

locale ref

localeは、現在の言語コードを保持するリアクティブなrefです。値を読み取ると、アクティブな言語がわかります。

const { locale } = useI18n()
console.log(locale.value) // "en"

言語をアプリ全体で切り替える

locale.valueに代入すると、アプリ全体のアクティブな言語が変わります。すべてのt呼び出しとテンプレート内の$tは、新しい言語でリアクティブに再レンダリングされます。

function switchToTurkish() {
  locale.value = "tr"
}
// All translated text updates automatically.

言語切り替えUI

シンプルな切り替えUIでは、selectをlocaleにバインドします。リアクティブなので、選択肢を選ぶとUI全体がすぐに切り替わります。

<template>
  <select v-model="locale">
    <option value="en">English</option>
    <option value="tr">Turkce</option>
  </select>
</template>

<script setup>
import { useI18n } from "vue-i18n"
const { locale } = useI18n()
</script>

$tとtの違い

2つは、異なるコンテキストで同じ処理を行います。

$t — テンプレートで自動的に利用でき、インポートは不要です。
t — useI18n()から取得し、スクリプトやリアクティブなロジックで使用します。

コード内で文字列を計算する場合は、tを優先してください。

スコープ付きメッセージとグローバルメッセージ

useI18n()には、コンポーネント専用のメッセージを使うためのオプションを渡せます。オプションを指定しない場合はグローバルインスタンスを使います。これは、アプリ全体の翻訳で一般的な選択です。

const { t } = useI18n() // global messages

// component-scoped (advanced):
// const { t } = useI18n({
//   messages: { en: { ok: "OK" }, tr: { ok: "Tamam" } }
// })

選択した言語の永続化

言語はユーザー設定なので、永続化しましょう。起動時に保存済みの値を読み込み、watcherを使ってlocaleが変わるたびに書き込みます。

import { watch } from "vue"
const { locale } = useI18n()

watch(locale, (val) => localStorage.setItem("lang", val))

理解度チェック

useI18nについての理解度を確認しましょう。

復習

実行時の翻訳APIを学びました。

useI18n()はtとリアクティブなlocale refを返します。
t(key)で翻訳し、t(key, { name })でプレースホルダーを補間します。
スクリプトのロジックや算出値ではtを、テンプレートでは$tを使います。
locale.valueを設定すると、言語をアプリ全体でリアクティブに切り替えられます。
localeをwatchして、選択した言語を永続化します。

よくある質問

「useI18n Composableとt()関数」レッスンは無料ですか？

はい。「useI18n Composableとt()関数」の完全なテキストはこのウェブで無料で読めます。インタラクティブに演習し（組み込みコードエディタと24時間対応のAIチューター）、Vue Academyコースの残りをアンロックするには、CoddyKit PROにアップグレードしてください。 Vue Academyコースには全4レッスンが含まれています。

「useI18n Composableとt()関数」で何を学びますか？

useI18n()、t('key')、テンプレート内の$t、locale.valueの切り替え、ロケール検出ブラウザで直接実行するハンズオンコードでVue Academyを演習し、24時間対応のAIチューターがレッスンを進める中での質問に答えます。

Vue Academyを始めるのに経験は必要ですか？

事前経験は必要ありません。CoddyKitのVue Academyは初級者から上級者向けに構成されているため、ここから始めるか最初から始めて、自分のペースで進むことができます。これはレッスン2/4です。

「useI18n Composableとt()関数」レッスンにはどのくらい時間がかかりますか？

ほとんどのCoddyKitレッスンは約5～10分かかります。各レッスンはコンパクトでインタラクティブなので、着実に進歩し、ウェブとアプリ全体で正確に前回の場所から再開できます。

このVue Academyレッスンでコードを書いて実行できますか？

はい。すべてのVue Academyレッスンに組み込みコードエディタが含まれているため、ブラウザでリアルコードを書いて実行し、即座のAIフィードバックを取得できます。ローカル設定は不要です。

このコースのすべてのレッスン

← Vue Academyに戻る