Slidev入門から応用まで｜Markdownでスライド作成する使い方

要約

Slidev（スライデブ）は、Markdownでプレゼンテーションスライドを作成できる開発者向けツールである。Vue.jsとViteをベースに構築されており、シンタックスハイライト、ライブコーディング、Vueコンポーネントの埋め込みなど、技術プレゼンに特化した機能を標準搭載している

本記事では、インストール方法から基本操作、コードブロックの活用、アニメーション、テーマカスタマイズ、エクスポート機能、上級者向けTipsまでを体系的に解説する

対象読者: プレゼン資料を作成するエンジニア全般（フロントエンド・バックエンド問わず）

検証環境: Slidev v52.x / Node.js 18以上（2024年12月時点）

この記事を読むことで得られるメリット

この記事を読むことで以下のことが分かる:

Slidevのインストール方法と基本的なセットアップ手順
Markdownでスライドを作成する具体的な方法とコード例
シンタックスハイライトやライブコーディングなど技術プレゼンで活躍する機能の使い方
PDF、PPTX、SPAなど多様な形式へのエクスポート方法
Vueコンポーネントやカスタムテーマを活用した上級者向けカスタマイズ

この記事を読むのにかかる時間

約20分

環境

MacOS Apple M4 Max Sequoia 15.1
Node.js 18以上
Slidev v52.x

Slidevとは

Slidev（スライディブ、slide + dev）は、Anthony Fu氏が開発したWebベースのプレゼンテーション作成ツールである。Vue.jsとViteをベースに構築されており、Markdownで記述したテキストファイルから、インタラクティブで美しいスライドを生成できる。

Slidevの主な特徴

Slidevが多くのエンジニアに支持される理由は、以下の特徴にある。

Markdownベースの記述

普段のドキュメント作成と同じMarkdown形式でスライドを作成できる。複雑なGUI操作は不要で、テキストエディタだけで完結する。

開発者フレンドリーな機能

シンタックスハイライト、ライブコーディング、Monaco Editorの統合など、技術プレゼンに必要な機能が標準搭載されている。

Gitによるバージョン管理

スライドがテキストファイルのため、Gitで変更履歴を管理できる。チームでの共同編集やレビューも容易である。

Vueコンポーネントの埋め込み

Vueコンポーネントをスライド内に埋め込むことで、インタラクティブなデモやアニメーションを自由に追加できる。

多様なエクスポート形式

PDF、PPTX、PNG、SPAなど、用途に応じた形式でエクスポート可能である。

Slidevのインストール方法

Slidevを使い始めるには、Node.js 18以上がインストールされている必要がある。

新規プロジェクトの作成

以下のコマンドで新しいSlidevプロジェクトを作成する。

# npmの場合
npm init slidev@latest

# pnpmの場合
pnpm create slidev

# yarnの場合
yarn create slidev

コマンドを実行すると、プロジェクト名やテーマの選択などの対話的なセットアップが始まる。完了後、プロジェクトディレクトリに移動して開発サーバーを起動する。

cd my-slidev-project
npm run dev

ブラウザで http://localhost:3030 にアクセスすると、スライドが表示される。

グローバルインストール

単一のMarkdownファイルからスライドを作成したい場合は、CLIをグローバルにインストールする方法もある。

npm i -g @slidev/cli

インストール後、以下のコマンドでスライドを起動できる。

slidev slides.md

基本的な使い方

スライドの作成

Slidevでは、slides.md ファイルにMarkdownでスライドの内容を記述する。スライドの区切りには ---（ハイフン3つ）を使用する。

# スライド1のタイトル

最初のスライドの内容

---

# スライド2のタイトル

2枚目のスライドの内容

- 箇条書きも使える
- Markdownの書式がそのまま適用される

---

# スライド3のタイトル

3枚目のスライドの内容

フロントマターの設定

スライドの先頭にYAML形式のフロントマターを記述することで、プレゼンテーション全体の設定を行う。

---
theme: seriph
title: プレゼンテーションのタイトル
info: |
  プレゼンテーションの説明文
author: 発表者名
class: text-center
highlighter: shiki
lineNumbers: true
drawings:
  persist: false
---

主な設定項目は以下の通りである。

