GitHubリポジトリー:https://github.com/ryoshin0830/markdown_slide
こんな人にオススメ！
- 「PowerPointを開くとため息が出る」エンジニア
- 「スライド作成中にコード書きたくなる」プログラマー
- 「バージョン管理したい！」という潔癖性GitHuber
- 「マウス操作に疲れた...」ショートカットキー愛好家
- 「会社のPCでPowerPoint重すぎ問題」に悩む方
得られるメリット！
- VS Code一つでスライド作成完結（引きこもり最高！）
- Markdownで書けるので、脳死でも美しいスライドが作れる
- GitHubで管理できるので、上司からの「昨年のスライドちょうだい」にも即対応
- コードブロックが美しい（PowerPointのコピペ地獄とはサヨナラ）
「それ、VSCodeでよくね？」案件 🤔
みなさん、こんな経験ありませんか？
上司「来週のMTGで発表よろしく！」
私「はい！（PowerPointかぁ...めんどくさ...）」
VSCode「私を使えば...？」
私「！？」
そうなんです。実は普段使いのVS Codeで、爆速・イケてるスライドが作れちゃうんです！
しかも、Draw.ioまで統合されているので、システム構成図もVS Codeから出ることなく作成可能。
これぞ、真のワンストップ・スライドソリューション！
セットアップ（所要時間3分） ⚡
1. 拡張機能をインストール
まずは必要な拡張機能を入れましょう。VS Codeを開いたら...
-
Marp for VS Code
- 検索窓で
Marpって打つ - インストールポチッ
- 完了！
- 検索窓で
-
Draw.io Integration
- 検索窓で
Draw.ioって打つ - インストールポチッ
- 終わり！
- 検索窓で
※ここまで1分
スライド作成の基本（5分でマスター） 🚀
1. まずはMarkdownファイルを作成
---
marp: true
theme: default
paginate: true
---
# 私の最高にイケてるスライド
## by VS Code マスター
たったこれだけで、もうスライドの出来上がり！
「え？これだけ？PowerPointの起動時間の方が長いんですけど？」
2. プレビューを見る
右上の「プレビュー」ボタンをポチッ。
（ショートカットキー派の方は Cmd+Shift+V でも可）
Draw.ioで図形を追加（エンジニアの嗜み） 🎨
-
.drawio.svgファイルを作成 - ゴリゴリ図を書く
- 保存
- Markdownに
って書くだけ
「システム構成図、5分で作れちゃった...」
プロ技集 🥷
1. 2カラムレイアウト（PowerPointじゃ面倒なやつ）
<div class="grid grid-cols-2 gap-4">
<div>
## Before VS Code
- PowerPointと格闘
- マウス操作で腱鞘炎
- 「スライド重い」
</div>
<div>
## After VS Code
- Markdownでサクサク
- キーボードで爆速作成
- 軽量・快適
</div>
</div>
2. コードブロック（最高にクール）
```python
def how_to_create_slides():
if you.are_engineer():
return "Use VS Code!"
else:
return "Still use VS Code!"
```
よくある質問 🤔
Q: PowerPointより見た目がショボくない？
A: CSSでカスタマイズし放題です！むしろ、あなたのCSS力が試されます（笑）
Q: 上司が「PowerPointファイルちょうだい」って言ってきたら？
A: PDFやPPTXにエクスポートできます。上司も喜ぶWin-Winソリューション！
Q: 図の作成めんどくさくない？
A: Draw.ioが統合されてるので、VSCodeから出る必要なし！引きこもり最高！
まとめ 🎯
- VS Code最高！
- PowerPointさようなら！
- マウス、さようなら！
- 生産性爆上がり！
実はこの記事も、VS Codeで書いています（メタ）。
エンジニアの皆さん、さぁVS Codeでスライド作成の新時代を迎えましょう！
参考リンク 🔗
P.S. この記事を読んでくれた方には、PowerPointを開かなくて済む呪文をプレゼント：
alias presentation="code -n slide.md"
サンプルコード集 💻
1. 基本的なスライド構成
---
marp: true
theme: default
paginate: true
style: |
section {
background: linear-gradient(to bottom, #1a1a1a, #4a4a4a);
color: white;
}
h1 {
color: #7FFF00;
}
code {
background-color: #2d2d2d;
}
---
# 爆速システム開発入門 🚀
## エンジニアの、エンジニアによる、エンジニアのための開発手法
---
# アジェンダ
- [ ] システム構成
- [ ] 開発フロー
- [ ] CI/CD パイプライン
- [ ] 監視設計
---
# システム構成図
---
# コードサンプル
\```typescript
interface Developer {
coffee: number;
code(): void;
}
class 10xDeveloper implements Developer {
coffee = Infinity;
code(): void {
while (this.coffee > 0) {
console.log("Writing clean code...");
this.coffee--;
}
}
}
\```
2. カッコいいテーマ設定
---
marp: true
theme: default
paginate: true
style: |
section {
background: #1e1e1e;
color: #fff;
}
h1 {
background: linear-gradient(45deg, #ff6b6b, #4ecdc4);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
}
pre {
background: #2d2d2d;
border-radius: 8px;
padding: 16px;
}
ul li::before {
content: "🚀";
margin-right: 8px;
}
---
3. 図解スライド
---
marp: true
theme: default
---
# システムアーキテクチャ
<div class="grid grid-cols-3 gap-4">
<div>
## フロントエンド
</div>
<div>
## バックエンド
</div>
<div>
## インフラ
</div>
</div>
---
# パフォーマンス比較
<style scoped>
.graph {
display: flex;
align-items: flex-end;
height: 300px;
padding: 20px;
}
.bar {
width: 100px;
margin: 0 20px;
background: linear-gradient(to top, #4ecdc4, #ff6b6b);
}
</style>
<div class="graph">
<div class="bar" style="height: 50%">
<p>Before</p>
</div>
<div class="bar" style="height: 90%">
<p>After</p>
</div>
</div>
4. アニメーション効果
---
marp: true
theme: default
---
# 開発フロー
1. コーディング <!-- fit -->
2. テスト <!-- fit -->
3. デプロイ <!-- fit -->
---
# ビフォーアフター
<div class="grid grid-cols-2">
<div>
## Before 😱
</div>
<div>
## After 😎
</div>
</div>
これらのサンプルコードをコピペして、すぐにイケてるスライドが作れます！
テーマやスタイルをカスタマイズして、自分だけのクールなスライドテンプレートを作っちゃいましょう！