JSXに代わるUI記述言語が、対応フレームワークを一気に広げました。React・Svelte 5の元コアコントリビュータであるDominic Gannaway氏が開発するTSRXが、2026年4月末のアップデートでVue VaporとPreactへの出力に対応。React・Solid・Rippleと合わせて5つのフレームワークをカバーします。

この記事でわかること

  • TSRXとは何か、JSXと何が違うのか
  • Vue Vapor・Preact対応の意味
  • コンパイルの仕組みと各フレームワークへの最適化
  • MCP対応予告が示す方向性

TSRXとは

https://tsrx.dev

TSRX（TypeScript Render Extensions）は、UIコンポーネントを記述するためのTypeScript言語拡張です。.tsrxという独自のファイル拡張子を持ち、構造・制御フロー・スタイルを1つのファイルに共存させます。

開発者はDominic Gannaway氏。Inferno.jsの作者であり、MetaではReactコアチーム、その後Svelte 5にも貢献した人物です。TSRXは同氏が開発するUIフレームワーク「Ripple」から分離されたプロジェクトで、GitHubスター数は約7,200（2026年4月時点）。現在アルファ段階です。

JSXとの違いは制御フローの書き方にあります。JSXでは三項演算子や.map()で条件分岐やループを表現しますが、TSRXではif文やfor文をテンプレート内にそのまま書けます。スコープ付きCSSもコンポーネント内に直接記述でき、関連するコードが1か所にまとまります。

Vue Vapor・Preact対応で何が変わったか

今回のアップデートでTSRXのコンパイルターゲットにVue VaporとPreactが加わりました。既存のReact・Solid・Rippleと合わせて、1つの.tsrxファイルから5つのフレームワーク向けコードを出力できます。

Vue VaporはVue 3.6で開発が進む新しいレンダリングモードです。仮想DOMを使わず、Solid.jsに近い直接DOM操作方式を採用しています。TSRXの@tsrx/vueプラグインがこのVapor向け出力に対応したことで、Vue開発者にとってもTSRXが選択肢に入ります。

Preactは3KBの軽量React互換ライブラリです。バンドルサイズを重視するプロジェクトで広く使われています。@tsrx/preactプラグインの追加により、Preact向けの最適化済みコード出力が可能になりました。

コンパイラプラグインの仕組み

TSRXのコンパイラは、ソースコードをAST（抽象構文木）に変換した後、フレームワーク固有のプラグインに処理を委ねます。@tsrx/react・@tsrx/preact・@tsrx/solid・@tsrx/vue・@tsrx/rippleの各プラグインが、同じASTからそれぞれのランタイムに最適化されたコードを生成します。

新しいターゲットを追加する場合、言語仕様を変更する必要はありません。コンパイラプラグインとして実装すれば対応できる設計です。既存のTypeScriptやTSXファイルから.tsrxモジュールをインポートでき、段階的な導入も可能です。

フレームワーク固有の制約を吸収する

TSRXの特徴は、各フレームワークの設計上の制約をコンパイル時に解決する点です。

Reactでは、Hooksを条件分岐の中で呼び出せません。TSRXでif文の中にHooksを書くと、コンパイラが条件分岐を自動的に別コンポーネントへ分離し、Hooksのルールを満たします。開発者が手動でコンポーネントを分割する必要がなくなります。

Solidでは、propsの分割代入がリアクティビティを壊す問題があります。TSRXの&{ ... }記法は遅延ゲッターにコンパイルされ、分割代入しながらリアクティビティを維持します。

MCP対応の予告

Gannaway氏はTSRX向けのMCPサーバーを近く提供する予定と発表しています。MCPサーバーが実現すれば、Claude CodeやCursorなどのAIコーディングツールからTSRXの構文チェックやコンパイルを直接利用できます。

公式サイトでも「agentic era（エージェントの時代）のための宣言的UI」と掲げており、AIとの親和性を設計思想に組み込んでいます。制御フローやスタイルが1ファイルに共存する構造は、LLMがコードの文脈を把握しやすい形式です。「Lost in the Middle」論文（参考）が示すように、関連情報が近くにまとまっているほどLLMの処理精度は上がります。TSRXはこの知見をコード記述に応用しています。

導入時の注意点

TSRXは現在アルファ版です。APIの破壊的変更が入る可能性があり、プロダクション環境での利用には慎重な判断が必要です。VS Code・Zed・Neovim・IntelliJなど主要エディタ向けの拡張機能は提供されており、開発環境のサポートは整いつつあります。公式のプレイグラウンド（https://tsrx.dev/playground ）でブラウザ上から構文を試せるため、まずはそこから触れてみるのが手軽です。