<commit_before>---
title: クラスとスタイルのバインディング
type: guide
order: 6
---

データバインディングに対する共通の必要なことは、要素のクラスリストとインラインスタイルを操作していることです。それらは両方属性になるので、私達はそれらを `v-bind` を使用して処理することができます。私達は私達の式で最終的に文字列を計算する必要があります。しかしながら、文字列の連結に私達が関わることは、迷惑なエラーが発生しやすいです。この理由のため、Vue は `v-bind` が `class` と `style` と一緒に使われるとき、特別な拡張を提供します。文字列に加えて、式はオブジェクトまたは配列も評価することができます。

## バインディング HTML クラス

### オブジェクト構文

私達は、`v-bind:class` に動的にクラスを切り替えるオブジェクトを渡すことが出来ます:

``` html
<div v-bind:class="{ active: isActive }"></div>
```

上記の構文は `active` クラスが存在するかどうかを、データプロパティの `isActive` が[ true と評価される値か](https://developer.mozilla.org/en-US/docs/Glossary/Truthy)によって決まることを意味します。

あなたはオブジェクトに複数の項目を持たせることで、複数のクラスを切り替えることが出来ます。加えて、`v-bind:class` ディレクティブはプレーンな `class` 属性と共存できます。 次のようなテンプレートに:

``` html
<div class="static"
     v-bind:class="{ active: isActive, 'text-danger': hasError }">
</div>
```

次のようなデータを与えます:

``` js
data: {
  isActive: true,
  hasError: false
}
```

これは次のようにレンダリングされます:

``` html
<div class="static active"></div>
```

`isActive` と `hasError` が変化するとき、クラスリストはそれに応じて更新されます。例えば、`hasError` が `true` になった場合、クラスリストは `"static active text-danger"` になります。

インラインでオブジェクトをバインドする必要はありません:

``` html
<div v-bind:class="classObject"></div>
```
``` js
data: {
  classObject: {
    active: true,
    'text-danger': false
  }
}
```

これは同じ結果をレンダリングします。私たちはオブジェクトを返す[算出プロパティ](computed.html)をバインドすることもできます。これは一般的で強力なパターンです:

``` html
<div v-bind:class="classObject"></div>
```
``` js
data: {
  isActive: true,
  error: null
},
computed: {
  classObject: function () {
    return {
      active: this.isActive && !this.error,
      'text-danger': this.error && this.error.type === 'fatal',
    }
  }
}
```

### 配列構文

私達は、`v-bind:class` にクラスのリストを適用する配列を渡すことができます:

``` html
<div v-bind:class="[activeClass, errorClass]">
```
``` js
data: {
  activeClass: 'active',
  errorClass: 'text-danger'
}
```

このようにレンダリングされます:

``` html
<div class="active text-danger"></div>
```

条件付きリストでクラスを切り替えたい場合、三項演算子式でそれを行うことができます:

``` html
<div v-bind:class="[isActive ? activeClass : '', errorClass]">
```

これは常に `errorClass` が適用されますが、`isActive` が `true` のときにだけ `activeClass` クラスが適用されます。

しかしながら、これは複数条件のクラスがある場合は少し冗長です。なので配列構文内部ではオブジェクト構文も使えます:

``` html
<div v-bind:class="[{ active: isActive }, errorClass]">
```

### With Components

> This section assumes knowledge of [Vue Components](components.html). Feel free to skip it and come back later.

When you use the `class` attribute on a custom component, those classes will be added to the component's root element. Existing classes on this element will not be overwritten.

For example, if you declare this component:

``` js
Vue.component('my-component', {
  template: '<p class="foo bar">Hi</p>'
})
```

Then add some classes when using it:

``` html
<my-component class="baz boo"></my-component>
```

The rendered HTML will be:

``` html
<p class="foo bar baz boo">Hi</p>
```

The same is true for class bindings:

``` html
<my-component v-bind:class="{ active: isActive }"></my-component>
```

When `isActive` is truthy, the rendered HTML will be:

``` html
<div class="foo bar active"></div>
```

## バインディングインラインスタイル

### オブジェクト構文

`v-bind:style`向けのオブジェクト構文は非常に簡単です。それは、JavaScript オブジェクトを除いては、ほとんど CSS のように見えます。CSS プロパティ名に対して、キャメルケース (caml-case) またはケバブケース (kebab-case) のどちらでも使用することができます:

``` html
<div v-bind:style="{ color: activeColor, fontSize: fontSize + 'px' }"></div>
```
``` js
data: {
  activeColor: 'red',
  fontSize: 30
}
```

テンプレートがクリーンになれるようにするために、直接 style オブジェクトにバインドするのは、よいアイディアです:

``` html<commit_msg>fix typo<commit_after>---
title: クラスとスタイルのバインディング
type: guide
order: 6
---

データバインディングに対する共通の必要なことは、要素のクラスリストとインラインスタイルを操作していることです。それらは両方属性になるので、私達はそれらを `v-bind` を使用して処理することができます。私達は私達の式で最終的に文字列を計算する必要があります。しかしながら、文字列の連結に私達が関わることは、迷惑なエラーが発生しやすいです。この理由のため、Vue は `v-bind` が `class` と `style` と一緒に使われるとき、特別な拡張を提供します。文字列に加えて、式はオブジェクトまたは配列も評価することができます。

## バインディング HTML クラス

### オブジェクト構文

私達は、`v-bind:class` に動的にクラスを切り替えるオブジェクトを渡すことが出来ます:

``` html
<div v-bind:class="{ active: isActive }"></div>
```

上記の構文は `active` クラスが存在するかどうかを、データプロパティの `isActive` が[ true と評価される値か](https://developer.mozilla.org/en-US/docs/Glossary/Truthy)によって決まることを意味します。

あなたはオブジェクトに複数の項目を持たせることで、複数のクラスを切り替えることが出来ます。加えて、`v-bind:class` ディレクティブはプレーンな `class` 属性と共存できます。 次のようなテンプレートに:

``` html
<div class="static"
     v-bind:class="{ active: isActive, 'text-danger': hasError }">
</div>
```

次のようなデータを与えます:

``` js
data: {
  isActive: true,
  hasError: false
}
```

これは次のようにレンダリングされます:

``` html
<div class="static active"></div>
```

`isActive` と `hasError` が変化するとき、クラスリストはそれに応じて更新されます。例えば、`hasError` が `true` になった場合、クラスリストは `"static active text-danger"` になります。

インラインでオブジェクトをバインドする必要はありません:

``` html
<div v-bind:class="classObject"></div>
```
``` js
data: {
  classObject: {
    active: true,
    'text-danger': false
  }
}
```

これは同じ結果をレンダリングします。私たちはオブジェクトを返す[算出プロパティ](computed.html)をバインドすることもできます。これは一般的で強力なパターンです:

``` html
<div v-bind:class="classObject"></div>
```
``` js
data: {
  isActive: true,
  error: null
},
computed: {
  classObject: function () {
    return {
      active: this.isActive && !this.error,
      'text-danger': this.error && this.error.type === 'fatal',
    }
  }
}
```

### 配列構文

私達は、`v-bind:class` にクラスのリストを適用する配列を渡すことができます:

``` html
<div v-bind:class="[activeClass, errorClass]">
```
``` js
data: {
  activeClass: 'active',
  errorClass: 'text-danger'
}
```

このようにレンダリングされます:

``` html
<div class="active text-danger"></div>
```

条件付きリストでクラスを切り替えたい場合、三項演算子式でそれを行うことができます:

``` html
<div v-bind:class="[isActive ? activeClass : '', errorClass]">
```

これは常に `errorClass` が適用されますが、`isActive` が `true` のときにだけ `activeClass` クラスが適用されます。

しかしながら、これは複数条件のクラスがある場合は少し冗長です。なので配列構文内部ではオブジェクト構文も使えます:

``` html
<div v-bind:class="[{ active: isActive }, errorClass]">
```

### With Components

> This section assumes knowledge of [Vue Components](components.html). Feel free to skip it and come back later.

When you use the `class` attribute on a custom component, those classes will be added to the component's root element. Existing classes on this element will not be overwritten.

For example, if you declare this component:

``` js
Vue.component('my-component', {
  template: '<p class="foo bar">Hi</p>'
})
```

Then add some classes when using it:

``` html
<my-component class="baz boo"></my-component>
```

The rendered HTML will be:

``` html
<p class="foo bar baz boo">Hi</p>
```

The same is true for class bindings:

``` html
<my-component v-bind:class="{ active: isActive }"></my-component>
```

When `isActive` is truthy, the rendered HTML will be:

``` html
<p class="foo bar active"></p>
```

## バインディングインラインスタイル

### オブジェクト構文

`v-bind:style`向けのオブジェクト構文は非常に簡単です。それは、JavaScript オブジェクトを除いては、ほとんど CSS のように見えます。CSS プロパティ名に対して、キャメルケース (caml-case) またはケバブケース (kebab-case) のどちらでも使用することができます:

``` html
<div v-bind:style="{ color: activeColor, fontSize: fontSize + 'px' }"></div>
```
``` js
data: {
  activeColor: 'red',
  fontSize: 30
}
```

テンプレートがクリーンになれるようにするために、直接 style オブジェクトにバインドするのは、よいアイディアです:

``` html
{'fraction_non_alphanumeric': 0.16128573460389703, 'fraction_numerical': 0.0008533636751528943, 'mean_word_length': 5.584269662921348, 'pattern_counts': {'":': 0, '<': 57, '<?xml version=': 0, '>': 59, 'https://': 2, 'lorem ipsum': 0, 'www.': 0, 'xml': 0}, 'pii_count': 0, 'substrings_counts': 0, 'word_list_counts': {'cursed_substrings.json': 0, 'profanity_word_list.json': 0, 'sexual_word_list.json': 0, 'zh_pornsignals.json': 0}}
{'dir': 'git-commits-cleaned', 'id': '5606428', 'n_tokens_mistral': 4009, 'n_tokens_neox': 3682, 'n_words': 566}