Markdownのスライド作成：Slidev

2025年5月25日 22:23

１．概要

　Markdown形式でスライド（プレゼンテーション）資料を作成するオープンソースソフトウェアであるSlidevを紹介します。

　公式Docsについて、確認用で日本語もつけていますが非推奨のため、参考にするのは英語版が推奨です。

１－１．Markdownとは

　Markdownは、プレーンテキストのテキスト文書にフォーマット要素を追加するために使用できる軽量のマークアップ言語です。2004年にジョン・グルーバーによって作成されたMarkdownは、今や世界で最も人気のあるマークアップ言語の1つです。
　特別なエディタが不要で、#で見出し、*で箇条書きといった簡単な記号で文章を構造化できるため仕様書やブログ記事、READMEファイルなど、Web上のあらゆる場面で使われています。

１－２．Slidevの概要

　Slidev (slide + dev) はWebベースのスライド作成ツールです。PowerPointやGoogleスライドのようなグラフィカルな操作ではなく、Markdownファイルにテキストを書くだけで簡単にスライド作成できます。
　Slidevの目的は、開発者が既に慣れ親しんでいるツールや技術を使って、プレゼンテーションをさらに面白く、表現力豊かに、そして魅力的にするための柔軟性と対話性を提供することです。

　特に開発者向けに設計されており、ソースコードを綺麗に表示したり、Web技術（HTML, CSS, JavaScript）を使ってスライドを自由にカスタマイズしたりすることを得意としています。作成されたスライドはWebページとして動作するため、ブラウザさえあればどこでも同じように表示・発表できます。

１－３．Slidevの特徴

　Slidevはスライドを綺麗に、効率的に作成するために下記特徴があります。

Markdownベース
テーマの適用とカスタマイズ
webで動く
多数の形式で出力可能(PDF、pptx, PNG、SPAなど)
発表者モード(スライドのプレビュー、発表者ノート、タイマー、描画ツールなど)

技術スタック
　これらのツールや技術を組み合わせることで、Slidevは実現されています。

Vite - 非常に高速なフロントエンドツール
Vue 3をベースにしたMarkdown - 必要に応じてHTMLとVueコンポーネントを使いつつ、コンテンツに集中できます
Windi CSS - オンデマンドなユーティリティファーストのCSSフレームワーク、スライドを自在にスタイリング
Prism、Shiki、Monaco Editor - ファーストクラスのコードスニペットサポートとライブコーディング機能
RecordRTC - ビルトインのレコーディングとカメラビュー
VueUseファミリー - @vueuse/core、@vueuse/head、@vueuse/motionなど
Iconify - アイコンセットコレクション
Drauu - 描画と注釈のサポート
KaTeX - LaTeX数式のレンダリング
Mermaid - テキストによる図解

１－４．その他

　Slidevを利用する上で、重要な技術を紹介します。

　１－４－１．Node.jsとは

　まず初めに”JavaScript”とは、Webサイトやシステムの開発に使われているプログラミング言語です。一般的にはブラウザを動かす機能（ポップアップ画面など）を実装するために使用されるため、Webブラウザの中で動作します。

　Node.jsは、Google Chrome の中核をなす V8 JavaScript エンジンをブラウザの外で実行します。もともとJavaScriptはウェブブラウザ上で動作する言語でしたが、Node.jsの登場により、サーバーサイドやデスクトップアプリなど、ブラウザ以外の環境(自分のPC内)でもJavaScriptを実行できるようになりました。

　Slidev自体がNode.js上で動作するアプリケーションであるため、利用にはNode.jsのインストールが必須となります。

　１－４－２．npmとは

　npm(Node Package Manager)はNode.jsをインストールすると一緒にインストールされるJavaScriptのパッケージ管理システムの一種です。npmは必要とするパッケージの検索、ダウンロード、インストール、アップデートを行えるリポジトリ機能も備えており、開発したパッケージを他者に公開することも可能です(Linuxでいうapt-get, Pythonでいうpipに似てる)

