OctaneはReactの書き味をDOMコードへ変える
プロジェクト概要：React のプログラミング モデル、コンパイル済み。インフェルノの後継モデルであり、パフォーマンス第一の目標を掲げています。
ひと目でわかる
- これは何？
- octanejs/octaneはInfernoの後継として、React APIで書いたコンポーネントをコンパイルし、仮想DOMなしで動かすTypeScript製の実験的フレームワークです。
- 誰に向いている？
- Octaneは、Reactに近い記述を保ちながら、コンパイラがDOM更新や依存関係を組み立てる方向を試したいチーム向けです。TSXの移行しやすさ、TSRXの制御構文、ストリーミングSSRは魅力ですが、プロジェクトはアルファ段階でAPI変更の可能性があります。
- 商用利用できる？
- できます。MIT は寛容なライセンスで、著作権表示とライセンス表示を残せば、使用・改変・販売が可能です。
- 今もメンテナンスされている？
- されています。直近 1 日以内に新しいコミットがあります。
- 何の言語で書かれている？
- 主に TypeScript です（GitHub の言語統計による）。
回答はプロジェクトの GitHub データ（最終同期：2026年9月15日）と当サイトの分析に基づくもので、法的助言ではありません。
オープンソース詳細解説
仮想DOMを出荷せずコンパイルする設計
OctaneはInfernoの後継として、ReactのプログラミングモデルをコンパイルするJavaScript UIフレームワークです。開発者はReact APIでコンポーネントを書き、コンパイラが出荷前に直接DOMコードへ変換します。READMEの主張は、仮想DOM、フックの順序管理、手作業での依存配列を中心に据えないことです。ランタイムとコンパイラはoctaneパッケージにあり、Viteやバンドラー向けのアダプターも用意されています。
メタデータ上はTypeScript、MITライセンス、mainブランチです。素材時点では1,338スター、48フォーク、17件のオープンイシュー、octane@0.1.49などのリリースが記録されています。数値はプロジェクトの状態を読む材料であり、既存Reactアプリがそのまま移行できる証明ではありません。
TSXを残しつつTSRXを選べる
標準の.tsxはReactで使うJSXに近く、既存の説明やコンポーネントを持ち込みやすい入口です。もう一つの.tsrxはJSXの後継として説明され、@if、@for、@switch、@tryというテンプレートディレクティブを持ちます。これらはキー付きの高速経路へコンパイルされ、@{ }の短縮記法で出力の近くにセットアップを置けます。
TSXとTSRXは同じアプリで混在させ、境界を越えてインポートできます。VS Code拡張はTSRXの構文強調、診断、移動、補完を担当します。導入時は一方を全面採用する必要はありません。既存のReact風コードをTSXで試し、条件分岐や反復をTSRXへ寄せたときに、読みやすさとコンパイル結果を比較するのが分かりやすい進め方です。
フックの依存配列をコンパイラに渡す
useEffect、useMemo、useCallbackなどでは、依存配列を省略してもコンパイラがクロージャの捕捉内容から依存関係を導出するとREADMEは説明しています。安定したsetter、dispatcher、ref、状態getterも対象です。明示的な配列を書けばReactと同じ動作を選べます。開発者が配列の更新を忘れる種類の不具合を減らす方向ですが、導出の結果を理解するには生成コードや実行時の挙動を確認しなければなりません。
フックは呼び出し順ではなく呼び出しサイトで追跡されるため、ifの内側や早期returnの後にも置けます。ただし通常のJavaScriptループ内のフックは、同じ呼び出しサイト枠を共有するためコンパイルエラーになります。繰り返し処理にはキー付きの@forを使うという境界が明確です。
ブラウザの仕組みに寄せたランタイム
Octaneは合成イベントを再実装せず、委任されたDOMイベント、ネイティブイベント上の制御フォーム、通常のpropsとしてのrefを使います。refはコールバック、オブジェクト、両者の配列にできます。クラスコンポーネント、Server Components、合成イベント層を意図的に対象外とし、プラットフォームの機能を直接使う設計です。
この方針は、ブラウザの挙動を知っているチームには理解しやすい一方、Reactの周辺ライブラリが暗黙に期待するレイヤーをそのまま持ち込めるとは限りません。フォーム、イベント伝播、ref、外部UIライブラリを実アプリで確認し、対応するAPIと除外された機能を一覧化してから依存関係を移すべきです。
状態、Promise、ハイドレーションの拡張
READMEはReactの書き味を越える機能としてuseLinkedStateを挙げています。入力変更時に、エフェクトやレンダー中の状態更新なしでローカル状態を調整またはリセットできます。レンダー中のPromiseはcacheラッパーなしで安全に扱え、use()へ渡す作成は宣言時にメモ化されます。独立したリクエストを一緒に開始し、親がsuspendしている間に子孫の取得を先に進める構成も記載されています。
ストリーミングSSRとバイト安定ハイドレーションは、NodeまたはWeb Streamsの順不同なSuspenseフラッシュを扱い、必要ならバッファリングや静的レンダリングへ切り替えます。Hydrateによる遅延ハイドレーションは、サーバーHTMLを表示したまま非アクティブで保持し、起動まで待ちます。便利な機能ほど、失敗時のHTML、再取得、ブラウザ差分を実測する必要があります。
Viteから始める二つのアプリ形態
公開パッケージはNode.js 22.22.2以降を必要とします。npm create octane my-appで雛形を作り、npm run devで起動できます。spaテンプレートはクライアント専用、fullstackテンプレートはルーティング、ストリーミングSSR、ハイドレーション、本番ビルドを加えます。既存プロジェクトはpnpm dlx @octanejs/cli initでTypeScript設定とツールを整え、octaneと@octanejs/vite-pluginを手動登録する道もあります。
RspackとRsbuildもサポート対象として挙げられていますが、各ビルド経路の細部は個別に確認する必要があります。導入検証では、開発サーバーだけで判断せず、SPAとfullstackそれぞれで生成物、SSR、クライアント復帰、環境変数、デプロイ先のNode条件を分けて記録します。
アルファ段階を前提に採否を決める
Octaneはアルファ段階です。ランタイム、コンパイラ、SSRとハイドレーションの経路は動作するとREADMEにありますが、APIは変更される可能性があります。コアスイートには適合性、差分、ハイドレーション、ランタイム、コンパイラ、SSRをまたぐ3,900以上の異なる動作テストがあり、octane-prodは本番コンパイラ経路で同じスイートを再実行します。
この数は品質保証の代替ではなく、React由来のテストがすべて移植済みという主張でもありません。パリティレポートとカバレッジ台帳が追う範囲を確認し、ライブラリ境界、SSR、フォーム、ルーティングを自分の受け入れ条件へ落とします。MITライセンスは利用、変更、配布を許可しますが、アルファ段階の保守リスクまでは消しません。
編集部の結論
Octaneは、Reactに近い記述を保ちながら、コンパイラがDOM更新や依存関係を組み立てる方向を試したいチーム向けです。TSXの移行しやすさ、TSRXの制御構文、ストリーミングSSRは魅力ですが、プロジェクトはアルファ段階でAPI変更の可能性があります。採用前に実アプリのフック、フォーム、SSR、ハイドレーション、ビルド環境を対象に、現在のリリースで移行コストを測ってください。
コミュニティノート