12k
All articles

Rspress: Rustで駆動するサイトジェネレーターのご紹介

RspressはRspackを使用してReactとMDXのドキュメントサイトを構築し、高速ビルド、カスタマイズ可能なテーマ、AIツール向けの静的Markdown出力を提供する。

OpenReplay Team
OpenReplay Team
Rspress: Rustで駆動するサイトジェネレーターのご紹介

Reactコンポーネントライブラリや開発者向けプロジェクトを運用している方なら、おそらく同じトレードオフに悩まされた経験があるでしょう。ドキュメントツールは、高速だが機能が限定的か、柔軟だが動作が遅いかのどちらかです。Rspressは、このギャップを埋めるために構築されました。

重要なポイント

  • RspressはRspackのRustビルドツールチェーンを採用したReactベースの静的サイトジェネレーターで、完全なMDXサポートと高速ビルドを実現します。
  • バージョン2.0では、階層化されたテーマシステム、Shikiによるビルド時シンタックスハイライト、デフォルトでの遅延コンパイル、SSG-MDによるAIフレンドリーなMarkdown出力が導入されました。
  • すべてのコアパッケージは@rspress/coreに統合され、Node.js 20+およびReact 18または19が必要です。
  • RspressはReact中心のドキュメントおよびコンポーネントライブラリサイトに最適です。VueやSvelteプロジェクトの場合は、VitePressやDocusaurusの方が適している可能性があります。

Rspressとは?

Rspressは、Rsbuild上に構築され、Rspackバンドラーを採用したReactドキュメントジェネレーターおよび静的サイトジェネレーターです。RspackはRustベースのwebpack互換バンドラーです。正確に言えば、Rspress自体はReactフレームワークであり、Rustアプリケーションではありません。パフォーマンスの向上は、その下層にあるRspackのRust駆動ビルドツールチェーンによるものであり、ドキュメントやコンポーネントは通常通りReactとMDXで記述します。

RspressはRspackを中心に構築された統合JavaScriptツールチェーンであるRstackエコシステムの一部であり、Rsbuild、Rslib、Rsdoctor、Rstestなども含まれています。

Rspressは主に2つのユースケースを対象としています。開発者向けドキュメントサイトとコンポーネントライブラリドキュメントです。MDXを標準でサポートしているため、Markdownページ内に直接ライブReactコンポーネントを埋め込むことができます。これは、文章による説明と並行してインタラクティブな例が必要な場合に便利です。

Rspress 2.0の新機能

2026年初頭にリリースされたRspress 2.0は、単なるビルドパフォーマンスの向上にとどまりません。以下が主な変更点です。

再設計されたテーマシステム

デフォルトテーマは完全にビジュアルが刷新されました。さらに重要なのは、2.0では4つのカスタマイズレベルが導入されたことです。

  • CSS変数 — 色、コードブロックの背景、レイアウトスタイルの調整
  • BEMクラス名 — CSSフレームワークの競合なしにコンポーネントスタイルをオーバーライド
  • ESM再エクスポートオーバーライドtheme/index.tsx経由で任意の組み込みコンポーネントを置き換え
  • コンポーネントイジェクトrspress eject [component]でコンポーネントのソースをプロジェクトにコピーし、直接変更

これにより、1.xの不安定なテーマAPIが置き換えられ、予測可能な階層的カスタマイズパスが提供されます。

ビルド時シンタックスハイライトのためのShiki

Rspress 2.0では、ランタイムハイライトをShikiに置き換え、コンパイル時に実行されます。これにより、ランタイムオーバーヘッドがゼロになり、TextMate文法によるVS Codeスタイルの正確なハイライト、そしてインラインTypeScript型ヒントのための@rspress/plugin-twoslashのようなトランスフォーマーのサポートが実現されます。

遅延コンパイルによる高速な開発起動

lazyCompilationがデフォルトで有効になりました。開発中は訪問したページのみがコンパイルされるため、ドキュメントサイトの規模に関わらず、起動はほぼ瞬時に行われます。リンクホバー時のルートプリロード戦略により、ナビゲーションもシームレスに感じられます。

