VS Codeでどこまでできるか?(pdf?パワポ?フローチャート?)

VS Codeがよく各雑誌で取り上げられているので、普段使っているVS Codeの使い方を紹介してみる。エンジニアだけでなく、事務職のような人たちにもおすすめする。……まぁ、読まないか。

VS Codeって何?

そもそもVS Codeって何?という方もいるかもしれない。VS CodeはMicrosoftが開発した「Visual Studio Code」のことで、プログラムを書くときに用いられるエディターと呼ばれるものだ。

「プログラム?じゃあイラネ。」と侮ってはいけない。単にインストールしただけなら高機能なメモ帳くらいにしかならないかもしれない。しかし、VS Codeは拡張機能と呼ばれる、本来の機能に様々な機能を追加できる。 これがとんでもないところまでできてしまう。 何ができるかを紹介していく。

VS Codeの拡張機能のインストール方法

VS Codeをインストールして起動すると英語の表示になっている。日本語の拡張機能をインストールすることで日本語化できる。拡張機能のインストールの仕方はこうだ。

これだけだ。プラグインを検索してインストールを押すだけでインストールできる。 さて、次にいってみよう。

マニュアル作成

マニュアル作成はもうVS Codeでしか作ってない。WordだのPagesだのを使わない。VS Codeで十分だ。次のプラグインを入れる。

Markdown All in OneMarkdown PDF

そのあとに次のようにファイルを作成してみよう。

この状態まで来たら、画面の左側に色々と入力していく。次のように入力してみよう。

# 大見出し
## 中見出し
### 小見出し
#### 小小見出し

- 買い物リスト
  - 肉屋さん
    - ハム
  - 八百屋さん
    - ネギ
  - こんにゃく屋さん
    - しらたき
  - お豆腐屋さん
    - 焼き豆腐
  - 酒屋さん
    1. ビール
    2. 日本酒
    3. 醤油

**強調**

_イタリック_

_**強調イタリック**_

これを書くと、右側に次のように表示されるはずだ。

書き方に慣れは必要になるが、マウスでいちいちクリックしたりしなくても強調したり見出しをつけたりできる。これはマークダウンという書式で、検索すればまだまだ書き方は出てくる。他にも引用を書いたりリンクや画像を貼る記法などもある。

```
引用
```

[見出し](URL)


![](画像名)

パワポ資料

Marp for VS Code

上で使ったマークダウンでパワポ資料も作ることができる。これは「Marp」という元々あったものをVS Codeでも使えるようにしたものだ。新しい「パワポ.md」というファイルを作成して次のように記述してみよう。

---
marp: true
header: 'Gallageの今後を願って'
footer: 'Coffee Bar Gallage'
theme: gallage
transition: 'none'
<!-- size: 16:9 -->
<!-- page_number: true -->
<!-- paginate: true -->


---

# VS Codeと私と白と酒と僕

---
1. 自己紹介
2. 今日のテーマ
3. 締め

---
# 1. 自己紹介

---
- 私です
- 8/15日が誕生日でした。
- 絵は自画像ではありません。
![bg 30%](画像1.png)

---
# 2. 今日のテーマ

---
特になし

---
# 3. 締め

---
## すごいでしょ!

右側に次のように表示されるはずだ。

更に当然、これを出力できる。

出力したいフォーマットも複数選択できる。とってもすごい!

フローチャート

Draw.io Integration

Draw.ioというフローチャートを書く万能ツールがあるが、これをなんとVS Code上で利用できる。今度はインストールしたあとに念の為にVS Codeを再起動しよう。そして、「フローチャート.dio」というファイルを作成してみよう。もし反応がない場合は、別のファイルを一度開いて再度フローチャート.dioを開いてみよう。

もう、意味わからなくない?ちょっとだけ動画で紹介。

もうエディタの域を超えている。これもエクスポートができるのだけれど、少し設定が必要。

出力した結果がこちら。

というわけで

VS Codeだけでできることが多い。とても。