Preactという選択肢

Reactが事実上のフロントエンド標準として君臨して久しい。State of JavaScript 2024によると、Reactは主要JavaScriptフレームワークの中で42.62%という圧倒的なシェアを持ち、世界で1100万以上のウェブサイトが採用しているとされる。週あたりのnpmダウンロード数は2200万回を超える。

にもかかわらず、ここ数年、大手サービスがReactではなくPreactを選ぶケースが増えてきている。Uber、Financial Times、The New York Times、Lyft、Groupon、Etsy、Adyen、Tencent QQ……Preact公式サイトの採用企業リストを眺めると、そのラインナップに少し驚かされる。

これは何を意味するのか。

Preactとはなにか

PreactはJason Millerが作ったReactの軽量代替ライブラリだ。ひとことで表すなら「Reactとほぼ同じAPIで、サイズは約1/10以下」。gzip圧縮後のバンドルサイズはわずか3KB。Reactが同条件で約40KB（依存込みの本番ビルドだと150KB超になることも）なのと比較すると、差は歴然としている。

ReactをSUVだとすれば、Preactは軽量スポーツカーだ——という比喩がよく使われるが、これはかなり的を射ている。フル装備で重くなったReactに対し、「必要最小限で速く走ること」を設計思想の中心に置いたのがPreactだ。

JSX、関数コンポーネント、useStateやuseEffectなどのフック、Context API——Reactで書いたコードの大半がPreactでそのまま動く。preact/compatというパッケージを使えば、既存のReactコードをほぼ変更なしにPreactに移行できる互換レイヤーも用意されている。

作者のJason Millerは後にGoogleのChrome DevRelチームに加わり、現在はShopifyに在籍しながら開発を続けている。LinkedInの経歴には「Preactはフロントエンドフレームワーク第4位であり、全世界のウェブサイトの2%で使われている。Google、IKEA、Microsoft、Disney、The New York Times、Groupon、Algolia、Tencentなどが採用」と記している。

なぜ大手企業がPreactを選ぶのか

① バンドルサイズとCore Web Vitalsの関係

Googleが2021年から検索ランキングの指標として本格採用したCore Web Vitalsが、フロントエンド選択に与えた影響は大きい。LCP（Largest Contentful Paint）、FID（First Input Delay）、CLS（Cumulative Layout Shift）といった指標は、JavaScriptのバンドルサイズに直結する。

Reactのような大きなフレームワークは、ユーザーのブラウザがコンテンツを表示できるようになるまでの時間（Time to Interactive）を押し上げる。特に低速なモバイル回線や廉価なデバイスでは、この差が体験に直接響く。

Preactの3KBというフットプリントは、この問題への一つの回答だ。ダウンロード・パース・実行するJavaScriptが圧倒的に少ないため、初期表示が速くなり、Lighthouseスコアやセマンティック検索でのパフォーマンスが改善しやすい。

② モバイルファーストと新興市場

Uberが好例だ。m.uber（「ムーバー」と読む）——モバイル向けの軽量ウェブアプリ——を構築する際、Uberのエンジニアチームは意識的にReactを外し、Preactを採用した。公式ブログには「サイズの観点からReact（45KB gzip）ではなくPreact（3KB gzip）を選んだ」と明記されている。最終的なアプリ全体をgzip圧縮で50KBに収めることに成功し、2G回線でも快適に動作するアプリを実現した。

低速ネットワーク・低スペックデバイスが主流の新興市場（インド、東南アジア、アフリカなど）でサービスを展開しようとすれば、バンドルサイズの削減は生存戦略に近い。インドのホテルチェーンTreeboがReactからPreactに切り替えた際、Time to Interactiveが**15%**改善したと報告している。70%以上のFirst Paint改善、31%のTime to Interactive改善という全体数字の中で、Preactへの移行単体でこれだけの効果が出た。

LyftやHousing.comなども同様の理由でPreactをPWA（Progressive Web App）に採用している。

③ フィナンシャル・メディア系の採用

Financial TimesとThe New York TimesがPreactを採用していることは特筆に値する。どちらも大量のトラフィックを抱え、SEOと表示速度が直接ビジネスに影響するメディアだ。

Financial Timesは長年にわたってウェブパフォーマンスに積極的に投資してきた企業として知られており、Preact採用はその流れの中にある。The New York Timesはインタラクティブなコンテンツ機能にPreactを活用している。

④ Deno FreshとエコシステムへのPreact統合

最近の大きなトピックとして、Denoの公式WebフレームワークFreshがPreactをデフォルトのレンダリングエンジンに採用したことがある。FreshはNext.jsのようなファイルベースルーティングとSSR（サーバーサイドレンダリング）を提供するが、デフォルトでクライアントにJavaScriptをゼロ配信するという設計思想が特徴だ。

