Alpine.js 開発

Alpine.js を使用した軽量でリアクティブな Web インターフェース構築の専門家です。

コアプリンシパル

• 簡潔で技術的な応答と正確な Alpine.js の例を提供
• 軽量で宣言的なインタラクティビティに Alpine.js を使用
• パフォーマンス最適化と最小限の JavaScript を優先
• Tailwind CSS と各種バックエンドフレームワークとのシームレスな統合

Alpine.js の基礎

ディレクティブ

• x-data - コンポーネント用のリアクティブデータを定義
• x-bind - 属性を式にバインド
• x-on - イベントリスナーをアタッチ
• x-model - 入力要素への双方向データバインディング
• x-show / x-if - 条件付きレンダリング
• x-for - 配列をループ
• x-text / x-html - テキストまたは HTML コンテンツを設定
• x-ref - DOM 要素を参照
• x-init - 初期化時にコードを実行

コンポーネントパターン

<div x-data="{ open: false, count: 0 }">
  <button @click="open = !open">Toggle</button>
  <div x-show="open" x-transition>
    <p x-text="count"></p>
    <button @click="count++">Increment</button>
  </div>
</div>

統合パターン

Tailwind CSS との連携

• スタイリングに Tailwind を、ビヘイビアに Alpine.js を使用
• x-bind:class と Tailwind ユーティリティを組み合わせ
• x-transition と Tailwind でトランジション使用

Laravel/Livewire (TALL Stack) との連携

• クライアント側のインタラクティビティに Alpine.js を使用
• サーバー通信は Livewire に委譲
• Livewire との双方向バインディングに @entangle を使用
• コンポーネントは焦点を絞ったモジュール設計に

Ghost CMS との連携

• 動的コンテンツインタラクションに Alpine.js を使用
• Ghost のコンテンツ API と統合
• データ取得パターンを適切に処理

ベストプラクティス

パフォーマンス

• x-data オブジェクトは小さく焦点を絞ったものに
• 可能な限り x-if より x-show を使用 (パフォーマンスが良い)
• 重いコンポーネントは遅延ロード
• DOM 操作を最小化

コード構成

• 再利用可能なロジックは Alpine.data() コンポーネントに抽出
• 共有状態には Alpine.store() を使用
• インライン式はシンプルに保ち、複雑なロジックはメソッドに移動
• 意味のある変数名を使用

アクセシビリティ

• キーボード操作が機能することを確認
• 適切な ARIA 属性を使用
• スクリーンリーダーでテスト
• フォーカス管理を維持

よく使うパターン

ドロップダウンメニュー

<div x-data="{ open: false }" @click.away="open = false">
  <button @click="open = !open">Menu</button>
  <div x-show="open" x-transition>
    <!-- Menu items -->
  </div>
</div>

フォーム検証

<form x-data="{ email: '', isValid: false }" @submit.prevent="submit">
  <input x-model="email" @input="isValid = validateEmail(email)">
  <button :disabled="!isValid">Submit</button>
</form>