Back

2026年のPreactの新機能

OpenReplay Team OpenReplay Team

Jan 16, 2026 · 3 min read

2026年のPreactの新機能

2026年に本番プロジェクトでPreactを評価している場合、状況は大きく変化しています。重要なセキュリティパッチ、Preact 11ベータ版、そして重要なエコシステムの変更により、意思決定を行う前に把握しておくべき実用的な情報があります。

重要なポイント

  • すべてのPreact 10.xプロジェクトに2026年1月のセキュリティパッチを直ちに適用し、安全でないVNodeインジェクションと潜在的なXSS問題を防止してください。
  • Preact 11ベータ版はHydration 2.0とフック依存関係のObject.isを導入していますが、まだ本番環境には対応していません。
  • 新規プロジェクトではpreact-cliの代わりにViteを使用し、ルーティングにはpreact-routerの代わりにpreact-isoを選択してください。
  • preact/compatレイヤーはほとんどのReactライブラリで動作しますが、use()フックなどのReact 19機能はまだサポートされていません。

2026年1月のセキュリティパッチ

2026年1月、PreactはVNodeコンストラクタの厳密等価性の脆弱性に対処するセキュリティ修正をリリースしました(GitHubの10.26.10 / 10.27.3 / 10.28.2リリースでパッチ適用)。この変更により、Preactによって作成された実際のVNodeインスタンスのみが内部的に受け入れられるようになります。

以前は、特別に細工された単純なオブジェクト(例えばJSON入力から)がVNodeと誤認される可能性があり、エッジケースにおいて安全でないDOMインジェクションやXSS型の攻撃ベクトルを可能にする可能性がありました。Preact 10.xを実行している場合は、直ちに更新してください。この修正は後方互換性があり、コード変更は必要ありません。

Preact 11ベータ版:実際に変更される内容

Preact 11ベータ版は意味のある更新を導入していますが、まだ安定版ではありません。最終リリースが出荷されるまで、本番環境への移行を計画しないでください。

Hydration 2.0

最も重要な変更はHydration 2.0です。以前は、ハイドレーション中にサスペンドするコンポーネントは正確に1つのDOMノードを返す必要がありました。Preact 11はこの制限を削除し、コンポーネントは0個または複数のノードを返すことができるようになりました:

function LazyAnalytics() {
  // Preact 11で有効:nullを返す
  return null
}

function MultipleElements() {
  // Preact 11で有効:複数の子要素を持つフラグメントを返す
  return (
    <>
      <p>First</p>
      <p>Second</p>
    </>
  )
}

これにより、より柔軟なSSRパターンが可能になり、非同期境界のコンポーネント設計が簡素化されます。

フック依存関係の等価性

Preact 11はフック依存関係のチェックを緩い等価性からObject.isに切り替えます。これにより、useEffect、useMemo、useCallbackにおけるNaN比較のエッジケースが修正されます。以前にNaN処理の回避策を実装していた場合、それらの回避策は不要になります。

Ref処理の改善

Preact 11は関数コンポーネントのrefの処理方法を改善し、多くのシナリオで明示的なforwardRefの必要性を減らし、最新のReactの動作により近づけています。正確なAPIサーフェスはベータ版でまだ進化中であるため、ライブラリ作成者は安定版リリースまでこれを暫定的なものとして扱う必要があります。

注意すべき破壊的変更

  • レガシーブラウザサポート(IE11を含む)は完全に廃止されました。
  • defaultProps処理や自動pxサフィックスなどの一部のレガシー動作は、現在preact/compatに限定されています。

2026年のPreactツール:エコシステムの変化

ツールの状況は大幅に変化しました。これらの変化を理解することで、非推奨の基盤上に構築することを防げます。

Viteがpreact-cliに取って代わる

preact-cliは推奨されるスキャフォールディングツールではなくなり、ほぼメンテナンスされていません。新規プロジェクトはPreactプリセットを使用したViteを使用する必要があります。Viteはより高速なビルド、より優れたHMR、そしてアクティブなメンテナンスを提供します。

preact-routerよりpreact-iso

