Slidev - 開発者向けプレゼンテーションスライド

Vite、Vue、Markdown で構築された Web ベースのスライド作成ツール。

使用するとき

• ライブコード例を含むテクニカルプレゼンテーションやスライドデッキ
• シンタックスハイライト付きコードスニペットとアニメーション
• インタラクティブなデモ (Monaco エディタ、実行可能なコード)
• 数学方程式 (LaTeX) または図表 (Mermaid、PlantUML)
• プレゼンターノート付きでプレゼンテーションを記録
• PDF、PPTX にエクスポート、または SPA としてホスト
• 開発者向けトークやワークショップのコードウォークスルー

クイックスタート

pnpm create slidev    # プロジェクトを作成
pnpm run dev          # 開発サーバーを起動 (http://localhost:3030 を開く)
pnpm run build        # 静的 SPA をビルド
pnpm run export       # PDF にエクスポート (playwright-chromium が必要)

確認: pnpm run dev 後、スライドが http://localhost:3030 で読み込まれることを確認してください。pnpm run export 後、出力 PDF がプロジェクトルートに存在することを確認してください。

基本的なシンタックス

---
theme: default
title: My Presentation
---

# First Slide

Content here

---

# Second Slide

More content

<!--
Presenter notes go here
-->

• --- はスライドを分離します
• 最初の frontmatter = headmatter (デッキの設定)
• HTML コメント = プレゼンターノート

コアリファレンス

トピック	説明	リファレンス
Markdown シンタックス	スライド分離、frontmatter、ノート、コードブロック	core-syntax
アニメーション	v-click、v-clicks、motion、transitions	core-animations
Headmatter	デッキ全体の設定オプション	core-headmatter
Frontmatter	スライドごとの設定オプション	core-frontmatter
CLI コマンド	dev、build、export、theme コマンド	core-cli
コンポーネント	組み込み Vue コンポーネント	core-components
レイアウト	組み込みスライドレイアウト	core-layouts
エクスポート	PDF、PPTX、PNG エクスポートオプション	core-exporting
ホスティング	各プラットフォームへのビルドとデプロイ	core-hosting
グローバルコンテキスト	$nav、$slidev、composables API	core-global-context

機能リファレンス

コードとエディタ

機能	使用方法	リファレンス
行ハイライト	```ts {2,3}	code-line-highlighting
クリックベースのハイライト	```ts {1|2-3|all}	code-line-highlighting
行番号	lineNumbers: true または {lines:true}	code-line-numbers
スクロール可能なコード	{maxHeight:'100px'}	code-max-height
コードタブ	::code-group (comark: true が必要)	code-groups
Monaco エディタ	```ts {monaco}	editor-monaco
コード実行	```ts {monaco-run}	editor-monaco-run
ファイル編集	<<< ./file.ts {monaco-write}	editor-monaco-write
コードアニメーション	````md magic-move	code-magic-move
TypeScript 型情報	```ts twoslash	code-twoslash
コードをインポート	<<< @/snippets/file.js	code-import-snippet

図表と数式

機能	使用方法	リファレンス
Mermaid 図表	```mermaid	diagram-mermaid
PlantUML 図表	```plantuml	diagram-plantuml
LaTeX 数式	$inline$ または $$block$$	diagram-latex

レイアウトとスタイル

機能	使用方法	リファレンス
キャンバスサイズ	canvasWidth、aspectRatio	layout-canvas-size
スライドのズーム	zoom: 0.8	layout-zoom
要素のスケール	<Transform :scale="0.5">	layout-transform
レイアウトスロット	::right::、::default::	layout-slots
スコープ付き CSS	スライド内の <style>	style-scoped
グローバルレイヤー	global-top.vue、global-bottom.vue	layout-global-layers
ドラッグ可能な要素	v-drag、<v-drag>	layout-draggable
アイコン	<mdi-icon-name />	style-icons

アニメーションとインタラクション

機能	使用方法	リファレンス
クリックアニメーション	v-click、<v-clicks>	core-animations
ラフマーカー	v-mark.underline、v-mark.circle	animation-rough-marker
描画モード	C を押すか drawings: で設定	animation-drawing
方向スタイル	forward:delay-300	style-direction
ノートハイライト	ノート内の [click]	animation-click-marker

シンタックス拡張

機能	使用方法	リファレンス
Comark シンタックス	comark: true + {style="color:red"}	syntax-comark
ブロック frontmatter	--- の代わりに ```yaml	syntax-block-frontmatter
スライドをインポート	src: ./other.md	syntax-importing-slides
Frontmatter をマージ	メインエントリが優先	syntax-frontmatter-merging

プレゼンターと記録

機能	使用方法	リファレンス
記録	G を押してカメラを起動	presenter-recording
タイマー	duration: 30min、timer: countdown	presenter-timer
リモートコントロール	slidev --remote	presenter-remote
ルビ文字	notesAutoRuby:	presenter-notes-ruby

エクスポートとビルド

機能	使用方法	リファレンス
エクスポートオプション	slidev export	core-exporting
ビルドとデプロイ	slidev build	core-hosting
PDF でビルド	download: true	build-pdf
イメージをキャッシュ	リモート URL に自動対応	build-remote-assets
OG イメージ	seoMeta.ogImage または og-image.png	build-og-image
SEO タグ	seoMeta:	build-seo-meta

エクスポートの前提条件: PDF/PPTX/PNG エクスポートには pnpm add -D playwright-chromium が必要です。ブラウザエラーでエクスポートが失敗する場合は、まずこの依存関係をインストールしてください。

エディタとツール

機能	使用方法	リファレンス
サイドエディタ	編集アイコンをクリック	editor-side
VS Code 拡張	antfu.slidev をインストール	editor-vscode
Prettier	prettier-plugin-slidev	editor-prettier
テーマをイジェクト	slidev theme eject	tool-eject-theme

ライフサイクルと API

機能	使用方法	リファレンス
スライドフック	onSlideEnter()、onSlideLeave()	api-slide-hooks
ナビゲーション API	$nav、useNav()	core-global-context

一般的なレイアウト

レイアウト	目的
cover	タイトル/カバースライド
center	中央配置のコンテンツ
default	標準スライド
two-cols	2 カラム (::right:: を使用)
two-cols-header	ヘッダー + 2 カラム
image / image-left / image-right	イメージレイアウト
iframe / iframe-left / iframe-right	URL を埋め込み
quote	引用
section	セクション区切り
fact / statement	データ/ステートメント表示
intro / end	イントロ/終了スライド

リソース

• ドキュメント: https://sli.dev
• テーマギャラリー: https://sli.dev/resources/theme-gallery
• ショーケース: https://sli.dev/resources/showcases