slidev-quick-start

Slidev クイックスタート

このスキルでは、開発者向けプレゼンテーションフレームワークである Slidev の使い始め方を説明します。新しいプロジェクトの作成方法、基本構文、最初のプレゼンテーションの実行方法を学びます。

このスキルを使う場面

• Slidev のプレゼンテーションをゼロから作成するとき
• 初めて Slidev をセットアップするとき
• Slidev の基本概念を理解するとき
• 既存のプレゼンテーションを Slidev に変換するとき
• プレゼンテーションの構成をすばやく作成するとき

前提条件

• Node.js：バージョン 18.0 以上
• パッケージマネージャー：npm、pnpm、または yarn
• テキストエディター：VS Code を推奨（Slidev 拡張機能付き）

新しいプロジェクトの作成

オプション 1：npm init を使用する（推奨）

npm init slidev@latest

この対話型コマンドでは、次の処理が行われます。

1. プロジェクト名を尋ねます
2. プロジェクトディレクトリを作成します
3. 依存関係をインストールします
4. 開発サーバーを起動します

オプション 2：手動でセットアップする

# Create project directory
mkdir my-presentation
cd my-presentation

# Initialize package.json
npm init -y

# Install Slidev
npm install @slidev/cli @slidev/theme-default

# Create slides file
touch slides.md

package.json にスクリプトを追加します。

{
  "scripts": {
    "dev": "slidev --open",
    "build": "slidev build",
    "export": "slidev export"
  }
}

最初のプレゼンテーション

次の内容で slides.md を作成します。

---
theme: default
title: My First Presentation
info: |
  ## My First Slidev Presentation
  Created with Slidev
class: text-center
drawings:
  persist: false
transition: slide-left
---

# Welcome to Slidev

Presentation slides for developers

<div class="pt-12">
  <span @click="$slidev.nav.next" class="px-2 py-1 rounded cursor-pointer" hover="bg-white bg-opacity-10">
    Press Space for next page <carbon:arrow-right class="inline"/>
  </span>
</div>

---

# What is Slidev?

Slidev is a slides maker and presenter designed for developers

- 📝 **Markdown-based** - focus on content with Markdown
- 🎨 **Themable** - themes can be shared and installed
- 🧑‍💻 **Developer Friendly** - code highlighting, live coding
- 🤹 **Interactive** - embed Vue components
- 🎥 **Recording** - built-in recording and camera view
- 📤 **Portable** - export to PDF, PPTX, or host online

---
layout: center
---

# Thank You!

[Documentation](https://sli.dev) · [GitHub](https://github.com/slidevjs/slidev)

プレゼンテーションの実行

# Start development server
npm run dev

# Or directly with npx
npx slidev

プレゼンテーションは http://localhost:3030 で表示できます。

基本的なキーボードショートカット

ショートカット	操作
Space / →	次のスライド／アニメーション
←	前のスライド／アニメーション
↑ / ↓	スライド間を移動（アニメーションをスキップ）
o	概要モード
d	ダークモードの切り替え
f	全画面表示
g	スライドに移動
Esc	概要／全画面表示を終了

スライド区切り

空行で囲んだ ---（ハイフン 3 つ）を使ってスライドを区切ります。

# Slide 1

Content for slide 1

---

# Slide 2

Content for slide 2

---

# Slide 3

Content for slide 3

フロントマターの設定

最初のスライドのフロントマターで、プレゼンテーション全体を設定します。

---
# Presentation metadata
theme: seriph              # Theme name
title: My Presentation     # Browser tab title
info: |                    # Presentation info
  ## About
  Description here

# Appearance
colorSchema: auto          # auto, light, or dark
class: text-center         # CSS classes for first slide
background: /image.jpg     # Background image

# Features
drawings:
  persist: false           # Save drawings between reloads
transition: slide-left     # Default transition
highlighter: shiki         # Code highlighter

# Export
exportFilename: slides     # Export filename
download: true             # Show download button
---

レイアウトの追加

フロントマターを使って、スライドごとにレイアウトを指定します。

---
layout: cover
background: https://cover.sli.dev
---

# Cover Slide

---
layout: two-cols
---

# Left Column

Content here

::right::

# Right Column

Content here

---
layout: center
---

# Centered Content

コードブロックの追加

# Code Example

\`\`\`typescript
interface User {
  id: number
  name: string
  email: string
}

function greet(user: User): string {
  return `Hello, ${user.name}!`
}
\`\`\`

発表者ノートの追加

スライドの末尾に HTML コメントを追加して、発表者ノートを記述します。

# My Slide

Important content here

ベストプラクティス

1. シンプルに始める：基本的な Markdown から始め、機能を少しずつ追加します
2. 1 枚のスライドにつき 1 つのアイデア：スライドの内容を絞ります
3. レイアウトを使う：組み込みのレイアウトを活用して、一貫性のあるデザインにします
4. バージョン管理：slides.md を Git にコミットします
5. 早めにエクスポートをテストする：発表前に PDF を正常にエクスポートできることを確認します

避けるべきよくある間違い

❌ 区切りの前後に空行がない

# Slide 1
---
# Slide 2

✓ 正しい区切り構文

# Slide 1

---

# Slide 2

❌ フロントマターのインデントが無効

---
theme:seriph  # Missing space after colon
---

✓ 正しいフロントマター

---
theme: seriph
---

出力形式

新しい Slidev プレゼンテーションを作成するときは、次を提示します。

PROJECT STRUCTURE:
- slides.md (main presentation file)
- package.json (with dev/build/export scripts)
- Optional: public/ directory for assets

FIRST SLIDE FRONTMATTER:
---
theme: [recommended theme]
title: [presentation title]
---

SUGGESTED SLIDE STRUCTURE:
1. Title/Cover slide
2. Introduction/Agenda
3. Main content slides
4. Summary/Conclusion
5. Thank you/Contact slide

NEXT STEPS:
- Run `npm run dev` to start
- Edit slides.md to add content
- Use `o` key for overview