Skip to content

Commit

Permalink
Japanese translation (Other Minor Changes section 1) (#47)
Browse files Browse the repository at this point in the history
  • Loading branch information
@jay-es
jay-es authored Apr 11, 2023
1 parent af5f054 commit 66b7202
Show file tree
Hide file tree
Showing 7 changed files with 134 additions and 134 deletions.
12 changes: 6 additions & 6 deletions .vitepress/locales/ja.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -121,23 +121,23 @@ export default {
]
},
{
text: 'Other Minor Changes',
text: 'その他の細かい変更',
items: [
{
text: 'Attribute Coercion Behavior',
text: '属性の強制変換',
link: '/ja/breaking-changes/attribute-coercion'
},
{
text: 'Custom Directives',
text: 'カスタムディレクティブ',
link: '/ja/breaking-changes/custom-directives'
},
{ text: 'Data Option', link: '/ja/breaking-changes/data-option' },
{ text: 'data オプション', link: '/ja/breaking-changes/data-option' },
{
text: 'Mount API changes',
text: 'マウント API の変更',
link: '/ja/breaking-changes/mount-changes'
},
{
text: 'Props Default Function this Access',
text: 'プロパティ default 関数の this アクセス',
link: '/ja/breaking-changes/props-default-this'
},
{
Expand Down
2 changes: 1 addition & 1 deletion src/breaking-changes/attribute-coercion.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -125,7 +125,7 @@ In 3.x, `null` or `undefined` should be used to explicitly remove an attribute.
<td><code>"false"</code></td>
</tr>
<tr>
<td rowspan="2">Other non-boolean attrs<br><small>eg. <code>aria-checked</code>, <code>tabindex</code>, <code>alt</code>, etc.</small></td>
<td rowspan="2">Other non-boolean attrs<br><small>e.g. <code>aria-checked</code>, <code>tabindex</code>, <code>alt</code>, etc.</small></td>
<td><code>undefined</code>, <code>null</code>, <code>false</code></td>
<td><code>undefined</code>, <code>null</code></td>
<td><i>removed</i></td>
Expand Down
90 changes: 45 additions & 45 deletions src/ja/breaking-changes/attribute-coercion.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -3,36 +3,36 @@ badges:
- breaking
---

# Attribute Coercion Behavior <MigrationBadges :badges="$frontmatter.badges" />
# 属性の強制変換 <MigrationBadges :badges="$frontmatter.badges" />

::: info Info
This is a low-level internal API change and does not affect most developers.
::: info 情報
これは、低レベルの内部 API の変更であり、ほとんどの開発者には影響しません。
:::

## Overview
## 概要

Here is a high level summary of the changes:
変更点の概要は次のとおりです:

- Drop the internal concept of enumerated attributes and treat those attributes the same as normal non-boolean attributes
- **BREAKING**: No longer removes attribute if the value is boolean `false`. Instead, it's set as attr="false". To remove the attribute, use `null` or `undefined`.
- 列挙型属性の内部概念を削除し、これらの属性を真偽値でない通常の属性と同じように扱います
- **破壊的変更**: 値が真偽値の `false` の場合、属性を削除しないようにしました。代わりに、attr="false "として設定されます。属性を削除するには、`null` または `undefined` を使用します。

For more information, read on!
詳細については続きをお読みください！

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

In 2.x, we had the following strategies for coercing `v-bind` values:
2.x では、`v-bind` の値を強制変換するために、以下のような戦略をとっていました:

- For some attribute/element pairs, Vue is always using the corresponding IDL attribute (property): [like `value` of `<input>`, `<select>`, `<progress>`, etc](https://github.com/vuejs/vue/blob/bad3c326a3f8b8e0d3bcf07917dc0adf97c32351/src/platforms/web/util/attrs.js#L11-L18).
- 属性と要素のペアによっては、Vue は常に対応する IDL 属性（プロパティ）を使用します。これは [`<input>`、`<select>`、`<progress>` などにおける `value`](https://github.com/vuejs/vue/blob/bad3c326a3f8b8e0d3bcf07917dc0adf97c32351/src/platforms/web/util/attrs.js#L11-L18) などです。

- For "[boolean attributes](https://github.com/vuejs/vue/blob/bad3c326a3f8b8e0d3bcf07917dc0adf97c32351/src/platforms/web/util/attrs.js#L33-L40)" and [xlinks](https://github.com/vuejs/vue/blob/bad3c326a3f8b8e0d3bcf07917dc0adf97c32351/src/platforms/web/util/attrs.js#L44-L46), Vue removes them if they are "falsy" ([`undefined`, `null` or `false`](https://github.com/vuejs/vue/blob/bad3c326a3f8b8e0d3bcf07917dc0adf97c32351/src/platforms/web/util/attrs.js#L52-L54)) and adds them otherwise (see [here](https://github.com/vuejs/vue/blob/bad3c326a3f8b8e0d3bcf07917dc0adf97c32351/src/platforms/web/runtime/modules/attrs.js#L66-L77) and [here](https://github.com/vuejs/vue/blob/bad3c326a3f8b8e0d3bcf07917dc0adf97c32351/src/platforms/web/runtime/modules/attrs.js#L81-L85)).
- 「[真偽値属性](https://github.com/vuejs/vue/blob/bad3c326a3f8b8e0d3bcf07917dc0adf97c32351/src/platforms/web/util/attrs.js#L33-L40)」と「[xlink](https://github.com/vuejs/vue/blob/bad3c326a3f8b8e0d3bcf07917dc0adf97c32351/src/platforms/web/util/attrs.js#L44-L46)」の場合、Vue は "falsy"（[`undefined`、`null`、`false`](https://github.com/vuejs/vue/blob/bad3c326a3f8b8e0d3bcf07917dc0adf97c32351/src/platforms/web/util/attrs.js#L52-L54)）であれば削除し、それ以外は追加します（[ここ](https://github.com/vuejs/vue/blob/bad3c326a3f8b8e0d3bcf07917dc0adf97c32351/src/platforms/web/runtime/modules/attrs.js#L66-L77)と[ここ](https://github.com/vuejs/vue/blob/bad3c326a3f8b8e0d3bcf07917dc0adf97c32351/src/platforms/web/runtime/modules/attrs.js#L81-L85)を参照）。

- For "[enumerated attributes](https://github.com/vuejs/vue/blob/bad3c326a3f8b8e0d3bcf07917dc0adf97c32351/src/platforms/web/util/attrs.js#L20)" (currently `contenteditable`, `draggable` and `spellcheck`), Vue tries to [coerce](https://github.com/vuejs/vue/blob/bad3c326a3f8b8e0d3bcf07917dc0adf97c32351/src/platforms/web/util/attrs.js#L24-L31) them to string (with special treatment for `contenteditable` for now, to fix [vuejs/vue#9397](https://github.com/vuejs/vue/issues/9397)).
- 「[列挙型属性](https://github.com/vuejs/vue/blob/bad3c326a3f8b8e0d3bcf07917dc0adf97c32351/src/platforms/web/util/attrs.js#L20)」（現在は `contenteditable`、`dragable`、`spellcheck`）の場合、Vue はそれらを文字列に[強制変換](https://github.com/vuejs/vue/blob/bad3c326a3f8b8e0d3bcf07917dc0adf97c32351/src/platforms/web/util/attrs.js#L24-L31)しようとします（[vuejs/vue#9397](https://github.com/vuejs/vue/issues/9397) を修正するため、今のところ `contenteditable` については特別扱いしています）。

- For other attributes, we remove "falsy" values (`undefined`, `null`, or `false`) and set other values as-is (see [here](https://github.com/vuejs/vue/blob/bad3c326a3f8b8e0d3bcf07917dc0adf97c32351/src/platforms/web/runtime/modules/attrs.js#L92-L113)).
- その他の属性の場合、"falsy" な値（`undefined`、`null`、`false`）は削除し、その他の値はそのまま設定します（[こちら](https://github.com/vuejs/vue/blob/bad3c326a3f8b8e0d3bcf07917dc0adf97c32351/src/platforms/web/runtime/modules/attrs.js#L92-L113)を参照）。

The following table describes how Vue coerce "enumerated attributes" differently with normal non-boolean attributes:
次の表は、Vue が「列挙型属性」を真偽値でない通常の属性とは異なる方法で強制変換する方法を示しています:

| Binding expression | `foo` <sup>normal</sup> | `draggable` <sup>enumerated</sup> |
| バインドする式 | `foo` <sup>通常</sup> | `draggable` <sup>列挙型</sup> |
| ------------------- | ----------------------- | --------------------------------- |
| `:attr="null"` | - | `draggable="false"` |
| `:attr="undefined"` | - | - |
Expand All @@ -43,22 +43,22 @@ The following table describes how Vue coerce "enumerated attributes" differently
| `attr="foo"` | `foo="foo"` | `draggable="true"` |
| `attr` | `foo=""` | `draggable="true"` |

We can see from the table above, current implementation coerces `true` to `'true'` but removes the attribute if it's `false`. This also led to inconsistency and required users to manually coerce boolean values to string in very common use cases like `aria-*` attributes like `aria-selected`, `aria-hidden`, etc.
上の表からわかるように、現在の実装では `true` は `'true'` に強制変換されますが、`false` の場合は属性が削除されます。これは不一致を引き起こし、`aria-*` 属性（`aria-selected`、`aria-hidden` など）のような非常に一般的なユースケースでは、真偽値を手動で文字列に変換する必要がありました。

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

We intend to drop this internal concept of "enumerated attributes" and treat them as normal non-boolean HTML attributes.
この「列挙型属性」という内部概念を削除して、真偽値でない通常の HTML 属性として扱う予定です。

- This solves the inconsistency between normal non-boolean attributes and “enumerated attributes”
- It also makes it possible to use values other than `'true'` and `'false'`, or even keywords yet to come, for attributes like `contenteditable`
- これにより、真偽値でない通常の属性と「列挙型属性」の間の不一致が解消されます。
- また、`contenteditable` のような属性には、`'true'` と `'false'` 以外の値や、あるいはまだないキーワードを使用できるようになります。

For non-boolean attributes, Vue will stop removing them if they are `false` and coerce them to `'false'` instead.
真偽値でない属性については、Vue は `false` の場合に削除するのではなく、`'false'` に強制変換します。

- This solves the inconsistency between `true` and `false` and makes outputting `aria-*` attributes easier
- これにより、`true` と `false` での不一致が解消され、`aria-*` 属性の出力が容易になります

The following table describes the new behavior:
次の表は、新しい動作について説明したものです:

| Binding expression | `foo` <sup>normal</sup> | `draggable` <sup>enumerated</sup> |
| バインドする式 | `foo` <sup>通常</sup> | `draggable` <sup>列挙型</sup> |
| ------------------- | -------------------------- | --------------------------------- |
| `:attr="null"` | - | - <sup>*</sup> |
| `:attr="undefined"` | - | - |
Expand All @@ -69,47 +69,47 @@ The following table describes the new behavior:
| `attr="foo"` | `foo="foo"` | `draggable="foo"` <sup>*</sup> |
| `attr` | `foo=""` | `draggable=""` <sup>*</sup> |

<small>*: changed</small>
<small>*: 変更箇所</small>

Coercion for boolean attributes is left untouched.
真偽値属性の強制変換についてはそのままです。

## Migration Strategy
## 移行手順

### Enumerated attributes
### 列挙型属性

The absence of an enumerated attribute and `attr="false"` may produce different IDL attribute values (which will reflect the actual state), described as follows:
列挙型属性がなかったり `attr="false"` の場合、以下のように異なる IDL 属性値（実際の状態を反映する）が得られることがあります:

| Absent enumerated attr | IDL attr & value |
| 設定されていない列挙型属性 | IDL 属性と値 |
| ---------------------- | ------------------------------------ |
| `contenteditable` | `contentEditable` &rarr; `'inherit'` |
| `draggable` | `draggable` &rarr; `false` |
| `spellcheck` | `spellcheck` &rarr; `true` |

Since we no longer coerce `null` to `'false'` for “enumerated properties” in 3.x, in the case of `contenteditable` and `spellcheck`, developers will need to change those `v-bind` expressions that used to resolve to `null` to resolve to `false` or `'false'` in order to maintain the same behavior as 2.x.
3.x では、`contentitable` と `spellcheck` のような「列挙型プロパティ」に対して `null` を `'false'` に強制変換することがなくなったため、2.x と同じ動作を維持するには、開発者はこれまで `null` に解決していたこれらの `v-bind` 式を `false` または `'false'` に変更しなければならないでしょう。

In 2.x, invalid values were coerced to `'true'` for enumerated attributes. This was usually unintended and unlikely to be relied upon on a large scale. In 3.x `true` or `'true'` should be explicitly specified.
2.x では、列挙型属性に対して無効な値が強制的に `'true'` に変換されていました。これは通常、意図しないものであり、大規模に依存する可能性は低いです。3.x では `true` または `'true'` を明示的に指定する必要があります。

### Coercing `false` to `'false'` instead of removing the attribute
### 属性を削除する代わりに `false` を `'false'` に強制変換する

In 3.x, `null` or `undefined` should be used to explicitly remove an attribute.
3.x では、属性を明示的に削除するには `null` または `undefined` を使用する必要があります。

### Comparison between 2.x & 3.x behavior
### 2.x と 3.x の動作の比較

<table>
<thead>
<tr>
<th>Attribute</th>
<th><code>v-bind</code> value <sup>2.x</sup></th>
<th><code>v-bind</code> value <sup>3.x</sup></th>
<th>HTML output</th>
<th>属性</th>
<th><code>v-bind</code> の値 <sup>2.x</sup></th>
<th><code>v-bind</code> の値 <sup>3.x</sup></th>
<th>HTML<br/>出力</th>
</tr>
</thead>
<tbody>
<tr>
<td rowspan="3">2.x “Enumerated attrs”<br><small>i.e. <code>contenteditable</code>, <code>draggable</code> and <code>spellcheck</code>.</small></td>
<td rowspan="3">2.x の「列挙型属性」<br><small>例: <code>contenteditable</code>, <code>draggable</code>, <code>spellcheck</code></small></td>
<td><code>undefined</code></td>
<td><code>undefined</code>, <code>null</code></td>
<td><i>removed</i></td>
<td><i>除去</i></td>
</tr>
<tr>
<td>
Expand All @@ -125,10 +125,10 @@ In 3.x, `null` or `undefined` should be used to explicitly remove an attribute.
<td><code>"false"</code></td>
</tr>
<tr>
<td rowspan="2">Other non-boolean attrs<br><small>eg. <code>aria-checked</code>, <code>tabindex</code>, <code>alt</code>, etc.</small></td>
<td rowspan="2">その他の真偽値でない属性<br><small>例: <code>aria-checked</code>, <code>tabindex</code>, <code>alt</code> など</small></td>
<td><code>undefined</code>, <code>null</code>, <code>false</code></td>
<td><code>undefined</code>, <code>null</code></td>
<td><i>removed</i></td>
<td><i>除去</i></td>
</tr>
<tr>
<td><code>'false'</code></td>
Expand All @@ -138,7 +138,7 @@ In 3.x, `null` or `undefined` should be used to explicitly remove an attribute.
</tbody>
</table>

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

- `ATTR_FALSE_VALUE`
- `ATTR_ENUMERATED_COERCION`
Loading

0 comments on commit 66b7202

Please sign in to comment.