# はじめに

# 概要

Slidev ^{(slide + dev, /slʌɪdɪv/)} はWebベースのスライド作成およびプレゼンテーションツールです。開発者がMarkdownでコンテンツを書くことに集中しつつ、HTMLとVueコンポーネントを用いて、プレゼンテーションにインタラクティブなデモを埋め込んだピクセルパーフェクトなレイアウトとデザインを提供できるようにも設計されています。

機能豊富なマークダウンファイルを使用して、ライブコーディング、PDFエクスポート、プレゼンテーションのレコーディングのような、多くのビルトインインテグレーションとともに、瞬時に再読み込みが可能な美しいスライドを生成します。webで動くので、Slidevを使ってどんなことでもできます - 可能性は無限大です。

プロジェクトの論理的根拠については なぜSlidev？ のセクションで詳しく説明しています。

# 機能

• 📝 Markdownベース - お気に入りのエディタとワークフローを使用
• 🧑‍💻 デベロッパーフレンドリー - ビルトインのシンタックスハイライト、ライブコーディングなど
• 🎨 豊富なテーマ - テーマはnpmパッケージで共有・利用が可能
• 🌈 スタイリッシュ - Windi CSS オンデマンドユーティリティ、 使いやすい埋め込まれたスタイルシート
• 🤹 インタラクティブ - Vueコンポーネントをシームレスに埋め込み
• 🎙 プレゼンターモード - 別のウィンドウ、スマートフォンでさえもスライドを操作
• 🎨 描画 - スライドに描画し、注釈をつける
• 🧮 LaTeX - LaTeX数式のビルトインサポート
• 📰 図形 - 説明と合わせて図形を作成
• 🌟 アイコン - どんなアイコンセットからでも、直接アイコンにアクセス
• 💻 エディタ - 統合されたエディタとVS Code拡張機能
• 🎥 レコーディング - ビルトインのレコーディングとカメラビュー
• 📤 ポータブル - PDF、PNG、またはホスト可能なSPAにエクスポート
• ⚡️ 高速 - Vite によって提供されたインスタントリロード
• 🛠 自由に開発可能 - Viteプラグイン、Vue components、どんなnpmパッケージも使用可能

# 技術スタック

これらのツールや技術を組み合わせることで、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 - テキストによる図解

# はじめてのプレゼンテーションを作成する

# オンラインで試す

sli.dev/new

# ローカルで作成する

NPMで作成：

$ npm init slidev

Yarnで作成：

$ yarn create slidev

プロンプトに従って、今すぐスライドを作り始めましょう！　Markdownシンタックスの詳細は、 シンタックスガイドを参照してください。

# コマンドラインインターフェース

Slidevがインストールされたプロジェクトでは、 npmスクリプトで slidevコマンドを使用することができます。

{
  "scripts": {
    "dev": "slidev", // start dev server
    "build": "slidev build", // build for production SPA
    "export": "slidev export" // export slides to pdf
  }
}

あるいは npx で使用することができます。

$ npx slidev

その他のオプションについては、 slidev --help を実行してください。

# Markdownシンタックス

Slidevはプロジェクトルートの配下にある slides.md を読み取り、スライドに変換します。 変更を加えると、 スライドのコンテンツに即時に反映されます。 例：

# Slidev

Hello World

---

# Page 2

Directly use code blocks for highlighting

//```ts
console.log('Hello, World!')
//```

---

# Page 3

SlidevのMarkdownシンタックスについては シンタックスガイド を参照してください。