エンジニアよ、さらばPowerPoint！VS CodeでCoolなスライドを作ろう

GitHubリポジトリー:[https://github.com/ryoshin0830/markdown_slide](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を開いたら...

1. Marp for VS Code
   - 検索窓で`Marp`って打つ
   - インストールポチッ
   - 完了！

2. Draw.io Integration
   - 検索窓で`Draw.io`って打つ
   - インストールポチッ
   - 終わり！

*※ここまで1分*

# スライド作成の基本（5分でマスター） 🚀

## 1. まずはMarkdownファイルを作成

```markdown
---
marp: true
theme: default
paginate: true
---

# 私の最高にイケてるスライド
## by VS Code マスター
```

たったこれだけで、もうスライドの出来上がり！
「え？これだけ？PowerPointの起動時間の方が長いんですけど？」

## 2. プレビューを見る

右上の「プレビュー」ボタンをポチッ。
（ショートカットキー派の方は `Cmd+Shift+V` でも可）

# Draw.ioで図形を追加（エンジニアの嗜み） 🎨

1. `.drawio.svg`ファイルを作成
2. ゴリゴリ図を書く
3. 保存
4. Markdownに `![width:500px](図.drawio.svg)` って書くだけ

*「システム構成図、5分で作れちゃった...」*

# プロ技集 🥷

## 1. 2カラムレイアウト（PowerPointじゃ面倒なやつ）

```markdown
<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でスライド作成の新時代を迎えましょう！

# 参考リンク 🔗

- [サンプルプロジェクト](https://github.com/yourusername/VScode_slide)
- [Marp公式ドキュメント](https://marpit.marp.app/)
- [Draw.io公式サイト](https://www.drawio.com/)

*P.S. この記事を読んでくれた方には、PowerPointを開かなくて済む呪文をプレゼント：*
```bash
alias presentation="code -n slide.md"
``` 

# サンプルコード集 💻

## 1. 基本的なスライド構成

```markdown
---
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 パイプライン
- [ ] 監視設計

---

# システム構成図

![height:400px](architecture.drawio.svg)

---

# コードサンプル

\```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. カッコいいテーマ設定

```markdown
---
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. 図解スライド

```markdown
---
marp: true
theme: default
---

# システムアーキテクチャ

<div class="grid grid-cols-3 gap-4">
<div>

## フロントエンド
![](frontend.drawio.svg)

</div>
<div>

## バックエンド
![](backend.drawio.svg)

</div>
<div>

## インフラ
![](infra.drawio.svg)

</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. アニメーション効果

```markdown
---
marp: true
theme: default
---

# 開発フロー

1. コーディング <!-- fit -->
2. テスト <!-- fit -->
3. デプロイ <!-- fit -->

---

# ビフォーアフター

<div class="grid grid-cols-2">
<div>

## Before 😱

![width:300px](before.drawio.svg)

</div>
<div>

## After 😎

![width:300px](after.drawio.svg)

</div>
</div>
```

これらのサンプルコードをコピペして、すぐに**イケてる**スライドが作れます！
テーマやスタイルをカスタマイズして、自分だけの**クールな**スライドテンプレートを作っちゃいましょう！