　参考で、パッケージ管理ツールはnpm以外にも何種類かあるみたいです。

npm：Node.js標準のパッケージマネージャー
pnpm：Facebook（現Meta）発のnpm代替
Yarn：「重複排除」と「高速化」を重視したnpm互換のパッケージマネージャー
Bun：パッケージ管理だけでなく、JavaScriptランタイム／ビルダー／テストランナーまで一体化

２．環境構築

　SlidevはNode.js >=14.0が必要です。動作確認も含めて環境構築をします。

２－１．Node.jsのダウンロード

　まずは公式サイトに移動します。私はWindowsのためLTS版の「Windows インストーラー (.msi)」をダウンロードしてから実行しました。
　Windows環境では"C:\Program Files\nodejs\node.exe"に実行ファイルが作成されるはずです。

　これでインストールは完了です。下記コマンドでインストールしたVersionが確認出来たら問題ありません。

[Terminal(Powershell)]
node -v
npm -v

　コラム：AnacondaでNode.js管理

　インストーラーで作成したディレクトリとは別の場所で実行ファイルが存在すると期待と異なるVersionが実行されます。私の例として「Anaconda環境にNode.jsが存在する場合」を紹介します。

Anaconda環境でのNode.jsの存在確認
　前述の"node -v"コマンドでインストールしたものと別Versionのファイルが読みだされました。まず初めにAnaconda環境にNode.jsが存在するか"conda list nodejs"を実行し、存在を確認しました。

[Terminal(Anaconda Prompt)]
conda list nodejs

[OUT]
# packages in environment at C:\Users\kiyo\Anaconda3:
#
# Name                    Version                   Build  Channel
nodejs                    24.4.0               he453025_0    conda-forge

ターミナルの実行環境を確認
　今使用しているターミナルがどのNode.jsを使用している確認するために"Get-Command node"を実行しました。Sourceに記載されている場所はインストーラーの場所と異なれば、環境変数の設定が原因と推測されます。

[Terminal(Powershell)]
Get-Command node

Anaconda環境のNode.jsをCondaコマンドでアップデート
　Anacondaのパッケージ管理システム(conda)を使って、Node.jsをインストール（更新）するコマンドは下記の通りです。

[Terminal(Anaconda Prompt)]
conda install -c conda-forge nodejs

環境変数の修正
　Windowsでは、”システムのプロパティ”の”環境変数”に移動し、環境変数のPathにおいて下記の順番を入れ替えます(nodejsを上にする)。
　私は念のためユーザ環境変数とシステム環境変数の両方を修正しました。
※修正後はターミナルは再起動した方が良いと思います。

C:\Users\<ユーザー名>\Anaconda3
C:\Program Files\nodejs\

　PATHを変更することでインストーラ環境のファイルが優先して実行されることを確認しました。

　なおnpmでインストールしたファイルは全く別の場所に保管されます。公式の保管場所は”npm root -g”で確認できます。

C:\Users\<ユーザー名>\AppData\Roaming\npm\node_modules
C:\Users\<ユーザー名>\Anaconda3\node_modules

２－２．VS Code Extension

　公式からVS Codeの拡張機能がリリースされています。VS Codeユーザーのためこちらも追加します。

Preview in VS Code? Sure! and even more than that! 🤯

New in Slidev v0.11 and VS Code extension v0.2.0 🚀
Do remember to upgrade both before trying out!

Kudos @ycjcl for this awesome contributions! 🙌🤩 pic.twitter.com/BwANqd7M2s
— Slidev (@Slidevjs) May 20, 2021

　VS Codeの拡張機能から下記をインストールします。

２－３．Slidev CLI（任意）

　Powershell等のターミナルからSlidevコマンドを使用できます。

npm install：Node Package ManagerでNode.js のパッケージを管理
-g：インストールの場所を指定
- オプション無しはローカルインストール
- -gはグローバルインストール(PC全体で1つのバージョンしか保持できないデメリットあり)
- やみくもに-g利用は駄目みたいですが、今回はCLIツールでありPCのどこからでもコマンドを使いたいので-gを使用
@slidev/cli：SlidevのCLIを指定

