🏋️

【Slidev 超入門】エンジニアだからこそ作れるつよつよスライドの作り方！

2024/11/20に公開

Markdown

Slidev

presentation

tech

1. はじめに

皆さんは社内の勉強会やLTイベント等で登壇するとき、どのようなツールを使ってスライドを作成していますか？Google Slide？PowerPoint？Zenn？
今回は、エンジニアには比較的に馴染みのある Markdown と Vue.js を使ってスライドを作成できる、 Slidev というライブラリを新たな選択肢として提案します！！

Google Slide 等でスライド作成されている、営業さんや人事の方を驚かせるようなスライドを作成することができるかもしれません！

 この記事の読み進め方この記事は、膨大な公式ドキュメントから厳選して、Slidevを使いこなすのに必要な情報をピックアップしています。

この記事を最後まで読めば、公式ドキュメントを読むことなくSlidevを使いこなすことができと思います！
が、膨大な量です...

なので、全部読んでいただく必要はありません！あなたのニーズに合った読み方を選んでください！

とりあえずSlidevってなに？ という方は、 1. はじめに から読んでください

遊んでみたい！ という方は、 4. 👶 Slidev のきほん、5. 🔈 Slidev で発表するのみでも十分かと思います

実際にSlidevで発表できるスライドを作りたい！ という方は、6. 👦 Slidev 入門まで読むことをおすすめします！

バチバチに使いこなしたいぜ という方は、7. 🧑 Slidev 応用まで読んでください！

2. Slidev とは？

Slidev は Markdown ベースで構築できるプレゼンテーションライブラリです。
数々のOSSに携わってきている Anthony Fu さん(antfu.me)が開発したライブラリで、 Vue.js をベースに構築されています。

https://sli.dev/resources/theme-gallery

Slidev の特徴

Markdownで記述
拡張された Markdown 形式を使用して、スライドを 1 つのプレーンテキストファイルに整理します。これにより、Git や任意のエディターを使用しながらコンテンツに集中できます。
開発者フレンドリー
開発者向けのコードスニペットが充実しています！
例）Shiki, Keynoteライクな Magic Move, TwoSlash
Vue.js, CSS でインタラクティブで表現力豊かなカスタマイズが可能
Vueコンポーネントの作成が可能です。これにより、スライドにインタラクティブな要素を追加できます （クリックしたらカウントアップするボタンとかVueでできることならなんでも！）。
多様な公開方法
PDF、PPTX、PNG、加えてSPAとしてWebページとして公開することも可能です。
Vite で高速なビルド
ビルドにはViteを用いているので高速にビルドできます。もちろんHMRも対応してますし、Vite Pluginも使えます。

3. Slidev が他のツールと比べて優れている点（筆者基準）

Google Slide や Power Point と比較して、Slidev が優れていると感じた点を紹介します。

綺麗なスライドが簡単に作れる

スライド間でデザインの統一性を保たれた綺麗なスライドを作ることができます！

Google Slide等
直感的で自由な操作が可能です！ですがデザインツールのように要素を規則的に配置する機能は少ないです。これによりスライド間でデザインの統一性が保てないことがあります。
Slidev
Markdown の記法と Slidev の独自記法に従って、規則的な要素の配置が可能です。

また、レイアウトルールやスタイルが全てのスライドで共通しているため、全体レイアウトを修正したい時も簡単です！

Google Slide等
スライドテンプレートを使ったとしても、一度作成したスライドでデザインを変更する時は各１枚づつ変更していかなければいけない(はず)です...。
Slidev
レイアウトファイルを修正したり、CSSを変更することで全体のデザインを変更することができます！

mdファイル単位でGit管理ができる

Google Slide等
変更履歴などの機能で過去のスライドを復元・バージョン管理が可能です。が、復元すると履歴が残らない・バージョン指定数に上限があるなどの制限があります。
Slidev
mdファイルで作成するため、Git・Githubでのバージョン管理が可能です。過去のスライドを復元後の履歴も残り・Commitメッセージやtagによるバージョン管理が可能です。

Vueコンポーネントを作れるので、とても複雑なスライドも作れる

Vueでできることならもうなんでもできます！！！
これだけで凄さが伝わるでしょう

4. 👶 Slidev のきほん

4.1. インストールする

以下コマンドを実行するだけです

pnpm create slidev

$ pnpm create slidev

  ●■▲
  Slidev Creator  v0.50.0-beta.7

✔ Project name: … project-name
  Scaffolding project in project-name ...
  Done.

✔ Install and start it now? … yes
✔ Choose the package manager › pnpm

