【Vue.js】モーダルウィンドウを作成する方法|スロット・クリック外で閉じる処理付き

【Vue.js】モーダルウィンドウを作成する方法|スロット・クリック外で閉じる処理付き Vue.js

Vue.jsでは、クリック一つで開閉できるモーダルウィンドウも簡単に作成できます。本記事では、再利用性の高いモーダルコンポーネントを作成し、スロットによる中身の差し替えや、モーダルの外側クリックで閉じる処理まで含めた実用的な実装方法を紹介します。

モーダルウィンドウとは?

モーダルウィンドウとは、ページ上に重ねて表示されるポップアップのようなUIのことです。重要な通知や入力フォームの表示、確認ダイアログなどに使われ、ユーザーの注目を引きやすいインターフェースです。

モーダルの実装例(Composition API)

以下は、Vue 3のComposition APIで作成したシンプルなモーダル実装例です。

<template>
  <div>
    <button @click="isOpen = true">モーダルを開く</button>

    <Modal v-if="isOpen" @close="isOpen = false">
      <template #default>
        <h2>モーダルの中身</h2>
        <p>これはスロットで渡された内容です。</p>
        <button @click="$emit('close')">閉じる</button>
      </template>
    </Modal>
  </div>
</template>

<script setup>
import { ref } from 'vue';
import Modal from './Modal.vue';

const isOpen = ref(false);
</script>

このコードでは、モーダルを外部コンポーネントとして分離し、再利用性を高めています。

Modal.vue の実装

モーダル本体の実装では、背景クリックでモーダルを閉じるためにイベントリスナーを工夫します。

<template>
  <div class="modal-overlay" @click.self="$emit('close')">
    <div class="modal-content">
      <slot></slot>
    </div>
  </div>
</template>

<script setup>
// 特別なロジックは不要(イベント伝播に注意)
</script>

<style scoped>
.modal-overlay {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: rgba(0, 0, 0, 0.5);
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 1000;
}
.modal-content {
  background: #fff;
  padding: 2rem;
  border-radius: 8px;
  min-width: 300px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
}
</style>

@click.selfを使うことで、モーダルの背景(オーバーレイ)をクリックした場合のみ閉じるようにしています。モーダル内の要素をクリックしても閉じないようにするための重要なポイントです。

実装のポイント

  • スロット: 中身を柔軟に差し替え可能
  • v-if: 表示状態の制御
  • @click.self: 外側クリックだけで閉じる処理

拡張のアイデア

  • Escキーでモーダルを閉じるイベントハンドリング
  • 開閉時に<transition>でアニメーション追加
  • VuexやPiniaでグローバルに開閉状態を管理

まとめ

Vue.jsでは、モーダルウィンドウもコンポーネントとして簡単に再利用可能に作成できます。スロットで中身を切り替えたり、クリックイベントで閉じたりといった基本動作を押さえておけば、さまざまな用途に応用できます。シンプルな実装から始めて、自分のプロジェクトに合わせてカスタマイズしていきましょう。