複数形とリンクメッセージ
複数形ルールの@:key|@:key構文、数に基づく複数形、@:pathによるリンクメッセージ
「複数形とリンクメッセージ」はCoddyKit上の無料Vue Academyレッスンです。 これはレッスン3/4です。 下記で完全なレッスンを無料で読むことができます。その後、ブラウザ内の組み込みコードエディタと24時間対応のAIチューターでハンズオン演習できます。 これはVue Academy学習パスの一部であり、ウェブとCoddyKitアプリ全体で進捗が同期されます。 Vue Academyコースには全4レッスンが含まれています。
カウントの扱いは言語によって異なる
「1 item」と「5 items」のように、言語によって適切な表現は異なります。さらに多くの形式を持つ言語もあります。複数形をハードコーディングすると、「5 item(s)」のような不自然な文字列になってしまいます。Vue I18nには、カウントに応じて適切な形式を選ぶ複数形処理が組み込まれています。
パイプで区切る複数形
1つのメッセージ文字列内に、パイプ（|）文字で区切って各形式を記述します。英語では、通常2つまたは3つの形式を使います。
const en = {
items: "no items | one item | {count} items",
}カウントによる複数形の選択
tの2番目の引数として数値を渡します。Vue I18nは、カウントに基づいて一致する形式を選びます。
const { t } = useI18n()
t("items", 0) // "no items"
t("items", 1) // "one item"
t("items", 9) // "9 items"デフォルトの複数形ルール
3つの形式がある場合のルールは次のとおりです。0には1つ目、1には2つ目、それ以外には3つ目を使います。2つの形式の場合は、0と複数が同じ形式になります。
const en = {
// two-form version: 0 and N share the plural
files: "no file | one file | {count} files",
}{count}プレースホルダー
複数形メッセージ内の特殊な{count}（または{n}）プレースホルダーには、渡した数値が設定されるため、その数を表示できます。
const en = { photos: "no photos | {count} photo | {count} photos" }
t("photos", 3) // "3 photos"テンプレートでの複数形
テンプレートでは、スクリプトの場合と同様に、カウントを2番目の引数として$tを使います。
<template>
<p>{{ $t("items", cartCount) }}</p>
</template>カウントと名前付きの値を組み合わせる
カウントに加えて値のオブジェクトを渡すことで、カウントと名前付きプレースホルダーの両方を指定できます。
const en = { greeting: "Hi {name}, no messages | Hi {name}, {count} messages" }
t("greeting", 2, { named: { name: "Ada" } })
// or per API: t("greeting", { name: "Ada" }, 2)リンクされたメッセージとは
重複を避けるために、ある翻訳の中に別の翻訳を埋め込みたい場合があります。リンクされたメッセージでは、@:構文を使って別のキーを参照します。
const en = {
brand: "Acme",
welcome: "Welcome to @:brand",
}リンクの解決
welcomeを翻訳すると、@:brandトークンはbrandの翻訳済みの値に置き換えられます。brandを一度変更するだけで、リンクされたすべてのメッセージが更新されます。
t("welcome") // "Welcome to Acme"
// change brand -> all linked messages reflect itネストしたキーへのリンク
リンクでは、ドットで区切ったネストしたキーも使えます。必要に応じて、複数の単語で構成された参照をかっこで囲みます。
const en = {
app: { name: "MyApp" },
footer: "Thanks for using @:(app.name)",
}リンクの修飾子
リンクされたメッセージでは、@.upperのような修飾子を使って、リンク先の値を変換できます（大文字、小文字、先頭文字の大文字化など）。
const en = {
brand: "acme",
banner: "@.upper:brand sale!", // "ACME sale!"
}理解度チェック
複数形とリンクについての理解度を確認しましょう。
復習
複数形とメッセージの再利用について学びました。
|で複数形を区切ります。"no items | one item | {count} items"のように記述します。t(key, count)にカウントを渡して、適切な形式を選びます。{count}プレースホルダーには数値が表示されます。@:otherKeyで別のキーを再利用できます。ネストしたキーには@:(nested.key)を使います。@.upperのような修飾子で、リンク先の値を変換できます。
AI チューターと学ぶ HTML — 無料
ブラウザでリアルコードを書いて実行し、24/7 の AI チューターから瞬時にサポートを受け、ウェブまたはアプリで続きから学習できます。
- コース
- 42
- レッスン
- 156
よくある質問
「複数形とリンクメッセージ」レッスンは無料ですか？
はい。「複数形とリンクメッセージ」の完全なテキストはこのウェブで無料で読めます。インタラクティブに演習し（組み込みコードエディタと24時間対応のAIチューター）、Vue Academyコースの残りをアンロックするには、CoddyKit PROにアップグレードしてください。 Vue Academyコースには全4レッスンが含まれています。
「複数形とリンクメッセージ」で何を学びますか？
複数形ルールの@:key|@:key構文、数に基づく複数形、@:pathによるリンクメッセージ ブラウザで直接実行するハンズオンコードでVue Academyを演習し、24時間対応のAIチューターがレッスンを進める中での質問に答えます。
Vue Academyを始めるのに経験は必要ですか？
事前経験は必要ありません。CoddyKitのVue Academyは初級者から上級者向けに構成されているため、ここから始めるか最初から始めて、自分のペースで進むことができます。 これはレッスン3/4です。
「複数形とリンクメッセージ」レッスンにはどのくらい時間がかかりますか？
ほとんどのCoddyKitレッスンは約5～10分かかります。各レッスンはコンパクトでインタラクティブなので、着実に進歩し、ウェブとアプリ全体で正確に前回の場所から再開できます。
このVue Academyレッスンでコードを書いて実行できますか？
はい。すべてのVue Academyレッスンに組み込みコードエディタが含まれているため、ブラウザでリアルコードを書いて実行し、即座のAIフィードバックを取得できます。ローカル設定は不要です。