[OSS紹介#44] VitePress：静的サイト構築を効率化する新しい開発ツール

in

この記事について

この記事では、注目のオープンソースソフトウェア（OSS）「VitePress」を紹介します。連載第44回となる今回は、静的サイトジェネレーターとしての特性を持つVitePressが、どのように開発者やコンテンツ制作者の作業効率を向上させるのかに焦点を当てます。

VitePressは、Vue.jsとViteを基盤とした静的サイト生成ツールであり、VuePressの後継として多くの機能改善が施されています。近年、ウェブサイトやドキュメントの制作において、柔軟性・高速性・再利用性が求められるようになってきました。その中でVitePressは、シンプルな構成と直感的なマークダウン記法を用いることで、ユーザーが素早くコンテンツを作成し、展開することを可能にします。

この記事では、VitePressの使い方や特徴、特に他のOSSと比較した際の利点について詳しく掘り下げていきます。これにより、開発者やライターにとってのVitePressの価値や、今後のOSSの活用方法についての理解を深めることができるでしょう。

リンク：https://github.com/vuejs/vitepress

本コンテンツは、弊社AI開発ツール「IXV」を用いたOSSツール紹介です。情報の正確性には努めておりますが、内容に誤りが含まれる可能性がございますのでご了承ください。

1. VitePressでできること

VitePress は、Vue.js を基盤とした静的サイトジェネレーターであり、特にドキュメントやブログの作成に適しています。VuePressの後継として開発され、より高速で現代的な開発体験を提供します。以下の機能を提供します。

1.1 高速なビルドとホットリロード

Vite を利用しており、ビルド速度が非常に速く、開発中のホットリロード機能により、変更が即座に反映されます（100ms以内）。これにより、開発時の生産性が大幅に向上します。

1.2 Markdown サポート

Markdown 形式でコンテンツを記述できるため、シンプルで直感的に文書を作成することが可能です。また、フロントマター、テーブル、シンタックスハイライトなどの拡張機能を用いて Markdown のカスタマイズも行えます。

1.3 Vue コンポーネントの活用

各 Markdown ページは Vue Single-File Component として処理されるため、MarkdownファイルにVueコンポーネントを直接埋め込むことができます。これにより、動的でインタラクティブなドキュメントの作成が可能です。

1.4 テーマのカスタマイズ

VitePress では、デフォルトのテーマを基にしたカスタマイズが可能で、独自のスタイルやレイアウトを適用することができます。また、完全にカスタムなテーマの作成も対応しています。

1.5 SPA的な動作

初回アクセス時は静的HTMLを提供し、その後のナビゲーションはSingle Page Application（SPA）として動作します。これにより、高速な初期読み込みと優れたユーザー体験を両立しています。

1.6 プラグインのサポート

Viteプラグインの豊富なエコシステムを活用でき、さまざまなプラグインを追加することで、機能を拡張し、ニーズに応じたサイトを構築できます。

2. セットアップ手順

VitePressを使用するためのセットアップは簡単です。以下の手順に従ってください。

2.1 環境要件

  • Node.js（バージョン 18 以上）
  • npm、yarn、または pnpm

2.2 プロジェクトの作成とセットアップウィザード

VitePressは専用のセットアップウィザードを提供しており、簡単にプロジェクトを作成できます。

# プロジェクトディレクトリを作成
mkdir my-vitepress-site
cd my-vitepress-site

# VitePressをインストール
npm install vitepress

# セットアップウィザードを実行
npx vitepress init

セットアップウィザードが以下のような質問をするので、適宜回答してください：

┌ Welcome to VitePress!
│ ◇ Where should VitePress initialize the config?
│ ./docs
│ ◇ Site title:
│ My Awesome Project
│ ◇ Site description:
│ A VitePress Site
│ ◇ Theme:
│ Default Theme
│ ◇ Use TypeScript for config and theme files?
│ Yes
│ ◇ Add VitePress npm scripts to package.json?
│ Yes
└ Done!

2.3 ファイル構造

セットアップ完了後、以下のようなディレクトリ構造が作成されます：

my-vitepress-site/
├─ docs/
│  ├─ .vitepress/
│  │  └─ config.js
│  ├─ api-examples.md
│  ├─ markdown-examples.md
│  └─ index.md
└─ package.json

2.4 サイトを起動

サイトをローカルで起動するには次のコマンドを実行します：

npm run docs:dev

ブラウザでhttp://localhost:5173にアクセスし、作成したサイトを確認します。

2.5 ライセンス

VitePressはMITライセンスの下で配布されており、自由に使用、改変が可能です。

3. 簡単な使い方

VitePress を使ってドキュメントを作成する際の基本的な流れは以下の通りです。

3.1 ページの作成

新しいページを作成するには、docsフォルダ内に新しい Markdown ファイルを追加します。例えば、about.mdというファイルを作成し、以下の内容を記述します：

---
title: このサイトについて
description: VitePressについての説明ページ
---

# このサイトについて

このサイトは VitePress を使用して構築されています。

3.2 ナビゲーションの設定

docs/.vitepress/config.jsファイルでナビゲーションメニューを設定します：

export default {
  title: "My VitePress Site",
  description: "A VitePress Site",
  themeConfig: {
    nav: [
      { text: "ホーム", link: "/" },
      { text: "このサイトについて", link: "/about" },
    ],
    sidebar: [
      {
        text: 'Guide',
        items: [
          { text: 'Introduction', link: '/introduction' },
          { text: 'Getting Started', link: '/getting-started' }
        ]
      }
    ]
  },
};

3.3 ビルドとデプロイ

サイトをビルドするには、以下のコマンドを使用します：

npm run docs:build

ビルド後、生成された.vitepress/distフォルダ内のファイルを任意のホスティングサービス（Netlify、Vercel、GitHub Pages等）にアップロードすることで、サイトを公開できます。

3.4 プレビュー

ビルド後のサイトをローカルでプレビューするには：

npm run docs:preview

4. 結論

VitePressは、高速で効率的な静的サイト生成を実現するツールです。シンプルなMarkdownサポート、プラグインエコシステム、開発者フレンドリーな環境を提供し、技術的なドキュメントやブログなど、さまざまな用途に適しています。導入も容易で、カスタマイズの自由度も高いため、開発者にとって非常に魅力的な選択肢となるでしょう。興味がある方は、ぜひ公式サイトやリポジトリを訪れて、詳細を確認してみてください。