ポータル（ポータル）
異なる空間を瞬間移動する技術。ゲームの Portal シリーズ（Valve）の物理ギミック、Path Tracing による反射ポータル表現、UI のポータル要素（Tooltip / Modal）等で使われる。
概要
ポータル（Portal）は、異なる空間や DOM 階層を「瞬間的につなぐ」技術や仕掛けを指す多義語で、以下の文脈で使われる:
- ゲームの物理ギミック: Valve 社の『Portal』『Portal 2』で確立、空間を非ユークリッド的につなぐ
- Path Tracing のレンダリング: ガラス・鏡・水面の反射を物理的に正確に描画
- React / Vue の UI Portal: DOM 階層を超えてコンポーネントをマウント
- Web ポータルサイト: Yahoo! / MSN 等の総合情報サイト
- 企業内ポータル: Confluence / SharePoint 等の社内情報集約
2026 年現在、ゲームでは Unreal Engine 5 Lumen / RTX 50 Path Tracing で美麗なポータル表現が一般化、フロントエンド開発では React / Vue / Svelte の Portal 機能が Tooltip / Modal の標準実装になっている。
ゲームの Portal（2026 年）
Valve の Portal シリーズ
| タイトル | リリース | 特徴 |
|---|---|---|
| Portal（2007） | 2007 | パズルゲームの金字塔、Steam |
| Portal 2（2011） | 2011 | 協力プレイ + Co-op、続編傑作 |
| Portal: Companion Collection | 2022 | Switch 移植 |
| Portal RTX | 2022 | NVIDIA RTX Path Tracing 公式モッド |
Path Tracing でのポータル表現（2026 年）
| ゲーム | エンジン | ポータル表現 |
|---|---|---|
| Cyberpunk 2077 | RED Engine 4 + Path Tracing | 鏡・ガラス越しの完全反射 |
| Alan Wake 2 | Northlight Engine + RT | 異空間遷移の演出 |
| Portal RTX | Source 1 + RTX Remix | 全シーン Path Tracing |
| Indiana Jones and the Great Circle | id Tech 7 + RT | 鏡反射・水面反射 |
| Hellblade II | Unreal Engine 5 Lumen | 視覚効果の境界表現 |
React / Vue の UI Portal
React createPortal
import { createPortal } from 'react-dom';
function Tooltip({ children }) {
return createPortal(
<div className="tooltip">{children}</div>,
document.body
);
}
DOM 階層を超えて document.body に直接マウント、CSS の z-index / overflow 問題を回避。Tooltip / Modal / Dropdown / Toast の標準実装。
主要 UI ライブラリの Portal 実装
| ライブラリ | API |
|---|---|
| React | createPortal |
| Vue 3 | <Teleport> |
| Svelte | use:portal action |
| Solid | Portal component |
| Angular | CdkPortal |
| Headless UI | <Portal> 内部実装 |
| Radix UI | <Portal> 公開 API |
ハードウェア要件（Path Tracing ゲーム）
- Cyberpunk 2077 Path Tracing 4K: RTX 5090 / 5080、64 GB RAM
- Portal RTX 1440p: RTX 4070 SUPER、32 GB RAM
- Alan Wake 2 RT High: RTX 4070 / 4080 SUPER、32 GB RAM
- DLSS 4 Frame Generation: RTX 50 シリーズ専用
関連用語との違い
| 用語 | 違い |
|---|---|
| ワープ | 瞬間移動全般、ポータルは「窓」的 |
| ループバック | ネットワーク用語、自分自身への通信 |
| ハイパーリンク | Web のリンク、ポータルは別概念 |
| トランスポーター | SF 用語、Star Trek 等で見る |
よくある質問
Q1: Portal RTX をプレイするのに必要な PC は？ A: RTX 4070 SUPER で 1440p / 60fps が目安。RTX 4080 SUPER で 4K / 60fps。RTX 50 シリーズなら DLSS 4 Frame Generation で 4K / 120fps も視野。
Q2: React createPortal の使いどころは？ A: (1) Modal Dialog（背景全体を覆う）、(2) Tooltip / Popover（z-index 制御）、(3) Toast / Notification（画面端に固定）、(4) Drawer（サイドバー）、(5) Floating Date Picker。
Q3: Vue 3 の Teleport と React createPortal の違いは？
A: 機能的にほぼ同等。Vue Teleport はテンプレート内に <Teleport to="body"> で宣言的、React は JSX 内で createPortal() を関数呼び出し。実装思想の違いだけ。
まとめ
- 異なる空間/階層を 瞬間的につなぐ 技術・仕掛けの総称
- 2026 年は Path Tracing ゲーム + UI Portal API が二大文脈
- ゲーム実装は Unreal Engine 5 / RTX 50、UI は React / Vue Teleport が定番