Markdownを使ってSlidevでプレゼンテーションをコーディングする方法

プレゼンテーションの作成は、開発ワークフローからのコンテキストスイッチのように感じるべきではありません。しかし、従来のツールはドラッグ&ドロップのインターフェース、独自フォーマット、そしてバージョン管理の悪夢へと私たちを強制します。Slidevは異なるアプローチを提供します:すでに使用している同じフロントエンドツールに支えられた、Markdownベースのスライドです。

この記事では、Slidevのコアとなるプレゼンテーションワークフロー(作成からエクスポートまで)を取り上げ、スライドをバージョン管理下に置きたい開発者にとって魅力的な理由を説明します。

Slidevが他のプレゼンテーションツールと異なる点

Slidevは単なるスライドジェネレーターではありません。Markdownを主要な入力フォーマットとして扱う、Viteを搭載したVue 3アプリケーションです。この違いは重要です。なぜなら、開発中のホットモジュールリプレースメント、コンポーネントベースのアーキテクチャ、プラグインエコシステムといった、モダンなフロントエンドツールの全機能を利用できるからです。

PowerPointやGoogle Slidesとは異なり、プレゼンテーションはプレーンテキストファイルとして存在します。Reveal.jsのような古いツールとは異なり、SlidevはVueエコシステムと直接統合されています。静的スライドが提供する以上のインタラクティブ性が必要な場合は、VueコンポーネントをMarkdownに組み込むことができます。

その結果、フロントエンド開発者にとってネイティブに感じられるプレゼンテーションが実現します。CSS、JavaScript、コンポーネントアーキテクチャに関する既存の知識が直接活用できます。

Slidevのコアとなるプレゼンテーションワークフロー

Markdownでスライドを作成する

Slidevプロジェクトはslides.mdファイルを中心に構成されます。各スライドは---で区切られ、個々のスライドまたはデッキ全体をYAMLフロントマターを通じて設定します。

---
theme: default
---

# Welcome

Your first slide content here.

---

# Second Slide

- Bullet points work as expected
- So does **bold** and *italic* text

標準的なMarkdown構文で、見出し、リスト、リンク、画像などのほとんどのコンテンツを処理できます。コードブロックは自動的にシンタックスハイライトされます。Markdownで表現できないものが必要な場合は、HTMLまたはVueコンポーネントをインラインで記述します。

開発サーバーの起動

CLIはホットリロード機能を備えたローカル開発サーバーを起動します。Markdownファイルを編集すると、ブラウザが即座に更新されます。プレゼンタービューには、現在のスライド、次のスライド、スピーカーノートが表示され、別のプレゼンタービューURLからアクセスできます。

この密接なフィードバックループにより、反復作業が高速化されます。エクスポートや再ビルドを待つ必要はありません。

大規模なプレゼンテーションの整理

大規模なデッキの場合、コンテンツを複数のファイルに分割します。フロントマターのsrcプロパティで外部Markdownファイルをインポートします:

---
src: ./slides/introduction.md
---

---
src: ./slides/main-content.md
---

このパターンにより、個々のファイルを管理しやすく保ち、インポート文を移動することでセクションを並べ替えることができます。

Vueコンポーネントでスライドを拡張する

静的コンテンツ以上のものが必要な場合に、Slidevのフロントエンドツールが真価を発揮します。テーマ、サードパーティパッケージ、または独自のcomponents/ディレクトリからの任意のVueコンポーネントがMarkdown内で動作します。

一般的な使用例には以下が含まれます:

• クリックアニメーション: v-clickディレクティブでコンテンツを段階的に表示
• 図表: 組み込みのMermaidサポートでテキストからフローチャートやシーケンス図をレンダリング
• ライブコード: Monacoエディタの埋め込みにより、プレゼンテーション中にライブコード編集が可能
• カスタムレイアウト: Vueコンポーネントとして再利用可能なスライドテンプレートを構築

ツールが提供するものに限定されることはありません。

プレゼンテーションのエクスポートと共有

エクスポートは後付けの機能ではなく、ファーストクラスの機能です。Slidevは以下を生成します:

• PDF: オフライン共有や印刷用
• PNG: 個別のスライド画像
• PPTX: PowerPointを要求される場合
• SPA: どこにでもデプロイできる静的シングルページアプリケーション

SPAエクスポートは特に注目に値します。Vercel、Netlify、またはGitHub Pagesにデプロイすれば、プレゼンテーションは共有可能なURLになります。これをCI/CDパイプラインと組み合わせれば、リポジトリへの各コミットが新しいデプロイメントを生成します。

フロントエンド開発者がSlidevを選ぶ理由

魅力はワークフローの整合性に集約されます:

• バージョン管理: スライドの差分を確認し、プルリクエストで変更をレビューし、履歴を維持
• 既存スキルの再利用: CSS、Vue、JavaScriptが期待通りに動作
• 拡張性: テーマとプラグインはnpmの規約に従う
• カスタマイズ性: 標準的なWeb技術を通じてあらゆるものをオーバーライド

MarkdownとモダンなJavaScriptツールに慣れている場合、Slidevは摩擦を追加するのではなく、取り除きます。

始め方

お好みのパッケージマネージャーでSlidev CLIを使用して新しいプロジェクトを初期化します:

npm init slidev@latest

スキャフォールドされたプロジェクトには、コア機能を示すサンプルスライドが含まれています。そこから、サンプルコンテンツを独自のものに置き換え、開発サーバーを実行します。

公式ドキュメントでは、構文の詳細、テーマのインストール、高度な設定について説明しています。シンプルに始めましょう—デフォルトのスタイリングでMarkdownコンテンツを作成し、必要に応じてコンポーネントとカスタマイズを重ねていきます。

まとめ

Slidevは、プレゼンテーションを保守可能でコードファーストなワークフローに変えます。VueとViteを搭載したMarkdownファイルとしてスライドを扱うことで、フロントエンド開発者がすでに働いている方法と整合します。バージョン管理が自然になり、カスタマイズには馴染みのあるWeb技術を使用し、エクスポートオプションはあらゆる共有シナリオをカバーします。あなたのスライドは、アプリケーションと同じツールに値します。

よくある質問

Gain Debugging Superpowers

Unleash the power of session replay to reproduce bugs, track slowdowns and uncover frustrations in your app. Get complete visibility into your frontend with OpenReplay — the most advanced open-source session replay tool for developers. Check our GitHub repo and join the thousands of developers in our community.