VuePress
Vue.js製のドキュメント特化SSG。22k超のGitHubスターを持ち、技術ドキュメントサイト構築に最適化。
トレンド・動向
Vue.jsコミュニティでのドキュメントサイト標準として確立。VitePress後継により更なる高速化を実現。
## 静的サイトジェネレータ
VuePress
## 概要
VuePressは、Vue.jsで構築されたドキュメント特化の静的サイトジェネレータです。22k超のGitHubスターを持ち、技術ドキュメントサイトの構築に最適化されています。Vue.jsコミュニティでのドキュメントサイト標準として確立されており、VitePressの登場により更なる高速化と機能向上が実現されています。
## 詳細
VuePressは2018年にVue.jsの作者であるEvan You氏によって開発されました。Markdownファイルから美しいSPAを生成し、技術ドキュメント作成に必要な機能を豊富に提供します。各ページはサーバーサイドレンダリングされた静的HTMLとして事前レンダリングされ、ページ読み込み後はSPAとして動作します。
2023年以降、Vue.jsチームはVuePressの後継としてVitePressの開発に注力しており、VitePress 1.0の安定版がリリースされています。VitePressはVue 3とViteをベースに、より高速な開発体験とプロダクション性能を提供します。既存のVuePressプロジェクトは段階的にVitePressへの移行が推奨されています。
VuePressの特徴として、Vue.jsコンポーネントをMarkdown内で直接使用できること、豊富なプラグインエコシステム、検索機能、多言語対応、PWA対応などがあります。設定ファイルも`.vuepress/config.js`で一元管理でき、開発者にとって直感的な構成となっています。
## メリット・デメリット
### メリット
- **Vue.jsとの完全統合**: Vue.jsコンポーネントをMarkdown内で自然に使用可能
- **ドキュメント特化設計**: 技術ドキュメントに必要な機能がすべて揃っている
- **豊富なプラグインエコシステム**: 検索、PWA、Google Analytics等の公式プラグインが充実
- **ホットリロード対応**: 開発時の自動リロードでスムーズな執筆体験
- **SEO最適化**: 事前レンダリングによりSEOに優れたサイトを生成
- **設定の簡潔性**: 最小限の設定でプロフェッショナルなサイトを構築可能
### デメリット
- **開発停止とVitePress移行**: 新規開発はVitePressに集約されている
- **大規模サイトでのビルド時間**: ページ数が多いとビルド時間が長くなる傾向
- **Vue.js依存**: Vue.jsの知識が必要で学習コストが発生
- **プラグイン設定の複雑さ**: 高度なカスタマイズには詳細な設定知識が必要
- **バンドルサイズ**: SPAの性質上、初期読み込み時のJavaScriptファイルサイズが大きい
## 参考ページ
- [VuePress公式サイト](https://vuepress.vuejs.org/)
- [VuePress GitHub リポジトリ](https://github.com/vuejs/vuepress)
- [VitePressへの移行ガイド](https://vitepress.dev/guide/migration-from-vuepress)
- [VuePress プラグイン一覧](https://vuepress.vuejs.org/plugin/)
- [VuePress テーマ一覧](https://vuepress.vuejs.org/theme/)
## 書き方の例
### プロジェクト初期化とインストール
```bash
# VuePressプロジェクトの初期化
mkdir my-docs
cd my-docs
npm init -y
# VuePressの開発依存としてインストール
npm install -D vuepress
# package.jsonにスクリプト追加
```
```json
{
"scripts": {
"docs:dev": "vuepress dev docs",
"docs:build": "vuepress build docs"
}
}
```
### 基本的なサイト設定
```javascript
// .vuepress/config.js
module.exports = {
title: 'My Documentation',
description: 'Vue.jsプロジェクトのドキュメント',
// テーマ設定
themeConfig: {
nav: [
{ text: 'ホーム', link: '/' },
{ text: 'ガイド', link: '/guide/' },
{ text: 'API', link: '/api/' }
],
sidebar: {
'/guide/': [
'',
'getting-started',
'configuration'
]
},
// GitHub リポジトリ設定
repo: 'username/repo',
editLinks: true,
editLinkText: 'このページを編集'
},
// プラグイン設定
plugins: [
'@vuepress/back-to-top',
'@vuepress/medium-zoom',
['@vuepress/search', {
searchMaxSuggestions: 10
}]
]
}
```
### Markdownの拡張機能
```markdown
<!-- カスタム容器 -->
::: tip ヒント
これは便利なヒントです。
:::
::: warning 注意
これは重要な注意事項です。
:::
::: danger 危険
これは危険な操作に関する警告です。
:::
<!-- コードブロックのハイライト -->
```javascript{1,3-5}
export default {
data() {
return {
message: 'Hello VuePress!'
}
}
}
```
<!-- Vue コンポーネントの使用 -->
<Badge text="v1.0.0" type="tip"/>
<Badge text="廃止予定" type="warn"/>
```
### カスタムテーマの作成
```javascript
// .vuepress/theme/index.js
module.exports = {
extend: '@vuepress/theme-default',
// レイアウトオーバーライド
Layout: require.resolve('./layouts/Layout.vue'),
// グローバルコンポーネント
plugins: [
[
'@vuepress/register-components',
{
componentsDir: './components'
}
]
]
}
```
### プラグイン開発とカスタマイズ
```javascript
// .vuepress/config.js
module.exports = {
plugins: [
// カスタムプラグイン
[
(options, ctx) => ({
name: 'my-plugin',
enhanceAppFiles: resolve(__dirname, 'enhanceApp.js'),
globalUIComponents: ['MyGlobalComponent']
})
],
// PWA設定
[
'@vuepress/pwa',
{
serviceWorker: true,
updatePopup: {
message: "新しいコンテンツが利用可能です。",
buttonText: "更新"
}
}
]
]
}
```
### ビルドとデプロイ
```bash
# 開発サーバー起動
npm run docs:dev
# プロダクションビルド
npm run docs:build
# GitHubPages用のデプロイスクリプト
#!/usr/bin/env sh
set -e
npm run docs:build
cd docs/.vuepress/dist
git init
git add -A
git commit -m 'deploy'
git push -f [email protected]:username/repo.git master:gh-pages
```