本記事では、LaravelとTailwind CSSを使って「ボタンをクリックするとモーダルウィンドウが表示される」処理を実装する方法を紹介します。
概要
- Laravel Blade上でモーダルを構築
- Tailwind CSSのユーティリティクラスで装飾
- 表示切り替えはAlpine.jsで制御
1. Alpine.jsの導入（Laravel Breezeなどには初期導入済み）
<!-- resources/views/layouts/app.blade.php -->
<head>
<script defer src="https://cdn.jsdelivr.net/npm/alpinejs@3.x.x/dist/cdn.min.js"></script>
</head>2. モーダル付きボタンのBladeテンプレート
<!-- resources/views/components/modal-button.blade.php -->
<div x-data="{ open: false }">
<button @click="open = true" class="bg-blue-600 text-white px-4 py-2 rounded">モーダルを開く</button>
<div x-show="open" class="fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center z-50">
<div @click.away="open = false" class="bg-white p-6 rounded-lg shadow-xl w-full max-w-md">
<h2 class="text-xl font-bold mb-4">モーダルタイトル</h2>
<p>ここに任意の内容を記述します。</p>
<button @click="open = false" class="mt-4 bg-gray-700 text-white px-4 py-2 rounded">閉じる</button>
</div>
</div>
</div>3. モーダル表示時の変数未定義エラー対策（Laravel変数）
モーダル内でLaravel変数（例：$orderなど）を使用する場合、index画面などで未定義エラーが出ることがあります。
対策例：
@if (isset($order))
<p>注文番号: {{ $order->id }}</p>
@endifまたは、JavaScriptに変数を渡す処理でも @json($変数)を用いてnullチェックを行うことが重要です。
4. モーダルの位置・装飾の調整
- 中央配置：
flex items-center justify-center - 背景暗転：
bg-black bg-opacity-50 - z-indexの調整：
z-50 - サイズ制限：
max-w-md,w-full
必要に応じて以下のような拡張も可能です：
- スクロール制御
- トランジション（
x-transition） - フォームや確認ダイアログの埋め込み
まとめ
Tailwind CSSとAlpine.jsを組み合わせることで、Laravel管理画面にも軽量かつ洗練されたモーダルUIを手軽に実装できます。
特に管理画面では、編集・確認・削除などの確認ステップにおいてモーダル表示はUX向上に効果的です。
コメント