記事本文
はじめに
この記事では、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記事形式に整形しました
- タイトル案を提示しました
- 記事の冒頭に、なぜこの手順を選んだかの経緯を記載しました
- 各手順をより詳細に説明しました
- 月次フォルダへの適用手順を追加しました
- 参考資料を明記しました