Rspress 2.0 のリリース：体験と AI に向けた全く新しいアップグレード
Rspress 2.0 のリリース：体験と AI に向けた全く新しいアップグレード
私たちは Rspress 2.0 の正式リリースを発表できることを嬉しく思います！
Rspress は Rsbuild に基づく静的サイトジェネレーターで、開発者向けに設計されたドキュメントサイトツールです。2023 年に正式リリースされて以来、Rspress 1.x は累計 144 バージョン を迭代し、125 人の貢献者 がプロジェクトの開発に参加しました。ますます多くの開発者が Rspress を選び、その効率的なコンパイル性能、約束されたルーティング、コンポーネントライブラリのプレビューなどの機能を活用して、美しく信頼性の高いドキュメントサイトを構築しています。
コミュニティからのフィードバックと提案に基づき、Rspress 2.0 は テーマの美しさ、AIネイティブ、ドキュメント開発体験、Rslib との併用 などの面でさらに進化しました。
なぜ Rspress 2.0 なのか
Rspress 1.x はドキュメントサイトフレームワークのコンパイル性能の問題を解決しましたが、ドキュメント開発ツールとしてのコア体験に影響を与えるいくつかの問題が残っています。2.0 バージョンはコンパイル性能の追求にとどまらず、ドキュメントサイト体験の他の側面にも焦点を当てています：
- テーマスタイル：より美しいデフォルトテーマを提供し、さまざまなカスタムテーマの方法を用意して、1.x でのテーマカスタマイズにおける安定した API の欠如の問題を解決しました。
- AIネイティブ：ドキュメントは人間の読者だけでなく、エージェントにもより良く理解され、使用される必要があります。Rspress は現在、llms.txt の生成と SSG から派生した SSG-MD 機能を内蔵し、エージェントが読み取るための高品質な Markdown レンダリングコンテンツを生成します。
- オンデマンドコンパイル、瞬時の起動：デフォルトで lazyCompilation を有効にし、リンクホバー時のリソースのプリロード機能と組み合わせて、特定のルートにアクセスしたときに必要なファイルを構築し、プロジェクトの規模に関わらず、dev も瞬時に起動できるようにします。
- Shiki コードハイライト：デフォルトで Shiki を統合し、ビルド時に構文ハイライトを完了し、テーマの切り替えやトランスフォーマーの拡張をサポートします。例えば、@rspress/plugin-twoslash を使用して、より豊かなコードブロックの表示効果を提供します。
- ドキュメント開発体験：nav.json、meta.json などのファイルの HMR を最適化し、IDE 内のコードヒント用に新しい json スキーマを追加しました。デフォルトで死リンクチェック機能を有効にし、新しいファイルコードブロック構文を追加して外部ファイルの参照をサポートします。@rspress/plugin-preview と @rspress/plugin-playground を同時に使用できるようにしました。
- Rslib 統合：create-rslib を使用してコンポーネントライブラリプロジェクトを作成する際に、Rspress をドキュメントツールとして選択できるようになり、コンポーネントドキュメントサイトを迅速に構築できます。
2.0 新機能
全く新しいテーマ
2.0 のデフォルトテーマは、チームのデザイナー @Zovn Wei によって全体的にデザインされ、視覚効果と読書体験の両方で大幅な向上を遂げました。また、各コンポーネントは独立して置き換えることができ、高いカスタマイズ性を持っています。
テーマカスタマイズ
カスタマイズの程度に応じて、CSS 変数、BEM クラス名、ESM 再エクスポートのオーバーライド、コンポーネントの eject の 4 つのカスタムテーマ方法があります。- CSS 変数：新しいテーマは、テーマカラー、コードブロック、ホームページなどのスタイルを上書きするためのより多くの CSS 変数を公開しました。CSS 変数ページでインタラクティブにすべての CSS 変数をプレビューおよび調整し、満足のいく設定を見つけたら、直接プロジェクトにコピーして使用できます。
- BEM クラス名：組み込みコンポーネントは現在すべて BEM 命名規則を採用しています。これは非常にオールドスクールな選択ですが、私たちの熟慮の結果でもあります。ユーザーは CSS セレクタを使用してスタイルを正確に調整でき、HTML 構造がより明確になります。
- ESM 再エクスポートの上書き：CSS の変更がカスタマイズのニーズを満たさない場合、JS を使用してより深いカスタマイズが可能です。theme/index.tsx で ESM 再エクスポートを利用することで、任意の Rspress の組み込みコンポーネントを上書きできます。
- コンポーネントの eject：新しい rspress eject [component] コマンドを使用できます。このコマンドは指定したコンポーネントのソースコードを theme/components/ ディレクトリにコピーし、これらのコードを自由に変更できます。AI に直接変更を依頼して、深いカスタマイズを実現することも可能です。
ナビゲーションバー、サイドバー タグ
Rspress 2.0 は Tag コンポーネントを実装し、frontmatter の tag 属性を使用してサイドバーやナビゲーションバーで UI マークアップができるようになりました。
組み込みの多言語サポート
1.x バージョンでは、Rspress は英語のテキストのみを組み込んでいました。他の言語（例えば zh）を使用する場合、すべてのテキストを設定する必要があり、使い勝手が悪かったです。現在の 2.0 テーマには、zh、en、ja、ko、ru などの多くの言語の翻訳テキストが組み込まれており、システムは言語設定に基づいて自動的に "Tree Shaking" を行い、使用するテキストと言語のみをパッケージ化します。
llms.txt サポート
Rspress は現在、llms.txt 生成機能をコアに統合し、新しい SSG-MD（Static Site Generation to Markdown、静的サイト Markdown 生成）機能を実現しました。
React に基づく動的レンダリングのフロントエンドフレームワークでは、静的情報を抽出するのが難しいという問題がしばしばあります。Rspress も同様の課題に直面しています。Rspress は、ユーザーが MDX スニペット、React コンポーネント、Hooks、および TSX ルーティングなどの動的機能を使用してドキュメントの表現力を強化できるようにしています。しかし、これらの動的コンテンツを Markdown テキストに変換する際には、以下の問題が発生します：
- MDX を AI に直接入力すると、大量のコード構文ノイズが含まれ、React コンポーネントの内容が失われます。
- HTML を Markdown に変換すると、効果が悪く、情報の質が保証されません。
この問題を解決するために、Rspress 2.0 は SSG-MD 機能を導入しました。これは新しい機能で、静的サイト生成（SSG）に似ていますが、異なる点は、ページを HTML ファイルではなく Markdown ファイルとしてレンダリングし、llms.txt および llms-full.txt 関連ファイルを生成することです。
Shiki コンパイラによるコードブロックハイライトRspress 2.0 はデフォルトで Shiki を使用してコードハイライトを行います。1.x の prism によるランタイムハイライト方式と比べて、Shiki はコンパイル時にハイライト処理を完了します。
- 様々なテーマスタイルをサポートしており、CSS変数ページでインタラクティブに異なる Shiki テーマを切り替えたりプレビューしたりできます。
- 同時に Shiki はカスタムトランスフォーマーを使用して拡張することも可能で、twoslash などを利用できます。
- 必要に応じてプログラミング言語を導入し、ランタイムオーバーヘッドやパッケージサイズを増加させません。
- TextMate の構文に基づいて、VS Code と一致する正確な構文ハイライトを実現しています。
ビルドパフォーマンスの向上
Rspress 2.0 は Rsbuild と Rspack 2.0 プレビュー版によって駆動されており、デフォルトでオンデマンドコンパイルと永続キャッシュが有効になっています。
オンデマンドコンパイル
デフォルトで dev.lazyCompilation が有効になっており、特定のページにアクセスしたときのみ、そのページがコンパイルされます。これにより、開発の起動速度が大幅に向上し、ミリ秒単位のコールドスタートを実現します。Rspress は同時にルーティングのプリロード戦略を実装しており、リンクにマウスをホバーするとターゲットルートページが事前に読み込まれ、lazyCompilation と組み合わせて損失のない開発体験を実現します。
永続キャッシュ
2.0 ではデフォルトで永続キャッシュが有効になっており、ホットスタート中に前回のコンパイル結果を再利用し、ビルド速度を 30%-60% 向上させます。これは、最初に rspress dev または rspress build を実行した後、以降の起動速度が明らかに向上することを意味します。
ドキュメント開発体験
デフォルトで死リンクチェックを有効
Rspress 2.0 ではデフォルトで死リンクチェック機能が有効になっています。ビルドプロセス中に、ドキュメント内の無効なリンクを自動的に検出し、タイムリーに発見して修正する手助けをします。
ファイルコードブロック
file="./path/to/file" 属性を使用して外部ファイルをコードブロックの内容として参照することができ、サンプルコードを別のファイルに保管して管理できます。
preview のより柔軟な meta 使用法
@rspress/plugin-preview は現在 meta 属性に基づいて使用され、より柔軟になり、ファイルコードブロックと組み合わせて使用することもできます。
Rslib & Rspress
create-rslib を使用してプロジェクトを作成する際、現在 Rspress ツールを選択できるようになりました。これにより、コンポーネントライブラリを開発しながら、コンポーネントの使用説明や API リファレンスを記述するためのドキュメントサイトを迅速に構築し、コンポーネントの効果をリアルタイムでプレビューすることができます。
さらに多くの Rspress 公式プラグイン
Rspress 2.0 では複数の公式プラグインが追加されました：
- @rspress/plugin-algolia：Rspress の内蔵検索を Algolia DocSearch に置き換えることをサポート
- @rspress/plugin-twoslash：TypeScript コードブロックに型ヒントを追加
- @rspress/plugin-llms：SSG および SSG-MD をサポートしていないプロジェクトに llms.txt 生成機能を提供
- @rspress/plugin-sitemap：SEO を最適化するために Sitemap ファイルを自動生成
破壊的変更
Rspress 1.x からの移行
もしあなたが 1.x プロジェクトのユーザーであれば、1.x から 2.0 にアップグレードするための詳細な移行ドキュメントを用意しています。ページ内の「Markdown をコピー」機能を直接使用して、よく使うコーディングエージェント（Claude Code など）に入力して移行を完了させることができます。### Node.js と上流依存関係のバージョン要件
Rspress 2.0 は Node.js バージョン 20+、React バージョン 18+ を要求します。
次のステップ
Rspress 2.0 のリリースは新たな出発点に過ぎません。このリリース後、Rspress は継続的に進化していきます：
- エコシステム統合の推進：Rslib、Rstest とのより深い統合を図り、フロントエンドプロジェクトとコンポーネントライブラリプロジェクトの統合開発体験を提供します。
- AI と文書のより深い統合を探求：スマートQ&A、自動要約など；SSG-MD を改善し、安定性と使いやすさを向上させます。
npm create rspress@latest
