VitePressとは？

VitePressは、高速でコンテンツ中心のウェブサイトを構築するために設計された静的サイトジェネレーター(SSG)です。簡単に言うと、VitePressはMarkdownで記述されたソースコンテンツを取得し、テーマを適用して、どこにでも簡単にデプロイできる静的なHTMLページを生成します。

すぐに試してみたいですか？クイックスタートに進んでください。

ユースケース

• ドキュメント

  VitePressには、技術ドキュメント用に設計されたデフォルトテーマが付属しています。現在お読みになっているこのページや、Vite、Rollup、Pinia、VueUse、Vitest、D3、UnoCSS、Iconify、そしてその他多数のドキュメントでも使用されています。

  公式Vue.jsドキュメントもVitePressに基づいていますが、複数言語の翻訳間で共有されるカスタムテーマを使用しています。

• ブログ、ポートフォリオ、マーケティングサイト

  VitePressは完全にカスタマイズ可能なテーマをサポートしており、標準的なVite + Vueアプリケーションの開発エクスペリエンスを提供します。Vite上に構築されているため、豊富なエコシステムを持つViteプラグインを直接活用できます。さらに、VitePressは、データ（ローカルまたはリモート）を読み込み、動的にルートを生成するための柔軟なAPIを提供します。ビルド時にデータが決定できる限り、ほぼ何でも構築できます。

  公式のVue.jsブログは、ローカルコンテンツに基づいてインデックスページを生成するシンプルなブログです。

開発者エクスペリエンス

VitePressは、Markdownコンテンツを扱う際の優れた開発者エクスペリエンス（DX）を提供することを目指しています。

• Vite搭載： インスタントサーバー起動、編集内容はページのリロードなしですぐに反映されます（<100ms）。

• 組み込みMarkdown拡張機能：フロントマター、表、構文の強調表示など、何でも揃っています。特に、VitePressはコードブロックを扱うための多くの高度な機能を提供しており、高度な技術ドキュメントに最適です。

• Vue強化Markdown：各Markdownページは、VueテンプレートのHTMLとの100％の構文互換性のおかげで、Vueシングルファイルコンポーネントでもあります。Vueテンプレート機能またはインポートされたVueコンポーネントを使用して、静的コンテンツにインタラクティブ性を埋め込むことができます。

パフォーマンス

ナビゲーションごとに完全なページのリロードが発生する多くの従来のSSGとは異なり、VitePressによって生成されたウェブサイトは、最初の訪問時には静的なHTMLを提供しますが、サイト内の後続のナビゲーションではシングルページアプリケーション(SPA)になります。このモデルは、パフォーマンスの最適なバランスを提供すると考えています。

• 高速な初回読み込み

  任意のページへの最初の訪問では、静的に事前にレンダリングされたHTMLが提供されるため、読み込み速度が速く、SEOが最適化されます。その後、ページはJavaScriptバンドルを読み込み、ページをVue SPA（「ハイドレーション」）に変換します。SPAのハイドレーションは遅いという一般的な認識とは逆に、このプロセスはVue 3の生の性能とコンパイラの最適化のおかげで非常に高速です。PageSpeed Insightsでは、典型的なVitePressサイトは、低スペックのモバイルデバイスでも遅いネットワークでも、ほぼ完璧なパフォーマンススコアを実現しています。

• 高速な読み込み後のナビゲーション

  さらに重要なのは、SPAモデルは初回読み込み後のユーザーエクスペリエンスを向上させることです。サイト内の後続のナビゲーションでは、完全なページのリロードは行われなくなります。代わりに、受信ページのコンテンツがフェッチされ、動的に更新されます。VitePressは、ビューポート内にあるリンクのページチャンクを自動的に事前フェッチします。ほとんどの場合、読み込み後のナビゲーションは瞬時に行われます。

• ペナルティのないインタラクティビティ

  静的なMarkdown内に埋め込まれた動的なVue部分をハイドレートできるように、各MarkdownページはVueコンポーネントとして処理され、JavaScriptにコンパイルされます。これは非効率的に聞こえるかもしれませんが、Vueコンパイラは静的および動的部分を分離して、ハイドレーションコストとペイロードサイズを最小限に抑えるのに十分なほどスマートです。最初のページ読み込みでは、静的部分はJavaScriptペイロードから自動的に削除され、ハイドレーション中にスキップされます。

VuePressはどうですか？

VitePressはVuePressの後継です。元のVuePressはVue 2とwebpackに基づいていました。Vue 3とViteを使用することで、VitePressは大幅に改善されたDX、優れた本番パフォーマンス、より洗練されたデフォルトテーマ、より柔軟なカスタマイズAPIを提供します。

VitePressとVuePressのAPIの違いは、主にテーマとカスタマイズにあります。デフォルトテーマを使用してVuePress 1を使用している場合、VitePressへの移行は比較的簡単です。

VuePress 2にも投資が行われ、Vue 3とViteをサポートし、VuePress 1との互換性も向上しています。しかし、2つのSSGを並行して維持することは持続可能ではないため、Vueチームは長期的にVitePressを主要な推奨SSGとして重視することにしました。