Japanese translation (Components section)

.vitepress/locales/ja.js

@@ -60,17 +60,17 @@ export default {
  ]
  },
  {
- text: 'Components',
+ text: 'コンポーネント',
  items: [
  {
- text: 'Functional Components',
+ text: '関数型コンポーネント',
  link: '/ja/breaking-changes/functional-components'
  },
  {
- text: 'Async Components',
+ text: '非同期コンポーネント',
  link: '/ja/breaking-changes/async-components'
  },
- { text: 'emits Option', link: '/ja/breaking-changes/emits-option' }
+ { text: 'emits オプション', link: '/ja/breaking-changes/emits-option' }
  ]
  },
  {

src/ja/breaking-changes/async-components.md

@@ -3,27 +3,27 @@ badges:
  - new
 ---
 
-# Async Components <MigrationBadges :badges="$frontmatter.badges" />
+# 非同期コンポーネント <MigrationBadges :badges="$frontmatter.badges" />
 
-## Overview
+## 概要
 
-Here is a high level overview of what has changed:
+変更点の概要は次のとおりです:
 
-- New `defineAsyncComponent` helper method that explicitly defines async components
-- `component` option renamed to `loader`
-- Loader function does not inherently receive `resolve` and `reject` arguments and must return a Promise
+- 非同期コンポーネントを明示的に定義する新しいヘルパーメソッド `defineAsyncComponent`
+- `component` オプションは `loader` に名称変更されました
+- ローダー関数は `resolve` と `reject` の引数を受け取らず、Promise を返す必要があります
 
-For a more in-depth explanation, read on!
+より詳しい説明は続きをお読みください！
 
-## Introduction
+## はじめに
 
-Previously, async components were created by simply defining a component as a function that returned a promise, such as:
+以前は、以下のように promise を返す関数としてコンポーネントを定義するだけで、非同期コンポーネントが作成できました:
 
 ```js
 const asyncModal = () => import('./Modal.vue')
 ```
 
-Or, for the more advanced component syntax with options:
+もしくはオプションのついた、より高度なコンポーネント構文の場合は:
 
 ```js
 const asyncModal = {
@@ -35,19 +35,19 @@ const asyncModal = {
 }
 ```
 
-## 3.x Syntax
+## 3.x の構文
 
-Now, in Vue 3, since functional components are defined as pure functions, async components definitions need to be explicitly defined by wrapping it in a new `defineAsyncComponent` helper:
+Vue 3 では、関数型コンポーネントは純粋な関数として定義されるため、非同期コンポーネントの定義は、新しい `defineAsyncComponent` ヘルパーでラップして明示的に定義する必要があります:
 
 ```js
 import { defineAsyncComponent } from 'vue'
 import ErrorComponent from './components/ErrorComponent.vue'
 import LoadingComponent from './components/LoadingComponent.vue'
 
-// Async component without options
+// オプションなし非同期コンポーネント
 const asyncModal = defineAsyncComponent(() => import('./Modal.vue'))
 
-// Async component with options
+// オプションあり非同期コンポーネント
 const asyncModalWithOptions = defineAsyncComponent({
  loader: () => import('./Modal.vue'),
  delay: 200,
@@ -57,11 +57,11 @@ const asyncModalWithOptions = defineAsyncComponent({
 })
 ```
 
-::: tip NOTE
-Vue Router supports a similar mechanism for asynchronously loading route components, known as *lazy loading*. Despite the similarities, this feature is distinct from Vue's support for async components. You should **not** use `defineAsyncComponent` when configuring route components with Vue Router. You can read more about this in the [Lazy Loading Routes](https://router.vuejs.org/guide/advanced/lazy-loading.html) section of the Vue Router documentation.
+::: tip 注意
+Vue Router は、ルート（route）コンポーネントを非同期にロードするための同様のメカニズムをサポートしており、*lazy loading* として知られています。類似しているとはいえ、この機能は Vue の非同期コンポーネントのサポートとは異なるものです。Vue Router でルートコンポーネントを設定する際、`defineAsyncComponent` は**使用しないで**ください。これについては、Vue Router ドキュメントの [Lazy Loading Routes](https://router.vuejs.org/guide/advanced/lazy-loading.html) セクションで詳しく説明されています。
 :::
 
-Another change that has been made from 2.x is that the `component` option is now renamed to `loader` in order to accurately communicate that a component definition cannot be provided directly.
+2.x からのもう 1 つの変更点は、コンポーネント定義を直接提供できないことを正確に伝えるために、`component` オプションが `loader` に名称変更されたことです。
 
 ```js{4}
 import { defineAsyncComponent } from 'vue'
@@ -75,15 +75,15 @@ const asyncModalWithOptions = defineAsyncComponent({
 })
 ```
 
-In addition, unlike 2.x, the loader function no longer receives the `resolve` and `reject` arguments and must always return a Promise.
+また、2.x とは異なり、loader 関数は `resolve` と `reject` の引数を受け取らなくなり、常に Promise を返す必要があります。
 
 ```js
-// 2.x version
+// 2.x バージョン
 const oldAsyncComponent = (resolve, reject) => {
  /* ... */
 }
 
-// 3.x version
+// 3.x バージョン
 const asyncComponent = defineAsyncComponent(
  () =>
  new Promise((resolve, reject) => {
@@ -92,7 +92,7 @@ const asyncComponent = defineAsyncComponent(
 )
 ```
 
-For more information on the usage of async components, see:
+非同期コンポーネントの使用方法の詳細については、こちらをご覧ください:
 
-- [Guide: Async Components](https://ja.vuejs.org/guide/components/async.html)
-- [Migration build flag: `COMPONENT_ASYNC`](../migration-build.html#compat-configuration)
+- [ガイド: 非同期コンポーネント](https://ja.vuejs.org/guide/components/async.html)
+- [移行ビルドのフラグ: `COMPONENT_ASYNC`](../migration-build.html#compat-configuration)

src/ja/breaking-changes/emits-option.md

@@ -1,18 +1,18 @@
 ---
-title: emits Option
+title: emits オプション
 badges:
  - new
 ---
 
-# `emits` Option <MigrationBadges :badges="$frontmatter.badges" />
+# `emits` オプション <MigrationBadges :badges="$frontmatter.badges" />
 
-## Overview
+## 概要
 
-Vue 3 now offers an `emits` option, similar to the existing `props` option. This option can be used to define the events that a component can emit to its parent.
+Vue 3 では、既存の `props` オプションと同様に、`emits` オプションを提供するようになりました。このオプションを使用してコンポーネントが親に発行可能なイベントを定義できます。
 
-## 2.x Behavior
+## 2.x の動作
 
-In Vue 2, you can define the props that a component receives, but you can't declare which events it can emit:
+Vue 2 ではコンポーネントが受け取るプロパティを定義できますが、そのコンポーネントが発行可能なイベントは宣言できません:
 
 ```vue
 <template>
@@ -28,9 +28,9 @@ In Vue 2, you can define the props that a component receives, but you can't decl
 </script>
 ```
 
-## 3.x Behavior
+## 3.x の動作
 
-Similar to props, the events that the component emits can now be defined with the `emits` option:
+プロパティと同様に、コンポーネントが発行するイベントを `emits` オプションで定義できるようになりました:
 
 ```vue
 <template>
@@ -47,51 +47,51 @@ Similar to props, the events that the component emits can now be defined with th
 </script>
 ```
 
-The option also accepts an object, which allows the developer to define validators for the arguments that are passed with the emitted event, similar to validators in `props` definitions.
+このオプションにはオブジェクトも指定できます。開発者は、`props` 定義のバリデーターと同じように、発行されるイベントに渡される引数のバリデーターを定義できます。
 
-For more information on this, please read the [API documentation for this feature](https://ja.vuejs.org/api/options-state.html#emits).
+詳細については、[この機能の API ドキュメント](https://ja.vuejs.org/api/options-state.html#emits)をお読みください。
 
-## Migration Strategy
+## 移行手順
 
-It is highly recommended that you document all the events emitted by each of your components using `emits`.
+`emits` を使って、各コンポーネントが発行するすべてのイベントをドキュメント化することを強くお勧めします。
 
-This is especially important because of [the removal of the `.native` modifier](./v-on-native-modifier-removed.md). Any listeners for events that aren't declared with `emits` will now be included in the component's `$attrs`, which by default will be bound to the component's root node.
+特に、[`.native` 修飾子が削除される](./v-on-native-modifier-removed.md)ため重要です。`emits` で宣言されていないイベントリスナーは、コンポーネントの `$attrs` に含まれるようになり、デフォルトではコンポーネントのルートノードにバインドされます。
 
-### Example
+### 例
 
-For components that re-emit native events to their parent, this would now lead to two events being fired:
+ネイティブイベントを親に再発行するコンポーネントの場合、2 つのイベントが発生することになります:
 
 ```vue
 <template>
  <button v-on:click="$emit('click', $event)">OK</button>
 </template>
 <script>
 export default {
- emits: [] // without declared event
+ emits: [] // イベント宣言なし
 }
 </script>
 ```
 
-When a parent listens for the `click` event on the component:
+親がコンポーネントの `click` イベントを購読する場合:
 
 ```html
 <my-button v-on:click="handleClick"></my-button>
 ```
 
-it would now be triggered _twice_:
+これは**2 回**トリガーされます:
 
-- Once from `$emit()`.
-- Once from a native event listener applied to the root element.
+- `$emit()` から 1 回。
+- ルート要素に適用されるネイティブイベントリスナーから 1 回。
 
-Here you have two options:
+ここで、2 つの選択肢があります:
 
-1. Properly declare the `click` event. This is useful if you actually do add some logic to that event handler in `<my-button>`.
-2. Remove the re-emitting of the event, since the parent can now listen for the native event easily, without adding `.native`. Suitable when you really only re-emit the event anyway.
+1. `click` イベントを適切に宣言する。これは実際に `<my-button>` のイベントハンドラーに何らかのロジックを追加する場合に便利です。
+2. イベントの再発行を削除する。`.native` を追加しなくても、親は簡単にネイティブイベントを購読できるようになりました。とにかくイベントを再発行するだけの場合に適しています。
 
-## See also
+## 参照
 
-- [Relevant RFC](https://github.com/vuejs/rfcs/blob/master/active-rfcs/0030-emits-option.md)
-- [Migration guide - `.native` modifier removed](./v-on-native-modifier-removed.md)
-- [Migration guide - `$listeners` removed](./listeners-removed.md)
-- [Migration guide - `$attrs` includes `class` & `style`](./attrs-includes-class-style.md)
-- [Migration guide - Changes in the Render Functions API](./render-function-api.md)
+- [関連 RFC](https://github.com/vuejs/rfcs/blob/master/active-rfcs/0030-emits-option.md)
+- [移行ガイド - `.native` 修飾子の削除](./v-on-native-modifier-removed.md)
+- [移行ガイド - `$listeners` の削除](./listeners-removed.md)
+- [移行ガイド - `$attrs` が `class` と `style` を含有](./attrs-includes-class-style.md)
+- [移行ガイド - レンダー関数 API の変更点](./render-function-api.md)

src/ja/breaking-changes/functional-components.md

@@ -3,36 +3,36 @@ badges:
  - breaking
 ---
 
-# Functional Components <MigrationBadges :badges="$frontmatter.badges" />
+# 関数型コンポーネント <MigrationBadges :badges="$frontmatter.badges" />
 
-## Overview
+## 概要
 
-In terms of what has changed, at a high level:
+変更点の概要は次のとおりです:
 
-- Performance gains from 2.x for functional components are now negligible in 3.x, so we recommend just using stateful components
-- Functional components can only be created using a plain function that receives `props` and `context` (i.e., `slots`, `attrs`, `emit`)
-- **BREAKING:** `functional` attribute on single-file component (SFC) `<template>` is removed
-- **BREAKING:** `{ functional: true }` option in components created by functions is removed
+- 関数型コンポーネントは 2.x からパフォーマンス向上し、3.x では無視できる程度になってので、ステートフルコンポーネントのみ使用することを推奨します
+- 関数型コンポーネントは、`props` と `context`（つまり `slot`, `attrs`, `emit`）を受け取るプレーンな関数だけで作成できます
+- **破壊的変更:** 単一ファイルコンポーネント（SFC）における `<template>` の `functional` 属性は削除されました
+- **破壊的変更:** 関数によって作成されたコンポーネントの `{ Functional: true }` オプションは削除されました
 
-For more information, read on!
+詳細については続きをお読みください！
 
-## Introduction
+## はじめに
 
-In Vue 2, functional components had two primary use cases:
+Vue 2 では、関数型コンポーネントには 2 つの主なユースケースがありました:
 
-- as a performance optimization, because they initialized much faster than stateful components
-- to return multiple root nodes
+- ステートフルコンポーネントよりもはるかに高速に初期化されるので、パフォーマンスの最適化として
+- 複数のルートノードを返すため
 
-However, in Vue 3, the performance of stateful components has improved to the point that the difference is negligible. In addition, stateful components now also include the ability to return multiple root nodes.
+しかし Vue 3 では、ステートフルコンポーネントのパフォーマンスは、その差が無視できるほどに向上しています。さらに、ステートフルなコンポーネントには、複数のルートノードを返す機能も追加されました。
 
-As a result, the only remaining use case for functional components is simple components, such as a component to create a dynamic heading. Otherwise, it is recommended to use stateful components as you normally would.
+その結果、関数型コンポーネントに残った唯一のユースケースは、動的な見出しを作成するコンポーネントのような単純なコンポーネントだけです。それ以外の場合は、通常通りステートフルコンポーネントを使用することをおすすめします。
 
-## 2.x Syntax
+## 2.x の構文
 
-Using the `<dynamic-heading>` component, which is responsible for rendering out the appropriate heading (i.e., `h1`, `h2`, `h3`, etc.), this could have been written as a single-file component in 2.x as:
+適切な見出し（`h1`, `h2`, `h3` など）をレンダリングする `<dynamic-heading>` コンポーネントを例にすると、2.x では単一ファイルコンポーネントとして以下のように記述できました:
 
 ```js
-// Vue 2 Functional Component Example
+// Vue 2 の関数型コンポーネントの例
 export default {
  functional: true,
  props: ['level'],
@@ -42,10 +42,10 @@ export default {
 }
 ```
 
-Or, for those who preferred the `<template>` in a single-file component:
+あるいは、単一ファイルコンポーネントの `<template>` を好む場合は:
 
 ```vue
-<!-- Vue 2 Functional Component Example with <template> -->
+<!-- Vue 2 で <template> を使った関数型コンポーネントの例 -->
 <template functional>
  <component
  :is="`h${props.level}`"
@@ -61,17 +61,17 @@ export default {
 </script>
 ```
 
-## 3.x Syntax
+## 3.x の構文
 
-### Components Created by Functions
+### 関数で作られるコンポーネント
 
-Now in Vue 3, all functional components are created with a plain function. In other words, there is no need to define the `{ functional: true }` component option.
+Vue 3 では、すべての関数型コンポーネントはプレーンな関数で作成されるようになりました。つまり、`{ functional: true }` というコンポーネントオプションを定義する必要はありません。
 
-They will receive two arguments: `props` and `context`. The `context` argument is an object that contains a component's `attrs`, `slots`, and `emit` properties.
+これらは 2 つの引数（`props` と `context`）を受け取ります。`context` 引数は、コンポーネントの `attrs`, `slots`, `emit` プロパティを含むオブジェクトです。
 
-In addition, rather than implicitly provide `h` in a `render` function, `h` is now imported globally.
+また、`render` 関数内で暗黙的に `h` を提供するのではなく、`h` はグローバルにインポートされるようになりました。
 
-Using the previously mentioned example of a `<dynamic-heading>` component, here is how it looks now.
+前述の `<dynamic-heading>` コンポーネントの例を使用すると、以下のようになります。
 
 ```js
 import { h } from 'vue'
@@ -85,11 +85,11 @@ DynamicHeading.props = ['level']
 export default DynamicHeading
 ```
 
-### Single File Components (SFCs) {#single-file-components-sfcs}
+### 単一ファイルコンポーネント (SFC) {#single-file-components-sfcs}
 
-In 3.x, the performance difference between stateful and functional components has been drastically reduced and will be insignificant in most use cases. As a result, the migration path for developers using `functional` on SFCs is to remove the attribute and rename all references of `props` to `$props` and `attrs` to `$attrs`.
+3.x では、ステートフルコンポーネントと関数型コンポーネントの性能差は大幅に減少し、ほとんどのユースケースで重要ではなくなります。その結果、SFC で `functional` を使用している開発者は、この属性を削除し、`props` の参照をすべて `$props` に、`attrs`を `$attrs` にリネームすることが移行手順となります。
 
-Using our `<dynamic-heading>` example from before, here is how it would look now.
+先ほどの `<dynamic-heading>` の例を使うと、次のようになります。
 
 ```vue{1,3,4}
 <template>
@@ -106,15 +106,15 @@ export default {
 </script>
 ```
 
-The main differences are that:
+主な違いは以下の通りです:
 
-1. `functional` attribute removed on `<template>`
-1. `listeners` are now passed as part of `$attrs` and can be removed
+1. `<template>` の `functional` 属性を削除
+1. `listeners` は `$attrs` の一部として渡されるようになったので、削除できます
 
-## Next Steps
+## 次のステップ
 
-For more information on the usage of the new functional components and the changes to render functions in general, see:
+新しい関数型コンポーネントの使用方法やレンダー関数全般の変更点に関する詳細は、こちらをご覧ください:
 
-- [Migration: Render Functions](./render-function-api.html)
-- [Guide: Render Functions](https://ja.vuejs.org/guide/extras/render-function.html#render-functions-jsx)
-- [Migration build flag: `COMPONENT_FUNCTIONAL`](../migration-build.html#compat-configuration)
+- [移行ガイド: レンダー関数](./render-function-api.html)
+- [ガイド: レンダー関数](https://ja.vuejs.org/guide/extras/render-function.html#render-functions-jsx)
+- [移行ビルドのフラグ: `COMPONENT_FUNCTIONAL`](../migration-build.html#compat-configuration)