#14 Components In-Depth > Non-Prop Attributes の翻訳

src/guide/component-attrs.md

@@ -1,12 +1,12 @@
-# Non-Prop Attributes
+# プロパティでない属性
 
-> This page assumes you've already read the [Components Basics](component-basics.md). Read that first if you are new to components.
+> このページは [コンポーネントの基本](component-basics.md) が読まれていることが前提となっています。 コンポーネントを扱った事のない場合はこちらのページを先に読んでください。
 
-A component non-prop attribute is an attribute or event listener that is passed to a component, but does not have a corresponding property defined in [props](component-props) or [emits](component-custom-events.html#defining-custom-events). Common examples of this include `class`, `style`, and `id` attributes.
+プロパティでない属性とは、コンポーネントに渡される属性やイベントリスナのうち、[props](component-props) や [emits](component-custom-events.html#defining-custom-events) で定義されたものを除いたものをいいます。よくある例としては、コンポーネント要素タグに付与する `class` 、`style` 、`id` などの属性があります。
 
-## Attribute Inheritance
+## 属性の継承
 
-When a component returns a single root node, non-prop attributes will automatically be added to the root node's attributes. For example, in the instance of a date-picker component:
+ただ一つのルート要素をもつコンポーネントの場合、プロパティでない属性はルート要素にそのまま追加されます。例えば date-picker コンポーネントの場合は次のような形になります。
 
 ```js
 app.component('date-picker', {
@@ -18,19 +18,19 @@ app.component('date-picker', {
 })
 ```
 
-In the event we need to define the status of the date-picker component via a `data-status` property, it will be applied to the root node (i.e., `div.date-picker`).
+`data-status` 属性を用いて　date-picker コンポーネントの状態を定義するような場合には、この属性はルート要素 (すなわち `div.date-picker`) に適用されます。
 
 ```html
-<!-- Date-picker component with a non-prop attribute -->
+<!-- プロパティでない属性 とともに用いられる Date-picker コンポーネント -->
 <date-picker data-status="activated"></date-picker>
 
-<!-- Rendered date-picker component -->
+<!-- 実際には以下のような形で描画されます -->
 <div class="date-picker" data-status="activated">
   <input type="datetime" />
 </div>
 ```
 
-Same rule applies to the event listeners:
+イベントリスナについても同様のことが言えます。
 
 ```html
 <date-picker @change="submitChange"></date-picker>
@@ -44,7 +44,7 @@ app.component('date-picker', {
 })
 ```
 
-This might be helpful when we have an HTML element with `change` event as a root element of `date-picker`.
+このような実装は、`date-picker` のルート要素で `change` イベントを扱うケースなどで役に立つでしょう。
 
 ```js
 app.component('date-picker', {
@@ -58,7 +58,7 @@ app.component('date-picker', {
 })
 ```
 
-In this case, `change` event listener is passed from the parent component to the child and it will be triggered on native `<select>` `change` event. We won't need to emit an event from the `date-picker` explicitly:
+この場合、 `change` イベントリスナは、親から子へ渡され、`<select>` 要素本来の `change` イベントにより発火されます。特段、`date-picker` からの明示的なイベント処理を記述する必要はありません。
 
 ```html
 <div id="date-picker" class="demo">
@@ -70,21 +70,21 @@ In this case, `change` event listener is passed from the parent component to the
 const app = Vue.createApp({
   methods: {
     showChange(event) {
-      console.log(event.target.value) // will log a value of the selected option
+      console.log(event.target.value) // 選択された option の値が表示される
     }
   }
 })
 ```
 
-## Disabling Attribute Inheritance
+## 属性の継承の無効化
 
-If you do **not** want a component to automatically inherit attributes, you can set `inheritAttrs: false` in the component's options.
+コンポーネントのオプション内で、`inheritAttrs: false`を指定することで、属性の継承を **無効化** することも可能です。
 
-The common scenario for disabling an attribute inheritance is when attributes need to be applied to other elements besides the root node.
+一般的に属性の継承の無効化は、ルート要素ではない別の要素に属性を適用したいようなケースで利用される場面が考えられるでしょう。
 
-By setting the `inheritAttrs` option to `false`, this gives you access to the component's `$attrs` property, which includes all attributes not included to component `props` and `emits` properties (e.g., `class`, `style`, `v-on` listeners, etc.).
+`inheritAttrs` を `false` にセットした場合属性の継承は無効化されますが、`inheritAttrs` の設定に関わらずコンポーネントの `$attrs` プロパティから、`props` や `emits`といったコンポーネントのプロパティを除く全ての属性(例えば`class` や `style` 、 `v-on` といったものも)にアクセスすることができます。
 
-Using our date-picker component example from the [previous section]('#attribute-inheritance), in the event we need to apply all non-prop attributes to the `input` element rather than the root `div` element, this can be accomplished by using the `v-bind` shortcut.
+[前節]('#属性の継承) で利用した date-picker のコンポーネント例を用いて、プロパティでない属性の全てを ルートの `div` 要素ではなく `input` 要素に適用する場合、`v-bind` を用いて簡略的に記述することも可能です。
 
 ```js{5}
 app.component('date-picker', {
@@ -97,7 +97,7 @@ app.component('date-picker', {
 })
 ```
 
-With this new configuration, our `data-status` attribute will be applied to our `input` element!
+このように記述することで、`data-status` 属性は、 `input` 要素に適用されるようになります。
 
 ```html
 <!-- Date-picker component with a non-prop attribute -->
@@ -109,16 +109,16 @@ With this new configuration, our `data-status` attribute will be applied to our
 </div>
 ```
 
-## Attribute Inheritance on Multiple Root Nodes
+## ルート要素が複数の場合の属性の継承
 
-Unlike single root node components, components with multiple root nodes do not have an automatic attribute fallthrough behavior. If `$attrs` are not bound explicitly, a runtime warning will be issued.
+コンポーネントのルート要素が一つでなく複数のルート要素からなる場合には、暗黙の属性の継承は行われません。`$attrs` を用いた明示的なアサインを行わない場合、ランタイム上で warning が発行されます。
 
 ```html
 <custom-layout id="custom-layout" @click="changeValue"></custom-layout>
 ```
 
 ```js
-// This will raise a warning
+// これは warning を発行します
 app.component('custom-layout', {
   template: `
     <header>...</header>
@@ -127,7 +127,7 @@ app.component('custom-layout', {
   `
 })
 
-// No warnings, $attrs are passed to <main> element
+// <main> 要素に $attrs で属性を渡しているため、 warnings は発行されません
 app.component('custom-layout', {
   template: `
     <header>...</header>