docs: Essentials > Class and Style Bindings

src/guide/class-and-style.md

@@ -1,20 +1,20 @@
-# Class and Style Bindings
+# クラスとスタイルのバインディング
 
-A common need for data binding is manipulating an element's class list and its inline styles. Since they are both attributes, we can use `v-bind` to handle them: we only need to calculate a final string with our expressions. However, meddling with string concatenation is annoying and error-prone. For this reason, Vue provides special enhancements when `v-bind` is used with `class` and `style`. In addition to strings, the expressions can also evaluate to objects or arrays.
+データバインディングに一般に求められることの 1 つは、要素のクラスリストとインラインスタイルを操作することです。それらはどちらも属性であるため、`v-bind` を使って扱うことができます。最終的な文字列を式で計算するだけです。しかしながら、文字列の連結に手を出すのは煩わしく、エラーのもとです。そのため、Vue は `v-bind` が `class` と `style` と一緒に使われるとき、特別な拡張機能を提供します。文字列だけではなく、式はオブジェクトまたは配列を返すことができます。
 
-## Binding HTML Classes
+## HTML クラスのバインディング
 
-### Object Syntax
+### オブジェクト構文
 
-We can pass an object to `:class` (short for `v-bind:class`) to dynamically toggle classes:
+`:class` (`v-bind:class` の略) にオブジェクトを渡すことでクラスを動的に切り替えることができます:
 
 ```html
 <div :class="{ active: isActive }"></div>
 ```
 
