Vue.js: ClassとStyleのバインド
最終更新：2026-10-20
:class と :style は、Vue で最もよく使われる 2 つのバインディングです。これらを使用すると、データに基づいて CSS クラス名やインラインスタイルを動的に切り替えることができます。本質的には、これらは v-bind の 2 つの特別な構文形式であり、非常に頻繁に使用されるため、「構文上の糖衣」として実装されています。
これら5つの記述スタイルを習得すれば、95%のケースに対応できます：オブジェクト構文、配列構文、三項演算子、計算プロパティ、文字列連結。
1. 学習内容
:classオブジェクト構文：条件に基づいて単一クラスと複数クラスを切り替える:class配列構文：複数のクラスを同時に適用する- 配列とオブジェクトの併用：複雑なクラス名の組み合わせ
:styleオブジェクト構文：動的なインラインスタイル:style配列構文：複数のスタイルオブジェクトの結合- CSS変数のバインディング（Vue 3での使用を推奨）
2. 注文ステータスラベルのスタイリングに関する課題
(1) 課題：5つの状態、5つのif文
アリスは、管理画面で5つの注文ステータスを異なる色で表示する必要がありました：
HTML
<!-- ❌ The "Broken" Version: 5 v-if with class -->
<span v-if="status === 'pending'" class="badge yellow">Pending</span>
<span v-else-if="status === 'paid'" class="badge green">Paid</span>
<span v-else-if="status === 'shipped'" class="badge blue">Shipped</span>
<span v-else-if="status === 'delivered'" class="badge gray">Delivered</span>
<span v-else class="badge red">Cancelled</span>
プロダクトマネージャーのチャーリー：
「アリス、これじゃ見苦しいよ。来月、ステータスをあと3つ追加することになったらどうする？ ただコピー＆ペーストするわけにはいかない。すっきりとした動的なアプローチが必要だ。」
(2) Vue :class 解答：たった1行で5つの状態を処理する
(3) 収益
- HTMLの簡略化：5行のif-else → 1行の:class
- メンテナンス性：新しい状態を追加するには、
computedプロパティを変更するだけで済み、テンプレート自体は変更されません。 - 可読性：状態とクラスのマッピングが一箇所に集約されており、論理構造が明確である
3. :class の記述方法 5 選
(1) 文字列の構文
(2) オブジェクト構文（最も一般的）
(3) 配列の構文
(4) 静的クラスとの共存
(5) コンポーネントに関する講義
▶ サンプル：:class の記述方法 5 通り
▶ 試してみよう出力：
TEXT
String → class="badge"
Object → class="active"、Mixed → class="active"（disabled は付かない）
Array → class="active error"
Computed → class="active"
4. :style の記述方法 5 選
(1) オブジェクト構文
(2) CSSプロパティ名の変換
Vue は、JavaScript の命名規則を CSS の命名規則に自動的に変換します：
(3) 配列の構文（複数のオブジェクトの結合）
(4) 自動プレフィックス付与
Vue 3 は、CSS プロパティに（ブラウザエンジンに基づいて）ブラウザプレフィックスを自動的に追加します：
JS
// Write:
{ transform: 'rotate(45deg)' }
// Vue Auto-add：
{
-webkit-transform: 'rotate(45deg)',
transform: 'rotate(45deg)'
}
(5) CSS変数（Vue 3での使用を推奨）
▶ サンプル：:style の記述方法 5 通り
▶ 試してみよう出力：
TEXT
1 → color: red; font-size: 16px
2 → background-color: #42b883; padding: 20px
3 → color: white と background-color: #42b883 が結合される
4 → --theme-color: #35495e、5 → color: white; background-color: #35495e; padding: 20px
5. 総合演習：動的な注文ステータスバッジ
▶ サンプル：注文ステータスバッジ
▶ 試してみよう出力：
TEXT
pending → 「Pending」の黄色バッジ（bg-yellow）
delivered → 「Delivered」の灰色バッジ（bg-gray）
未知の値 → 「Unknown」＋ bg-default
(1) 📊 . よくある5つの間違い
| エラー | 症状 | 解決策 |
|---|---|---|
| String クラスが反応しない | クラスがハードコーディングされており、切り替えられない | :class を使用してバインドされている |
| 配列クラスのスペルミス | 同じ名前のクラスが複数存在し、互いに上書きし合っている | オブジェクト構文の使用 |
| スタイル単位が指定されていません | 数値「16」は 16px として解釈され、無視されます | 文字列 '16px' が出力されます |
| 誤ったCSSプロパティ名 | font-size は fontSize にする |
キャメルケースまたは引用符を使用 |
| :クラス名の競合 | 静的 + 動的な名前衝突 | Vueが自動的に統合するため問題なし |
(2) 📊 . 5 性能比較
| 実装 | コンパイル結果 | パフォーマンス | 適用性 |
|---|---|---|---|
| 文字列 | 文字列の直接連結 | ⭐⭐⭐⭐⭐ | 簡単 |
| オブジェクト | 静的解析 | ⭐⭐⭐⭐ | 中程度 |
| 配列 | 文字列の連結 | ⭐⭐⭐⭐ | 複数のクラス |
| 配列とオブジェクト | 混合処理 | ⭐⭐⭐ | 複雑 |
| 計算プロパティ | キャッシュされた値 | ⭐⭐⭐⭐⭐ | 複雑なロジック |
(3) 📊 . 「クラス」と「スタイル」の5つの主な違い
| 側面 | クラス | スタイル |
|---|---|---|
| 評価 | ⭐⭐⭐⭐⭐ | ⭐⭐⭐ |
| CSSの再利用性 | 容易（クラス名の再利用） | 困難（スタイルが散在している） |
| パフォーマンス | 向上（ブラウザの最適化） | わずかに低下 |
| 優先度 | セレクタに依存 | インライン（最優先） |
| テーマの切り替え | 簡単（クラスを変更） | 簡単（CSS変数を変更） |
❓ よくある質問
Q クラスとスタイルのバインディングは共存できますか？
A はい。静的
class="x" と動的 :class="{active: y}" は自動的に統合されます（その結果、class="x active" または "x" のいずれかになります）。Q なぜ
style 属性はオブジェクトとして記述しなければならないのですか？CSS文字列を使えばいいのではないでしょうか？A はい、可能です。
<div style="color: red">はHTMLのネイティブ構文であり、<div :style="'color: red'">も文字列ベースのアプローチです。しかし、オブジェクト:style="{ color: 'red' }"を使用することで、変数を動的にバインドすることができます。オブジェクトの使用をお勧めします。Q CSS変数はどのように使いますか？
A CSS内で
{'--my-var': value}を:styleとして、var(--my-var)を:styleとして使用します。Vue 3では、テーマの切り替えにCSS変数の使用が推奨されています。これは、スタイルを直接バインドするよりも効率的だからです（1つの変数を更新するだけで済み、DOMのリフローも発生しません）。Q コンポーネントは外部クラスをどのように受け取るのですか？
A シングルルートコンポーネントは、
class 属性を自動的に継承します（Vue 3 のデフォルトの動作）。マルチルートコンポーネントは、$attrs.class を使用して特定の要素に明示的にバインドします。Q 配列構文におけるクラスの順序はどうなりますか？
A 配列内に記述された順序で連結されますが、その順序はCSSの特異性には影響しません（CSSの特異性は、CSSセレクタの特異性によって決まります）。
Q :class は v-if と一緒に使えますか？
A はい。
<div v-if="show" :class="{ active: isActive }"> show=false の場合、要素全体がレンダリングされず、isActive は効果を持ちません。Q テーマを動的に切り替えるにはどうすればよいですか？
A CSS変数の使用をお勧めします。
:style="{ '--primary': theme.primary }"はすべての要素color: var(--primary)に適用されます。テーマを切り替えるには、たった1つの変数を変更するだけで済み、100個のクラスを切り替えるよりも効率的です。📖 まとめ
:classおよび:styleは v-bind の構文糖であり、最も一般的に使用されるため、簡略化されています。- :class—定義方法5つ：文字列、オブジェクト、配列、配列＋オブジェクト、計算プロパティ
- :style—5つの記述方法：オブジェクト、配列、配列＋オブジェクト、CSS変数、計算プロパティ
- 静的クラスと動的 :class の自動マージ
- Vue 3 は CSS のブラウザプレフィックスを自動的に追加します
- Vue 3 でのテーマ切り替えには、CSS 変数の使用が推奨されています（スタイルを切り替えるよりも効率的です）。
- パフォーマンス：オブジェクト／計算プロパティ > 配列 > 文字列
📝 練習問題
-
基礎問題（難易度：⭐）
:class セレクタを使用して、3つのボタン状態を実装します：
- メイン：青色の背景に白い文字
- 成功：緑色の背景に白い文字
- 危険：赤い背景に白い文字
データ：
const variant = ref('primary') -
上級問題（難易度：⭐⭐）
注文ステータスに応じて、各行に異なる色のバッジが表示される注文リストを実装してください：
- 5つのステータス（保留中／支払い済み／発送済み／配達済み／キャンセル）
- 計算プロパティを使用して
classオブジェクトを返す - :style ステータスに応じたアイコンの色を追加する
-
チャレンジ問題（難易度：⭐⭐⭐）
完全なテーマ切り替えシステムを実装する：
- 3つのテーマ（ライト／ダーク／ハイコントラスト）
- CSS変数を使用して、テーマカラー（プライマリ／セカンダリ／背景／テキスト）を紐付ける
- :class — テーマクラスの名前を切り替える
- localStorage を使ってユーザーの選択内容を記憶する
- テーマを切り替えてもページは再読み込みされません（レスポンシブデザインにより自動的に更新されます）
