はじめに
エンジニアとしてプレゼン資料を作る機会、意外と多いですよね。社内の技術共有会、勉強会での登壇、プロジェクトの進捗報告...。個人的には、パワポやGoogleスライドでの作業がどうも苦手なんですよ。マウスでポチポチ位置調整したり、フォントサイズを揃えたり、そういう作業に時間を取られるのがもったいないと感じてしまう。
そんなときに出会ったのがSlidevというツールです。GitHubスター数42,000超えで、開発者コミュニティでかなり支持されているプレゼンスライド作成ツールなんですよね。
Slidevは「slide + dev」という名前の通り、開発者のためのスライドメーカー。Markdownでスライドが書けて、コードハイライトもバッチリ。Vue.jsベースなので、必要に応じてコンポーネントも使える。正直なところ、技術系のプレゼンならこれ一択かもしれません。
特徴・メリット
Markdownでサクサク書ける
これが一番のメリットですね。普段コードを書いているエディタでそのままスライドが作れる。VS Code拡張機能も用意されていて、プレビューしながら編集できます。
スライドの区切りは --- を書くだけ。frontmatterでレイアウトや背景も指定できるので、見た目の調整もコードベースで完結します。
コードハイライトが優秀
技術プレゼンで欠かせないのがコードの表示。SlidevはShikiとMonaco Editorを統合していて、シンタックスハイライトが非常にきれい。しかもMonaco Editorを使えば、スライド上でコードを実際に編集・実行することも可能です。これ、ライブコーディングのデモに最高なんですよ。
図表もテキストで書ける
MermaidやPlantUMLに対応しているので、フローチャートやシーケンス図もテキストで記述できます。図を別ツールで作ってスクショ貼り付け...みたいな作業から解放されるのはQOL上がりますね。
数式対応
KaTeX/LaTeXをサポートしているので、数式を扱うプレゼンにも対応。機械学習系の発表をする人には嬉しい機能です。
モダンな技術スタック
- Vite：高速なホットリロード
- Vue 3：リアクティブな表現が可能
- UnoCSS：Tailwind的なユーティリティCSS
開発体験がとにかく良い。変更したら即座に反映されるので、ストレスなくスライドを調整できます。
エクスポート機能
PDF、PPTX、PNG形式でエクスポート可能。静的サイトとしてビルドしてホスティングすることもできます。GitHub Pagesにデプロイすれば、URLでスライドを共有できるのも便利ですね。
インストール方法
Node.js 18.0以上が必要です。
npmの場合
npm init slidev@latest
pnpmの場合
pnpm create slidev
yarnの場合
yarn create slidev
プロジェクト名を入力すると、テンプレートがセットアップされます。
既存のMarkdownファイルからスライドを作りたい場合は、CLIをグローバルインストールする方法もあります。
npm i -g @slidev/cli
slidev slides.md
基本的な使い方
スライドの構造
slides.mdファイルにスライドを記述します。基本的な構造はこんな感じ。
---
theme: seriph
title: 私のプレゼンテーション
---
# タイトルスライド
サブタイトルをここに
---
# 2枚目のスライド
- 箇条書き1
- 箇条書き2
- 箇条書き3
---
layout: center
---
# 中央配置のスライド
重要なメッセージはこのレイアウトで
---
# コードを見せたい
```typescript
const greet = (name: string): string => {
return `Hello, ${name}!`;
};
console.log(greet('Slidev'));
### レイアウトの指定
各スライドのfrontmatterでレイアウトを指定できます。
```markdown
---
layout: two-cols
---
# 左カラム
左側のコンテンツ
::right::
# 右カラム
右側のコンテンツ
center、cover、two-cols、image-rightなど、用途に応じたレイアウトが用意されています。
プレゼンターノート
スライド末尾にHTMLコメントを書くと、プレゼンターノートとして扱われます。
# スライドタイトル
本文コンテンツ
<!--
ここにプレゼンターノートを書く
話す内容のメモなど
-->
主要コマンド
# 開発サーバー起動
slidev
# PDFエクスポート
slidev export
# 静的サイトとしてビルド
slidev build
# フォーマット整形
slidev format
実践的なユースケース
技術勉強会での登壇
コードを多く見せる発表には最適。シンタックスハイライトが効いた状態でコードを表示でき、必要ならその場で編集もできる。聴衆に「あ、ここ変えたらどうなるの？」と聞かれても対応できるのは強いですね。
チーム内の技術共有
Gitで管理できるので、チームメンバーからのレビューやフィードバックをプルリクエストで受けられます。スライドのバージョン管理ができるのは、継続的に更新する資料には便利。
アーキテクチャ説明
Mermaid図がそのまま書けるので、システム構成図やフローチャートを含む資料作成が楽。図の修正もテキストを編集するだけなので、メンテナンス性が高い。
オンラインでの資料共有
静的サイトとしてビルドできるので、GitHub PagesやVercelにデプロイすれば、URLを共有するだけでスライドを見てもらえます。PDFを送る手間が省けるし、常に最新版を見てもらえる。
まとめ
Slidevは、エンジニアがストレスなくプレゼン資料を作るための良いツールだと思います。
向いている人
- Markdownに慣れている
- コードを多く含むプレゼンをする
- パワポ作業が苦手
- Git管理したい
向いていないかもしれない人
- デザイン重視のスライドを作りたい
- 非エンジニアと共同編集したい
- オフライン環境でしか作業できない
個人的には、技術系のプレゼンならSlidev一択ですね。最初のセットアップに少し時間はかかりますが、一度環境を整えてしまえば、その後の効率が全然違います。時短になるし、何より書いていて楽しい。
興味がある方は、公式サイトで実際にスライドを作ってみてください。StackBlitzでブラウザ上から試せるので、環境構築なしで体験できますよ。
公式サイト: https://sli.dev/