Teleportを使うことで、モーダルウィンドウを簡単に作成することができるようになりました。
Vue 3では、以前まで使われていた<code>Portal</code>というAPIは廃止され、その機能はTeleportに統合されました。
それでは、Teleportを使ってモーダルウィンドウを作成してみましょう。

# まずはTeleportとは？

Teleportは、Vue 3で追加された新しい機能の1つです。
これは、アプリケーションのルート要素以外の場所に、コンポーネントをレンダリングするためのものです。
具体的には、モーダルウィンドウやドロップダウンメニューなど、アプリケーションのルート要素の外に表示したいものを簡単に実現することができます。

それでは、Teleportを使ってモーダルウィンドウを作成してみましょう。

# モーダルウィンドウを作成する

まずは、Vue 3のプロジェクトを作成し、必要なパッケージをインストールします。
![img](/mosaic-code.jpg)

次に、モーダルウィンドウ用のコンポーネントを作成します。
![img](/mosaic-code.jpg)

次に、モーダルウィンドウを表示するためのボタンを作成します。
![img](/mosaic-code.jpg)

ここまでのコードを`App.vue`に追加し、表示してみると、ボタンをクリックするとモーダルウィンドウが表示されます。

しかし、このままだとモーダルウィンドウがアプリケーションのルート要素の中に表示されてしまいます。
ここで、Teleportを使ってモーダルウィンドウをルート要素の外に表示することで、より自然な動作を実現できます。

# Teleportを使ってモーダルウィンドウをルート要素の外に表示する

まずは、`Modal.vue`のテンプレートにTeleportを追加します。
![img](/mosaic-code.jpg)

次に、モーダルウィンドウを表示するためのボタンをクリックした時に、Teleportを使ってモーダルウィンドウを表示するように変更します。
![img](/mosaic-code.jpg)

これで、モーダルウィンドウがルート要素の外に表示されるようになりました。

# モーダルウィンドウを閉じる

Teleportを使ってモーダルウィンドウを表示した後、どのようにして閉じることができるのでしょうか。
モーダルウィンドウの外をクリックすることで閉じるようにしたいと思います。

まずは、`Modal.vue`のテンプレートに、外側をクリックした時に親コンポーネントの`isOpen`を`false`にするように変更します。
![img](/mosaic-code.jpg)

次に、親コンポーネントの`Modal.vue`の呼び出し部分を、`v-model`を使って`isOpen`を双方向バインディングします。
![img](/mosaic-code.jpg)

これで、モーダルウィンドウの外をクリックすると自動的に閉じるようになりました。

# まとめ

Teleportを使うことで、ルート要素の外にコンポーネントをレンダリングすることができるようになりました。
これにより、以前までの<code>Portal</code>と比べてより簡単にモーダルウィンドウなどを作成することができるようになりました。
また、`v-model`を使うことで、コンポーネントの双方向バインディングを実現し、モーダルウィンドウの外をクリックすることで自動的に閉じるようにすることもできました。

これからは、Teleportを使ってより使いやすいアプリケーションを作成していきましょう。

[cv:issue_marketplace_engineer]

Teleportを使うことで、モーダルウィンドウを簡単に作成することができるようになりました。
Vue 3では、以前まで使われていた<code>Portal</code>というAPIは廃止され、その機能はTeleportに統合されました。
それでは、Teleportを使ってモーダルウィンドウを作成してみましょう。

# まずはTeleportとは？

Teleportは、Vue 3で追加された新しい機能の1つです。
これは、アプリケーションのルート要素以外の場所に、コンポーネントをレンダリングするためのものです。
具体的には、モーダルウィンドウやドロップダウンメニューなど、アプリケーションのルート要素の外に表示したいものを簡単に実現することができます。

それでは、Teleportを使ってモーダルウィンドウを作成してみましょう。

# モーダルウィンドウを作成する

まずは、Vue 3のプロジェクトを作成し、必要なパッケージをインストールします。
```shell
npm install vue@next
npm install @vue/runtime-dom@next
```

