Japanese translation (Other Minor Changes section 2) (#49)

Author: jay-es

.vitepress/locales/ja.js

@@ -141,22 +141,22 @@ export default {
             link: '/ja/breaking-changes/props-default-this'
           },
           {
-            text: 'Transition Class Change',
+            text: 'トランジションクラスの変更',
             link: '/ja/breaking-changes/transition'
           },
           {
-            text: 'Transition as Root',
+            text: 'ルートのトランジション',
             link: '/ja/breaking-changes/transition-as-root'
           },
           {
-            text: 'Transition Group Root Element',
+            text: 'トランジショングループのルート要素',
             link: '/ja/breaking-changes/transition-group'
           },
           {
-            text: 'VNode lifecycle events',
+            text: 'VNode ライフサイクルイベント',
             link: '/ja/breaking-changes/vnode-lifecycle-events'
           },
-          { text: 'Watch on Arrays', link: '/ja/breaking-changes/watch' }
+          { text: '配列の監視', link: '/ja/breaking-changes/watch' }
         ]
       }
     ]

src/ja/breaking-changes/transition-as-root.md

@@ -3,18 +3,18 @@ badges:
   - breaking
 ---
 
-# Transition as Root <MigrationBadges :badges="$frontmatter.badges" />
+# ルートのトランジション <MigrationBadges :badges="$frontmatter.badges" />
 
-## Overview
+## 概要
 
-Using a `<transition>` as a component's root will no longer trigger transitions when the component is toggled from the outside.
+コンポーネントのルートとして `<transition>` を使用する場合、外部からコンポーネントを切り替えたときにトランジションが発生しなくなりました。
 
-## 2.x Behavior
+## 2.x の動作
 
-In Vue 2, it was possible to trigger a transition from outside a component by using a `<transition>` as the component's root:
+Vue 2 では、コンポーネントのルートとして `<transition>` を使用することで、コンポーネントの外からトランジションをトリガーできました:
 
 ```html
-<!-- modal component -->
+<!-- モーダルコンポーネント -->
 <template>
   <transition>
     <div class="modal"><slot/></div>
@@ -23,19 +23,19 @@ In Vue 2, it was possible to trigger a transition from outside a component by us
 ```
 
 ```html
-<!-- usage -->
+<!-- 使用箇所 -->
 <modal v-if="showModal">hello</modal>
 ```
 
-Toggling the value of `showModal` would trigger a transition inside the modal component.
+`showModal` の値を切り替えると、モーダルコンポーネントの内部でトランジションが発生します。
 
-This worked by accident, not by design. A `<transition>` is supposed to be triggered by changes to its children, not by toggling the `<transition>` itself.
+これは偶然の産物であり、意図したものではありませんでした。`<transition>` は、`<transition>` 自体のトグルではなく、その子への変更によってトリガーされることになっています。
 
-This quirk has now been removed.
+現在、この動作は解消されています。
 
-## Migration Strategy
+## 移行手順
 
-A similar effect can be achieved by passing a prop to the component instead:
+代わりに、コンポーネントにプロパティを渡すことによって同様の効果を得られます:
 
 ```vue
 <template>
@@ -51,11 +51,11 @@ export default {
 ```
 
 ```html
-<!-- usage -->
+<!-- 使用箇所 -->
 <modal :show="showModal">hello</modal>
 ```
 
-## See also
+## 参照
 
-- [Some transition classes got a rename](./transition.html)
-- [`<TransitionGroup>` now renders no wrapper element by default](./transition-group.html)
+- [一部のトランジションクラスが名称変更されました](./transition.html)
+- [`<TransitionGroup>` はデフォルトでラッパー要素をレンダリングしなくなりました](./transition-group.html)

src/ja/breaking-changes/transition-group.md

@@ -1,18 +1,18 @@
 ---
-title: Transition Group Root Element
+title: トランジショングループのルート要素
 badges:
   - breaking
 ---
 
 # {{ $frontmatter.title }} <MigrationBadges :badges="$frontmatter.badges" />
 
-## Overview
+## 概要
 
-`<transition-group>` no longer renders a root element by default, but can still create one with the `tag` attribute.
+`<transition-group>` はデフォルトでルート要素をレンダリングしなくなりましたが、`tag` 属性でルート要素を作成できます。
 
-## 2.x Syntax
+## 2.x の構文
 
-In Vue 2, `<transition-group>`, like other custom components, needed a root element, which by default was a `<span>` but was customizable via the `tag` attribute.
+Vue 2 では、`<transition-group>` は他のカスタムコンポーネントと同様にルート要素が必要でした。ルート要素はデフォルトでは `<span>` ですが、`tag` 属性によってカスタマイズできます。
 
 ```html
 <transition-group tag="ul">
@@ -22,24 +22,24 @@ In Vue 2, `<transition-group>`, like other custom components, needed a root elem
 </transition-group>
 ```
 
-## 3.x Syntax
+## 3.x の構文
 
-In Vue 3, we have [fragment support](../new/fragments.html), so components no longer _need_ a root node. Consequently, `<transition-group>` no longer renders one by default.
+Vue 3 では、[fragment のサポート](../new/fragments.html)があるので、コンポーネントにはルートノードが不要になりました。その結果、`<transition-group>` はデフォルトでルートノードをレンダリングしなくなりました。
 