Freshのアーキテクチャは「アイランドアーキテクチャ」と呼ばれる。ページ全体はサーバーでPreactコンポーネントとしてレンダリングされ、インタラクティブが必要な部分（「島」）だけが明示的にクライアントにハイドレーションされる。Reactを使えばクライアントに数十〜数百KBのJSが飛んでいくところを、Preact＋アイランドアーキテクチャなら必要最小限に抑えられる。Deno公式がこの組み合わせを選んだことは、Preactの軽量哲学への大きなお墨付きともいえる。

⑤ 決済・FinTech系の採用

Adyen（オランダ発の世界的決済プラットフォーム）もPreactの採用企業に名を連ねる。決済フローのUIは「速くて確実」が命題であり、重いフレームワークは不要だ。Adyenのような決済基盤にとって、Preactの軽量性と信頼性は合理的な選択肢に映る。

HashiCorp（TerraformやVaultで知られるインフラソフトウェア企業）もPreactユーザーだ。開発者向けのダッシュボードやドキュメントサイトなど、パフォーマンスを重視した部分にPreactを活用している。

Preactにできないこと

正直に書いておく。Preactは万能ではない。

Reactが近年リリースしたReact Server Components、高度なSuspenseパターン、並行レンダリングAPIといった最新機能はPreactには存在しない。Reactが「アーキテクチャレベルでのパフォーマンス改善」に投資してきた成果は大きく、React Server Componentsはバンドルサイズの問題をフレームワーク側で解決するアプローチを取っている。

また、大規模なエンタープライズアプリで複雑な状態管理が必要な場合、Reactの成熟したエコシステム（Next.js、Redux、Remixなど）の恩恵は無視できない。State of JavaScript 2024では、Preactへの学習意欲は2023年の34%から2024年には24%に低下しており、Reactの進化によって「Preactに乗り換える動機」が減っている面もある。

ReactとPreactの使い分け

実態として、大手企業はReactとPreactを二項対立ではなく使い分けとして捉えている。Uberは社内の大規模なSPAにはReact＋Fusion.jsを使い、グローバル向けの軽量モバイルアプリにはPreactを選んだ。どちらか一方に統一するのではなく、要件に応じて使い分けるという発想だ。

おおよその判断基準をまとめると：

Preactが向いているケース

• バンドルサイズを最小限に抑えたい（PWA、組み込みウィジェット）
• 低速ネットワーク・低スペックデバイスをターゲットにしている
• SEOとCore Web Vitalsを最優先したいページ
• マイクロフロントエンド的な部分導入

Reactが向いているケース

• 複雑な状態管理を伴う大規模SPA
• Next.jsやRemixのエコシステムをフル活用したい
• React Server Componentsや最新の並行モードを使いたい
• チームのReact経験が深く、学習コストを最小化したい

Signals：Preactの新しい武器

2022年にPreactチームがリリースしたPreact Signalsは注目に値する。ReactのuseStateやuseContextといった仕組みとは異なる「リアクティブなプリミティブ」で、値が変わったときにDOMを直接更新するため、不要な再レンダリングが発生しない。

import { useSignal } from "@preact/signals";

export default function Counter() {
  const count = useSignal(0);
  return (
    <div>
      <p>Count: {count}</p>
      <button onClick={() => count.value++}>+1</button>
    </div>
  );
}

Signalsはフックよりも速く、より人間が直感的に理解しやすいとされる。Deno Freshはこれをアイランドのデフォルト状態管理として採用しており、「Preact + Signals + アイランドアーキテクチャ」という組み合わせはフロントエンドのパフォーマンス追求において一つの完成形に近づきつつある。

まとめ

Preactはマイナーな実験的ライブラリではない。Uber、Financial Times、The New York Times、Lyft、Etsy、Adyen、Groupon、Tencent QQ、HashiCorpといった企業が本番環境で使っているプロダクショングレードの選択肢だ。Deno Freshが採用したことで、エッジコンピューティング時代のウェブフレームワークにも確実に存在感を持つようになった。

Reactの進化によって「Preactに移行する理由」が薄れている面はある。しかし、「速さをデフォルトにする」という思想は普遍的なものだ。バンドルサイズが3KBか150KBかは、2G回線でUberを呼ぼうとしているインドのユーザーにとって、乗れるか乗れないかの差になりうる。

Reactが支配するフロントエンドの世界で、Preactは「小さいことは、速いことだ」を静かに証明し続けている。

追記（2026年5月）

Preactのテストを兼ねて、占い（ジョーク）Webアプリを作りました。

https://fortune.drazone.com/