4.2. 新規スライドを作成する

{project-root}/slides.mdファイルが１スライドとなります。
作成中にプレビュー表示されるのは、このファイルです。

4.1 を経由した場合はすでにスライドが作成されているはずです。

4.3. 新しいページを作る

2ページ目以降を作成する場合は、---で区切ります。
基本的には slides.mdのみでスライドの全てのページ内容を作成 します。

slides.md

# 1ページ目

1ページ目の内容

---

# 2ページ目

2ページ目の内容

Tips : 別ファイルに分割する

各スライドの先頭に、オプションのfrontmatterを追加してスライドを設定できます。
（frontmatter: --- ~ ---で囲まれた部分のことです）
src属性を使って別ファイルに分割することも可能です。

slides.md

# 1ページ目

1ページ目の内容

---
src: ./pages/imported-slides.md
hide: false
---

./pages/imported-slides.md

# 2ページ目

分割された2ページ目の内容

4.4. ページの内容を記述する

markdownの基本的な構文（Markdown Cheatsheet）で記述が可能です

Markdown Cheatsheet に記載されている構文

slides.md

# H1

## H2

### H3

#### H4

##### H5

###### H6

Alternatively, for H1 and H2, an underline-ish style:

# Alt-H1

## Alt-H2

Emphasis, aka italics, with _asterisks_ or _underscores_.

Strong emphasis, aka bold, with **asterisks** or **underscores**.

Combined emphasis with **asterisks and _underscores_**.

Strikethrough uses two tildes. ~~Scratch this.~~

1. First ordered list item
2. Another item
   ⋅⋅\* Unordered sub-list.
3. Actual numbers don't matter, just that it's a number
   ⋅⋅1. Ordered sub-list
4. And another item.

