MarkdownとVue.jsで構築するモダンな開発者向けプレゼン環境
Slidev (slidevjs/slidev) は、開発者向けに設計されたプレゼンテーションスライド作成ツールです。一言で言えば、「Markdownを使ってVue.jsベースのリッチなスライドが作成できる」ツールです。
なぜ、このSlidevがソフトウェアエンジニアにとって特に役立つのでしょうか？それは、普段の開発業務で使っている技術やワークフローをそのまま活かせるからです。
利点
スライドの内容をMarkdownで記述できます。これは、多くのエンジニアがREADMEやドキュメント作成で日常的に使用している軽量マークアップ言語です。WYSIWYGエディタ（PowerPointなど）のようにマウス操作でレイアウトを調整する手間がなく、キーボード操作だけでサクサクとコンテンツ作成に集中できます。
専門性
コードブロックの記述やシンタックスハイライトが非常に簡単で、技術的な内容を伝えるのに最適です。
利点
スライドのテーマ、レイアウト、さらには特定のスライドにVue.jsコンポーネントを直接埋め込むことができます。これにより、通常のプレゼンツールでは不可能な動的なデモやインタラクティブな要素（例えば、リアルタイムで動作するコードスニペットやUIコンポーネント）をスライド内で実現できます。
専門性
エンジニアなら慣れているHTML/CSS/JavaScript（Vue.js）の知識をそのまま活用して、独自のデザインや機能を組み込めます。
利点
発表者ノート、ライブコーディング機能、スライドPDF/PNGエクスポート、そして何よりGitによるバージョン管理が容易です。
ワークフロー
スライドの変更履歴をGitで管理し、チームでの共同作業もGitHub上でPull Requestベースで行えるため、通常の開発ワークフローにプレゼン資料作成を組み込めます。
Slidevの導入は非常に簡単で、npmまたはyarnといったNode.jsのパッケージマネージャを使って行います。
Node.js (バージョン14以上を推奨) がインストールされていること。
最も簡単な方法は、直接npm initコマンドを使用することです。
# プロジェクトフォルダを作成
mkdir my-slidev-presentation
cd my-slidev-presentation
# Slidevをインストールし、初期設定ファイルを生成
npm init slidev
または、npxを使用して直接実行することもできます。
npx @slidev/cli init
インストールが完了したら、開発サーバーを起動してスライドの作成を始められます。
npm run dev
このコマンドを実行すると、ローカル環境（例
http://localhost:3030）でスライドが表示され、ファイルを保存するたびに自動でブラウザが更新されます (ホットリロード)。
Slidevのスライドは、プロジェクトルートにあるslides.mdというファイルに記述します。基本的な構造と、エンジニアにとって便利な機能の記述例を見てみましょう。
スライドの区切りには、Markdownの水平線---を使用します。
# Slidevの紹介
これは最初のスライドです。
---
## 便利なMarkdown機能
* リスト表示
* **太字**
* `インラインコード`
シンタックスハイライト付きのコード表示は、Markdownのフェンスコードブロックで簡単に実現できます。行番号やハイライト表示もオプションで指定可能です。
---
## Vueコンポーネントの例
```javascript {all|1-2|4}
import { ref } from 'vue'
export default {
setup() {
const count = ref(0)
return { count }
}
}
この例では、以下のように指定しています。
{all}
最初はコード全体を表示
{1-2}
次に1行目から2行目のみをハイライト
{4}
最後に4行目のみをハイライト
### 3. **カスタムVueコンポーネントの埋め込み**
より複雑なデモやUIが必要な場合は、Vueコンポーネントを埋め込みます。
**`./components/CounterDemo.vue` (例)**
```vue
<template>
<button @click="count++">
Count: {{ count }}
</button>
<p class="text-sm opacity-50">クリックして試してみてください！</p>
</template>
<script setup>
import { ref } from 'vue'
const count = ref(0)
</script>
slides.md での使用方法
---
# インタラクティブなデモ
<CounterDemo />
このように、MarkdownとWeb技術を組み合わせることで、技術デモや勉強会資料の作成が非常に効率的かつリッチになります。ぜひ一度試してみてくださいね！
