こんにちは！先日久々にフロント側を実装して、思いの外難なくプルリク作成できて安堵してる hikaru-kimi です！
前回に引き続き、Vue.js3系の変更点について取り上げたいと思います！！
今回は Teleport についてです！
Teleport とは、指定のテンプレートをDOM階層の外側のDOMに展開できる機能のことです。
出典: Vue.js 公式ドキュメント
https://ja.vuejs.org/guide/built-ins/teleport.html#disabling-teleport
これだけだとイマイチ便利さが分かりづらいですが、例えばモーダルの作成時なんかに真価を発揮します！
モーダルは画面の最前面に表示しますが、親要素の z-index の如何によってはモーダルが背後に隠れてしまう場合があります。
そのようなときは、属するDOM要素から独立した形で展開できればCSSの干渉を受けずに済みますが、それを可能とするのがこの Teleport となります。
この Teleport、地味にすごいのが、Vue インスタンスが展開されてるDOM外にも指定テンプレートを展開できるという点です。
本来 Vue.js は、createApp の際に指定したセレクタ内に Vue インスタンスが展開されるため指定したセレクタ外に及ぶことはないのですが、Teleport ではそれが可能になるのです！
弊社インゲージでは、フレームワークやライブラリの更新情報に敏感で、かつ新機能を積極的に研究するような意欲の高いエンジニアを募集しております！
まずは以下のリンクより、気軽にカジュアル面談へのご応募をお願いいたします！！
