
2026/09/03 5:34
Vidact:React を直接の DOM 操作に変換するコンパイラ
RSS: https://news.ycombinator.com/rss
要約▶
Japanese Translation:
Vidact は、React 19 の特定のサブセットをビルド時に純粋な Vanilla JavaScript にコンパイルすることを目的とした画期的なツールです。これはアプリケーション実行時における標準的な React ランタイムの必要性を効果的に排除します。関数型コンポーネントを直接 DOM コードに変換することで、Counter アプリでは 8.0 kB、TodoMVC では 11.8 kB という極めて圧縮されたランタイムサイズを実現しており、その効率性は顕著です。このアプローチはプレコンパイルされたコードの配信によって重いライブラリの使用を回避しフットプリントを大幅に削減しますが、クラス型コンポーネント、
createRef、ほとんどの Children ヘルパー、React DevTools といったサポート対象の機能への厳格な準拠を要求します。また、従来の React ランタイムを期待するサードパーティ製パッケージは明示的に除外されます。さらに、マウント後に状態を設定する行為も制限され、テキストノードと属性からの読み取りのみが許可されています。本ツールは「Vidact Start」と呼ばれる環境も提供しており、単一のコンパイラ記述からファイルベースのルート、サーバーサイドレンダリング(SSR)、ハイドレーション、クライアント側ナビゲーション、そしてサーバーローダーをすべてサポートします。したがって、未サポートの機能を利用しようとするユーザーは即座にコンパイルエラーが発生し、標準的な React を読み込むためのフォールバックメカニズムが存在しません。現在ベータ版で一般的なユースケースに対して実績のある指標が示されていますが、Vidact の採用には、開発者が標準的なパターンを代替可能な互換性のある実装に置き換えるという移行経路へのコミットメントが必要であり、このことで上記の顕著なサイズおよびパフォーマンス上の利点を享受できることになります。本文
Vidact: React 19 サブセットへのコンパイルと最適化
Vidact はバニラ JavaScript に React コンポーネントをコンパイルするツール です。ビルド時に関数型コンポーネントを読み取り、それに対応する DOM コードを生成します。
主な特徴と動作原理
- マウント時の実行: コンポーネント本体は マウント時のみ一度実行 されます。
- その後の
呼び出しにより、状態を参照しているテキストノードや属性のみが更新されます(※ベータ版機能)。setState
- その後の
- サポート範囲:
- 文書化された React 19 の一部サブセットのみをサポートしています。
- サポートされていない機能は、ビルド時にコンパイルが拒否されます。
- React ランタイムに対して事前にコンパイルされたパッケージ(ソースコードそのもの)は含まれません。
- エラーハンドリング:
- 制限された API を使用した場合、フォールバック経路(React の読み込み)はありません。
- コンパイラはビルドを停止し、問題の原因となった API を明示的に名前付けて報告 します(静かに動作が低下することはありません)。
実装サイズとパフォーマンス
以下のすべての例は、Vidact でコンパイルされ、このページにマウントされた通常の React です。サイズは gzip 圧縮済み です。
- 8.0 KB: カウンターアプリ(ランタイムを含む)
- ファイル:
tests/runtime-size/fixtures/counter.tsx
- ファイル:
- 11.8 KB: TodoMVC(ランタイムを含む)
- ファイル:
examples/todomvc/src/TodoApp.tsx
- ファイル:
非同期データロードと SSR
Vidact Start はファイルベースのルート、サーバーサイドローダー、SSR、ハイドレーション、クライアント側ナビゲーションを提供します。同一コンパイラがサーバービルドとブラウザビルドの両方を生成するため、サーバーから送信されるマークアップとクライアントでハイドレーションする DOM の双方は、1 つのコンポーネント記述から由来します。
実装例:製品ページでの非同期ロード
import { defineFileRoute } from '@vidact/start' // ローダー関数(サーバーサイドで実行) const loader = async ({ params }) => ({ product: await findProduct(params.productId), // 非同期データ取得 }) // コンポーネント本体 export function ProductRoute({ loaderData }) { return <h1>{loaderData.product.name}</h1> } // ルートの定義(サーバーとクライアントに共通) export const Route = defineFileRoute({ loader, component: ProductRoute, })
サポートされず、ビルドが停止する機能
以下の機能は Vidact のサブセットに含まれません。これらを使用するとビルドが失敗します。
- クラス型コンポーネント
APIcreateRef- Children ヘルパーの大部分
- React DevTools
- React ランタイムに対して事前にコンパイルされたパッケージ(ソースコード非同期)
詳細な API 対応状況と状態については、公式ドキュメント をご覧ください。