preact-routerは停滞しています。新しいアプリケーションには、preact-isoが推奨されるルーティングソリューションです。より軽量で、アクティブにメンテナンスされており、最新のPreactパターン向けに設計されています。

Signals:オプションの状態管理

Preact Signalsは、ファーストパーティライブラリとしてリアクティブな状態管理を提供します。これはPreactのコアの一部ではなく、明示的にオプトインします。Signalsはきめ細かいリアクティビティには適していますが、一般的なアプリケーションには必須ではありません。

2026年のPreact vs React互換性

preact/compatレイヤーはReactライブラリを実行するための優れたカバレッジを提供しますが、ギャップは残っています。use()フックなどのReact 19機能はまだサポートされていません。プロジェクトが最先端のReact APIに依存している場合は、コミットする前に互換性を確認してください。

ほとんどのReactライブラリ(ルーティング、状態管理、UIコンポーネント)では、preact/compatは確実に動作します。Preact 11ベータ版は、ref処理などの領域で動作互換性を強化することで、これをさらに改善します。

Preactが意味を持つ場合

Preactは、バンドルサイズに制約のある環境では依然として魅力的です。Shopifyの2025-10 APIアップデートでは、厳密な64 KB制限を持つUI拡張機能にPreactを義務付けています。同様の制約は、埋め込みウィジェット、PWA、パフォーマンスが重要なランディングページにも存在します。

バンドルサイズが主要な懸念事項でなく、完全なReact 19互換性が必要な場合は、React自体の方がシンプルかもしれません。

実用的な推奨事項

2026年のPreactアップデートについて、今すぐ実行すべきことは次のとおりです:

  1. すべてのPreact 10.xプロジェクトに2026年1月のセキュリティパッチを適用
  2. 新規プロジェクトのスキャフォールディングにはViteを使用
  3. 新しいアプリケーションのルーティングにはpreact-isoを選択
  4. 本番環境ではPreact 11を待つ—ベータ版を監視しますが、まだ移行しないでください
  5. コミットする前に特定のReact依存関係に対してpreact/compatをテスト

結論

Preactは、サイズに敏感な本番作業にとって依然として堅実な選択肢です。エコシステムは、より明確なツールの推奨事項と改善されたReact互換性により成熟しています。セキュリティパッチを直ちに適用し、新規プロジェクトにはViteとpreact-isoを採用し、Preact 11ベータ版を監視しながら移行を急がないでください。現在の情報により、非推奨のツールを回避し、実際の互換性の境界を理解できます。

よくある質問

はい、既存のpreact-cliプロジェクトをViteに移行できます。Preactプリセットで新しいViteプロジェクトを作成し、ソースファイルをコピーして、ビルドスクリプトを更新します。ほとんどの設定は直接変換されますが、パスエイリアスと環境変数の処理をViteの規約に合わせて調整する必要がある場合があります。

いいえ、Preact Signalsは完全にオプションです。useState、useReducer、またはZustandやReduxなどの外部状態管理ライブラリを引き続き使用できます。Signalsはきめ細かいリアクティビティの利点を提供しますが、複雑さも追加します。採用する前に、アプリケーションがそのレベルの最適化を必要とするかどうかを評価してください。

コミットする前に、開発環境でライブラリをテストしてください。ライブラリをインストールし、reactをpreact/compatにエイリアスするようにバンドラーを設定し、コア機能が動作することを確認します。既知のPreact互換性の問題については、ライブラリのGitHub issuesを確認してください。use()などのReact 19固有のAPIを使用するライブラリは動作しません。

2026年1月のセキュリティパッチを適用したPreact 10.xで新規プロジェクトを開始してください。Preact 11ベータ版は本番環境に対応しておらず、安定版が出れば10.xから11への移行は簡単なはずです。今実績のあるツールで構築することで遅延を回避しながら、後で簡単にアップグレードできる位置に立つことができます。

Gain Debugging Superpowers

Unleash the power of session replay to reproduce bugs, track slowdowns and uncover frustrations in your app. Get complete visibility into your frontend with OpenReplay — the most advanced open-source session replay tool for developers. Check our GitHub repo and join the thousands of developers in our community.

OpenReplay

More articles from OpenReplay Blog