Alpine.jsでクラス・スタイルを動的に切り替える方法

2026年1月11日

URLをコピーしました！

Webサイトや管理画面を作成していると、「ボタンを押したときに見た目を変えたい」「状態に応じてクラスやスタイルを切り替えたい」という場面は頻繁に発生します。
従来はJavaScriptでDOMを直接操作したり、jQueryでclassを付け替える方法が一般的でしたが、現在はより軽量で宣言的な手法が主流になりつつあります。

Alpine.jsは、そのようなニーズに適した軽量JavaScriptフレームワークです。
本記事では、Alpine.jsでクラスやスタイルを動的に切り替える具体的な方法について、基本から実践的な使い方まで順序立てて解説します。

Alpine.jsでクラス・スタイルを切り替える基本概念

Alpine.jsでは、HTML属性として振る舞いを記述します。
状態は x-data で定義し、その状態に応じてクラスやスタイルを切り替えます。

クラスやスタイルを制御する際に主に使用するディレクティブは以下のとおりです。

:class（または x-bind:class）
:style（または x-bind:style）

これらはJavaScriptの評価結果をそのままHTML属性に反映する仕組みになっています。

:class を使った動的クラス切り替え（基本）

最も基本的な例として、真偽値に応じてクラスを切り替える方法を紹介します。

<div x-data="{ isActive: false }">
  <button
    @click="isActive = !isActive"
    :class="isActive ? 'active' : 'inactive'">
    切り替え
  </button>
</div>

<button

@click="isActive = !isActive"

:class="isActive ? 'active' : 'inactive'">

切り替え

</button>

</div>

この例では、以下の動作になります。

isActive が true の場合
→ active クラスが適用される
isActive が false の場合
→ inactive クラスが適用される

三項演算子を使うことで、シンプルかつ明確にクラス切り替えを表現できます。

オブジェクト形式での :class 指定

クラスの付与条件が増えてくると、三項演算子だけでは可読性が低下します。
その場合は、オブジェクト形式での指定が有効です。

<div x-data="{ isOpen: false }">
  <div
    :class="{
      'open': isOpen,
      'closed': !isOpen
    }">
    コンテンツ
  </div>
</div>

<div

:class="{

'open': isOpen,

'closed': !isOpen

}">

コンテンツ

</div>

この書き方の特徴は以下のとおりです。

キー：クラス名
値：真偽値（true の場合にクラスが付与される）

複数条件を扱う場合でも、意図が分かりやすくなります。

配列形式で複数クラスを制御する

複数のクラスを同時に切り替えたい場合、配列形式も使用できます。

<div x-data="{ isActive: true, isLarge: false }"
     :class="[
       isActive ? 'active' : '',
       isLarge ? 'large' : ''
     ]">
  ボックス
</div>

<div x-data="{ isActive: true, isLarge: false }"

:class="[

isActive ? 'active' : '',

isLarge ? 'large' : ''

]">

ボックス

</div>

この方法は、条件ごとに独立したクラス制御が必要な場合に便利です。
ただし、条件が増えすぎると読みづらくなるため、オブジェクト形式との使い分けが重要です。

静的クラスと動的クラスを併用する

Alpine.jsでは、通常の class 属性と :class を併用できます。

<div class="base-box"
     x-data="{ highlight: false }"
     :class="{ 'highlight': highlight }">
  コンテンツ
</div>

<div class="base-box"

x-data="{ highlight: false }"

:class="{ 'highlight': highlight }">

コンテンツ

</div>

base-box は常に適用される
highlight は状態に応じて付与される

この構成は、CSS設計の観点でも扱いやすく、実務でよく使われます。

:style を使った動的スタイル切り替え

クラスではなく、直接スタイルを変更したい場合は :style を使用します。

<div x-data="{ color: 'red' }"
     :style="{ color: color }">
  テキスト
</div>

<div x-data="{ color: 'red' }"

:style="{ color: color }">

テキスト

</div>

このように、JavaScriptオブジェクトとしてCSSプロパティを指定します。

条件によるスタイル切り替え例

状態に応じてスタイルを変更する例です。

<div x-data="{ isError: false }"
     :style="{
       color: isError ? 'red' : 'black',
       fontWeight: isError ? 'bold' : 'normal'
     }">
  メッセージ
</div>

<div x-data="{ isError: false }"

:style="{

color: isError ? 'red' : 'black',

fontWeight: isError ? 'bold' : 'normal'

}">

メッセージ

</div>

クラス切り替えよりも一時的・限定的なスタイル変更に向いています。

クラス切り替えとスタイル切り替えの使い分け

実務では、以下の基準で使い分けるのが一般的です。

レイアウトや見た目のパターン切り替え
→ :class を使用
動的な数値や一時的な装飾
→ :style を使用

CSS設計を崩さないためにも、基本はクラス制御を優先することをおすすめします。

複雑な条件はメソッド化する

条件が複雑になってきた場合は、x-data 内でメソッドとして定義できます。

<div x-data="{
  status: 'warning',
  getClass() {
    return {
      success: this.status === 'success',
      warning: this.status === 'warning',
      error: this.status === 'error'
    }
  }
}"
:class="getClass()">
  ステータス表示
</div>

<div x-data="{

status: 'warning',

getClass() {

return {

success: this.status === 'success',

warning: this.status === 'warning',

error: this.status === 'error'

}

:class="getClass()">

ステータス表示

</div>

ロジックを分離することで、HTMLの可読性が大きく向上します。

よくある質問（Q & A）

class 属性と :class はどちらを使うべきですか？: 常に適用するクラスは class、条件付きで切り替えるものは :class を使用するのが適切です。
両者は併用できます。
:class の中で複雑なJavaScriptを書いても問題ありませんか？: 動作自体は可能ですが、可読性と保守性が低下します。
複雑な処理は x-data 内のメソッドとして切り出すことをおすすめします。
スタイルをすべて :style で管理しても問題ありませんか？: 技術的には可能ですが、CSS管理が煩雑になります。
基本はクラス切り替えを使用し、必要な場合のみ :style を使うのが望ましいです。