設定項目	説明
theme	使用するテーマ（seriph、default、apple-basicなど）
title	プレゼンテーションのタイトル
highlighter	コードハイライトエンジン（shiki、prism）
lineNumbers	コードブロックに行番号を表示するか

個別スライドの設定

各スライドにもフロントマターを設定できる。レイアウトや背景画像などをスライドごとにカスタマイズ可能である。

---
layout: center
background: /images/background.jpg
class: text-white
---

# 中央寄せのスライド

背景画像付きのスライド

コードブロックの活用

技術プレゼンにおいて、コードの表示は重要な要素である。Slidevは強力なコード表示機能を備えている。

シンタックスハイライト

通常のMarkdownコードブロックがそのままシンタックスハイライトされる。

interface User {
  id: number;
  name: string;
  email: string;
}

const fetchUser = async (id: number): Promise<User> => {
  const response = await fetch(`/api/users/${id}`);
  return response.json();
};

行のハイライト

特定の行を強調表示したい場合は、波括弧で行番号を指定する。

```typescript {2,3}
interface User {
  id: number;      // この行がハイライト
  name: string;    // この行もハイライト
  email: string;
}
```

範囲指定も可能である。{1-3} で1〜3行目、{1,3,5} で1、3、5行目をハイライトできる。

クリックによる段階的ハイライト

プレゼン中にクリックで順番にハイライトを切り替えることもできる。

```typescript {1|2-3|4-5}
interface User {
  id: number;
  name: string;
  email: string;
}
```

この例では、最初は1行目のみ、クリックで2-3行目、さらにクリックで4-5行目がハイライトされる。

Monaco Editor（ライブコーディング）

{monaco} を指定すると、スライド上でコードを編集できるMonaco Editorが表示される。

```typescript {monaco}
console.log('Hello, Slidev!');
```

ライブコーディングのデモに最適である。

アニメーションとトランジション

クリックアニメーション

v-click ディレクティブを使用すると、クリックで要素を順番に表示できる。

# 段階的に表示

<v-click>

- 最初のクリックで表示

</v-click>

<v-click>

- 2回目のクリックで表示

</v-click>

<v-click>

- 3回目のクリックで表示

</v-click>

トランジションエフェクト

スライド間のトランジションを設定できる。

---
transition: slide-left
---

利用可能なトランジションには、fade、slide-left、slide-right、slide-up、slide-down などがある。

Motionアニメーション

@vueuse/motion を使用した高度なアニメーションも可能である。

<div
  v-motion
  :initial="{ x: -80, opacity: 0 }"
  :enter="{ x: 0, opacity: 1, transition: { delay: 200 } }"
>
  アニメーションで表示されるテキスト
</div>

テーマのカスタマイズ

公式テーマの使用

Slidevには複数の公式テーマが用意されている。フロントマターで指定するだけで適用できる。

---
theme: seriph
---

主な公式テーマは以下の通りである。

テーマ名	特徴
default	シンプルなデフォルトテーマ
seriph	美しいグラデーション背景
apple-basic	Apple風のミニマルデザイン
shibainu	日本語フォント対応テーマ

npmからテーマをインストール

コミュニティが作成したテーマをnpmからインストールして使用できる。

npm i @slidev/theme-dracula

---
theme: dracula
---

スタイルのカスタマイズ

style.css ファイルを作成して、CSSでスタイルをカスタマイズできる。UnoCSS（Tailwind CSS互換）のユーティリティクラスも使用可能である。

/* style.css */
.slidev-layout h1 {
  color: #3b82f6;
}

.slidev-layout code {
  background-color: #1e293b;
}

プレゼンターモード

プレゼンターモードの起動

プレゼン本番では、プレゼンターモードを活用すると便利である。開発サーバー起動後、/presenter にアクセスする。

http://localhost:3030/presenter

プレゼンターモードでは以下の情報が表示される。

現在のスライド
次のスライドのプレビュー
スピーカーノート
経過時間

スピーカーノートの追加

各スライドにスピーカーノートを追加できる。HTMLコメント形式で記述する。

# プレゼンのスライド

スライドの内容

<!--
ここにスピーカーノートを記述する。
発表時の補足情報やキーポイントをメモしておくと便利である。
-->

リモートコントロール

--remote オプションを付けて起動すると、スマートフォンなどからスライドを操作できる。

npm run dev -- --remote

remote control      > http://192.168.10.101:3030/entry/

