プログラミングのドキュメント作成やブログの下書き、日々のメモ作成などに欠かせない存在となっている軽量マークアップ言語「Markdown（マークダウン）」。
手軽に装飾された文章を書けるのが魅力ですが、「わざわざ専用のエディタを導入するのは面倒」「もっと効率よく、プレビューを確認しながら執筆したい」と感じていませんか？
結論から言うと、ふだん開発で使っているVSCode（Visual Studio Code）は、最初から標準で強力なMarkdown編集・プレビュー機能を備えており、世界で最も快適なMarkdownエディタの一つになります。
本記事では、VSCodeでMarkdownを執筆する手順から、画面を横並びにしてリアルタイムでプレビューを表示する方法、さらに執筆スピードを何倍にも跳ね上げる神拡張機能まで徹底的に解説します！
Markdownとは？
設定手順の前に、Markdownの全体像をサクッと確認しておきましょう。
Markdownとは何か
Markdown（マークダウン）とは、デザインの知識がなくても「#」や「*」といった特定の「をテキストに添えるだけで、見出しや箇条書き、太字などの装飾されたWeb文章を直感的に作成できる軽量マークアップ言語です。
Markdownが使われる場面
IT業界を中心に、以下のような場面でデファクトスタンダード（事実上の標準）として広く使われています。
- README：GitHubなどでプロジェクトの概要や使い方を説明するファイル（README.md）。
- 技術ブログ：QiitaやZenn、WordPress（ブロックエディタ）などの下書き。
- ドキュメント作成：Notionや社内Wiki、仕様書の共有。
VSCodeでMarkdownを書くメリット
多くのエンジニアやライターがMarkdownエディタとしてVSCodeを選ぶには、明確な3つの理由があります。
プレビューを見ながら編集できる
VSCodeは、標準機能として「執筆画面」と「プレビュー画面」を左右に分割して同時に表示できます。仕上がりを確認するためにブラウザや別アプリを開く往復のストレスが一切ありません。
無料で利用できる
これほど高性能なエディタでありながら、完全に無料で利用できます。広告が出ることも、文字数制限に引っかかることもありません。
拡張機能が豊富
世界中の開発者が作った「拡張機能（プラグイン）」をボタン一つで追加できます。自動で目次を生成したり、ショートカットキーで一瞬で文字を装飾したりと、自分好みの最強の執筆環境へとカスタマイズが可能です。
VSCodeでMarkdownファイルを作成する方法
さっそくVSCodeを立ち上げて、Markdownファイルを作ってみましょう。
Markdownファイルを新規作成する
- VSCodeを開き、メニューの「ファイル」＞「新しいファイル」(または Cmd + N / Ctrl + N）を選択します。
- 上部に表示されるテキストボックスで、ファイルの種類に「Markdown」を記入し、そのまま保存画面に進みます。
既存のフォルダー用していれば、この手順はスキップできます。
拡張子は「.md」を使う
ファイルを保存する際は、名前の末尾に必ず.mdという拡張子をつけて保存してください（例：test.md）。
VSCodeはこの拡張子を認識することで、自動的にMarkdown専用の編集モードに切り替わります。
見出しやリストを書いてみる
ファイルを作ったら、試しに以下のテキストをコピーしてVSCodeに貼り付けてみてください。
# 記事のタイトル（見出し1）
ここに本文テキストを入力します。
## 導入のメリット（見出し2）
* **メリット1:** 無料で使える
* **メリット2:** プレビューが早いVSCodeでMarkdownをプレビュー表示する方法
この記事のメインであるプレビュー機能の使い方を解説します。特別な設定は不要で、標準機能だけで一瞬で表示できます。
プレビューを表示する方法
画面右上（エディタのタブが並ぶ右側）にある、「虫眼鏡がついたページの形をしたアイコン（Markdownプレビューの割込表示）」をクリックします。
ショートカットキーを使う場合は、Cmd + Shift → V（WindowsはCtrl + Shift → V）を押します。
横並びで表示する方法
左側でテキストを編集しつつ、右側でプレビューを確認する「2画面横並び」が最もおすすめです。
プレビューアイコンの隣にある「分割されたページのアイコン（プレビューを横に表示）」をクリックすることで、画面が自動で左右に分割されます。
リアルタイムで確認する方法
VSCodeのプレビュー機能は、完全リアルタイム連動（ライブプレビュー）です。
左側のエディタで文字を1文字打ち込むと、右側のプレビューにも一瞬でその変更が反映されます。また、左側の画面をスクロールすると右側も自動で追従してスクロールされるため、長文の執筆でも現在位置を見失うことがありません。
Markdownの基本的な書き方
VSCodeでプレビューを確認しながら、よく使う基本の文法（シンタックス）をマスターしましょう。以下の書き方を押さえておけば、大抵のドキュメントは作成できます。
見出し
行の先頭に # を記述し、後ろに半角スペースを空けます。#の数が増えるほど、小さな見出し（H1~H6）になります。
# 見出し1
## 見出し2
### 見出し3箇条書き
行の先頭に * または – を記述し、後ろに半角スペースを空けます。
* リストA
* リストB番号付きリスト
行の先頭に1.などの数字とピリオドを記述し、後ろに半角スペースを空けます。
1. 第一ステップ
2. 第二ステップリンク
表示したい文字を[ ]で囲み、直後に遷移先のURLを( )で囲んで記述します。
[Googleのサイトはこちら](https://www.google.com)画像
リンクの書き方の先頭に ! をつけます。[ ] の中には代替テキスト（alt属性）を記述します。
コードブロック
プログラムのコードをそのまま載せたいときは、バッククォート3つ（“`）で囲みます。最初の3つの後ろにhtmlやjavascriptと言語名を書くと、コードに綺麗に色がつきます。（シンクタックスハイライト）。
```javascript
const message = "Hello World";
console.log(message);VSCodeでMarkdownを書くときに便利な機能
ここからは、VSCodeでのMarkdown執筆をさらに快適にする拡張機能とショートカットを紹介します。
Markdown Preview Enhanced
VSCode標準のプレビュー機能をさらにリッチにする最強のプラグインです。拡張機能マーケットプレイスからインストールできます。
背景色のテーマ（ダークモード/ライトモード）を自由に変更できたり、PDFやHTML形式へのエクスポート機能が大幅に強化されます。
Markdown All in One
Markdwonを書くすべての人にオススメできるオールインワン拡張機能です。
- リストの改行時に、自動で次の行の先頭に * を補完してくれる機能
- 見出し構造から自動で「目次（TOC）」を1秒で生成・更新してくれる機能などがセットになっており、タイピングの手間が半分以下になります。
ショートカット機能
よく使う装飾は、手動で記号を打つよりもショートカットキーを使った方が圧倒的に早くなります。
（※「Markdown All in One」導入時）
- 太字（Bold）にする：装飾したい文字を選択して Cmd + B（Windowsは Ctrl + B）
- 斜体（Italic）にする：装飾したい文字を選択して Cmd + I（Windowsは Ctrl + I）
Markdownを書くときによくある疑問（FAQ）
VSCodeでMarkdownを書いているときにつまずきがちなポイントと、その解決策をまとめました。
Markdownファイルがプレビュー表示されない
- 原因：ファイルがプレビュー機能に認識されていません。
- 解決策：ファイルの保存時に、名前の最後が必ず拡張子.mdになっているか確認してください。エディタ右下のステータスバーの表示が「Markdown」になっていれば正常です。
改行が反映されない
- 原因：Markdownの仕様上、普通に1回改行しただけでは、プレビュー上では半角スペースに変換されるか、繋がって表示されてしまいます。
- 解決策：改行したい行の末尾に「半角スペースを2回」入力して改行するか、空行を1行挟む（2回エンターを押す）ことで、プレビュー上でも正しく改行・段落分けが行われます。
画像が表示されない
- 原因：画像ファイルへのパス（場所の指定）が間違っています。
- 解決策：のように指定する場合、Markdownファイルから見て画像が正しいフォルダにあるか（相対パス）を確認してください。また、フォルダ名やファイル名に大文字・小文字のズレがないかも要チェックです。
Markdownに慣れたらMermaidも使ってみよう
Markdownの記述に慣れたら、ぜひ応用としてMermaid（マーメイド）という機能も使ってみてください。
Mermaidとは、テキストコードを書くだけで、プレビュー画面上に美しい「図やグラフ」を自動でレンダリング（描画）してくれる仕組みです。VSCodeは、前述の拡張機能（Markdown Preview Enhancedなど）を入れることで標準でMermaidに対応します。
graph TD
A[Markdownを書く] --> B(VSCodeのプレビュー起動)
B --> C{快適に執筆完了！}これを記述するだけで、以下のような図がプレビュー上に一瞬で生成されます。
- フローチャート：業務フローや条件分岐
- シーケンス図：システムの処理の流れ
- ER図：データベースの設計図
仕様書や設計ドキュメントをMarkdown内に埋め込んで一元管理できるようになるため、チーム開発の効率が劇的にアップします。
まとめ
VSCodeを使ったMardown執筆環境についてのまとめです。
- VSCodeならMarkdownを快適に編集できる：インストールしたその日から、特別な設定なしで強力なエディタとして機能します。
- プレビュー機能が便利：Cmd + K → V の左右分割・リアルタイム同期プレビューがとくかく快適。
- 拡張機能を入れるとさらに使いやすい：「Markdown All in One」などを導入すれば、目次作成やリスト保管で執筆効率が爆跳ねします。
これまでメモ帳や重いOfficeソフト、ブラウザ上のエディタで行っていた文書作成を、すべてVSCode上のMarkdownに集約してみてください。その圧倒的な軽快さと快適さに、きっと手放せなくなるはずです！