[Terminal]
npm install -g @slidev/cli

【参考：グローバルインストールでの保管場所】
　-gオプションでインストールされたファイルの保管場所は"npm root -g"で確認可能※です。
※グローバルインストールされたパッケージが格納されている node_modules フォルダのパスを表示

[Terminal]
npm root -g

[OUT]
C:\Users\<ユーザー名>\AppData\Roaming\npm\node_modules

３．Quickstart1:とにかく動かす

　公式の「Getting Started」＋「学習リソース」を参考にしていきます。

３－１．プロジェクト作成：npm init slidev

　初めにSlidevプロジェクトを作成します。エコシステム（npm、yarn、pnpm、bunなど）のパッケージマネジャーを使用でき、ここではnpmを使用します。

　作業ディレクトリまで移動し、下記コマンドを実行します。

[Terminal(Powershell)]
npm init slidev@latest

　対話形式でプロジェクト名や開始を聞かれるので入力すると、指定したフォルダにSlidevプロジェクトが生成され、また”http://localhost:3030”が起動してブラウザ上でスライドが表示されます。

Need to install the following packages：y+Enter
Project name:プロジェクト名記載(そのままEnterでもOK)
Install and start it now?：Yes+Enter
Choose the package manager：npm+Enter

ディレクトリ構造は下記の通り。

components：カスタムコンポーネントを配置するディレクトリ。ここに配置したコンポーネントは、スライドのMarkdownファイルで直接使用可能
node_modules(Node.js用)：package.jsonで定義された依存パッケージの実際のファイルがインストールされるディレクトリ
pages：-
snippets：-
netlify.toml(デプロイ用)：ホスティングサービス「Netlify」のビルド設定やリダイレクトルールなどを定義する構成ファイル
package.json(Node.js用)：プロジェクトのメタデータ（名前、バージョンなど）と、プロジェクトが依存するパッケージ（ライブラリ）を定義するファイル
package-lock.json(Node.js用)：インストールされたパッケージの正確なバージョンツリーを記録するファイル
README.md：説明ファイル
slides.md：: メインスライド用のMarkdownファイル
vercel.json(デプロイ用)：ホスティングサービス「Vercel」のプロジェクト設定を定義する構成ファイル

３－２．スライド作成

　”npm init slidev@latest”を実行すると、プロジェクトフォルダ内にSlidevの機能紹介用slides.mdが自動で作成されます。

　今回は学習のため、"slides.md"を空ファイル(中身を全部削除)にし、ゼロからスライドを作成します。社学者向け注意点は下記の通り。

ページ切り替えの"---"の下は改行が必要
VS Codeを使っていると触れない"# x"が出る。ページ番号のため気にしなくてよい。

　３－２－１．Slidevの設定

　Slidevの設定としてFrontmatterがあり、タイトルやテーマなどを設定できます。記法として、各スライドの先頭やslides.md ファイル全体の先頭に --- で囲まれたブロックを置くことで、スライドの設定を行えます。
　サンプルとしていくつか設定して表紙を作成しました。

