Vue 3では、新しい機能としてTeleportが追加されました。これは、Vue 2の<slot>やAngularの<ng-content>と同様に、コンポーネントの外部に要素をレンダリングすることができるようになる機能です。今回は、そのTeleportを用いて、ポータルコンポーネントを実装する方法を解説します。

Teleportとは

まずはTeleportについて簡単に説明しましょう。Teleportは、Vue 3で導入された機能の一つで、コンポーネントの外部に要素をレンダリングすることができるようになるものです。これにより、コンポーネント内で要素を描画するのではなく、外部のDOMツリーに要素を挿入することができるようになります。これにより、より柔軟なUIの構築が可能になります。

ポータルコンポーネントとは

ポータルコンポーネントとは、モーダルやドロップダウンメニューなど、コンポーネントの外部に要素をレンダリングする必要がある場合に使用されるコンポーネントです。これまでは、通常のコンポーネント内で、外部の要素を描画するためには、親コンポーネント内でポータル用のDOMツリーを用意し、それを子コンポーネント内でマウントする必要がありました。しかし、Teleportを使用することで、コンポーネント内で要素を描画する必要がなくなり、よりスマートな実装が可能になります。

実装方法

それでは実際に、Teleportを用いてポータルコンポーネントを実装してみましょう。まずは、Teleportを使用するためには、Vue 3のvueパッケージのバージョンが3.0.0以上である必要があります。もし、バージョンが古い場合は、アップグレードする必要があります。

次に、ポータルコンポーネントを作成します。まずは、親コンポーネントからpropsで受け取ったshowをv-ifで条件分岐し、ポータルを表示するかどうかを判断します。そして、Teleportコンポーネント内に、ポータルの要素を定義します。ここでは、モーダルを例として実装してみましょう。

ここでは、teleportタグのto属性に、ポータル先となる要素のセレクタを指定しています。そして、親コンポーネントから渡されたshowの値によって、ポータルの要素を表示するかどうかを判断しています。これで、ポータルコンポーネントの実装は完了です。

ポータル先の準備

次に、ポータル先となる要素を準備しましょう。まずは、ポータル先となる要素を親コンポーネントの外側に定義します。そして、その要素にidを指定しておきます。ここでは、先ほどの例で使用した#modalをidに指定してみましょう。

これで、ポータル先の準備は完了です。ポータル先の要素は、親コンポーネントとは別のDOMツリーに存在しているため、ポータル内でのスタイル指定なども、親コンポーネントとは別に行うことができます。

ポータルコンポーネントの利用

最後に、作成したポータルコンポーネントを親コンポーネントで利用してみましょう。先ほどの例で作成したmodalコンポーネントを親コンポーネントに登録し、propsで渡すshowを定義します。そして、modalコンポーネントを呼び出すボタンを配置します。

これで、ポータルコンポーネントが利用可能になりました。ボタンをクリックすることで、ポータル先に指定した要素が表示されるかどうかが切り替わるようになっています。

まとめ

Vue 3のTeleportを用いることで、コンポーネントの外部に要素をレンダリングすることができるようになり、より柔軟なUIの構築が可能になります。今回は、そのTeleportを使用して、ポータルコンポーネントを実装する方法を解説しました。これを参考に、ぜひ自分のアプリケーションにも導入してみてください。

[cv:issue_marketplace_engineer]