-The above syntax means the presence of the `active` class will be determined by the [truthiness](https://developer.mozilla.org/en-US/docs/Glossary/Truthy) of the data property `isActive`.
+上記の構文は、`active` クラスの有無がデータプロパティ `isActive` の[真偽性](https://developer.mozilla.org/ja-JP/docs/Glossary/Truthy)によって決まることを意味しています。
 
-You can have multiple classes toggled by having more fields in the object. In addition, the `:class` directive can also co-exist with the plain `class` attribute. So given the following template:
+オブジェクトにさらにフィールドを持たせることで複数のクラスを切り替えることができます。加えて、`:class` ディレクティブはプレーンな `class` 属性と共存できます。つまり、次のようなテンプレートと:
 
 ```html
 <div
@@ -23,7 +23,7 @@ You can have multiple classes toggled by having more fields in the object. In ad
 ></div>
 ```
 
-And the following data:
+次のようなデータがあったとすると:
 
 ```js
 data() {
@@ -34,15 +34,15 @@ data() {
 }
 ```
 
-It will render:
+このように描画されます:
 
 ```html
 <div class="static active"></div>
 ```
 
-When `isActive` or `hasError` changes, the class list will be updated accordingly. For example, if `hasError` becomes `true`, the class list will become `"static active text-danger"`.
+`isActive` もしくは `hasError` が変化するとき、クラスリストはそれに応じて更新されます。例えば、`hasError` が `true` になった場合、クラスリストは `"static active text-danger"` になります。
 
-The bound object doesn't have to be inline:
+束縛されるオブジェクトはインラインでなくてもかまいません:
 
 ```html
 <div :class="classObject"></div>
@@ -59,7 +59,7 @@ data() {
 }
 ```
 
-This will render the same result. We can also bind to a [computed property](computed.md) that returns an object. This is a common and powerful pattern:
+これは同じ結果を描画します。オブジェクトを返す[算出プロパティ](computed.md)に束縛することもできます。これは一般的で強力なパターンです:
 
 ```html
 <div :class="classObject"></div>
@@ -82,9 +82,9 @@ computed: {
 }
 ```
 
-### Array Syntax
+### 配列構文
 
-We can pass an array to `:class` to apply a list of classes:
+`:class` に配列を渡してクラスのリストを適用することができます:
 
 ```html
 <div :class="[activeClass, errorClass]"></div>
@@ -99,33 +99,33 @@ data() {
 }
 ```
 
-Which will render:
+これは次のように描画されます:
 
 ```html
 <div class="active text-danger"></div>
 ```
 
-If you would like to also toggle a class in the list conditionally, you can do it with a ternary expression:
+リスト内のクラスを条件に応じて切り替えたい場合は、三項演算子式を使って実現することができます:
 
 ```html
 <div :class="[isActive ? activeClass : '', errorClass]"></div>
 ```
 
-This will always apply `errorClass`, but will only apply `activeClass` when `isActive` is truthy.
+この場合 `errorClass` は常に適用されますが、`activeClass` クラスは `isActive` が真と評価されるときだけ適用されます。
 
-However, this can be a bit verbose if you have multiple conditional classes. That's why it's also possible to use the object syntax inside array syntax:
+しかしながら、これでは複数の条件つきクラスがあると少し冗長になってしまいます。そのため、配列構文の内部ではオブジェクト構文を使うこともできます:
 
 ```html
 <div :class="[{ active: isActive }, errorClass]"></div>
 ```
 
-### With Components
+### コンポーネントにおいて
 
-> This section assumes knowledge of [Vue Components](component-basics.md). Feel free to skip it and come back later.
+> このセクションでは、[Vue のコンポーネント](component-basics.md)の知識を前提としています。いったんスキップして後で戻ってきても構いません。
 
-When you use the `class` attribute on a custom component with a single root element, those classes will be added to this element. Existing classes on this element will not be overwritten.
+単一のルート要素を持つカスタムコンポーネントで `class` 属性を使用すると、それらのクラスがこの要素に追加されます。この要素の既存のクラスは上書きされません。
 
-For example, if you declare this component:
+例えば、このコンポーネントを宣言して:
 
 ```js
 const app = Vue.createApp({})
@@ -135,33 +135,33 @@ app.component('my-component', {
 })
 ```
 
-Then add some classes when using it:
+使用するときにいくつかのクラスを追加したとします:
 
 ```html
 <div id="app">
   <my-component class="baz boo"></my-component>
 </div>
 ```
 
-The rendered HTML will be:
+以下の HTML が描画されます:
 
 ```html
 <p class="foo bar baz boo">Hi</p>
 ```
 
-The same is true for class bindings:
+クラスバインディングに対しても同様です:
 
 ```html
 <my-component :class="{ active: isActive }"></my-component>
 ```
 
-When `isActive` is truthy, the rendered HTML will be:
+`isActive` が真と評価されるときは、以下の HTML が描画されます:
 
 ```html
 <p class="foo bar active">Hi</p>
 ```
 
-If your component has multiple root elements, you would need to define which component will receive this class. You can do this using `$attrs` component property:
+コンポーネントに複数のルート要素がある場合、どのコンポーネントがこのクラスを受け取るかを定義する必要があります。これは `$attrs` コンポーネントプロパティを使って行うことができます:
 
 ```html
 <div id="app">
@@ -180,13 +180,13 @@ app.component('my-component', {
 })
 ```
 
-You can learn more about component attribute inheritance in [Non-Prop Attributes](component-attrs.html) section.
+コンポーネント属性の継承については、[プロパティでない属性](component-attrs.html)のセクションを参照してください。
 
-## Binding Inline Styles
+## インラインスタイルのバインディング
 
-### Object Syntax
+### オブジェクト構文
 
-The object syntax for `:style` is pretty straightforward - it looks almost like CSS, except it's a JavaScript object. You can use either camelCase or kebab-case (use quotes with kebab-case) for the CSS property names:
+`:style` 向けのオブジェクト構文は非常に簡単です。JavaScript オブジェクトということを除けば、ほとんど CSS のように見えます。CSS のプロパティ名には、キャメルケース (camelCase) またはケバブケース (kebab-case: クォートとともに使うことになります) のどちらでも使用することができます:
 
 ```html
 <div :style="{ color: activeColor, fontSize: fontSize + 'px' }"></div>
@@ -201,7 +201,7 @@ data() {
 }
 ```
 
-It is often a good idea to bind to a style object directly so that the template is cleaner:
+テンプレートをクリーンにするために、直接 style オブジェクトに束縛するのは、よいアイディアです:
 
 ```html
 <div :style="styleObject"></div>
@@ -218,26 +218,26 @@ data() {
 }
 ```
 
-Again, the object syntax is often used in conjunction with computed properties that return objects.
+ここでもまた、オブジェクト構文はしばしばオブジェクトを返す算出プロパティと併せて使用されます。
 
-### Array Syntax
+### 配列構文
 
-The array syntax for `:style` allows you to apply multiple style objects to the same element:
+`:style` 向けの配列構文は、同じ要素に複数のスタイルオブジェクトを適用することができます:
 
 ```html
 <div :style="[baseStyles, overridingStyles]"></div>
 ```
 
-### Auto-prefixing
+### 自動プリフィックス
 
-When you use a CSS property that requires [vendor prefixes](https://developer.mozilla.org/en-US/docs/Glossary/Vendor_Prefix) in `:style`, for example `transform`, Vue will automatically detect and add appropriate prefixes to the applied styles.
+`:style` で[ベンダー接頭辞](https://developer.mozilla.org/ja/docs/Glossary/Vendor_Prefix)を要求される CSS プロパティを使用するとき、例えば、`transform` においては、Vue.js は自動的に適切な接頭辞を検出し、適用されるスタイルに追加します。
 
-### Multiple Values
+### 複数の値
 
-You can provide an array of multiple (prefixed) values to a style property, for example:
+style プロパティに複数の (接頭辞付き) 値の配列を設定できます。例えば次のようになります:
 
 ```html
 <div :style="{ display: ['-webkit-box', '-ms-flexbox', 'flex'] }"></div>
 ```
 
-This will only render the last value in the array which the browser supports. In this example, it will render `display: flex` for browsers that support the unprefixed version of flexbox.
+これは、配列内でブラウザがサポートしている最後の値だけを描画します。この例では、flexbox の接頭されていないバージョンをサポートしているブラウザでは `display: flex` を描画します。