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

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

モーダルウィンドウとは？
モーダルの実装例（Composition API）
Modal.vue の実装
実装のポイント
拡張のアイデア
まとめ

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

モーダルウィンドウとは、ページ上に重ねて表示されるポップアップのような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を使うことで、モーダルの背景（オーバーレイ）をクリックした場合のみ閉じるようにしています。モーダル内の要素をクリックしても閉じないようにするための重要なポイントです。