Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Japanese translation (Render Function section) #44

Merged
merged 1 commit into from Mar 27, 2023
Merged
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Jump to
Jump to file
Failed to load files.
Diff view
Diff view
14 changes: 7 additions & 7 deletions .vitepress/locales/ja.js
Expand Up @@ -74,31 +74,31 @@ export default {
]
},
{
text: 'Render Function',
text: 'レンダー関数',
items: [
{
text: 'Render Function API',
text: 'レンダー関数 API',
link: '/ja/breaking-changes/render-function-api'
},
{
text: 'Slots Unification',
text: 'スロットの統一',
link: '/ja/breaking-changes/slots-unification'
},
{
text: '$listeners merged into $attrs',
text: '$listeners $attrs に合併',
link: '/ja/breaking-changes/listeners-removed'
},
{
text: '$attrs includes class & style',
text: '$attrs class style を包含',
Copy link
Contributor Author

@jay-es jay-es Mar 27, 2023

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

(Written in Japanese for better explanation.)

なるべく原文に近い感じを残しつつ、(他の見出しと合わせるために)体言止めのタイトルを考えた結果こうなりました。

主語を入れ替えて、「class と style は $attr に統合」などにすると自然になりそうな気はしています(ニュアンスは変わってしまうので悩ましいところですが)

link: '/ja/breaking-changes/attrs-includes-class-style'
}
]
},
{
text: 'Custom Elements',
text: 'カスタム要素',
items: [
{
text: 'Custom Elements Interop Changes',
text: 'カスタム要素の相互運用性の変更',
link: '/ja/breaking-changes/custom-elements-interop'
}
]
Expand Down
2 changes: 1 addition & 1 deletion src/breaking-changes/listeners-removed.md
Expand Up @@ -70,7 +70,7 @@ Remove all usages of `$listeners`.
## See also

- [Relevant RFC](https://github.com/vuejs/rfcs/blob/master/active-rfcs/0031-attr-fallthrough.md)
- [Migration guide - `$attrs`includes `class` & `style` ](./attrs-includes-class-style.md)
- [Migration guide - `$attrs` includes `class` & `style`](./attrs-includes-class-style.md)
- [Migration guide - Changes in the Render Functions API](./render-function-api.md)
- [Migration guide - New Emits Option](./emits-option.md)
- [Migration guide - `.native` modifier removed](./v-on-native-modifier-removed.md)
44 changes: 22 additions & 22 deletions src/ja/breaking-changes/attrs-includes-class-style.md
@@ -1,23 +1,23 @@
---
title: $attrs includes class & style
title: $attrs class style を包含
badges:
- breaking
---

# `$attrs` includes `class` & `style` <MigrationBadges :badges="$frontmatter.badges" />
# `$attrs` `class` `style` を包含 <MigrationBadges :badges="$frontmatter.badges" />

## Overview
## 概要

`$attrs` now contains _all_ attributes passed to a component, including `class` and `style`.
`class` や `style` を含む、コンポーネントに渡された**すべての**属性が `$attrs` に含まれるようになりました。

## 2.x Behavior
## 2.x の動作

`class` and `style` attributes get some special handling in the Vue 2 virtual DOM implementation. For that reason, they are _not_ included in `$attrs`, while all other attributes are.
`class` `style` 属性は、Vue 2 の仮想 DOM の実装で特別な処理を受けます。そのため、これらは `$attrs` には含まれず、他の属性はすべて含まれます。

A side effect of this manifests when using `inheritAttrs: false`:
この副作用は、`inheritAttrs: false` を使用したときに現れます:

- Attributes in `$attrs` are no longer automatically added to the root element, leaving it to the developer to decide where to add them.
- But `class` and `style`, not being part of `$attrs`, will still be applied to the component's root element:
- `$attrs` 内の属性は自動的にルート要素に追加されなくなり、どこに追加するかは開発者の判断に任されます。
- しかし、`$attrs` に含まれない `class` と `style` は、今までどおりコンポーネントのルート要素に適用されます:

```vue
<template>
Expand All @@ -32,40 +32,40 @@ export default {
</script>
```

when used like this:
次のように使用すると:

```html
<my-component id="my-id" class="my-class"></my-component>
```

...will generate this HTML:
... 以下のような HTML を生成します:

```html
<label class="my-class">
<input type="text" id="my-id" />
</label>
```

## 3.x Behavior
## 3.x の動作

`$attrs` contains _all_ attributes, which makes it easier to apply all of them to a different element. The example from above now generates the following HTML:
`$attrs` には**すべての**属性が含まれるので、すべての属性を別の要素に適用することが容易になります。先ほどの例では、次のような HTML が生成されるようになりました:

```html
<label>
<input type="text" id="my-id" class="my-class" />
</label>
```

## Migration Strategy
## 移行手順

In components that use `inheritAttrs: false`, make sure that styling still works as intended. If you previously relied on the special behavior of `class` and `style`, some visuals might be broken as these attributes might now be applied to another element.
`inheritAttrs: false` を使用しているコンポーネントでは、スタイリングが意図したとおりになっていることを確認してください。これまで `class` `style` の特別な動作に依存していた場合、これらの属性が別の要素に適用される可能性があるため、一部のビジュアルが崩れるかも知れません。

[Migration build flag: `INSTANCE_ATTRS_CLASS_STYLE`](../migration-build.html#compat-configuration)
[移行ビルドのフラグ: `INSTANCE_ATTRS_CLASS_STYLE`](../migration-build.html#compat-configuration)

## See also
## 参照

- [Relevant RFC](https://github.com/vuejs/rfcs/blob/master/active-rfcs/0031-attr-fallthrough.md)
- [Migration guide - `$listeners` removed](./listeners-removed.md)
- [Migration guide - New Emits Option](./emits-option.md)
- [Migration guide - `.native` modifier removed](./v-on-native-modifier-removed.md)
- [Migration guide - Changes in the Render Functions API](./render-function-api.md)
- [関連 RFC](https://github.com/vuejs/rfcs/blob/master/active-rfcs/0031-attr-fallthrough.md)
- [移行ガイド - `$listeners` の削除](./listeners-removed.md)
- [移行ガイド - 新しい `emits` オプション](./emits-option.md)
- [移行ガイド - `.native` 修飾子の削除](./v-on-native-modifier-removed.md)
- [移行ガイド - レンダー関数 API の変更点](./render-function-api.md)
82 changes: 41 additions & 41 deletions src/ja/breaking-changes/custom-elements-interop.md
Expand Up @@ -3,41 +3,41 @@ badges:
- breaking
---

# Custom Elements Interop <MigrationBadges :badges="$frontmatter.badges" />
# カスタム要素の相互運用性 <MigrationBadges :badges="$frontmatter.badges" />

## Overview
## 概要

- **BREAKING:** The checks to determine whether tags should be treated as custom elements are now performed during template compilation, and should be configured via compiler options instead of runtime config.
- **BREAKING:** Special `is` attribute usage is restricted to the reserved `<component>` tag only.
- **NEW:** To support 2.x use cases where `is` was used on native elements to work around native HTML parsing restrictions, prefix the value with `vue:` to resolve it as a Vue component.
- **破壊的変更:** タグをカスタム要素として扱うかどうかのチェックは、テンプレートのコンパイル時に行われるようになり、ランタイム設定ではなく、コンパイラーオプションで設定する必要があります。
- **破壊的変更:** 特別な `is` 属性の使用は、予約済みである `<component>` タグにのみ制限されます。
- **新機能:** ネイティブの HTML パースの制限を回避する目的で、ネイティブ要素に `is` を使用するという 2.x のユースケースをサポートするため、値の前に `vue:` を付けて Vue コンポーネントとして解決するようにします。

## Autonomous Custom Elements
## 自主的なカスタム要素

If we want to add a custom element defined outside of Vue (e.g. using the Web Components API), we need to 'instruct' Vue to treat it as a custom element. Let's use the following template as an example.
Vue の外部で定義されたカスタム要素を追加したい場合(例えば Web コンポーネント API を使用するなど)、Vue にカスタム要素として扱うように「指示」する必要があります。次のテンプレートを例にして説明します。

```html
<plastic-button></plastic-button>
```

### 2.x Syntax
### 2.x の構文

In Vue 2.x, configuring tags as custom elements was done via `Vue.config.ignoredElements`:
Vue 2.x では、タグをカスタム要素として設定するには、`Vue.config.ignoredElements` を使用していました:

```js
// This will make Vue ignore custom element defined outside of Vue
// (e.g., using the Web Components APIs)
// これにより、Vue Vue の外部で定義されたカスタム要素を無視するようになります
// (例: Web コンポーネント APIを使用する場合など)

Vue.config.ignoredElements = ['plastic-button']
```

### 3.x Syntax
### 3.x の構文

**In Vue 3.0, this check is performed during template compilation.** To instruct the compiler to treat `<plastic-button>` as a custom element:
**Vue 3.0 では、このチェックはテンプレートのコンパイル時に行われます。** `<plastic-button>` をカスタム要素として扱うようにコンパイラーに指示するには:

- If using a build step: pass the `isCustomElement` option to the Vue template compiler. If using `vue-loader`, this should be passed via `vue-loader`'s `compilerOptions` option:
- ビルドステップを使用する場合: Vue テンプレートコンパイラーに `isCustomElement` オプションを渡します。`vue-loader` を使用する場合は、`vue-loader``compilerOptions` オプションで渡す必要があります:

```js
// in webpack config
// webpack 設定
rules: [
{
test: /\.vue$/,
Expand All @@ -52,83 +52,83 @@ Vue.config.ignoredElements = ['plastic-button']
]
```

- If using on-the-fly template compilation, pass it via `app.config.compilerOptions.isCustomElement`:
- オンザフライのテンプレートコンパイルを使用する場合は、`app.config.compilerOptions.isCustomElement` で渡します:

```js
const app = Vue.createApp({})
app.config.compilerOptions.isCustomElement = tag => tag === 'plastic-button'
```

It's important to note the runtime config only affects runtime template compilation - it won't affect pre-compiled templates.
ランタイム設定は、ランタイムテンプレートのコンパイルにのみ影響することに注意してください。事前にコンパイルされたテンプレートには影響しません。

## Customized Built-in Elements {#customized-built-in-elements}
## カスタマイズされたビルトイン要素 {#customized-built-in-elements}

The Custom Elements specification provides a way to use custom elements as [Customized Built-in Element](https://html.spec.whatwg.org/multipage/custom-elements.html#custom-elements-customized-builtin-example) by adding the `is` attribute to a built-in element:
カスタム要素の仕様では、組み込み要素に `is` 属性を付加することで、カスタム要素を[カスタマイズされたビルトイン要素](https://html.spec.whatwg.org/multipage/custom-elements.html#custom-elements-customized-builtin-example)として使用する方法を提供しています:

```html
<button is="plastic-button">Click Me!</button>
```

Vue's usage of the `is` special attribute was simulating what the native attribute does before it was made universally available in browsers. However, in 2.x it was interpreted as rendering a Vue component with the name `plastic-button`. This blocks the native usage of Customized Built-in Element mentioned above.
Vue の特別な属性 `is` の使い方は、ネイティブ属性がブラウザーで普遍的に利用できるようになる前のネイティブ属性の動作をシミュレートしていました。しかし、2.x では、`plastic-button` という名前の Vue コンポーネントをレンダリングすると解釈されました。これは、前述のカスタマイズされたビルトイン要素のネイティブな使い方をブロックしています。

In 3.0, we are limiting Vue's special treatment of the `is` attribute to the `<component>` tag only.
3.0 では、Vue`is` 属性の特別な扱いを、`<component>` タグのみに限定しています。

- When used on the reserved `<component>` tag, it will behave exactly the same as in 2.x;
- When used on normal components, it will behave like a normal attribute:
- 予約済みである `<component>` タグで使用された場合、2.x と全く同じ動作をします。
- 通常のコンポーネントで使用する場合は、通常の属性と同じように動作します:

```html
<foo is="bar" />
```

- 2.x behavior: renders the `bar` component.
- 3.x behavior: renders the `foo` component and passing the `is` attribute.
- 2.x の動作: `bar` コンポーネントをレンダリングします。
- 3.x の動作: `foo` コンポーネントをレンダリングし、`is` 属性を渡します。

- When used on plain elements, it will be passed to the `createElement` call as the `is` attribute, and also rendered as a native attribute. This supports the usage of customized built-in elements.
- プレーンな要素で使用する場合、`createElement` の呼び出しに `is` 属性として渡され、ネイティブ属性としてレンダリングされます。これは、カスタマイズされたビルトイン要素の使用をサポートします。

```html
<button is="plastic-button">Click Me!</button>
```

- 2.x behavior: renders the `plastic-button` component.
- 3.x behavior: renders a native button by calling
- 2.x の動作: `plastic-button` コンポーネントをレンダリングします
- 3.x の動作: 以下を呼び出してネイティブのボタンをレンダリングします。

```js
document.createElement('button', { is: 'plastic-button' })
```

[Migration build flag: `COMPILER_IS_ON_ELEMENT`](../migration-build.html#compat-configuration)
[移行ビルドのフラグ: `COMPILER_IS_ON_ELEMENT`](../migration-build.html#compat-configuration)

## `vue:` Prefix for In-DOM Template Parsing Workarounds
## DOM 内テンプレートのパース回避のための `vue:` プレフィックス

> Note: this section only affects cases where Vue templates are directly written in the page's HTML.
> When using in-DOM templates, the template is subject to native HTML parsing rules. Some HTML elements, such as `<ul>`, `<ol>`, `<table>` and `<select>` have restrictions on what elements can appear inside them, and some elements such as `<li>`, `<tr>`, and `<option>` can only appear inside certain other elements.
> 注意: このセクションは、Vue のテンプレートがページの HTML に直接記述されている場合にのみ影響します。
> DOM 内テンプレートを使用する場合、テンプレートはネイティブの HTML パースルールに従います。`<ul>``<ol>``<table>``<select>` などの一部の HTML 要素は、その内部に表示できる要素に制限がありますし、`<li>``<tr>``<option>` などの一部の要素は、他の特定の要素内にのみ表示できます。

### 2.x Syntax
### 2.x の構文

In Vue 2 we recommended working around with these restrictions by using the `is` attribute on a native tag:
Vue 2 では、ネイティブのタグに `is` 属性を使用することで、この制限を回避することを推奨していました:

```html
<table>
<tr is="blog-post-row"></tr>
</table>
```

### 3.x Syntax
### 3.x の構文

With the behavior change of `is`, a `vue:` prefix is now required to resolve the element as a Vue component:
`is` の動作変更に伴い、要素を Vue コンポーネントとして解決するには `vue:` プレフィックスが必要になりました:

```html
<table>
<tr is="vue:blog-post-row"></tr>
</table>
```

## Migration Strategy
## 移行手順

- Replace `config.ignoredElements` with either `vue-loader`'s `compilerOptions` (with the build step) or `app.config.compilerOptions.isCustomElement` (with on-the-fly template compilation)
- `config.ignoredElements` は、ビルドステップの場合は `vue-loader``compilerOptions` に置き換え、オンザフライのテンプレートコンパイルの場合は `app.config.compilerOptions.isCustomElement` に置き換えます。

- Change all non-`<component>` tags with `is` usage to `<component is="...">` (for SFC templates) or prefix it with `vue:` (for in-DOM templates).
- `<component>` 以外で `is` が使われているタグは、SFC テンプレートの場合は `<component is="...">` に変更し、DOM 内テンプレートの場合は `vue:` プレフィックスを付けます。

## See Also
## 参照

- [Guide - Vue and Web Components](https://ja.vuejs.org/guide/extras/web-components.html)
- [ガイド - Vue Web コンポーネント](https://ja.vuejs.org/guide/extras/web-components.html)
2 changes: 1 addition & 1 deletion src/ja/breaking-changes/emits-option.md
Expand Up @@ -93,5 +93,5 @@ export default {
- [関連 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)
- [移行ガイド - `$attrs` が `class` と `style` を包含](./attrs-includes-class-style.md)
- [移行ガイド - レンダー関数 API の変更点](./render-function-api.md)
2 changes: 1 addition & 1 deletion src/ja/breaking-changes/index.md
Expand Up @@ -30,7 +30,7 @@

- [レンダー関数の API が変更されました](./render-function-api.html)
- [`$scopedSlots` プロパティーは削除され、すべてのスロットが `$slots` で関数として公開されます](./slots-unification.html)
- [`$listeners` は削除され、`$attrs` に統合されました](./listeners-removed)
- [`$listeners` は削除され、`$attrs` に合併されました](./listeners-removed)
- [`$attrs` には `class` と `style` 属性が含まれるようになりました](./attrs-includes-class-style.md)

### カスタム要素
Expand Down