記事本文

はじめに

この記事では、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をインストールする手順

準備作業

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

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

nvmのインストール

curl -o- https://raw.githubusercontent.com/nvm-sh/nvm/master/install.sh | bash

nvmの設定を有効化（ターミナルを再起動するか、以下のコマンドを実行）

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"

nvmが正しくインストールされたか確認
```
command -v nvm
```

Node.jsのインストール

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

注意点

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

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

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

mkdir marp-slides
cd marp-slides

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

npm init -y

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

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

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

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

5. 動作確認

npx marp --version

3. Marp CLIの使用方法

PDFへの変換

npm run pdf slide.md

PowerPointへの変換

npm run pptx slide.md

HTMLへの変換

npm run html slide.md

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

1. 既存のnode_modules削除

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

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

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

3. package.jsonの設定

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

4. 動作確認

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

まとめ

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

参考資料

参考1: [https://www.konosumi.net/entry/2021/07/25/173930](https://www.konosumi.net/entry/2021/07/25/173930)

参考2: [https://qiita.com/c8h9no2/items/9a2e1278976db1b390a5](https://qiita.com/c8h9no2/items/9a2e1278976db1b390a5)

参考3: [https://menta.work/post/detail/61799/m7JOYG7Sg26c7oRddzA1](https://menta.work/post/detail/61799/m7JOYG7Sg26c7oRddzA1)

変更履歴等

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