
2026/09/03 5:34
Vidact — React を直接の DOM 操作に変換するコンパイラ
RSS: https://news.ycombinator.com/rss
要約▶
Japanese Translation:
元の要約は明確、簡潔かつ正確であり、Vidact のアプローチ、制約、パフォーマンス上の利点、およびリスクを曖昧さなく効果的に伝達しています。
要約:
Vidact は、ビルド時に関数コンポーネントを読み込み、高効率な DOM コードを直接生成することで、React アプリケーションのバンドルサイズを劇的に削減することを目的とした革新的なベータ版コンパイラです。従来のように大きなランタイムライブラリに依存するツールとは異なり、Vidact はコンポーネントロジックを実行し、初期マウント時に一度だけ実行させ、以降の更新は特定のテキストノードと属性のみを対象とします。このアプローチにより、ファイルルーティング、サーバーサイドレンダリング、およびハイドレーションを単一の統合されたビルドプロセスに統合し、外部依存関係の必要性を排除します。ただし、この極端な最適化には厳格な要件が伴います。それは、React 19 の文書化されたサブセットのみをサポートし、クラスコンポーネントや
createRef や標準的な DevTools などサポートされていない API を完全に拒絶します。また、React のランタイムに対して事前コンパイルされたパッケージや、React 形ソースコードを使用しないサードパーティ製パッケージのサポートもありません。開発者がこれらの制限を超えたり、禁止されたヘルパーを使用したりした場合、ビルドプロセスはフォールバック機構なしで即座に失敗します。適合するアプリの結果は印象的です。例えば、Counter アプリケーションはわずか 8.0 kB に縮小し、TodoMVC は 11.8 kB を達成しました。強力ではあるものの、ユーザーは Vidiact の特定のルールを厳格に従わなければなりません。これは即座のコンパイルエラーを回避するためであり、標準的な React の柔軟性よりも最小限の重量を優先する人々にとって理想的です。本文
React 19 対応コンパイル済みサブルーセット:Vidact
概要
Vidact は、React 19 の文書化されたサブルーセットをコンパイルするためのツールです。ビルド時に以下の処理を行います。
- 機能制限: React 19 以外の残りの機能は、ビルド時点で無効化されます。
- 実行モデル:
- 関数型コンポーネントを読み込み、それに対応する DOM コードを書き出します。
- コンポーネント本体はマウント時のみ一度実行されます。
- その後の
呼び出しには応答せず、状態に応じたテキストノードや属性の更新のみが行われます。setState
注意: 以下のすべてのコード例は、通常の React で記述されたものが Vidact にコンパイルされ、このページにマウントされています。
パッケージサイズデータは、Gzip 圧縮済みです。
エコシステム:Vidact Start
Vidact の拡張フレームワークとして「Vidact Start」が存在します。これにより以下の機能を追加できます。
- ファイルベースのルート定義
- サーバーサイドロダー
- SSR(サーバーサイドレンダリング)
- ハイドレーション
- クライアント側ナビゲーション
重要な仕組み:
- 同一コンパイラがサーバービルドとブラウザビルドの両方を生成します。
- サーバーから送信するマークアップと、クライアントがハイドレートするための DOM は、どちらもコンポーネントの単一の記述から導出されます。
代表的な実装例
| プロジェクト | 全サイズ (ランタイム含む) | ファイルパス |
|---|---|---|
| カウンターアプリ | 8.0 kB | |
| TodoMVC | 11.8 kB | |
制限事項とエラーハンドリング
Vidact が**サポートしない機能(サブセットに含まれないもの)**は以下の通りです。
- クラス型コンポーネント
createRef
関連のヘルパーの大部分Children- React DevTools
- React ランタイムに対して事前にコンパイルされたサードパーティ製パッケージ(React 型のソースコードではないもの)
エラー処理について
- 無効な機能の使用は静かに無効化されるのではなく、ビルドを即座に停止させます。
- 原因となった行でビルドが中断します。
- 問題の API が明示的に名前付けられてエラーメッセージに表示されます。
- フォールバックパス(React を代わりにロードする手段)は用意されていません。
すべての詳細については、公式ドキュメント をご確認ください。