Slidev 調査レポート

1. 基本情報

• ツール名: Slidev
• ツールの読み方: スライデブ
• 開発元: Anthony Fu (オープンソースプロジェクト)
• 公式サイト: https://sli.dev/
• 関連リンク:
  • GitHub: https://github.com/slidevjs/slidev
  • ドキュメント (日本語): https://ja.sli.dev/guide/
• カテゴリ: プレゼンテーションツール
• 概要: 開発者のために設計されたWebベースのプレゼンテーションスライド作成ツール。Markdownでコンテンツを記述し、Vue.jsのコンポーネントやViteの高速なHMR（Hot Module Replacement）を活用して、インタラクティブで表現力豊かなスライドを作成できる。

2. 目的と主な利用シーン

• 解決する課題:
  • 従来のGUIプレゼンツール（PowerPointやKeynote）では、コードスニペットの美しく正確な表示や、Git等を用いたバージョン管理が難しいという課題。
  • プレゼンテーション内にインタラクティブな要素（ライブデモ等）を組み込む際の手間。
• 想定利用者: ソフトウェアエンジニア、開発者、技術系カンファレンスの登壇者
• 利用シーン:
  • 技術カンファレンスやミートアップでのLT（ライトニングトーク）用スライド作成。
  • 社内勉強会でのコードを多用するプレゼンテーション。
  • 動的なデモやVueコンポーネントを埋め込んだリッチなWebスライドの共有。

3. 主要機能

• Markdownベースの記述: スライド全体を1つのMarkdownファイルで管理。フロントマター（YAML）を使ってスライド単位の設定やグローバル設定を行える。
• 開発者フレンドリーなコード表示: Shikiを内蔵し、高精度なシンタックスハイライトを提供。Monaco Editorを利用したライブコーディングや「Shiki Magic Move」によるアニメーションも可能。
• Vueコンポーネントの統合: スライド内に直接Vueコンポーネントを埋め込み、インタラクティブな操作や動的なデモを実現。
• テーマと拡張機能 (Addons): npmパッケージとして公開されている公式・コミュニティ製のテーマやプラグインを一行の記述で導入可能。
• 強力なエクスポート機能: PDF、PNG、PPTX、または静的Webアプリケーション（SPA）としてスライドを出力可能（Playwrightを利用）。
• AI連携 (MCP Server): Model Context Protocol (MCP) サーバーを内蔵し、Claude CodeなどのAIコーディングエージェントからスライドの検査や編集が可能。
• 充実したプレゼンターモード: 発表者用のウィンドウで、ノートの確認、スライド一覧、次スライドのプレビュー、画面ミラーリング（ライブコーディング用）などが利用可能。
• 録画機能: スライドの発表に合わせて画面やカメラ映像を録画する機能が組み込まれている。

4. 動作原理・システム構成

• アーキテクチャ: ローカルファーストの開発環境 ＆ クラウド/静的ホスティング対応のWebアプリケーション
• 主要コンポーネントとデータフロー:
  • ユーザーは slides.md などのMarkdownファイルを編集する。
  • Vite がローカルサーバーとして稼働し、変更を即座にブラウザに反映（HMR）。
  • Markdownは内部で解析され、Vueコンポーネントとしてレンダリングされる。
  • UnoCSS（オンデマンドのユーティリティファーストCSS）を用いてスタイルが適用される。
• 特筆すべき要素技術:
  • Vite: 高速なビルドと開発サーバーの提供。
  • Vue 3: コンポーネントベースのUI構築。
  • Shiki / Monaco Editor: コードハイライトとエディタ機能。
  • Playwright: PDFや画像エクスポート時のヘッドレスブラウザレンダリング。
  • KaTeX / Mermaid: 数式やテキストベースのダイアグラム描画。

5. 開始手順・セットアップ

• 前提条件:
  • Node.js >= 20.12.0 がインストールされていること。

• インストール/導入:

  # pnpmを使用する場合 (推奨)
  pnpm create slidev
  

• 初期設定: 対話型のプロンプトに従ってプロジェクトを作成すると、雛形となる slides.md などが生成される。

• クイックスタート:

  cd [プロジェクトフォルダ]
  npm run dev  # 開発サーバーが立ち上がり、プレビューがブラウザで開く
  

6. 特徴・強み (Pros)

• Gitでの完全なバージョン管理: 単一のテキストファイル（Markdown）で構成されるため、差分管理やチームでのコラボレーションが容易。
• 極めて高い拡張性: Web技術（HTML/CSS/JS/Vue）で作られているため、WebGLの埋め込みやAPI呼び出しなど、Webで可能なことはすべてスライド上で実現できる。
• コード表示の美しさと利便性: 開発者向けツールならではの高品質なコードハイライト、行のハイライト、差分アニメーションが標準で備わっている。
• UnoCSSによる素早いスタイリング: Tailwind CSSライクなユーティリティクラスをMarkdown内で直接記述でき、手軽にレイアウトやスタイル調整が可能。

