Vidact — React を直接の DOM 操作に変換するコンパイラ

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
tests/runtime-size/fixtures/counter.tsx
TodoMVC11.8 kB
examples/todomvc/src/TodoApp.tsx

制限事項とエラーハンドリング

Vidact が**サポートしない機能(サブセットに含まれないもの)**は以下の通りです。

  • クラス型コンポーネント
  • createRef
  • Children
    関連のヘルパーの大部分
  • React DevTools
  • React ランタイムに対して事前にコンパイルされたサードパーティ製パッケージ(React 型のソースコードではないもの)

エラー処理について

  • 無効な機能の使用は静かに無効化されるのではなく、ビルドを即座に停止させます。
  • 原因となった行でビルドが中断します。
  • 問題の API が明示的に名前付けられてエラーメッセージに表示されます。
  • フォールバックパス(React を代わりにロードする手段)は用意されていません。

すべての詳細については、公式ドキュメント をご確認ください。

同じ日のほかのニュース

一覧に戻る →

2026/09/07 5:45

Show HN:Mador(80行のProxy State Tuple で、あらゆる DOM をリアクティブにします)

## Japanese Translation: **改善済み。** 元のサマリーは正確ではあったが、開発者がライブラリの安全性と効率性を評価する上で価値のある具体的な行動詳細(`write` を通じたバッチ処理および自動的なクリーンアップ)を見落としており、また重要なポイントで言及されていた MIT ライセンスについても欠けていた。 以下に、これらの欠落している要素を取り入れた改善版を示す: ## 改善されたサマリー Mador.js は、重いフレームワークを採用することなく、複雑なビルド手順も必要とせずにリアクティビティを必要とする開発者向けの軽量な代替手段を提供する。従来のコンポーネントや仮想 DOM に依存するシステムとは異なり、このネイティブ ES モジュールランタイムは、独自の 3 つパートのバインディングパターン(要素の選択、更新関数の定義、ステート依存関係の指定)を用いて、状態を既存の HTML エレメントに直接バインドする。最小限のフットプリント(約 855 バイト)により、依存関係を知的に追跡して変更があった際のみ特定のプロパティを実行し直すことで、高速なパフォーマンスを実現する。状態の更新は `write` メソッドを通じられ、1 つの操作内で複数の変更をバッチ化する。特に重要なのは、Mador が要素が存在しなくなったときにランナーを自動的に削除することで、DOM のライフタイムを管理し、手動でのクリーンアップの必要をなくしている点である。このアプローチにより、npm または CDN を通じて直ちにレガシーコードベースに統合でき、下のレイヤーの DOM 構造を変更することなく、コンポーネントのライフサイクルも管理せずに済む。MIT ライセンスの下でリリースされたこの技術は、ステート管理を必要とするがフルアプリケーションフレームワークのアーキテクチャ的なオーバーヘッドを拒否するインタラクティブなページ機能を作成する際、特に価値があり、クイックプロトタイピングおよび定義された HTML 構造を持つプロジェクトへの動的な振る舞いのシームレスな追加を可能にする。

2026/09/06 20:56

インテリジェント・フライが開く(2025)

## Japanese Translation: 主要な警告は、ユーザーが LinkedIn の投稿作成に大規模言語モデル (LLM) に依存することをやめるべきであるという点にあります。この慣行は本質的に本物性を損なうためです。AI は編集やブレインストーミングの手助けにはなりますが、著者の真の声とは複製できません。その代わり、AI が生成したコンテンツは、過度な絵文字、短すぎる段落、およびダッシュの過剰使用といった不快なスタイルの特徴を示すことがよくあります。これらの明確なパターンにより、読者は投稿が本物の考えを反映したものではなく作りものであることを簡単に検出し、その結果、オーディエンスとの間に乖離が生じ、信頼を失い、完全に関与しなくなります。この批判は、LinkedIn が組み込みの「再書き換え」機能を通じて AI の使用を積極的に推進しているにもかかわらず発生しています。著者が引き続き AI の利便性をオリジナルの内容よりも優先し続ける場合、読者は不信感の高まりからコンテンツをスルーしたり見送ったりする可能性が高まります。したがって、ユーザーは意図したオーディエンスを失い、個人ブランドを損なうリスクに直面し、企業側がこの行動を促進する場合は、業界内の関与低下と信頼喪失を招く可能性があります。

2026/09/06 16:21

Isar Aerospace、2 度目の飛行で軌道到達とペイロード展開に成功

## Japanese Translation: Isar Aerospace は、欧州初の商業エンティティとして衛星を軌道に成功投入し、新たな商業ルートを通じて主権空間アクセスを提供する上で画期的な瞬間を刻みました。この実績は、2026年9月5日にノルウェー・アンドョアで離陸した「Onward and Upward」というミッション(同プログラム第2飛行)において確認されました。このミッションはすべての必要な技術的マイルストーンを実行しました:MaxQ通過、MECO完了およびステージ分離、第2段点火、100kmのカルマン線 crossing、ペイロードフェアリングの抛弃、円形化燃焼、ならびに教育用およびスタートアップ用ペイロードとの成功した分離を実施しました。これらのペイロードは、ESA Boost! の資金提供を受けてドイツ宇宙機関(DLR)の Microlauncher Competition で選定されました。2018年にミュンヘンの近くで設立された Isar は垂直統合を維持しており、小型および中型衛星に対する衛星作成、テスト、打上げサービスのほぼすべての側面を自社工場で行っています。この加速アプローチにより、通常は数十年にわたる開発期間をわずか数年に圧縮しました。展望としては、同社は地球観測や通信において重要な中傾角から高傾角軌道をサポートするためにカナダ・ノヴァスコシア州で新しい打上げ複合施設を建設し、「Spectrum」というロケットファミリー車両を年間最大40発の打ち上げに対応する専用施設で製造することで足跡を拡大しています。これらの進歩は、信頼性の高い欧州打上げサービスを求める商業顧客や機関に対して真の代替手段を提供します。

Vidact — React を直接の DOM 操作に変換するコンパイラ | そっか~ニュース