Zenn
🛝

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

に公開
VS Code
Markdown
slide
PowerPoint
draw.io
tech

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を開いたら...

  1. Marp for VS Code

    • 検索窓でMarpって打つ
    • インストールポチッ
    • 完了！

  2. 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で図形を追加（エンジニアの嗜み） 🎨

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

「システム構成図、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 パイプライン
- [ ] 監視設計

---

# システム構成図

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

---
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>

## フロントエンド
![](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. アニメーション効果

---
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>

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

Discussion