7. 弱み・注意点 (Cons)

• 学習コストが高い: Markdown記法に加え、高度なレイアウトやコンポーネントのカスタマイズにはHTML、CSS (UnoCSS)、Vue.jsの知識が要求されるため、非エンジニアにはハードルが高い。
• WYSIWYGエディタではない: ドラッグ＆ドロップでの直感的な配置やサイズ調整は基本的なUIでは行えず、コードベースでの調整が主となる。
• PDFエクスポートの依存関係: PDF等を出力する際にはPlaywright（およびChromium）のインストールが必要で、CI/CD環境でのセットアップに一手間かかる場合がある（フォントのインストール等）。

8. 料金プラン

プラン名	料金	主な特徴
オープンソース (MIT)	無料	すべての機能を制限なく利用可能。GitHub上でソースコードが公開されている。

• 課金体系: 完全無料（コミュニティや開発者へのSponsorプログラムあり）
• 無料トライアル: なし (常に無料)

9. 導入実績・事例

• 導入企業: 個人開発者やテック企業のエンジニアを中心に幅広く利用されている（特定のエンタープライズ導入事例としての公表というよりは、技術コミュニティでのデファクトスタンダードの一つ）。
• 導入事例: カンファレンス（Vue.js Nation, VueDayなど）での登壇資料、OSSプロジェクトの紹介資料として頻繁に利用されている。
• 対象業界: IT、ソフトウェア開発、教育（特にプログラミング教育）

10. サポート体制

• ドキュメント: 公式ドキュメントが非常に充実しており、多言語対応（英語、日本語、中国語等）も進んでいる。
• コミュニティ: 活発なDiscordサーバー (chat.sli.dev) が存在し、質問や作成したスライドの共有が行われている。GitHub上でのIssue/Pull Requestも盛ん。
• 公式サポート: オープンソースプロジェクトのため、企業向けのSLAベースの公式サポートはない。コミュニティベースのサポートとなる。

11. エコシステムと連携

11.1 API・外部サービス連携

• API: プログラムから拡張可能なプラグインAPI（Viteプラグイン、Vueアプリのセットアップフック等）を提供。
• 外部サービス連携: AIエージェントとの連携用にMCP (Model Context Protocol) サーバー機能や、VS Code拡張機能（Language Model Tools対応）を提供。

11.2 技術スタックとの相性

技術スタック	相性	メリット・推奨理由	懸念点・注意点
Vue.js	◎	ベースがVue 3であり、コンポーネントをそのままシームレスに利用可能。	特になし
Vite	◎	開発サーバーとビルドツールとして標準採用。Viteプラグインがそのまま使える。	特になし
UnoCSS (Tailwind)	◎	標準で組み込まれており、ユーティリティクラスでのスタイリングが前提となっている。	特になし
React / 別のFW	△	iframe等での埋め込みは可能だが、直接的なコンポーネント統合はVueほどシームレスではない。	Vueベースであるため、Reactコンポーネントの直接利用は工夫が必要

12. セキュリティとコンプライアンス

• 認証: ローカルで動作するツールのため、独自のユーザー認証機能は持たない（静的サイトとしてデプロイする際、ホスティング側でBasic認証等を設定可能）。
• データ管理: データはすべてユーザーのローカル環境のファイル（Markdown等）として保存される。SaaSのように外部サーバーにデータが送信されることはない。
• 準拠規格: オープンソースソフトウェアであり、特定のエンタープライズ向けコンプライアンス規格（SOC2等）の認証はない。

13. 操作性 (UI/UX) と学習コスト

• UI/UX: プレゼンターモードやナビゲーションバーなど、発表をサポートするUIが洗練されている。
• 学習コスト: Markdownの基本を知っていればすぐに使い始められるが、自由度の高いレイアウトやアニメーション、独自のVueコンポーネントを作成するには、Webフロントエンド技術の知識が必要となる。

14. ベストプラクティス

• 効果的な活用法 (Modern Practices):
  • コンテンツは slides.md に集中させ、複雑なレイアウトやスタイルはVueコンポーネントやカスタムCSSクラスに分離する。
  • v-click や v-motion ディレクティブを活用して、情報を段階的に表示し、聴衆の注意を引く。
  • プレゼンターモードの「Screen Mirror」機能を使って、ライブコーディングの画面を聴衆側（プロジェクター）に共有する。
• 陥りやすい罠 (Antipatterns):
  • 1つのスライドにテキストやコードを詰め込みすぎること（Markdownの特性上、書きすぎてしまう傾向がある）。
  • CI/CD環境（GitHub Pages等）でのPDF自動生成時、フォント（特に絵文字フォント）が不足して表示が崩れる問題。環境構築時に適切なフォントをインストールする必要がある。

15. ユーザーの声（レビュー分析）

