slidev-project-structure

Slidev プロジェクトの構成

このスキルでは、設定ファイル、ディレクトリの規則、カスタマイズ方法など、Slidev プロジェクトの構成全体を理解できます。

このスキルを使用する場面

• 複雑な Slidev プロジェクトをセットアップするとき
• カスタムコンポーネントやレイアウトを追加するとき
• テーマやアドオンを設定するとき
• アセットやスタイルの配置場所を確認するとき
• プロジェクト構成に関する問題をトラブルシューティングするとき

標準的なプロジェクト構成

my-presentation/
├── slides.md              # Main presentation file
├── package.json           # Project dependencies
├── components/            # Custom Vue components
│   └── Counter.vue
├── layouts/               # Custom layouts
│   └── my-layout.vue
├── pages/                 # Additional slide files
│   └── intro.md
├── public/                # Static assets
│   ├── images/
│   └── favicon.ico
├── styles/                # Global styles
│   └── index.css
├── setup/                 # Setup scripts
│   ├── main.ts           # Vue app setup
│   ├── monaco.ts         # Monaco editor setup
│   └── shiki.ts          # Shiki highlighter setup
├── snippets/              # External code snippets
│   └── example.ts
├── .slidev/               # Generated files (gitignore)
│   └── drawings/         # Persisted drawings
├── vite.config.ts         # Vite configuration
├── uno.config.ts          # UnoCSS configuration
└── netlify.toml           # Deployment config (optional)

コアファイル

slides.md

すべてのスライドを含むメインのプレゼンテーションファイルです。

---
theme: seriph
title: My Presentation
---

# Slide 1

---

# Slide 2

package.json

必須のスクリプトと依存関係です。

{
  "name": "my-presentation",
  "private": true,
  "scripts": {
    "dev": "slidev --open",
    "build": "slidev build",
    "export": "slidev export"
  },
  "dependencies": {
    "@slidev/cli": "^0.50.0",
    "@slidev/theme-seriph": "^0.25.0"
  }
}

グローバル設定

ヘッドマター（最初のスライド）

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

---
# Theme
theme: seriph
addons:
  - slidev-addon-excalidraw

# Metadata
title: My Presentation
titleTemplate: '%s - Slidev'
info: |
  ## Slidev Starter Template
  Presentation slides for developers.

# Appearance
colorSchema: auto
aspectRatio: 16/9
canvasWidth: 980
themeConfig:
  primary: '#5d8392'

# Code
highlighter: shiki
lineNumbers: true
monaco: true

# Features
drawings:
  enabled: true
  persist: true
  presenterOnly: false
  syncAll: true
selectable: true
record: true

# Navigation
transition: slide-left
clicks: auto

# Export
exportFilename: my-presentation
download: true

# Layout
layout: cover
background: /cover.jpg
class: text-center
---

ディレクトリの規則

components/

スライドに自動インポートされるカスタム Vue コンポーネントです。

<script setup lang="ts">
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>

スライド内での使用方法：

# Interactive Counter

<Counter />

layouts/

カスタムレイアウトは、組み込みレイアウトを拡張します。

<template>
  <div class="slidev-layout my-intro">
    <div class="header">
      <slot name="header" />
    </div>
    <div class="main">
      <slot />
    </div>
    <div class="footer">
      <slot name="footer">
        <span>My Company</span>
      </slot>
    </div>
  </div>
</template>

<style scoped>
.my-intro {
  display: grid;
  grid-template-rows: auto 1fr auto;
  height: 100%;
  padding: 2rem;
}
</style>

スライド内での使用方法：

---
layout: my-intro
---

::header::
# Welcome

::default::
Main content here

::footer::
Custom footer

public/

ルート URL から配信される静的アセットです。

public/
├── images/
│   ├── logo.png        # Use: /images/logo.png
│   └── diagram.svg
├── favicon.ico         # Use: /favicon.ico
└── data.json           # Use: /data.json

styles/