title：ブラウザのタブなどに表示されるタイトル
theme：スライドのデザインテーマを設定
- テーマギャラリー(https://ja.sli.dev/themes/gallery.html)
- 初回設定時はターミナルでインストール確認が必要
lineNumbers：コードブロックで行番号を表示するかを設定

[slides.md]
---
title: ここにタイトルを書く
theme: shibainu
lineNumbers: true
---

# 本文のタイトル

ここは本文内の文章を書く場所です。

　３－２－２．レイアウト変更

　Slidevでは、スライドごとに最適なレイアウトを適用できます（例：左右に画像とテキストを並べる）。レイアウトは、各スライドの先頭にあるFrontmatter（スライドごとの設定）でlayout:キーを使って指定します。

　参考として２カラムで左右に配列してみました。two-colsだとthemeが消えてしましましたが、とりあえず２列に配列できることは確認しました。

[slides.md]
前ページは同上

---
layout: two-cols
---

# 2カラムレイアウトの例

- こちらは左側のカラムです
- 画像とテキストを並べて表示できます
- 柴犬テーマでの表示例です

<img src="https://assets.st-note.com/img/1661919379413-vE07W5wCwS.jpg" />

::right::

- こちらは右側のカラムです
- 柴犬テーマを使用したスライドです 🐕
- 2カラムレイアウトの動作確認
- スタイリングとレイアウトのテスト

　３－２－３．アニメーション

　Slidevでアニメーション機能も追加可能です。

[slides.md]
前ページは同上

--- 
# アニメーションの練習

<div v-click>1番目に表示</div>
<div v-click>2番目に表示</div>
<div v-after>↑と同時に表示されます</div>

<v-clicks>

- Item 1
- Item 2
- Item 3
- Item 4

</v-clicks>

　３－２－４．コンポーネント埋め込み

　SlidevではVueコンポーネントによる拡張機能があり、スライド内に図や動画などを埋め込むことが出来ます。

[slides.md]
前ページは同上

---

# 図の埋め込み

```mermaid
graph TD
    A[Slidevを学ぶ] --> B{楽しい！};
    B --> C[プレゼンが作れる];
    B --> D[Web技術も学べる];
```

```python
def hello_world():
    print("Hello, world!")

hello_world()

---

# YouTube動画の埋め込み
<Youtube id="jewBvPC3F5E" />  
(動画IDはYouTubeのURLから取得)

<Tweet id="1930644849889558820" />

　MermaidやYoutube動画は埋め込みできました。
※Tweetは何故かエラー

　３－２－５．発表者ノート

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

[slides.md]
前ページは同上

３－３．エクスポート

　作成したスライドをPDFやPPTXで出力できます。

　今回はブラウザ上からPDFで出力しました。

　PDFのためアニメーションは再現できませんでしたが、簡単にスライド作成できました。

４．Quickstart2:シンプルに動かす

　前章ではプロジェクト化で動作確認しました。
　ファイル・フォルダが多く管理が少し煩雑な印象を受けるため、もう少しサクッと作れるか試してみます。

[Terminal(Powershell)]
npm init slidev@latest

　本章では２．環境構築での「Slidev CLI」を使用しています。
※おそらくnpxコマンドを使用すれば事前の環境構築不要ですが、まだ理解できていないため分かったら追記します。

　スライドを作成するMarkdownファイルを２パターンで作成してみます。

slidev CLIでゼロから作成
自分でMarkdownファイル作成し、それをslidevで起動させる

４－１．Slidev CLIから作成

　Slidev CLIでのmdファイル作成は”slidev [entry]”です。

slidevだけで実行すると"slides.md"を作成
コマンドの後ろにファイル名を付けるとその名前でファイル作成

[Terminal(Powershell)]
slidev <ファイル名>.md

　実行後は下記確認できます。

チュートリアルが記載されたmdファイルが作成
ローカルホストでサーバーが立ち上がり、ブラウザでスライドが確認可能

４－２．mdファイル作成＋Slidevで起動

　前述の方法だとチュートリアルの中を削除する必要があります。下記フローでスクラッチから作成可能です。

好きなIDEでmdファイルを作成
slidev <ファイル名>.md コマンドを実行
自動でサーバーが立ち上がるので、指定のURLをブラウザで確認

[Terminal(Powershell)]
slidev <ファイル名>.md

　mdファイル内のデータがスライドとして表示されていることが確認できました。

[scratch_test.md（適当に作成したmdファイル）]
---
layout: cover
background: https://sli.dev/demo-cover.png
---

# Slidevへようこそ!

開発者のためのプレゼンテーションスライド

---

# Page 2

- 📄 スライドを1つのMarkdownファイルで
- 🌈 テーマ、コードブロック、インタラクティブなコンポーネント
- 😎 詳しくはドキュメントをご覧ください!|

５．基本操作

５－１．コマンド

　SlidevのCLIコマンドは以下の通り。

slidev：開発サーバーを起動
- --port, -p (number, default: 3030): ポート番号。
- --base (string, default: /): ベースURL
- --open, -o (boolean, default: false): ブラウザで開く
- --remote [password] (string): パブリックホストで待ち受け、リモートコントロールを有効にする。
- --bind (string, default: 0.0.0.0): リモートモードでサーバーが待ち受けるべきIPアドレスを指定
- --log ('error', 'warn', 'info', 'silent', default: 'warn'): ログレベル
- --force, -f (boolean, default: false): オプティマイザにキャッシュを無視して再バンドルを強制
- --theme, -t (string): テーマを上書き
slidev export：スライドをPDF、PPTX、またはPNGにエクスポート
- --output: 出力へのパス。
- --format ('pdf', 'png', 'pptx', 'md', default: 'pdf'): 出力形式
- --timeout (number, default: 30000): 印刷ページをレンダリング用の時間
- --range (string): エクスポートするページ範囲
- --dark (boolean, default: false): ダークテーマとしてエクスポート
- --with-clicks, -c (boolean, default: false): 各クリックアニメーションごとにページをエクスポート
- --theme, -t (string): テーマを上書き
slidev build：スライドを静的なウェブアプリケーションとしてビルド
- --out, -o (string, default: dist): 出力ディレクトリ
- --base (string, default: /): ベースURL
- --download (boolean, default: false): SPA内でスライドをPDFとしてダウンロードできるようにする
- --theme, -t (string): テーマを上書き
slidev format：スライドをフォーマット
slidev theme：テーマ関連の操作を行う
- --dir (string, default: theme): 出力ディレクトリ
- --theme, -t (string): テーマを上書き
slidev --help：ヘルプメッセージを表示

　コマンド使用のためのスクリプト追記が必要ですが、npm init slidev時に自動で追加されるため対応は不要です。

５－２．フロントマター

　Slidevの設定としてFrontmatterがあり、これによりタイトルやテーマなどを設定できます。記法として、各スライドの先頭やslides.md ファイル全体の先頭に --- で囲まれたブロックを置くことで、スライドの設定を行えます。

[Frontmatterの設定]
---
# テーマのIDもしくはパッケージ名
theme: 'default'
# スライドのタイトル 指定されていない場合、最初のヘッダーから自動的に推測されます。
title: ''
# webページのタイトルテンプレート `%s`は各ページのタイトルで置き換えられます。
titleTemplate: '%s - Slidev'

# SPAビルドにおけるPDFダウンロードを有効化します。カスタムURLを使用することも可能です。 
download: true
# シンタックスハイライト 'prism'か'shiki'が選択可能です。
highlighter: 'prism'
# コードブロックに行番号を表示します。
lineNumbers: false
# Monacoエディタを有効化します。デフォルトでは開発環境のみ有効です。
monaco: 'dev'

# スライドのカラースキーマを変更します。'auto'、'light'または'dark'を指定可能です。
colorSchema: 'auto'
# vue-routerのためのrouterModeを指定します。"history"または"hash"が指定可能です。
routerMode: 'history'
# スライドのアスペクト比を指定します。
aspectRatio: '16/9'
# canvasの実際の横幅を指定します。単位はpxです。
canvasWidth: 980

# faviconにはローカルファイルのパスか、URLを使用できます。
favicon: 'https://cdn.jsdelivr.net/gh/slidevjs/slidev/assets/favicon.png'
# フォントはGoogle Fontsから自動的にimportされます。
# 詳細: https://sli.dev/custom/fonts
fonts:
  sans: 'Roboto'
  serif: 'Roboto Slab'
  mono: 'Fira Code'

# デフォルトのフロントマターはすべてのスライドに適用されます。
defaults:
  layout: 'default'
  # ...

# スライドの情報をMarkdownで記述することができます。
info: |
  ## Slidev
  My first [Slidev](http://sli.dev/) presentations!
---

５－３．ページレイアウト

　ページレイアウトでスライドのページ全体の「ひな形」や「テンプレート」が設定できます。

center：コンテンツを画面中央に表示
cover：プレゼンテーションの表紙を表示するために使用します。プレゼンテーションのタイトルやコンテキストを含めることができる
default：最も基本的なレイアウトで、あらゆる種類のコンテンツを表示
end：プレゼンテーションの最後のページ
fact：事実やデータを画面上で大きく目立たせて見せるために使用
full：画面のすべてのスペースを使って、コンテンツを表示
image-left：画面の左側に画像を表示し、右側にコンテンツを配置
image-right：画面右側に画像を表示し、左側にコンテンツを配置
image：画像をページのメインコンテンツとして表示
iframe-left：画面の左側にWebページを表示し、右側にコンテンツを配置
iframe-right：画面の右側にWebページを表示し、左側にコンテンツを配置
iframe：Webページをメインコンテンツとして表示
intro：プレゼンテーションの始まりに使用。一般的にはプレゼンテーションのタイトル、簡潔な説明、著者など
none：スタイルなしのレイアウト
quote：引用文を目立つように表示
section：新規プレゼンテーションのセクションの開始を示すために使用
statement：断言/宣言をメインページのコンテンツとして表示
two-cols：左右にコンテンツを表示できるレイアウト

５－４．アニメーション

　Slidevではアニメーション機能が使用可能です。

v-click：要素にクリックアニメーションを適用します。クリックするたびに次の要素が表示されます。
v-after：前の v-click 要素が表示された直後に、この要素をアニメーションで表示させます。
v-click-hide：要素がクリックされた後、非表示にします。
v-clicks：リストなどの各子要素に、順番にクリックアニメーション（v-click）を適用します。
v-motion：より高度なアニメーション（モーション）を要素に適用します。VueUseの @vueuse/motion を利用した機能です。

５－５．コンポーネント

英語(推奨)

５－６．エクスポート

英語(推奨)

６．参考Docs

６－１．テーマギャラリー

　Slidevで利用できるテーマ。

英語(推奨)

日本語

６－２．ショーケース

Slidevを使ったトーク / プレゼンテーションです。

英語(推奨)

日本語

参考資料

別添１：Slidev

別添２：技術ブログ

別添３：Markdown

別添４：その他

あとがき

更新履歴

2025年5月25日：ノートだけ発行（ほぼ空白）
2025年8月23日：詳細追加

Markdownのスライド作成：Slidev

１．概要

１－１．Markdownとは

１－２．Slidevの概要

１－３．Slidevの特徴

１－４．その他

１－４－１．Node.jsとは

１－４－２．npmとは

２．環境構築

２－１．Node.jsのダウンロード

コラム：AnacondaでNode.js管理

２－２．VS Code Extension

２－３．Slidev CLI（任意）

３．Quickstart1:とにかく動かす

３－１．プロジェクト作成：npm init slidev

３－２．スライド作成

３－２－１．Slidevの設定

３－２－２．レイアウト変更

３－２－３．アニメーション

３－２－４．コンポーネント埋め込み

３－２－５．発表者ノート

３－３．エクスポート

４．Quickstart2:シンプルに動かす

４－１．Slidev CLIから作成

４－２．mdファイル作成＋Slidevで起動

５．基本操作

５－１．コマンド

５－２．フロントマター

５－３．ページレイアウト

５－４．アニメーション

５－５．コンポーネント

５－６．エクスポート

６．参考Docs

６－１．テーマギャラリー

６－２．ショーケース

参考資料

別添１：Slidev

別添２：技術ブログ

別添３：Markdown

別添４：その他

あとがき

更新履歴

あなたへのおすすめ

　１－４－１．Node.jsとは

　１－４－２．npmとは

　コラム：AnacondaでNode.js管理

　３－２－１．Slidevの設定

　３－２－２．レイアウト変更

　３－２－３．アニメーション

　３－２－４．コンポーネント埋め込み

　３－２－５．発表者ノート