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

mikakane · 2020-09-21T14:56:13Z

現行のドキュメント翻訳状況に沿って
Non-Prop Attributes 　は「プロパティでない属性」としています。

https://jp.vuejs.org/v2/guide/components-props.html#%E3%83%97%E3%83%AD%E3%83%91%E3%83%86%E3%82%A3%E3%81%A7%E3%81%AA%E3%81%84%E5%B1%9E%E6%80%A7

…to lang-ja

netlify · 2020-09-21T14:57:52Z

Deploy preview for vuejs-v3-ja-doc-preview ready!

Built with commit ff7f7b7

https://deploy-preview-74--vuejs-v3-ja-doc-preview.netlify.app

kazupon

レビュー 👀 しました。
指摘コメント 💬 の対応お願いします。

kazupon · 2020-09-21T16:41:44Z

src/guide/component-attrs.md


-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.
+[previous section]('#属性の継承) で利用した date-picker のコンポーネント例を用いて、プロパティでない属性の全てを ルートの `div` 要素ではなく `input` 要素に適用する場合、`v-bind` を用いて簡略的に記述することも可能です。


previous section も訳せるので、以下のようにお願いします。

Suggested change

[previous section]('#属性の継承) で利用した date-picker のコンポーネント例を用いて、プロパティでない属性の全てをルートの `div` 要素ではなく `input` 要素に適用する場合、`v-bind` を用いて簡略的に記述することも可能です。

[前節]('#属性の継承) で利用した date-picker のコンポーネント例を用いて、プロパティでない属性の全てをルートの `div` 要素ではなく `input` 要素に適用する場合、`v-bind` を用いて簡略的に記述することも可能です。

mikakane · 2020-09-22T03:41:29Z

上記の修正と合わせて class / id / style に関する認識違いがあったので修正しました。
4d4d1d4

mikakane · 2020-09-22T03:43:27Z

$attr で class / id / style にアクセスできるようになったんですが、「Non props Attribute 」にはこのclass / id / style を含むんでしょうか？

冒頭の、

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 or emits. Common examples of this include class, style, and id attributes.

で、this include が全文主節にかかるのか but 節にかかるのかちょっと不明で判断しきれなかったです。

kazupon

こちらについて回答する形で、再度レビューしました。確認お願いします。

kazupon · 2020-09-22T15:11:18Z

src/guide/component-attrs.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` 属性はここに含まれません。


こちらのURLの件、ここで回答しますね。

$attr で class / id / style にアクセスできるようになったんですが、「Non props Attribute 」にはこのclass / id / style を含むんでしょうか？

恐らく $attr は $attrs の typo だと思いますが、 $attrs と想定して回答すると、
この「Non-Prop Attributes」においては含まれますね。

DOM の id / class / style といった属性、 click 、mousemove といったイベントは、コンポーネントの props 、emits で定義しなければ、 $attrs でアクセス可能になります。
これら DOM の属性、イベントをコンポーネントのprops 、emitsで定義した場合は、コンポーネント側で使用するため、$attrs でアクセスできなくなります。

「Non-Prop Attributes」では、用は $attrs について解説しています。

なので、

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 or emits. Common examples of this include class, style, and id attributes.

の訳は、わかりやすくするために、意訳も入れて以下にするといいかと思います。

Suggested change

プロパティでない属性とは、コンポーネントに渡される属性やイベントリスナのうち、[props](component-props) や [emits](component-custom-events.html#defining-custom-events) で定義されたものを除いたものをいいます。なお、共通の認識として `class` や `style`, `id` 属性はここに含まれません。

プロパティでない属性とは、コンポーネントに渡される属性やイベントリスナのうち、[props](component-props) や [emits](component-custom-events.html#defining-custom-events) で定義されたものを除いたものをいいます。一般の例としてはコンポーネント内の要素に渡す DOM の `class` 、`style` 、`id` 属性があります。

ありがとうございます。

次のセクションで data-status 属性の例示をしていることから考えても、
ここでの class 、style 、id は典型例ではなく、特記(v3での変更点)のような性質に近いものだと思っているんですが、 一般の例としては という形の表現で問題ないですか？

commons の common の訳は、「共通」とか以外に、「ありふれた」「よくある」などの意味があります。
DOM の属性は、front-end において、class / style / id はよく使うものなので、commons examples を「一般の例としては」のように訳しても問題ない思います。

kazupon · 2020-09-22T15:16:52Z

src/guide/component-attrs.md


-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` にセットした場合、コンポーネントの `$attrs` プロパティを通じて、`props` や `emits`といったコンポーネントのプロパティを除く全ての属性(例えば`class` や `style` 、 `v-on` といったものも)にアクセスできるようになります。


これ、原文がちょっと書き方よくない気がする...
inheritAttrs の値 true/false どちらでも、props 、emits に定義されていない属性やイベントハンドラにアクセスできるのが今の仕様。

ですよね、そこの値で $attrs の有無がスイッチスルことはないと思うんですが。原文と挙動どっちに準拠するほうがよいです？

これ、原文直した方がいいですね。これ、自分 PR 送ってなおしておきます。
なので、inheritAttrs の boolean 値でトグルに関わらず、$attrs にアクセスできる、という内容を想定した訳にしていただきたいです。

kazupon · 2020-09-24T05:06:49Z

本家ドキュメントにPR送って反映させました。

vuejs/docs#541

多分、これで違和感なくなると思います

mikakane · 2020-09-24T11:46:59Z

@kazupon 上記修正してみました！

kazupon · 2020-09-24T14:46:42Z

対応ありがとうございます。
確認しました！
LGTMです。

CIでエラーが起きていますが、翻訳作業に支障がない(このPRとは別事象)ので、マージします。

mikakane added 2 commits September 21, 2020 23:54

update

77e4437

Merge branch 'lang-ja' of https://github.com/vuejs-jp/ja.vuejs.org in…

837f622

…to lang-ja

mikakane changed the title ~~WIP FIX #14 Components In-Depth > Non-Prop Attributes の翻訳~~ WIP #14 Components In-Depth > Non-Prop Attributes の翻訳 Sep 21, 2020

mikakane added 3 commits September 22, 2020 00:01

update

9b04a93

update

eea2f09

update

c8ce998

mikakane changed the title ~~WIP #14 Components In-Depth > Non-Prop Attributes の翻訳~~ #14 Components In-Depth > Non-Prop Attributes の翻訳 Sep 21, 2020

pr-triage bot added the PR: unreviewed label Sep 21, 2020

kazupon reviewed Sep 21, 2020

View reviewed changes

fix

4d4d1d4

kazupon requested changes Sep 22, 2020

View reviewed changes

pr-triage bot added PR: reviewed-changes-requested and removed PR: unreviewed labels Sep 22, 2020

Update component-attrs.md

3908773

pr-triage bot added PR: unreviewed and removed PR: reviewed-changes-requested labels Sep 24, 2020

Update component-attrs.md

ff7f7b7

kazupon approved these changes Sep 24, 2020

View reviewed changes

pr-triage bot added PR: reviewed-approved and removed PR: unreviewed labels Sep 24, 2020

kazupon merged commit aa0ffff into vuejs-jp:lang-ja Sep 24, 2020

pr-triage bot added PR: merged and removed PR: reviewed-approved labels Sep 24, 2020

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Uh oh!

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

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

Uh oh!

mikakane commented Sep 21, 2020 •

edited

Loading

Uh oh!

netlify bot commented Sep 21, 2020 •

edited

Loading

Uh oh!

kazupon left a comment

Uh oh!

kazupon Sep 21, 2020

Uh oh!

mikakane commented Sep 22, 2020

Uh oh!

mikakane commented Sep 22, 2020

Uh oh!

kazupon left a comment

Uh oh!

kazupon Sep 22, 2020

Uh oh!

mikakane Sep 23, 2020

Uh oh!

kazupon Sep 23, 2020 •

edited

Loading

Uh oh!

kazupon Sep 22, 2020

Uh oh!

mikakane Sep 23, 2020

Uh oh!

kazupon Sep 23, 2020

Uh oh!

kazupon commented Sep 24, 2020

Uh oh!

mikakane commented Sep 24, 2020

Uh oh!

kazupon commented Sep 24, 2020

Uh oh!

Uh oh!


		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.
		[previous section]('#属性の継承) で利用した date-picker のコンポーネント例を用いて、プロパティでない属性の全てをルートの `div` 要素ではなく `input` 要素に適用する場合、`v-bind` を用いて簡略的に記述することも可能です。

	[previous section]('#属性の継承) で利用した date-picker のコンポーネント例を用いて、プロパティでない属性の全てをルートの `div` 要素ではなく `input` 要素に適用する場合、`v-bind` を用いて簡略的に記述することも可能です。
	[前節]('#属性の継承) で利用した date-picker のコンポーネント例を用いて、プロパティでない属性の全てをルートの `div` 要素ではなく `input` 要素に適用する場合、`v-bind` を用いて簡略的に記述することも可能です。


		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` 属性はここに含まれません。


		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` にセットした場合、コンポーネントの `$attrs` プロパティを通じて、`props` や `emits`といったコンポーネントのプロパティを除く全ての属性(例えば`class` や `style` 、 `v-on` といったものも)にアクセスできるようになります。

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

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

Uh oh!

Conversation

mikakane commented Sep 21, 2020 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

netlify bot commented Sep 21, 2020 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

kazupon left a comment

Choose a reason for hiding this comment

Uh oh!

kazupon Sep 21, 2020

Choose a reason for hiding this comment

Uh oh!

mikakane commented Sep 22, 2020

Uh oh!

mikakane commented Sep 22, 2020

Uh oh!

kazupon left a comment

Choose a reason for hiding this comment

Uh oh!

kazupon Sep 22, 2020

Choose a reason for hiding this comment

Uh oh!

mikakane Sep 23, 2020

Choose a reason for hiding this comment

Uh oh!

kazupon Sep 23, 2020 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Choose a reason for hiding this comment

Uh oh!

kazupon Sep 22, 2020

Choose a reason for hiding this comment

Uh oh!

mikakane Sep 23, 2020

Choose a reason for hiding this comment

Uh oh!

kazupon Sep 23, 2020

Choose a reason for hiding this comment

Uh oh!

kazupon commented Sep 24, 2020

Uh oh!

mikakane commented Sep 24, 2020

Uh oh!

kazupon commented Sep 24, 2020

Uh oh!

Uh oh!

mikakane commented Sep 21, 2020 •

edited

Loading

netlify bot commented Sep 21, 2020 •

edited

Loading

kazupon Sep 23, 2020 •

edited

Loading