Japanese translation (Template Directives section) (#41)

Author: jay-es

.vitepress/locales/ja.js

@@ -41,20 +41,20 @@ export default {
         ]
       },
       {
-        text: 'Template Directives',
+        text: 'テンプレートディレクティブ',
         items: [
           { text: 'v-model', link: '/ja/breaking-changes/v-model' },
           {
-            text: 'key Usage Change',
+            text: 'key の使用方法の変更',
             link: '/ja/breaking-changes/key-attribute'
           },
           {
-            text: 'v-if vs. v-for Precedence',
+            text: 'v-if と v-for の優先順位',
             link: '/ja/breaking-changes/v-if-v-for'
           },
-          { text: 'v-bind Merge Behavior', link: '/ja/breaking-changes/v-bind' },
+          { text: 'v-bind のマージ動作', link: '/ja/breaking-changes/v-bind' },
           {
-            text: 'v-on.native modifier removed',
+            text: 'v-on.native 修飾子の削除',
             link: '/ja/breaking-changes/v-on-native-modifier-removed'
           }
         ]

src/ja/breaking-changes/key-attribute.md

@@ -3,58 +3,58 @@ badges:
   - breaking
 ---
 
-# `key` Attribute <MigrationBadges :badges="$frontmatter.badges" />
+# `key` 属性 <MigrationBadges :badges="$frontmatter.badges" />
 
-## Overview
+## 概要
 
-- **NEW:** `key`s are no longer necessary on `v-if`/`v-else`/`v-else-if` branches, since Vue now automatically generates unique `key`s.
-  - **BREAKING:** If you manually provide `key`s, then each branch must use a unique `key`. You can no longer intentionally use the same `key` to force branch reuse.
-- **BREAKING:** `<template v-for>` `key` should be placed on the `<template>` tag (rather than on its children).
+- **新機能:** `v-if`/`v-else`/`v-else-if` の分岐では、Vue が自動的にユニークな `key` を生成するようになったため、`key` は不要になりました。
+  - **破壊的変更:** 手動で `key` を指定する場合、各ブランチはユニークな `key` を使用する必要があります。ブランチの再利用を強制するために、意図的に同じ `key` を使用できなくなりました。
+- **破壊的変更:** `<template v-for>` の `key` は（子要素ではなく）`<template>` タグに配置する必要があります。
 
-## Background
+## 背景
 
-The `key` special attribute is used as a hint for Vue's virtual DOM algorithm to keep track of a node's identity. That way, Vue knows when it can reuse and patch existing nodes and when it needs to reorder or recreate them. For more information, see the following sections:
+特別な属性 `key` は、Vue の仮想 DOM アルゴリズムがノードの ID を追跡するためのヒントとして使用されます。これにより、Vue は既存のノードを再利用したりパッチを当てたりできるタイミングや、ノードの並び替えや再作成が必要なタイミングを知ることができます。詳細については、下記のセクションを参照してください。
 
-- [List Rendering: Maintaining State](https://ja.vuejs.org/guide/essentials/list.html#maintaining-state-with-key)
-- [API Reference: `key` Special Attribute](https://ja.vuejs.org/api/built-in-special-attributes.html#key)
+- [リストレンダリング: 状態管理](https://ja.vuejs.org/guide/essentials/list.html#maintaining-state-with-key)
+- [API リファレンス: 特別な属性 `key`](https://ja.vuejs.org/api/built-in-special-attributes.html#key)
 
-## On conditional branches {#on-conditional-branches}
+## 条件分岐 {#on-conditional-branches}
 
-In Vue 2.x, it was recommended to use `key`s on `v-if`/`v-else`/`v-else-if` branches.
+Vue 2.x では、`v-if`/`v-else`/`v-else-if` の分岐に `key` を使用することが推奨されていました。
 
 ```html
 <!-- Vue 2.x -->
 <div v-if="condition" key="yes">Yes</div>
 <div v-else key="no">No</div>
 ```
 
-The example above still works in Vue 3.x. However, we no longer recommend using the `key` attribute on `v-if`/`v-else`/`v-else-if` branches, since unique `key`s are now automatically generated on conditional branches if you don't provide them.
+上記の例は、Vue 3.x でも動作します。しかし、`v-if`/`v-else`/`v-else-if` の分岐で `key` 属性を使うことはもうお勧めしません。条件分岐で `key` を指定しない場合には自動的にユニークな `key` が生成されるようになったからです。
 
 ```html
 <!-- Vue 3.x -->
 <div v-if="condition">Yes</div>
 <div v-else>No</div>
 ```
 
-The breaking change is that if you manually provide `key`s, each branch must use a unique `key`. In most cases, you can remove these `key`s.
+今回の破壊的変更は、手動で `key` を指定した場合、各ブランチはユニークな `key` を使用しなければならないことです。ほとんどの場合、これらの `key` は削除できます。
 
 ```html
 <!-- Vue 2.x -->
 <div v-if="condition" key="a">Yes</div>
 <div v-else key="a">No</div>
 
-<!-- Vue 3.x (recommended solution: remove keys) -->
+<!-- Vue 3.x （推奨の解決策: キーの削除） -->
 <div v-if="condition">Yes</div>
 <div v-else>No</div>
 
-<!-- Vue 3.x (alternate solution: make sure the keys are always unique) -->
+<!-- Vue 3.x （代替策: キーを常にユニークにする） -->
 <div v-if="condition" key="a">Yes</div>
 <div v-else key="b">No</div>
 ```
 
-## With `<template v-for>` {#with-template-v-for}
+## `<template v-for>` での使用 {#with-template-v-for}
 
-In Vue 2.x, a `<template>` tag could not have a `key`. Instead, you could place the `key`s on each of its children.
+Vue 2.x では、`<template>` タグは `key` を持つことができず、その代わりにそれぞれの子要素に `key` を配置できました。
 
 ```html
 <!-- Vue 2.x -->
@@ -64,7 +64,7 @@ In Vue 2.x, a `<template>` tag could not have a `key`. Instead, you could place
 </template>
 ```
 
-In Vue 3.x, the `key` should be placed on the `<template>` tag instead.
+Vue 3.x ではそうではなく、`key` は `<template>` タグに配置する必要があります。
 
 ```html
 <!-- Vue 3.x -->
@@ -74,7 +74,7 @@ In Vue 3.x, the `key` should be placed on the `<template>` tag instead.
 </template>
 ```
 
-Similarly, when using `<template v-for>` with a child that uses `v-if`, the `key` should be moved up to the `<template>` tag.
+同様に、`v-if` がある子要素を持つ `<template v-for>` を使う場合、`key` は `<template>` タグに移動する必要があります。
 
 ```html
 <!-- Vue 2.x -->

src/ja/breaking-changes/v-bind.md

@@ -1,48 +1,48 @@
 ---
-title: v-bind Merge Behavior
+title: v-bind のマージ動作
 badges:
   - breaking
 ---
 
 # {{ $frontmatter.title }} <MigrationBadges :badges="$frontmatter.badges" />
 
-## Overview
+## 概要
 
-- **BREAKING**: Order of bindings for v-bind will affect the rendering result.
+- **破壊的変更**: v-bind のバインディングの順番は、レンダリング結果に影響します。
 
-## Introduction
+## はじめに
 
-When dynamically binding attributes on an element, a common scenario involves using both the `v-bind="object"` syntax as well as individual attributes in the same element. However, this raises questions as far as the priority of merging.
+要素に属性を動的にバインドする場合、同じ要素で `v-bind="object"` 構文と個別の属性の両方を使用するのが一般的です。しかし、この場合、マージの優先順位に問題が生じます。
 
-## 2.x Syntax
+## 2.x の構文
 
-In 2.x, if an element has both `v-bind="object"` and an identical individual attribute defined, the individual attribute would always overwrite bindings in the `object`.
+2.x では、要素に `v-bind="object"` と個別の属性が定義されている場合、個別の属性は常に `object` のバインドを上書きしていました。
 
 ```html
-<!-- template -->
+<!-- テンプレート -->
 <div id="red" v-bind="{ id: 'blue' }"></div>
-<!-- result -->
+<!-- 結果 -->
 <div id="red"></div>
 ```
 
-## 3.x Syntax
+## 3.x の構文
 
-In 3x, if an element has both `v-bind="object"` and an identical individual attribute defined, the order of how the bindings are declared determines how they are merged. In other words, rather than assuming developers want the individual attribute to always override what is defined in the `object`, developers now have more control over the desired merging behavior.
+3x では、要素に `v-bind="object"` と個別の属性が定義されている場合、バインディングが宣言されている順序によって、それらがどのようにマージされるかが決まります。つまり、`object` で定義されたものを個別の属性が常にオーバーライドすることを開発者が望んでいると想定するのではなく、必要とするマージ動作をより詳細にコントロールできるようになったのです。
 
 ```html
-<!-- template -->
+<!-- テンプレート -->
 <div id="red" v-bind="{ id: 'blue' }"></div>
-<!-- result -->
+<!-- 結果 -->
 <div id="blue"></div>
 
-<!-- template -->
+<!-- テンプレート -->
 <div v-bind="{ id: 'blue' }" id="red"></div>
-<!-- result -->
+<!-- 結果 -->
 <div id="red"></div>
 ```
 
-## Migration Strategy
+## 移行手順
 
-If you are relying on this override functionality for `v-bind`, we currently recommend ensuring that your `v-bind` attribute is defined before individual attributes.
+この `v-bind` のオーバーライド機能を利用している場合は、`v-bind` 属性が個別の属性より先に定義されているか確認することをお勧めします。
 
-[Migration build flag: `COMPILER_V_BIND_OBJECT_ORDER`](../migration-build.html#compat-configuration)
+[移行ビルドのフラグ: `COMPILER_V_BIND_OBJECT_ORDER`](../migration-build.html#compat-configuration)

src/ja/breaking-changes/v-if-v-for.md

@@ -1,36 +1,36 @@
 ---
-title: v-if vs. v-for Precedence
+title: v-if と v-for の優先順位
 badges:
   - breaking
 ---
 
 # {{ $frontmatter.title }} <MigrationBadges :badges="$frontmatter.badges" />
 
-## Overview
+## 概要
 
-- **BREAKING**: If used on the same element, `v-if` will have higher precedence than `v-for`
+- **破壊的変更**: 同じ要素で使用した場合、`v-if` は `v-for` より優先度が高くなります
 
-## Introduction
+## はじめに
 
-Two of the most commonly used directives in Vue.js are `v-if` and `v-for`. So it's no surprise that there comes a time when developers want to use both together. While this is not a recommended practice, there may be times when this is necessary, so we wanted to provide guidance for how it works.
+Vue.js で最もよく使われるディレクティブは `v-if` と `v-for` の 2 つです。そのため、開発者がこの 2 つを一緒に使いたいと思うことがあっても不思議ではありません。これは推奨される方法ではありませんが、必要な場合もあるため、その仕組についてのガイダンスを提供したいと考えています。
 
-## 2.x Syntax
+## 2.x の構文
 
-In 2.x, when using `v-if` and `v-for` on the same element, `v-for` would take precedence.
+2.x では、同じ要素に対して `v-if` と `v-for` を使用した場合、`v-for` が優先されました。
 
-## 3.x Syntax
+## 3.x の構文
 
-In 3.x, `v-if` will always have the higher precedence than `v-for`.
+3.x では、`v-if` は常に `v-for` より優先度が高くなります。
 
-## Migration Strategy
+## 移行手順
 
-It is recommended to avoid using both on the same element due to the syntax ambiguity.
+構文があいまいなため、同じ要素で両方を使用することは避けることをお勧めします。
 
-Rather than managing this at the template level, one method for accomplishing this is to create a computed property that filters out a list for the visible elements.
+これをテンプレートレベルで管理するのではなく、表示する要素のリストをフィルタリングする算出プロパティを作成することで実現する方法があります。
 
-[Migration build flag: `COMPILER_V_IF_V_FOR_PRECEDENCE`](../migration-build.html#compat-configuration)
+[移行ビルドのフラグ: `COMPILER_V_IF_V_FOR_PRECEDENCE`](../migration-build.html#compat-configuration)
 
-## See also
+## 参照
 
-- [List Rendering - Displaying Filtered/Sorted Results](https://ja.vuejs.org/guide/essentials/list.html#displaying-filtered-sorted-results)
-- [List Rendering - `v-for` with `v-if`](https://ja.vuejs.org/guide/essentials/list.html#v-for-with-v-if)
+- [リストレンダリング - フィルタリング/並べ替えの結果を表示する](https://ja.vuejs.org/guide/essentials/list.html#displaying-filtered-sorted-results)
+- [リストレンダリング - `v-for` と `v-if`](https://ja.vuejs.org/guide/essentials/list.html#v-for-with-v-if)