⋅⋅⋅You can have properly indented paragraphs within list items. Notice the blank line above, and the leading spaces (at least one, but we'll use three here to also align the raw Markdown).

⋅⋅⋅To have a line break without a paragraph, you will need to use two trailing spaces.⋅⋅
⋅⋅⋅Note that this line is separate, but within the same paragraph.⋅⋅
⋅⋅⋅(This is contrary to the typical GFM line break behaviour, where trailing spaces are not required.)

- Unordered list can use asterisks

* Or minuses

- Or pluses

またSlidev独自機能として、MDC Syntaxも使用できます。

slides.md

---
mdc: true
---

# MDC Syntax

frontmatter に `mdc: true` を追加することで、MDC Syntax を使用できます。

This is a [red text]{style="color:red"} :inline-component{prop="value"}

---

4.5. 台本（スピーカーノート）を書く

Google Slide 等には、スピーカーノートという、発表中に発表者が見るための台本・補足情報を記述できる機能があります。
Slidev にも同様の機能があります。

各スライドの末尾にあるコメントブロックが、スピーカーノートとして扱われます。

slides.md

<!-- ここに記述してもダメです -->

# 1ページ目

<!--
このコメントアウト部分がスピーカーノートとして表示されます
-->

4.6. スライドのプレビュー

ローカル環境でスライドをプレビューするには、以下のコマンドを実行します。

pnpm slidev

このような表示になれば成功です！
リンクが3つ表示されますが、それぞれ以下の通りです。

public slide show : スライドの公開URL
presenter mode : プレゼンターモードのURL
先ほど追加したスピーカーノートはこのURLで確認することができます
slides overview : スライドの概要を表示するURL

$ pnpm slidev

  ●■▲
  Slidev  v0.50.0-beta.6

  theme       @slidev/theme-default
  css engine  unocss
  entry       /Users/kanekotakuma/dev/other/takuma-ru-documents/slidev/slides.md

  public slide show   > http://localhost:3030/
  presenter mode      > http://localhost:3030/presenter/
  slides overview     > http://localhost:3030/overview/
  remote control      > pass --remote to enable

  shortcuts           > restart | open | edit | quit

🎉 ここまでできれば、あなたはSlidevで遊べるだけの知識を得ました！

5. 🔈 Slidev で発表する

5.1. スライドをWebページとして公開する（ホスティング）

詳細 : Slidev - Building and Hosting

1. ビルドする

以下コマンドを実行することで、SPAとしてビルドされたファイルが生成されます。

pnpm slidev build

2. 各ホスティングサービスにアップロードする

ここはVite等でビルドされたSPAをホスティングする方法と同じです。

主要なホスティング方法は公式ドキュメント(Slidev - Hosting)に記載されているので確認してみてください！

5.2. 資料として配布する（PDF,PPTX,PNG）

詳細 : Slidev - Exporting

1. ライブラリのインストール

以下が必要なため、インストールしてください。

pnpm add -D playwright-chromium

2a. PDFでビルドする

slidev export

2b. PPTXでビルドする

slidev export --format pptx

2c. PNGでビルドする

slidev export --format png

5.3. プレゼンする

スライドをWebページとして公開した場合は、傍聴者にURLを共有することでプレゼン資料の配布が可能です。
プレゼンターモード(/presenter)を使うと、スピーカーノートを確認しながらプレゼンすることができます！

PDF,PPTX,PNGでビルドした場合は、各ファイルを傍聴者に送信することでプレゼン資料の配布が可能です。
各々が慣れたツールでプレゼンすることができます！

🎉 ここまでできれば、あなたはSlidevで簡単なプレゼンをするだけの知識を得ることができました！！

6. 👦 Slidev 入門

ここまでで得た知識は、頑張れば他のプレゼンツールでも使えるような機能です。
ここからは、Slidevの独自機能がより活かせるような使い方を入門していきましょう！

6.1. アニメーションでスライドを盛り上げる

Slidevでは、大きく「クリックアニメーション」と「遷移アニメーション」を使うことができます。

クリックアニメーション

同じページ内で徐々に要素を出したい時に使用するアニメーションのことです。

`v-click`

<v-click>かv-clickAttrで追加できるアニメーションです。

v-clickで囲まれた要素は、右矢印キーやスペースキーを押すことで徐々に表示されます。
上にある要素から順に表示され、全て表示された後に次のページが表示されます。

slides.md

<v-click>
   <p>この要素は 1回 Right Arrow や Space キーを押すことで表示されました</p>
</v-click>

<div v-click>
  <p>この要素は 2回 Right Arrow や Space キーを押すことで表示されました</p>
</div>

`v-after`

<v-after>かv-afterAttrで追加できるアニメーションです。

v-afterで囲まれた要素は、直前のクリックアニメーションが発火することで表示されます。
直前のクリックアニメーションで表示されるタイミングと同じタイミングで表示されます。

slides.md

<div v-click>最初のクリックアニメーション</div> <!-- 1回 Right Arrow や Space キーを押すことで表示 -->
<div v-after>最初のクリックアニメーションが発火することで発火するアニメーション</div> <!-- 1回 Right Arrow や Space キーを押すことで表示（上と同タイミング） -->

`v-clicks`

<v-clicks> のみで追加できるアニメーションです。
リスト等のアイテムを一つずつ表示させたい時に使用します。

slides.md

<v-clicks>
- Item 1 <!-- 1回 Right Arrow や Space キーを押すことで表示 -->
- Item 2 <!-- 2回 Right Arrow や Space キーを押すことで表示 -->
- Item 3 <!-- 3回 Right Arrow や Space キーを押すことで表示 -->
</v-clicks>

Tips : クリックアニメーションで"非表示"にする

これらのアニメーションはクリックすることで表示されるという動作です。
が、逆にクリックすることで非表示にすることも可能です！

slides.md

<v-click>
   <p>この要素は 1回 Right Arrow や Space キーを押すことで表示されました</p>
</v-click>

<div v-click.hide>
  <p>この要素は 2回 Right Arrow や Space キーを押すことで<strong>非表示になります</strong></p>
</div>

Tips : コードブロック内のハイライト

クリックアニメーション機能を使うわけではないですが、コードブロックのハイライトアニメーション機能もあります！
特定の行を注目させたいときに便利です！

コードブロックの行に{none|{ハイライトさせたい行番目}|ハイライトさせたい行番目}を追加することで、クリックするし続けると左から順に指定された行がハイライトされます。

slides.md

```js {none|1|2}
1; // 1回 Right Arrow や Space キーを押すことでハイライト
2; // 2回 Right Arrow や Space キーを押すことでハイライト
\``` <!-- \はZennの都合上記載しています。消してください -->

Tips : `at`でアニメーションタイミングを調整する

atを使うことで、アニメーションのタイミングを調整することができます。
通常は上から順に表示されますが、atを使うことで指定した回数クリックすることで表示されるようになります。

slides.md

<v-click>
   <p>この要素は 1回 Right Arrow や Space キーを押すことで表示されました</p>
</v-click>

<div v-click.at="3">
  <p>この要素は 3回 Right Arrow や Space キーを押すことで表示されました</p> <!-- 通常は2回目だが -->
</div>

<div v-click.at="2">
  <p>この要素は 2回 Right Arrow や Space キーを押すことで表示されました</p> <!-- 通常は3回目だが -->
</div>

遷移アニメーション

ページが変わる時ページ全体にアニメーションをつけたい時に使用するアニメーションのことです。

transitionフロントマターを使って、遷移アニメーションを追加できます。

slides.md

---
transition: slide
---

# 1ページ目

遷移アニメーションには以下の種類があります。

fade - クロスフェードイン/アウト
fade-out - フェードアウトしてからフェードインする
slide-left - 左にスライドします（後進時は右にスライドします）
slide-right - 右にスライドします（後進時は左にスライドします）
slide-up - 上へスライドします（後進時は下へスライドします）
slide-down - 下へスライドします（後進時は上へスライドします）
view-transition- View Transition API

`view-transition`

View Transition API を使用した遷移アニメーションを追加できます。
設定方法は、Slidev - View Transition APIを参照してください。

slides.md

---
transition: view-transition
mdc: true
---

# View Transition {.inline-block.view-transition-title}

---

# View Transition {.inline-block.view-transition-title}

Tips : アニメーションを自分で作る

この遷移アニメーションは、Vue Transition に基づいて実装されています。
Vue Transition に沿ったCSSを追加することで自分で遷移アニメーションを作成することができます。

6.2. コンポーネントでスライド作成を効率化する

Slidevはmdファイル内でVueコンポーネントを直接使用することができます。
{project-root}/componentsにコンポーネントを作成するだけで、mdファイル内で使用することができます。

Vueコンポーネントの機能に制限はなく、Vueでできることならなんでもできます！
Vue.js - Components Basicsを参照してください。

project-root/components/MyComponent.vue

<template>
  <div>
    <h1>MyComponent</h1>
  </div>
</template>

slides.md

# 1ページ目

<MyComponent /><!-- `# MyComponent` が表示されます -->

6.3. テーマを変更してカッコよくする

Slidev のデフォルトデザインはかなり洗練されていてかっこいいですが、自分の好みやユースケースにあわせてテーマを変更することが可能です！

テーマの変更方法

frontmatter に theme を追加することで、テーマを変更することができます。
テーマは別パッケージとして提供されているため、npm等でインストールする必要があります。（基本的には自動でインストールを進めてくれるので気にしなくてもOK）

slides.md

---
theme: {テーマ名}
---

# 1ページ目

テーマ一覧

以下リンクのテーマギャラリーでテーマを確認できます！

https://sli.dev/resources/theme-gallery

個人的には Vercel themeが洗練されていておすすめです！

6.4. レイアウトを調整する

画面右に画像を表示させたい、ページを2分割して表示させたい、などページ全体を調整したい時があると思います。
その時は、layout フロントマターを使ってレイアウトを変更することができます。

初期設定では、1ページ目はcover、2ページ目以降はdefaultとなっています。

slides.md

---
layout: {レイアウト名}
---

# 1ページ目

標準で19種類のレイアウトが提供されているため、自分の欲しいレイアウトは基本あるはずです。
おすすめレイアウト

image-right
文章を左に表示し、画像を右に表示するレイアウト
section
新しいセクションを始める前のセクションタイトルを表示するレイアウト
end
スライドの最後に表示されるレイアウト（「ご清聴ありがとうございました」等）

🎉 ここまでできれば、あなたはSlidevでつよつよなスライドを作ることができているはずです！！！

7. 🧑 Slidev 応用

もうあなたは十分な知識を持っています。
でもまだまだスライドはカッコよくできるはずです！
ここからは、Slidevの応用的な使い方を授けましょう！

7.1. CSSで柔軟にデザインを変更する

提供されているレイアウトや構文だけじゃ自分やりたい表現ができない！という時は、CSSを使って自由にデザインを変更することができます。
styleAttrを使ってスタイルを適用することもできますが、Slidevでは標準で UnoCSS がサポートされています！

css属性名を入力することで、UnoCSSクラス名を検索できる Interactive Docs を併用すると知識がなくても簡単にスタイルを適用できます！

https://unocss.dev/interactive/

以下のプリセットがプリインストール済みのため、すぐに充実したUnoCSSライフを送ることが可能です！

@unocss/preset-uno - Tailwind / Windi CSS 互換ユーティリティ
@unocss/preset-attributify - 属性モード
@unocss/preset-icons - 任意のアイコンをクラスで使用
@unocss/preset-web-fonts - ウェブフォントの使用
@unocss/transformer-directives - @applyCSS での使用

slides.md

<div class="grid pt-4 gap-4 grid-cols-[100px,1fr]">

### Name

- Item 1
- Item 2

</div>

7.2. グローバルコンテキストでスライドの挙動を取得する

ページ番号をスライドに表示させたいや、クリックアニメーションタイミングに応じて高度なだし分けをしたい時があるかもしれません。
このような時は、グローバルコンテキストを使ってスライドの挙動を取得することで実現できます！

提供されている変数が多いため、完璧な詳細は Slidev - Global Contextを参照してください。
ここではいくつかの例を紹介します。

画面かぶにページ番号を表示する

slides.md

# 1ページ目

<div class="absolute bottom-5 right-5">
  <span class="font-size-2">
    {{ $page }}<!-- 1 -->
  </span>
</div>

画面下部にスライドタイトルを表示する

slides.md

# 1ページ目

<div class="absolute bottom-5 left-10">
  <span class="font-size-2">
    {{ $slidev.configs.title }}
  </span>
</div>

7.3. 専用のレイアウトを作成する

6.4. レイアウトを調整するで表現しきれないレイアウトを作成したい時があるかもしれません。

そんな時は、layouts ディレクトリにVueコンポーネントを作成することで、専用のレイアウトを作成することができます。

<slot>部分にmarkdownで記述した内容が挿入されます。
<slot>の使用方法はVueと同じです。（Vueでのslotの扱い方）

{project-root}/layouts/MyLayout.vue

<!-- 画面中央にコンテンツを表示させる独自レイアウト -->
<template>
  <div class="flex flex-col items-center justify-center h-full">
    <slot />
  </div>
</template>

slides.md

---
layout: MyLayout
---

# 1ページ目

7.4. フォントを変更する

日本語スライドを作る時はとても重要な設定です！！！
Slidevでは日本語用のフォントが標準で設定されていないため、自分でフォントを設定する必要があります。

font フロントマターを追加することで、フォントを変更することができます。
Googleフォントはインストール設定不要で使用できます！

日本語スライドでのおすすめ設定

slides.md

---
fonts:
  # 標準テキスト用
  sans: Noto Sans JP
  # UnoCSS で `font-serif` クラスを指定したとき用
  serif: Noto Serif JP
  # コードブロック用
  mono: Fira Code
---

# 1ページ目

おわりに

長々とお付き合いいただきありがとうございました！
このようにSlidevは、既存のプレゼンツールとは一線を画した機能を持っています。
ここでは紹介しきれていない機能もたくさんありますので、ぜひ公式ドキュメントを読んでみてください！

それでは良いつよつよスライド作りを！！

https://sli.dev/

GitHubで編集を提案

1. はじめに

2. Slidev とは？

Slidev の特徴

3. Slidev が他のツールと比べて優れている点（筆者基準）

綺麗なスライドが簡単に作れる

mdファイル単位でGit管理ができる

Vueコンポーネントを作れるので、とても複雑なスライドも作れる

4. 👶 Slidev のきほん

4.1. インストールする

4.2. 新規スライドを作成する

4.3. 新しいページを作る

Tips : 別ファイルに分割する

4.4. ページの内容を記述する

4.5. 台本（スピーカーノート）を書く

4.6. スライドのプレビュー

5. 🔈 Slidev で発表する

5.1. スライドをWebページとして公開する（ホスティング）

1. ビルドする

2. 各ホスティングサービスにアップロードする

5.2. 資料として配布する（PDF,PPTX,PNG）

1. ライブラリのインストール

2a. PDFでビルドする

2b. PPTXでビルドする

2c. PNGでビルドする

5.3. プレゼンする

6. 👦 Slidev 入門

6.1. アニメーションでスライドを盛り上げる

クリックアニメーション

v-click

v-after

v-clicks

Tips : クリックアニメーションで"非表示"にする

Tips : コードブロック内のハイライト

Tips : atでアニメーションタイミングを調整する

遷移アニメーション

view-transition

Tips : アニメーションを自分で作る

6.2. コンポーネントでスライド作成を効率化する

6.3. テーマを変更してカッコよくする

テーマの変更方法

テーマ一覧

6.4. レイアウトを調整する

7. 🧑 Slidev 応用

7.1. CSSで柔軟にデザインを変更する

7.2. グローバルコンテキストでスライドの挙動を取得する

画面かぶにページ番号を表示する

画面下部にスライドタイトルを表示する

7.3. 専用のレイアウトを作成する

7.4. フォントを変更する

日本語スライドでのおすすめ設定

おわりに

Discussion

`v-click`

`v-after`

`v-clicks`

Tips : `at`でアニメーションタイミングを調整する

`view-transition`