• 調査対象: GitHub Stars, X (Twitter), 技術ブログ
• 総合評価: GitHub Stars 48,000超と、開発者コミュニティから圧倒的な支持を集めている。
• ポジティブな評価:
  • 「Gitでスライドを管理・レビューできるのが最高。」
  • 「コードハイライトが美しく、ライブコーディングの統合が素晴らしい。」
  • 「Vueコンポーネントが使えるため、表現の限界がない。」
• ネガティブな評価 / 改善要望:
  • 「エンジニア以外のメンバーとの共同編集が難しい。」
  • 「PDFエクスポート時に環境（フォント等）によってレイアウトが崩れることがある。」
• 特徴的なユースケース:
  • テックブログの内容をそのままスライドに変換し、カンファレンスで発表する。
  • コンポーネント内で実際にAPIを叩いて、リアルタイムのデータを表示するデモ用スライド。

16. 直近半年のアップデート情報

• 2024-08-19: v52.19.1 - バグ修正。create-app のデフォルト設定の改善など。
• 2024-08-03: v52.19.0 - クライアント側（Gotoダイアログ等）のバグ修正。
• 2024-07-31: v52.18.1 - VS Code拡張でプロジェクトツリーをエントリパスでソートする機能の追加。Cloudflareトンネルのサポート改善。
• 2024-07-14: v52.18.0 - PWAサポートをオプショナルなpeer dependencyに変更。ナビゲーションで現在のスライドのフロントマターを公開。
• 2024-07-10: v52.17.0 - オフラインサポート（PWAプリキャッシュ）、メモリルーティングモードの追加。MCP (Model Context Protocol) サーバーの内蔵。
• 2024-06-03: v52.16.0 - テーマからのプリパーサーの読み込みサポート。pnpm 11への対応、shiki-magic-move の移行。VS Codeのオーバービュープレビューモード追加。

(出典: Slidev GitHub Releases)

17. 類似ツールとの比較

17.1 機能比較表 (星取表)

機能カテゴリ	機能項目	本ツール	Reveal.js	Marp	PowerPoint / Keynote
基本機能	Markdown対応	◎ 拡張Markdown	◯ 対応しているがHTMLが基本	◎ シンプルに記述可能	× 非対応
開発者機能	コードハイライト	◎ Shiki内蔵、非常にリッチ	◯ 対応	◯ 対応	× 手動調整が必要
表現力	コンポーネント統合	◎ Vueコンポーネントが使える	△ 基本はHTML/JS	△ CSSカスタマイズが主	◎ GUIで高度なアニメーション
運用	バージョン管理 (Git)	◎ プレーンテキスト	◎ プレーンテキスト	◎ プレーンテキスト	× バイナリファイル

17.2 詳細比較

ツール名	特徴	強み	弱み	選択肢となるケース
本ツール (Slidev)	開発者向けのリッチなWebベーススライドツール	Vue統合、高い拡張性、美しいコード表示	Webフロント技術の知識が必要	コードを多用する発表や、インタラクティブな要素を入れたい場合
Reveal.js	歴史あるHTMLプレゼンテーションフレームワーク	プラグインが豊富、安定している	HTMLの記述が多くなりがち	複雑な3Dトランジションや、歴史あるエコシステムを利用したい場合
Marp	シンプルさに特化したMarkdownスライドツール	非常にシンプルでポータブル、学習コストが低い	Slidevほどの高度なアニメーションやコンポーネント統合はない	とにかく素早くシンプルにMarkdownからスライドを作りたい場合
PowerPoint / Keynote	汎用的なGUIプレゼンテーションツール	直感的な操作、非エンジニアとの協業が容易	バージョン管理が困難、コード表示が不便	ビジネス向けのプレゼンや、エンジニア以外のメンバーと共同編集する場合

18. 総評

• 総合的な評価: Slidevは、ソフトウェアエンジニアや開発者にとって「痒い所に手が届く」革新的なプレゼンテーションツールです。Markdownでサクサク書ける手軽さと、Vue.jsやViteのエコシステムをフル活用できる拡張性の高さを両立しています。特に、コードハイライトの美しさや、ライブコーディング・動的コンポーネントの埋め込み機能は、技術系の発表において圧倒的な強みを発揮します。
• 推奨されるチームやプロジェクト: 技術系カンファレンスに登壇するエンジニア、社内勉強会でコードを共有する開発チーム、テックブログの内容を再利用してスライド化したいプロジェクトに強く推奨されます。
• 選択時のポイント: 非エンジニアも交えた共同編集が必要な場合はPowerPoint等を選ぶべきですが、執筆者がエンジニアのみであり、Gitでのバージョン管理やコードの美しさを重視する場合は、Slidevが最良の選択肢となります。シンプルな構成で済む場合はMarpと比較検討し、よりリッチな表現やWeb技術の統合が必要な場合にSlidevを選択すると良いでしょう。