TypeScript 7 Beta と Three.js WebGPU 世代を追う
2026年春のフロントエンド周辺で特に大きい変化は、TypeScript 7.0 Beta と Three.js の WebGPU 系 API の成熟だ。どちらも単なる新機能ではなく、開発体験やブラウザ 3D の設計前提を変える話として見ておきたい。
TypeScript 7 は「速い tsc」ではなく移行計画
Microsoft は 2026年4月21日に TypeScript 7.0 Beta を公開した。公式ブログでは、既存の TypeScript 実装を Go ベースへ移植し、ネイティブコードと共有メモリ並列性によって TypeScript 6.0 よりしばしば約10倍高速になると説明している。
重要なのは、TypeScript 7 が TypeScript 6.0 の挙動へ揃える形で移行することだ。TypeScript 6.0 は 2026年3月23日に公開され、従来の JavaScript ベース実装としては最後のメジャーリリースになる予定とされた。つまり実務では、いきなり 7.0 に飛ぶよりも、まず 6.0 の非推奨や新しい既定値を確認し、tsc と tsgo を並べて差分を見る段階が現実的だ。
ポートフォリオ実装では、アルゴリズム教材や Three.js デモのコード断片を TypeScript 化する余地がある。特に UI とシミュレーション状態を分け、Lesson, Frame, GraphNode のような型を先に置くと、教材としても「型が設計を説明する」構造になる。
Three.js は WebGPU/TSL を前提にした設計へ
Three.js 側では WebGPU renderer と node-based material/TSL 周辺が継続的に整備されている。公式ドキュメントでも WebGPURenderer は WebGPU を使う次世代 renderer として説明され、WebGPU が使えない環境への WebGL 2 fallback も設計上の要点になっている。
2026年2月の r183 では、WebGPU 系のレンダリングパイプラインや移行上の注意点が話題になった。既存の WebGLRenderer で動くデモを作りつつ、将来 WebGPU へ差し替えやすい構造にするなら、描画対象の生成、アニメーションループ、UI からのパラメータ更新を分けておくとよい。
今回追加した Three.js Sandbox ページでは、あえて CDN の three.module.js を読み込み、最小構成の Scene, PerspectiveCamera, WebGLRenderer, MeshStandardMaterial, requestAnimationFrame で構成した。これは WebGPU デモの前段として、3D の基本部品がどこに対応するかを見せるための土台になる。
次に作ると面白いもの
- TypeScript で実装したアルゴリズム教材の状態モデルと、同じロジックを UI で再生する仕組み。
WebGPURendererが利用可能な場合だけ WebGPU 版へ切り替える Three.js デモ。- ブログ記事のカテゴリ定義を frontmatter から自動集計し、記事一覧や管理ページでカテゴリの説明文を表示する仕組み。
Sources
- Microsoft TypeScript Blog: Announcing TypeScript 7.0 Beta, 2026-04-21
- Microsoft TypeScript Blog: Announcing TypeScript 6.0, 2026-03-23
- Three.js Docs: WebGPURenderer
- Three.js Docs: WebGPU capability helper
- GitHub: mrdoob/three.js releases