Markdownとは

社内向けの技術メモをMarkdownで書き始めたとき、最初にぶつかったのは記法ではなく「どのエディタで書けばいいのか」という問題でした。プレビューが見られるものと見られないもの、フローチャートが描けるものと描けないもの、選択肢が多すぎて迷った経験を整理した回です。

図1: Markdown執筆からビューワー表示までの流れ — 本シリーズはこの一連の流れを扱う

Markdownは、見出しや強調・リストなどの装飾を、記号を使ったシンプルな記法で表現できる軽量マークアップ言語です。 HTMLのようにタグで囲む必要がなく、プレーンテキストのまま人間にも読みやすい形で装飾情報を表現できることが最大の特徴です。

README ファイルやブログ記事、社内Wiki、技術ドキュメントなど、エンジニアが日常的に文章を書く場面のほとんどでMarkdownが使われています。 GitHub・GitLab・Qiita・Zenn・Notion など、多くのサービスがMarkdown記法を標準サポートしていることも普及の理由の一つです。

なぜエディタ選びが重要か

Markdownはテキストファイルなのでメモ帳でも書けますが、実務で使う場合は次の3点が揃っているエディタを選ぶことを強くおすすめします。

プレビュー機能

書いた記法がどう表示されるかをリアルタイムに確認できるか。表・リストの崩れにすぐ気づける。

拡張記法への対応

コードブロックのシンタックスハイライトや、Mermaidによる図の描画に対応しているか。

執筆効率

補完・ショートカット・目次生成など、文章量が多くなったときに執筆速度を落とさない機能があるか。

この3点は、単純なテキストエディタとMarkdown特化のエディタ／拡張機能とで対応状況が大きく分かれるポイントです。次の章で、代表的なツールをこれらの観点で比較します。

主要エディタ比較（○×表）

Markdownを書く手段として選ばれることが多い5つのツールを、実務での使いやすさという観点で比較しました。 ○＝標準対応、△＝拡張機能や設定で対応可能、×＝対応が弱い（非対応）という基準です。

ツール	料金	プレビュー	Mermaid対応	拡張性	学習コスト
VS Code	○ 無料	○ 標準搭載	△ 拡張機能で対応	○ 非常に豊富	△ 普通
Typora	△ 有料（買い切り）	○ WYSIWYG	○ 標準対応	× 少ない	○ 低い
Obsidian	△ 個人利用は無料	○ 標準搭載	○ 標準対応	○ 豊富	△ 普通
GitHub Web エディタ	○ 無料	○ 標準搭載	○ 標準対応	× ほぼなし	○ 低い
サクラエディタ	○ 無料	× 非搭載	× 非対応	△ マクロで一部対応	○ 低い

💡 サクラエディタとの役割の違い

正規表現検索やGrepなど高速なテキスト処理に強いサクラエディタは、ログ閲覧やデータ整形には最適ですが、Markdownのプレビューや図解には向いていません。用途に応じてエディタを使い分けるのが現実的です。

本シリーズがVS Code + Mermaidを基準にする理由

比較表の通り、Typora や Obsidian はプレビューやMermaid対応の面で優れていますが、いずれも「Markdown専用エディタ」であり、コード全般の開発環境としては使いにくい面があります。

一方 VS Code は、拡張機能を1つ追加するだけでMermaid記法のフローチャートまで標準プレビューに描画できるようになり、かつ Python・Java・JavaScript など他言語の開発環境ともシームレスに共存できます。普段のコーディング作業と地続きでMarkdownを書けることが、実務上の最大のメリットです。

✅ 本シリーズの前提

以降の記事では、特に断りがない限り「VS Code」＋「Markdown Preview Mermaid Support 拡張機能」を導入した環境を基準に、記法・表示結果・図解の解説を行います。

⚠️ 今回はVS Code＋Mermaidを基準として書いています。

Typora や Obsidian などの他ツールでも基本的なMarkdown記法の書き方自体は共通ですが、拡張記法（特にMermaid）の対応状況やプレビューの見た目は、使用するエディタ・ビューワーによって異なります。他ツールを使う場合は、適宜読み替えてください。

どんな人におすすめか

README やドキュメントをMarkdownで書く機会があるエンジニア
すでにVS Codeを開発環境として使っており、追加のツールを増やしたくない人
フローチャートやシーケンス図を、画像編集ソフトを使わずテキストベースで管理したい人
GitHubなどでレンダリングされたときの見た目まで含めて確認しながら書きたい人

本シリーズの構成

全5回で、導入から実践的な図解記法、最終的な表示確認までを一通り解説します。

PART	内容
01（本記事）	エディタツールの比較と、本シリーズの前提
02	VS Codeの導入・拡張機能セットアップ、基本記法の早見表
03	インラインコード・コードブロックの書き方とシンタックスハイライト
04	Mermaidによるフローチャートなど、コードブロックの拡張活用
05	ビューワーでの表示確認とシリーズのまとめ

✅ 次の章では…

PART 02 では、実際にVS Codeへ拡張機能を導入する手順と、見出し・リスト・表・リンクなど基本記法の書き方をプレビュー表示とあわせて確認します。

→ PART 02 — VS Codeの導入と基本記法へ

PART 01 — Markdownとは
エディタツールの比較と選び方