永続的キャッシュもデフォルトで有効になっており、ウォームスタートのビルド時間を30〜60%削減します。

SSG-MDによるAIフレンドリーなドキュメント

Rspress 2.0では、SSG-MD(Static Site Generation to Markdown)が導入されました。これは、標準のHTML出力と並行してドキュメントをクリーンなMarkdownファイルとしてレンダリングし、llms.txt仕様に従ってllms.txtおよびllms-full.txtファイルを生成する機能です。

import { defineConfig } from '@rspress/core';

export default defineConfig({
  llms: true,
});

HTMLを後からMarkdownに変換するのとは異なり、SSG-MDはレンダリング中にReact仮想DOMから動作するため、より高品質な出力が得られます。import.meta.env.SSG_MDを使用してコンポーネントごとに含める内容を制御することもできます。この機能はまだ成熟段階にあり、チームはロードマップの一部としてさらなる改良を予定しています。

パッケージの統合

2.0では、従来のrspress@rspress/runtime@rspress/shared@rspress/theme-defaultパッケージが単一の@rspress/coreパッケージに統合されました。フレームワークは現在、Node.js 20+およびReact 18または19を必要とします。

Rspressを使用すべきか?

Reactプロジェクトやコンポーネントライブラリのドキュメントを構築していて、高速ビルド、MDXサポート、実際にカスタマイズ可能なテーマが必要な場合、Rspressは最適な選択肢です。コンポーネントライブラリワークフローのためにRslibと直接統合されており、Algolia検索、サイトマップ生成、twoslashを含むプラグインエコシステムは、ほとんどのドキュメントサイトのニーズをカバーしています。

プロジェクトでVueやSvelteを使用している場合、またはより確立されたエコシステムが必要な場合は、VitePressDocusaurusが堅実な代替案として残っています。しかし、React中心のドキュメントには、Rspress 2.0は詳しく検討する価値があります。

よくある質問

ReactドキュメントにおいてRspressとDocusaurusはどう比較されますか?

RspressはRust駆動のRspackバンドラーのおかげでより高速なビルド時間を提供し、遅延コンパイルと永続的キャッシュがデフォルトで搭載されています。Docusaurusはより大規模なプラグインエコシステムと広範なコミュニティを持っています。純粋なビルド速度とRstackとの緊密な統合が最も重要であれば、Rspressがより強力な選択肢です。より成熟したエコシステムを求めるなら、Docusaurusは信頼できます。

既存のRspress 1.xプロジェクトを2.0に移行できますか?

はい、ただしすべてのコアパッケージが@rspress/coreに統合されたため、インポートを更新する必要があります。テーマAPIも変更されているため、1.x APIに対して構築されたカスタムテーマのオーバーライドは、新しい階層的カスタマイズシステムを使用するようにリファクタリングする必要があります。Rspressチームは公式ドキュメントで移行ガイドを提供しています。

RspressはReact以外のフレームワークをサポートしていますか?

いいえ。RspressはReactとMDX専用に設計されています。プロジェクトでVueを使用している場合、VitePressは十分にサポートされた代替案です。Svelteや他のフレームワークの場合は、別の静的サイトジェネレーターを検討する必要があります。Rspressは複数のフレームワークをサポートしようとするのではなく、React中心のドキュメントを優れた形で提供することに焦点を当てています。

SSG-MD機能とは何で、なぜ重要なのですか?

SSG-MDは、標準のHTML出力と並行して、ドキュメントからクリーンなMarkdownファイルを生成します。また、サイトコンテンツを大規模言語モデルがアクセスできるようにするための新しい仕様に従ったllms.txtファイルも生成します。これは、AIツールがドキュメントを正確に参照できるようにしたい場合に便利です。この機能はReact仮想DOMから動作するため、より高品質な出力が得られます。

DevTools for the frontend

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.

Star on GitHub12k

We use cookies to improve your experience. By using our site, you accept cookies.