-- If you already have the `tag` attribute defined in your Vue 2 code, like in the example above, everything will work as before
-- If you didn't have one defined _and_ your styling or other behaviors relied on the presence of the `<span>` root element to work properly, simply add `tag="span"` to the `<transition-group>`:
+- 上の例のように、Vue 2 のコードですでに `tag` 属性が定義されている場合、すべて以前と同じように動作します
+- 定義されておらず、スタイリングやその他の動作がルート要素の `<span>` に依存して正しく動作しない場合は、`<transition-group>` に `tag="span"` を追加するだけです：
 
 ```html
 <transition-group tag="span">
   <!-- -->
 </transition-group>
 ```
 
-## Migration Strategy
+## 移行手順
 
-[Migration build flag: `TRANSITION_GROUP_ROOT`](../migration-build.html#compat-configuration)
+[移行ビルドのフラグ: `TRANSITION_GROUP_ROOT`](../migration-build.html#compat-configuration)
 
-## See also
+## 参照
 
-- [Some transition classes got a rename](./transition.html)
-- [`<Transition>` as a root can no longer be toggled from the outside](./transition-as-root.html)
+- [一部のトランジションクラスが名称変更されました](./transition.html)
+- [ルートの `<Transition>` は、外部からトグルできなくなりました](./transition-as-root.html)

src/ja/breaking-changes/transition.md

@@ -1,20 +1,20 @@
 ---
-title: Transition Class Change
+title: トランジションクラスの変更
 badges:
   - breaking
 ---
 
 # {{ $frontmatter.title }} <MigrationBadges :badges="$frontmatter.badges" />
 
-## Overview
+## 概要
 
-The `v-enter` transition class has been renamed to `v-enter-from` and the `v-leave` transition class has been renamed to `v-leave-from`.
+`v-enter` トランジションクラスは `v-enter-from` に名称変更され、`v-leave` トランジションクラスは `v-leave-from` に名称変更されました。
 
-## 2.x Syntax
+## 2.x の構文
 
-Before v2.1.8, we had two transition classes for each transition direction: initial and active states.
+v2.1.8 以前は、トランジションの方向ごとに 2 つの遷移クラス（初期状態と活性状態）がありました。
 
-In v2.1.8, we introduced `v-enter-to` to address the timing gap between enter/leave transitions. However, for backward compatibility, the `v-enter` name was untouched:
+v2.1.8 で、enter/leave のトランジション間のタイミングギャップに対応するため、`v-enter-to` を導入しました。しかし、後方互換性のために、`v-enter` という名前はそのまま残されています:
 
 ```css
 .v-enter,
@@ -28,11 +28,11 @@ In v2.1.8, we introduced `v-enter-to` to address the timing gap between enter/le
 }
 ```
 
-This became confusing, as _enter_ and _leave_ were broad and not using the same naming convention as their class hook counterparts.
+_enter_ と _leave_ は幅広く、対応するクラスフックと同じ命名規則を使っていないため、これは混乱を招きました。
 
-## 3.x Update
+## 3.x の更新内容
 
-In order to be more explicit and legible, we have now renamed these initial state classes:
+より明示的で分かりやすくするために、これらの初期状態クラスの名前を変更しました:
 
 ```css
 .v-enter-from,
@@ -46,22 +46,22 @@ In order to be more explicit and legible, we have now renamed these initial stat
 }
 ```
 
-It's now much clearer what the difference between these states is.
+これらの状態の違いがより明確になりました。
 
 ![Transition Diagram](/images/transitions.svg)
 
-The `<transition>` component's related prop names are also changed:
+また、`<transition>` コンポーネントの関連プロパティの名前も変更されました:
 
-- `leave-class` is renamed to `leave-from-class` (can be written as `leaveFromClass` in render functions or JSX)
-- `enter-class` is renamed to `enter-from-class` (can be written as `enterFromClass` in render functions or JSX)
+- `leave-class` は `leave-from-class` に名称変更されます（レンダー関数や JSX では `leaveFromClass` と記述できます）
+- `enter-class` は `enter-from-class` に名称変更されます（レンダー関数や JSX では `enterFromClass` と記述できます）
 
-## Migration Strategy
+## 移行手順
 
-1. Replace instances of `.v-enter` to `.v-enter-from`
-2. Replace instances of `.v-leave` to `.v-leave-from`
-3. Replace instances of related prop names, as above.
+1. `.v-enter` の使用箇所を `.v-enter-from` に置き換える。
+2. `.v-leave` の使用箇所を `.v-leave-from` に置き換える。
+3. 上述の、関連するプロパティ名の使用箇所を置き換える。
 
-## See also
+## 参照
 
-- [`<Transition>` as a root can no longer be toggled from the outside](./transition-as-root.html)
-- [`<TransitionGroup>` now renders no wrapper element by default](./transition-group.html)
+- [ルートの `<Transition>` は、外部からトグルできなくなりました](./transition-as-root.html)
+- [`<TransitionGroup>` はデフォルトでラッパー要素をレンダリングしなくなりました](./transition-group.html)

src/ja/breaking-changes/v-on-native-modifier-removed.md

@@ -46,7 +46,7 @@ badges:
 
 ## 移行手順
 
-- `.native` 修飾子のインスタンスをすべて削除します。
+- `.native` 修飾子の使用箇所をすべて削除します。
 - すべてのコンポーネントで `emits` オプションを使用して、イベントをドキュメント化するようにします。
 
 [移行ビルドのフラグ: `COMPILER_V_ON_NATIVE`](../migration-build.html#compat-configuration)

src/ja/breaking-changes/vnode-lifecycle-events.md

@@ -3,40 +3,40 @@ badges:
   - breaking
 ---
 
-# VNode Lifecycle Events <MigrationBadges :badges="$frontmatter.badges" />
+# VNode ライフサイクルイベント <MigrationBadges :badges="$frontmatter.badges" />
 
-## Overview
+## 概要
 
-In Vue 2, it was possible to use events to listen for key stages in a component's lifecycle. These events had names that started with the prefix `hook:`, followed by the name of the corresponding lifecycle hook.
+Vue 2 ではイベントを使用して、コンポーネントのライフサイクルの主要な段階を購読できました。これらのイベントは `hook:` プレフィックスで始まり、その後に対応するライフサイクルフックの名前が続きます。
 
-In Vue 3, this prefix has been changed to `vue:`. In addition, these events are now available for HTML elements as well as components.
+Vue 3 では、このプレフィックスは `vue:` に変更されました。さらに、これらのイベントは、コンポーネントだけでなく HTML 要素でも利用できるようになりました。
 
-## 2.x Syntax
+## 2.x の構文
 
-In Vue 2, the event name is the same as the equivalent lifecycle hook, prefixed with `hook:`:
+Vue 2 では、イベント名は相当するライフサイクルフックと同じで、プレフィックスとして `hook:` が付きます:
 
 ```html
 <template>
   <child-component @hook:updated="onUpdated">
 </template>
 ```
 
-## 3.x Syntax
+## 3.x の構文
 
-In Vue 3, the event name is prefixed with `vue:`:
+Vue 3 では、イベント名の前に `vue:` が付きます:
 
 ```html
 <template>
   <child-component @vue:updated="onUpdated">
 </template>
 ```
 
-## Migration Strategy
+## 移行手順
 
-In most cases it should just require changing the prefix. The lifecycle hooks `beforeDestroy` and `destroyed` have been renamed to `beforeUnmount` and `unmounted` respectively, so the corresponding event names will also need to be updated.
+ほとんどの場合、プレフィックスを変更するだけでよいでしょう。ライフサイクルフックの `beforeDestroy` と `destroyed` はそれぞれ `beforeUnmount` と `unmounted` に名前が変更されたので、対応するイベントの名前も更新する必要があります。
 
-[Migration build flags: `INSTANCE_EVENT_HOOKS`](../migration-build.html#compat-configuration)
+[移行ビルドのフラグ: `INSTANCE_EVENT_HOOKS`](../migration-build.html#compat-configuration)
 
-## See Also
+## 参照
 
-- [Migration guide - Events API](./events-api.html)
+- [移行ガイド - イベント API](./events-api.html)

src/ja/breaking-changes/watch.md

@@ -1,18 +1,18 @@
 ---
-title: Watch on Arrays
+title: 配列の監視
 badges:
   - breaking
 ---
 
 # {{ $frontmatter.title }} <MigrationBadges :badges="$frontmatter.badges" />
 
-## Overview
+## 概要
 
-- **BREAKING**: When watching an array, the callback will only trigger when the array is replaced. If you need to trigger on mutation, the `deep` option must be specified.
+- **破壊的変更**: 配列を監視している場合、コールバックは配列が置換されたときにのみトリガーされます。変更時にトリガーする必要がある場合は、`deep` オプションを指定する必要があります。
 
-## 3.x Syntax
+## 3.x の構文
 
-When using [the `watch` option](https://ja.vuejs.org/api/options-state.html#watch) to watch an array, the callback will only trigger when the array is replaced. In other words, the watch callback will no longer be triggered on array mutation. To trigger on mutation, the `deep` option must be specified.
+[`watch` オプション](https://ja.vuejs.org/api/options-state.html#watch)を使って配列を監視する場合、コールバックは配列が置換されたときにのみトリガーされます。つまり、ウォッチコールバックは配列の変更時にトリガーされなくなります。変更時にトリガーするには、`deep` オプションを指定する必要があります。
 
 ```js
 watch: {
@@ -25,8 +25,8 @@ watch: {
 }
 ```
 
-## Migration Strategy
+## 移行手順
 
-If you rely on watching array mutations, add the `deep` option to ensure that your callback is triggered correctly.
+配列の変更を監視することに依存している場合、コールバックが正しくトリガーされるように `deep` オプションを追加してください。
 
-[Migration build flag: `WATCH_ARRAY`](../migration-build.html#compat-configuration)
+[移行ビルドのフラグ: `WATCH_ARRAY`](../migration-build.html#compat-configuration)