別デバイスからスライドを進めることができる。(同じネットワークで、スマホはremote controlのurlから

エクスポート機能

PDFエクスポート

スライドをPDFとしてエクスポートするには、まずplaywright-chromiumをインストールする。

npm i -D playwright-chromium

その後、以下のコマンドでPDFを生成する。

slidev export

デフォルトで slides-export.pdf が生成される。

PPTXエクスポート

PowerPoint形式でエクスポートすることも可能である。

slidev export --format pptx

ただし、PPTXエクスポートでは一部の機能（アニメーションなど）が失われる点に注意が必要である。

PNGエクスポート

各スライドを画像として出力する場合は、PNG形式を指定する。

slidev export --format png

SPAとしてビルド

スライドをWebページとして公開したい場合は、SPAとしてビルドする。

slidev build

dist ディレクトリに静的ファイルが生成され、任意のホスティングサービスにデプロイできる。GitHub Pages、Netlify、Vercelなどで公開可能である。

他ツールとの比較

Slidevと他のプレゼンテーションツールを比較する。

項目	Slidev	PowerPoint	Google Slides	Marp
記述方式	Markdown	GUI	GUI	Markdown
バージョン管理	容易（Git対応）	困難	限定的	容易
コードハイライト	標準搭載	プラグイン必要	なし	標準搭載
ライブコーディング	対応	非対応	非対応	非対応
Vueコンポーネント	対応	非対応	非対応	非対応
学習コスト	中（Markdown知識必要）	低	低	低
カスタマイズ性	高	中	低	中

Slidevは、技術プレゼンやライブコーディングを含む発表に特に適している。一方、デザイン重視のビジネスプレゼンには、PowerPointやGoogle Slidesの方が向いている場合もある。

上級者向けTips

カスタムコンポーネントの作成

components/ ディレクトリにVueコンポーネントを配置すると、スライド内で使用できる。

<!-- components/Counter.vue -->
<script setup>
import { ref } from 'vue'
const count = ref(0)
</script>

<template>
  <div class="flex items-center gap-4">
    <button @click="count--">-</button>
    <span>{{ count }}</span>
    <button @click="count++">+</button>
  </div>
</template>

スライド内で以下のように使用する。

# インタラクティブなデモ

<Counter />

Mermaidダイアグラム

Mermaid記法でダイアグラムを描画できる。

```mermaid
graph LR
    A[ユーザー] --> B[フロントエンド]
    B --> C[API]
    C --> D[データベース]
```

録画機能

Slidevには録画機能が内蔵されている。プレゼンターモードで録画ボタンをクリックすると、スライドの操作と音声を録画できる。録画した内容はWebM形式で保存される。

トラブルシューティング

よくある問題と解決策

スライドが表示されない

Node.jsのバージョンが18未満の場合、正常に動作しない。node -v でバージョンを確認し、必要に応じてアップデートする。

日本語フォントが崩れる

日本語フォントを適切に表示するには、style.css でフォントを指定するか、日本語対応テーマ（shibainu等）を使用する。

/* style.css */
.slidev-layout {
  font-family: 'Noto Sans JP', sans-serif;
}

PDFエクスポートが失敗する

playwright-chromiumがインストールされていることを確認する。また、大量のスライドがある場合はメモリ不足になることがあるため、--timeout オプションでタイムアウトを延長する。

slidev export --timeout 60000

まとめ

Slidevは、Markdownで記述できる開発者向けプレゼンテーションツールである。本記事で解説した内容を振り返る。

Slidevとは: Vue.js + Viteベースのプレゼンテーションツール
インストール: npm init slidev@latest で簡単にセットアップ可能
基本操作: --- でスライドを区切り、Markdownで内容を記述
コード表示: シンタックスハイライト、行ハイライト、ライブコーディング対応
アニメーション: v-clickやトランジションで動的な表現が可能
エクスポート: PDF、PPTX、PNG、SPAなど多様な形式に対応
カスタマイズ: テーマ、Vueコンポーネント、CSSで自由にカスタマイズ

技術カンファレンスやLT、社内勉強会など、エンジニアがプレゼンを行う場面でSlidevは強力なツールとなる。Markdownに慣れているエンジニアであれば、すぐに使い始められるだろう。ぜひ次のプレゼンでSlidevを試してみてほしい。

INDEX

要約