すべてのスライドに適用されるグローバルスタイルです。

/* styles/index.css */
@import url('https://fonts.googleapis.com/css2?family=Inter&display=swap');

:root {
  --slidev-theme-primary: #3b82f6;
}

.slidev-layout {
  font-family: 'Inter', sans-serif;
}

/* Custom utility classes */
.highlight {
  background: linear-gradient(120deg, #84fab0 0%, #8fd3f4 100%);
  padding: 0 0.25em;
}

setup/

設定スクリプトです。

// setup/main.ts - Vue app configuration
import { defineAppSetup } from '@slidev/types'

export default defineAppSetup(({ app, router }) => {
  // Register global components
  // Configure plugins
})

// setup/shiki.ts - Code highlighter
import { defineShikiSetup } from '@slidev/types'

export default defineShikiSetup(() => {
  return {
    themes: {
      dark: 'vitesse-dark',
      light: 'vitesse-light',
    },
  }
})

// setup/monaco.ts - Monaco editor
import { defineMonacoSetup } from '@slidev/types'

export default defineMonacoSetup(() => {
  return {
    editorOptions: {
      fontSize: 14,
      minimap: { enabled: false },
    },
  }
})

pages/

モジュール式のプレゼンテーションで使用する追加のスライドファイルです。

# Introduction Section

---

# About Me

---

# Agenda

メインファイルでのインポート：

---
src: ./pages/intro.md
---

---

# Main Content

---

---
src: ./pages/conclusion.md
---

Vite の設定

// vite.config.ts
import { defineConfig } from 'vite'

export default defineConfig({
  slidev: {
    vue: {
      // Vue plugin options
    },
  },
  // Standard Vite options
  server: {
    port: 3030,
  },
})

UnoCSS の設定

// uno.config.ts
import { defineConfig } from 'unocss'

export default defineConfig({
  shortcuts: {
    'bg-main': 'bg-white dark:bg-slate-900',
    'text-main': 'text-slate-900 dark:text-slate-100',
  },
  theme: {
    colors: {
      primary: '#3b82f6',
    },
  },
})

テーマの設定

テーマの使用

---
theme: seriph
themeConfig:
  primary: '#5d8392'
  secondary: '#8b5cf6'
---

テーマの取り出し

テーマのソースコードをカスタマイズするには：

slidev theme eject

これによりテーマがプロジェクトにコピーされ、自由にカスタマイズできるようになります。

複数ファイルのプレゼンテーション

スライドのインポート

---
src: ./pages/section1.md
---

---
src: ./pages/section2.md
---

フロントマターをマージする場合

---
src: ./pages/intro.md
title: Overridden Title
class: custom-class
---

生成ファイル（.slidev/）

.slidev/ ディレクトリには以下が含まれます。

• drawings/ - 保存された描画
• その他の生成アセット

.gitignore に追加します。

.slidev
node_modules
dist

ベストプラクティス

1. slides.md を簡潔に保つ：大規模なプレゼンテーションでは src インポートを使用します
2. アセットを整理する：すべての画像に public/images/ を使用します
3. コンポーネントを再利用する：繰り返し使うパターンにはコンポーネントを作成します
4. バージョン管理：.slidev/ と dist/ を除くすべてのソースファイルをコミットします
5. カスタムレイアウトを文書化する：スロットの使い方を説明するコメントを追加します

出力形式

プロジェクト構成を説明するときは、以下を提示します。

RECOMMENDED STRUCTURE:
├── slides.md           # Main file
├── components/         # Custom Vue components
├── layouts/           # Custom layouts
├── public/            # Static assets
├── styles/            # Global CSS
└── package.json       # Dependencies

KEY CONFIGURATION:
- Theme: [theme name]
- Addons: [list of addons]
- Custom components: [component names]
- Custom layouts: [layout names]

FILES TO CREATE:
1. [filename] - [purpose]
2. [filename] - [purpose]

GITIGNORE:
.slidev/
node_modules/
dist/