MDNのフロントエンド刷新の裏側：ReactからWeb ComponentsとRspackへの移行

MDNのフロントエンド刷新の裏側：ReactからWeb ComponentsとRspackへの移行

世界中のエンジニアが頼りにする技術ドキュメントサイト「MDN Web Docs」が、フロントエンドのアーキテクチャを根本から作り直した。今回の刷新は単なるデザインの変更ではなく、長年抱えていた技術的な課題を解決するための大規模な再設計となっている。

MDNのチームは、これまで利用していたReactベースのSPA（Single Page Application / シングルページアプリケーション）から脱却し、Web Componentsと独自のサーバーサイドレンダリング（SSR）を組み合わせた新しい仕組みへ移行した。さらに、ビルドツールをWebpackからRust製のRspackに切り替えることで、開発環境の起動時間を2分から2秒へと劇的に短縮している。

なぜMDNのような巨大なサイトがReactを離れ、ネイティブに近い技術を選んだのか。その背景には、ドキュメントサイト特有の課題と、最新のWeb標準技術への信頼があった。この記事では、MDNの新しいフロントエンドがどのような思想で構築されたのか、その詳細を解説する。

なぜMDNはフロントエンドを根本から作り直したのか

MDNのフロントエンド刷新の最大の動機は、旧システム「yari」が抱えていた深刻な技術負債の解消だ。yariはCreate React Appをベースに構築されていたが、MDNのような静的コンテンツが主体のサイトには不向きな部分が多く、場当たり的な修正が積み重なっていた。

React SPAが抱えていた「ラッパー」という限界

旧システムにおいて、Reactアプリは静的なHTMLコンテンツを包む「ラッパー」に過ぎなかった。MDNのドキュメントの大部分はMarkdownから生成された静的なテキストだが、Reactはこのコンテンツの内容を直接把握することができなかった。

そのため、ドキュメント内に「コードのコピーボタン」のようなインタラクティブな要素を追加する場合、Reactの枠組みの外で標準的なDOM API（Document Object Model API / ブラウザがHTMLを操作するための仕組み）を直接操作する必要があった。これにより、サイトの一部はReactで書かれ、別の部分は直接的なDOM操作で書かれるという、管理しにくい二重構造が生まれていた。

複雑化しすぎたビルド設定とCSSの管理

ビルド環境も限界に達していた。Create React Appのデフォルト設定では対応できない要件が増えた結果、設定を「eject（イジェクト / ツールによる自動管理を解除して手動管理に移行すること）」せざるを得なくなり、Webpackの設定が複雑怪奇なものになっていた。

CSSについても、Sass（サス / CSSを効率的に書くための拡張言語）とモダンなCSS変数が混在し、スコープ（影響範囲）の管理が不十分だった。あるコンポーネントのスタイルを変更すると、予期せぬ場所のデザインが崩れるといった問題が頻発していた。また、CSSを適切に分割する仕組みがなかったため、ユーザーは常に巨大なCSSファイルをダウンロードさせられていた。

Web ComponentsとLitがもたらした相互運用の柔軟性

技術負債を解消するための切り札として選ばれたのが、Web Components（ウェブコンポーネント）だ。Web Componentsとは、HTMLの新しいタグを自分で定義できるブラウザ標準の機能だ。MDNチームは、このコンポーネント開発を効率化するために「Lit（リット）」という軽量なライブラリを採用した。

コンテンツ内にインタラクティブ要素を直接埋め込む

Web Componentsの最大の利点は、どんなHTML環境でも「カスタムタグ」として機能することだ。Reactのような特定のフレームワークに依存せず、Markdownから生成されたHTMLの中に <mdn-copy-button> のようなタグを直接配置するだけで動作する。

これにより、ドキュメント本文という「静的な世界」と、UIコンポーネントという「動的な世界」の境界線が消えた。MDNの著者は、複雑なJavaScriptの知識がなくても、特定のタグを記述するだけで高度な機能を記事に追加できるようになった。

Scrimbaの事例で見えた「ネイティブに近い」開発

Web Componentsの有効性を証明したのが、学習プラットフォーム「Scrimba」との連携だ。MDNのカリキュラムページでは、インタラクティブな学習環境を埋め込む必要があった。これをWeb Componentsで実装することで、ユーザーがクリックするまで重い <iframe> を読み込まない、といった制御が非常に簡潔に記述できるようになった。

Litを使用することで、ReactのJSX（JavaScript内にHTML風の構文を書く手法）に近い感覚で開発できつつ、コンパイル不要な標準のJavaScriptとして動作する。これにより、開発のしやすさと実行時のパフォーマンスを両立させた。

SPAを脱却し「アイランド・アーキテクチャ」へ

MDNは今回の刷新で、サイト全体を一つの巨大なアプリとして動かすSPAを完全にやめた。代わりに採用したのが、静的なHTMLをベースにしつつ、必要な部分だけを独立したコンポーネントとして動かす「アイランド・アーキテクチャ」に近い考え方だ。

