MarkdownをHTMLに変換する｜記法の対応・仕組み・安全な出力まで解説

READMEやブログの下書きで「# 見出し」「- 箇条書き」のような書き方を見たことはないでしょうか。これがMarkdown（マークダウン）です。HTMLタグを直接書く代わりに、覚えやすい少数の記号で文章の構造を表し、最終的にHTMLへ変換して表示します。本記事では、MarkdownをHTMLに変換するとは具体的にどういうことか、記法とタグの対応、変換の仕組み、そして安全に出力するための考え方までを順を追って解説します。

Markdownとは何か：HTMLへの橋渡し

Markdownは、プレーンテキストに最小限の記号を加えるだけで文章構造を表現できる軽量マークアップ言語です。2004年にジョン・グルーバーらによって提案され、現在ではGitHub・各種ブログ・ドキュメントツールなど、あらゆる場所で標準的に使われています。最大の狙いは、記法そのものが読みやすく、変換しなくてもテキストのまま意味が伝わることにあります。

一方でWebブラウザが解釈できるのはHTMLです。そのため、Markdownで書いた文章を最終的にWebページとして表示するには、Markdownを対応するHTMLタグへ変換する工程が必要になります。たとえば「# タイトル」は<h1>タイトル</h1>へ、「**強調**」は<strong>強調</strong>へと置き換えられます。書く人は読みやすいMarkdownで作業し、表示にはHTMLを使う——この役割分担がMarkdownの本質です。

実際にどう変換されるのかは、Markdown→HTML変換ツールにMarkdownを貼り付けて、出力されるHTMLを見比べるのが一番わかりやすいでしょう。記号がどのタグに化けるのかを目で確認できます。

Markdown記法とHTMLタグの対応

Markdownの記法は数が限られており、ほとんどがHTMLの基本タグに一対一で対応します。代表的な対応をまとめます。

見出しは行頭の#の数でレベルが決まり、#から######までが<h1>〜<h6>に対応します。段落は空行で区切るだけで<p>に、リストは行頭の-や1.でそれぞれ箇条書き・番号付きリストになります。

リンクと画像はよく似た書き方で、画像は先頭に!が付くだけの違いです。コードは、文中ならバッククォートで囲み、複数行ならバッククォート3つで囲む「コードブロック」を使います。表（テーブル）は、縦棒|とハイフンで列と見出しを表す拡張記法で、多くの環境で<table>へ変換されます。これらの記号がどのタグになるかを試すには、Markdownエディタでプレビューしながら入力すると対応関係が直感的につかめます。

変換の仕組み：パーサとレンダラ

MarkdownからHTMLへの変換は、内部的におおむね2つの段階で行われます。

• パース（解析）：入力されたMarkdownのテキストを1行ずつ読み、「これは見出し」「ここは箇条書き」「この範囲は強調」といった文章構造を認識します。この結果は、文書の構造を木構造で表した抽象構文木（AST）などの中間表現としてまとめられます。
• レンダリング（出力）：認識した構造を、対応するHTMLタグへ組み立て直します。見出しなら<h2>、リストなら<ul><li>というように、構造の意味に沿ってタグが生成されます。

この「いったん構造を理解してからHTMLに直す」という二段構えのおかげで、記号の入れ子（リストの中に強調を含めるなど）も正しく扱えます。なお、Markdownには方言（記法のバリエーション）があり、表やチェックボックス、取り消し線などを含むGitHub Flavored Markdown（GFM）が広く使われています。同じMarkdownでも、どの仕様・どの変換器を使うかで結果が少し変わる点は知っておくとよいでしょう。

変換器の挙動を手早く確かめたいときは、Markdown→HTML変換ツールに記法を入れてみて、生成されたHTMLのタグ構造を確認するのがおすすめです。

ブログ・CMSでの活用

MarkdownをHTMLに変換する仕組みは、実際のWeb制作で幅広く役立ちます。

1. ブログ・記事の執筆

多くのブログツールや静的サイトジェネレーターは、Markdownで書いた原稿を公開時にHTMLへ変換します。執筆者はタグを意識せず、記号だけで見出しやリストを表現できるため、文章そのものに集中できます。原稿はプレーンテキストなのでバージョン管理（Git等）とも相性が良く、差分が追いやすいという利点もあります。

2. CMS・ドキュメント・チャット

各種CMSやドキュメントサイト、チャットツールでも、入力されたMarkdownをサーバーやブラウザ側でHTMLに変換して表示するのが一般的です。共通の記法を覚えておけば、複数のサービスをまたいで同じ感覚で書けます。下書きを手元で整える段階では、Markdownエディタのようにプレビュー付きで編集できるツールを使うと、公開前に仕上がりを確認しやすくなります。

安全なHTML出力：サニタイズの考え方

Markdown変換で見落とされがちですが非常に重要なのが、安全なHTML出力です。多くのMarkdownはHTMLタグの直接記述を許容するため、ユーザーが入力したMarkdownをそのまま変換して表示すると、<script>などの危険なタグが混入し、クロスサイトスクリプティング（XSS）につながるおそれがあります。

これを防ぐ考え方がサニタイズ（無害化）です。変換後のHTMLを、あらかじめ許可したタグ・属性だけを残すように検査・除去します。具体的には次のような対策が取られます。

• 許可リスト方式：<p>や<a>など安全なタグだけを通し、<script>やonclickなどのイベント属性は削除する。
• リンクの検査：hrefにjavascript:のような危険なスキームが入らないよう確認する。
• 信頼できないHTMLの無効化：そもそもユーザー入力中の生HTMLを変換せず、エスケープして文字として表示する設定にする。

自分だけが書いた原稿を変換するなら過度に心配する必要はありませんが、第三者が入力したMarkdownを表示する場合は、変換結果を必ずサニタイズすることが鉄則です。なお、ブラウザ内で完結する変換であっても、出力HTMLを実際のページに埋め込む際にはサニタイズの考え方が同様に当てはまります。

変換でつまずきやすいポイント

最後に、Markdownを変換するときに戸惑いやすい点を整理します。仕組みを知っていれば多くは回避できます。

これらは多くがMarkdownの仕様や方言の違いに由来します。思った通りに変換されないときは、Markdown→HTML変換ツールで出力HTMLを確認し、どの記法がどのタグになっているかを切り分けると原因を特定しやすくなります。書きながら結果を見たい場合は、プレビュー付きのMarkdownエディタを併用すると効率的です。

Markdownは、読みやすい記法で書いてHTMLへ変換するという役割分担によって、執筆の手軽さと表示の柔軟さを両立する仕組みです。記法とタグの対応、変換の二段構え、そして安全な出力のためのサニタイズという3点を押さえれば、ブログでもドキュメントでも安心して活用できます。

なお本記事は一般的な情報の提供を目的としたものです。Markdownの仕様や変換器・サニタイズの実装は環境によって異なり、セキュリティ要件も用途ごとに変わります。実際の導入にあたっては、最新の公式仕様やドキュメント、必要に応じて専門家の情報も確認したうえで判断してください。