次に、モーダルウィンドウ用のコンポーネントを作成します。
```javascript
<template>
  <div class="modal">
    <div class="modal-content">
      <slot></slot>
    </div>
  </div>
</template>

<script>
export default {
  name: 'Modal',
  props: {
    isOpen: {
      type: Boolean,
      required: true,
    },
  },
  watch: {
    isOpen() {
      if (this.isOpen) {
        document.body.classList.add('modal-open');
      } else {
        document.body.classList.remove('modal-open');
      }
    },
  },
};
</script>

<style>
.modal {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  background-color: rgba(0, 0, 0, 0.6);
  z-index: 999;
}

.modal-content {
  background-color: #fff;
  padding: 20px;
  border-radius: 5px;
}
</style>
```

次に、モーダルウィンドウを表示するためのボタンを作成します。
```javascript
<template>
  <button @click="openModal">モーダルウィンドウを開く</button>
</template>

<script>
import Modal from './Modal.vue';

export default {
  components: {
    Modal,
  },
  data() {
    return {
      isOpen: false,
    };
  },
  methods: {
    openModal() {
      this.isOpen = true;
    },
  },
};
</script>
```

ここまでのコードを`App.vue`に追加し、表示してみると、ボタンをクリックするとモーダルウィンドウが表示されます。

しかし、このままだとモーダルウィンドウがアプリケーションのルート要素の中に表示されてしまいます。
ここで、Teleportを使ってモーダルウィンドウをルート要素の外に表示することで、より自然な動作を実現できます。

# Teleportを使ってモーダルウィンドウをルート要素の外に表示する

まずは、`Modal.vue`のテンプレートにTeleportを追加します。
```javascript
<template>
  <teleport to="body">
    <div class="modal">
      <div class="modal-content">
        <slot></slot>
      </div>
    </div>
  </teleport>
</template>
```

次に、モーダルウィンドウを表示するためのボタンをクリックした時に、Teleportを使ってモーダルウィンドウを表示するように変更します。
```javascript
<template>
  <button @click="openModal">モーダルウィンドウを開く</button>

  <teleport to="body">
    <Modal :is-open="isOpen">
      <p>モーダルウィンドウの中身</p>
    </Modal>
  </teleport>
</template>

<script>
import Modal from './Modal.vue';

export default {
  components: {
    Modal,
  },
  data() {
    return {
      isOpen: false,
    };
  },
  methods: {
    openModal() {
      this.isOpen = true;
    },
  },
};
</script>
```

これで、モーダルウィンドウがルート要素の外に表示されるようになりました。

# モーダルウィンドウを閉じる

Teleportを使ってモーダルウィンドウを表示した後、どのようにして閉じることができるのでしょうか。
モーダルウィンドウの外をクリックすることで閉じるようにしたいと思います。

まずは、`Modal.vue`のテンプレートに、外側をクリックした時に親コンポーネントの`isOpen`を`false`にするように変更します。
```javascript
<template>
  <teleport to="body">
    <div class="modal" @click="closeModal">
      <div class="modal-content">
        <slot></slot>
      </div>
    </div>
  </teleport>
</template>

<script>
export default {
  name: 'Modal',
  props: {
    isOpen: {
      type: Boolean,
      required: true,
    },
  },
  methods: {
    closeModal() {
      this.$emit('update:isOpen', false);
    },
  },
};
</script>
```

次に、親コンポーネントの`Modal.vue`の呼び出し部分を、`v-model`を使って`isOpen`を双方向バインディングします。
```javascript
<template>
  <button @click="openModal">モーダルウィンドウを開く</button>

  <teleport to="body">
    <Modal v-model="isOpen">
      <p>モーダルウィンドウの中身</p>
    </Modal>
  </teleport>
</template>

<script>
import Modal from './Modal.vue';

export default {
  components: {
    Modal,
  },
  data() {
    return {
      isOpen: false,
    };
  },
  methods: {
    openModal() {
      this.isOpen = true;
    },
  },
};
</script>
```

これで、モーダルウィンドウの外をクリックすると自動的に閉じるようになりました。

# まとめ

Teleportを使うことで、ルート要素の外にコンポーネントをレンダリングすることができるようになりました。
これにより、以前までの<code>Portal</code>と比べてより簡単にモーダルウィンドウなどを作成することができるようになりました。
また、`v-model`を使うことで、コンポーネントの双方向バインディングを実現し、モーダルウィンドウの外をクリックすることで自動的に閉じるようにすることもできました。

これからは、Teleportを使ってより使いやすいアプリケーションを作成していきましょう。



まずはTeleportとは？

続きを読むには単価診断を受けてください（30秒）