VS CodeとWSL2でMarp CLI！Markdownスライド作成環境を最速セットアップ

## 記事本文

### はじめに

この記事では、WSL2環境にMarp CLIをインストールし、VS Codeと連携してMarkdownでスライドを作成する環境を構築する手順を解説します。

私はこれまで、Marp CLIをWindowsに直接インストールしたり、Dockerを利用したりと、様々な方法を試してきました。しかし、WSL2環境が既に整っており、Python仮想環境も構築済みであることから、WSL2環境へのインストールが最も効率的だと判断しました。この方法であれば、既存の開発環境と統合が容易で、Linux環境での安定性も高く、VS Codeとの連携もスムーズに行えます。

この記事では、私が実際に試行錯誤した結果、最も効率的だと感じた手順を、初心者の方にも分かりやすく解説します。

### 前提条件

*   Windows 11
*   WSL2（Ubuntu 24.04）
*   VS Code
*   Python仮想環境

## 1. WSL2のUbuntu環境にNode.jsとnpmをインストールする手順

### 準備作業

1.  WSL2を起動
    ```powershell
    wsl
    ```
2.  WSL2のUbuntuを最新状態に更新
    ```bash
    sudo apt update && sudo apt upgrade
    ```
3.  必要なパッケージのインストール
    ```bash
    sudo apt install curl build-essential
    ```

### nvmを使用したインストール

1.  nvmのインストール
    ```bash
    curl -o- https://raw.githubusercontent.com/nvm-sh/nvm/master/install.sh | bash
    ```
2.  nvmの設定を有効化（ターミナルを再起動するか、以下のコマンドを実行）
    ```bash
    export NVM_DIR="$([ -z "${XDG_CONFIG_HOME-}" ] && printf %s "${HOME}/.nvm" || printf %s "${XDG_CONFIG_HOME}/nvm")"
    [ -s "$NVM_DIR/nvm.sh" ] && \. "$NVM_DIR/nvm.sh"
    ```
3.  nvmが正しくインストールされたか確認
    ```bash
    command -v nvm
    ```

### Node.jsのインストール

1.  最新のLTS版をインストール
    ```bash
    nvm install --lts
    ```
2.  最新版をインストール（オプション）
    ```bash
    nvm install node
    ```
3.  npmを最新版に更新
    ```bash
    nvm install-latest-npm
    ```
4.  インストールされたバージョンを確認
    ```bash
    nvm ls
    node --version
    npm --version
    ```

### 注意点

*   aptによる直接インストールは古いバージョンがインストールされる可能性があるため、nvmの使用を推奨（[参考1](#ref1), [参考2](#ref2)）
*   nvmを使用することで、複数のNode.jsバージョンを管理できる（[参考2](#ref2)）
*   インストール時にECONNREFUSEDエラーが発生した場合は、以下のコマンドを実行（[参考3](#ref3)）
    ```bash
    export NODE_OPTIONS=--dns-result-order=ipv4first
    ```

## 2. Marp CLIをローカルインストールする手順

### 1. プロジェクトディレクトリの作成

```bash
mkdir marp-slides
cd marp-slides
```

### 2. プロジェクトの初期化

```bash
npm init -y
```

### 3. Marp CLIのローカルインストール

```bash
npm install --save-dev @marp-team/marp-cli
```

### 4. package.jsonにスクリプトを追加

```json
{
  "scripts": {
    "pdf": "marp --pdf",
    "pptx": "marp --pptx",
    "html": "marp --html"
  }
}
```

### 5. 動作確認

```bash
npx marp --version
```

## 3. Marp CLIの使用方法

### PDFへの変換

```bash
npm run pdf slide.md
```

### PowerPointへの変換

```bash
npm run pptx slide.md
```

### HTMLへの変換

```bash
npm run html slide.md
```

## 4. 月次フォルダへの適用

### 1. 既存のnode_modules削除

```bash
cd ~/docs/2025/202501
rm -rf node_modules
rm package-lock.json # 存在する場合
```

### 2. 新しい月次フォルダの設定

```bash
mkdir -p ~/docs/2025/202502
cd ~/docs/2025/202502
npm init -y
npm install --save-dev @marp-team/marp-cli
```

### 3. package.jsonの設定

```json
{
  "scripts": {
    "pdf": "marp --pdf",
    "pptx": "marp --pptx",
    "html": "marp --html"
  }
}
```

### 4. 動作確認

```bash
npx marp --version
npx marp slide.md --pdf
```

## まとめ

この手順に従うことで、WSL2環境でMarp CLIを効率的に利用し、Markdownでスライドを作成する環境を構築できます。プロジェクトごとに独立した環境を維持できるため、バージョン管理やチーム開発にも適しています。

## 参考資料

<div id="ref1">
参考1: [https://www.konosumi.net/entry/2021/07/25/173930](https://www.konosumi.net/entry/2021/07/25/173930)</div>

<div id="ref2">
参考2: [https://qiita.com/c8h9no2/items/9a2e1278976db1b390a5](https://qiita.com/c8h9no2/items/9a2e1278976db1b390a5)</div>

<div id="ref3">
参考3: [https://menta.work/post/detail/61799/m7JOYG7Sg26c7oRddzA1](https://menta.work/post/detail/61799/m7JOYG7Sg26c7oRddzA1)</div>

---

## 変更履歴等

*   記事全体をQiita記事形式に整形しました
*   タイトル案を提示しました
*   記事の冒頭に、なぜこの手順を選んだかの経緯を記載しました
*   各手順をより詳細に説明しました
*   月次フォルダへの適用手順を追加しました
*   参考資料を明記しました