必要な場所だけで動くWeb Components

新しいMDNでは、ページが読み込まれた後にDOM全体をスキャンし、mdn- で始まるカスタムタグを探す仕組みを導入している。特定のコンポーネントがページ内に存在する場合のみ、そのコンポーネントに必要なJavaScriptを非同期で読み込む。

このアプローチにより、ユーザーは自分が閲覧しているページに関係のないJavaScriptをダウンロードする必要がなくなった。トップページのナビゲーション、検索モーダル、記事内のインタラクティブな例など、それぞれが独立した「島」として機能する。

このデモは、ページ全体のJSを一度に読み込むSPAと、必要な部品だけを読み込む新方式の違いを視覚化したものだ。

Litを活用した独自のサーバーコンポーネント

MDNのチームは、クライアントサイドだけでなくサーバーサイドのレンダリングにもLitの仕組みを応用した。独自の「ServerComponent」クラスを作成し、Node.js上でHTMLを組み立てている。

特筆すべきは、CSSの最適化だ。サーバー側でどのコンポーネントが使われたかを追跡し、そのページに必要なCSSだけを <link> タグとして書き出す。これにより、未使用のスタイルシートが読み込まれることを防ぎ、レンダリングの高速化に成功している。

徹底したパフォーマンス最適化と開発体験の向上

アーキテクチャの変更に加え、MDNは開発ツールやブラウザ互換性の判断基準も刷新した。これにより、エンドユーザーだけでなく、サイトを維持管理するエンジニアの生産性も向上している。

Rspackの採用で起動時間を2分から2秒へ

開発環境の劇的な改善をもたらしたのは、ビルドツール「Rspack」への移行だ。Rspackは、広く使われているWebpackと互換性を持ちながら、コア部分がRust（ラスト / 高速なシステム開発向け言語）で書かれているため、非常に高速に動作する。

以前の環境では、開発サーバーを立ち上げるだけで約2分かかっていた。ちょっとした修正を確認するために数分待つ必要があり、開発者の大きなストレスとなっていた。Rspackの導入により、この待ち時間はわずか2秒にまで短縮された。開発体験の向上は、結果としてサイトの更新頻度や品質の向上に直結する。

Baselineに基づいたモダン機能の積極採用

MDNは「どの技術がどのブラウザで使えるか」を定義する「Baseline（ベースライン）」プロジェクトを推進している。自サイトの開発においても、このBaselineの基準を厳格に適用している。

「Baseline Widely Available（主要ブラウザで広く利用可能）」な技術は積極的に使い、比較的新しい技術についてはポリフィル（古いブラウザで新しい機能をエミュレートするコード）を最小限に抑えつつ、段階的な機能拡張（Progressive Enhancement）として実装している。これにより、最新ブラウザの性能を最大限に引き出しつつ、古い環境でも情報を損なわない設計を実現した。

独自の分析：静的サイトの未来とMDNの選択

今回のMDNの決断は、近年のWeb開発トレンドにおける重要な転換点を示している。一時期、あらゆるサイトをReactなどのSPAで構築するのが正解とされた時期があった。しかし、MDNの事例は「コンテンツ主体のサイトには、HTMLネイティブに近い構成が最適である」という原点回帰の正当性を証明している。

特筆すべきは、Web Componentsという「標準技術」への信頼だ。特定のフレームワークの流行り廃りに左右されず、ブラウザが直接理解できる形式でコンポーネントを構築することは、MDNのような「Webの辞書」としての永続性が求められるサイトにとって、最も合理的な選択と言える。

また、RspackのようなRust製ツールの台頭も無視できない。JavaScriptで書かれたツールチェーンの限界を、低レイヤーの言語で書かれたツールが打破していく流れは、今後さらに加速するだろう。MDNの刷新は、最新のWeb標準と高速なビルドツールが組み合わさることで、いかに強力なプラットフォームが構築できるかを示す、最高の手本となっている。

この記事のポイント

• MDNはReact SPAからWeb Componentsベースの新アーキテクチャへ移行した。
• Litを採用し、静的なMarkdownコンテンツ内に動的な要素を直接埋め込める柔軟性を確保した。
• アイランド・アーキテクチャにより、必要なJavaScriptだけを非同期で読み込む高速な表示を実現した。
• Rspackの導入により、開発環境の起動時間を2分から2秒へと劇的に短縮した。
• Baseline基準を採用し、モダンなWeb標準技術を最大限に活用しつつ互換性を維持している。

海田 洋祐

・ 複数業界における17年間のデジタルビジネス開発経験
・ ウェブサイト開発のためのHTML、PHP、CSS、Java等の実用的知識
・ 15ヶ国語対応の多言語SaaSの開発経験
・ 17年間にも及ぶ、Eコマース長期運営経験
・ 幅広い業界でのSEO最適化の豊富な経験