記事を書く人のためのMarkdown記法入門（Webサイト構築・運用テクニック）｜コラム

ブログなどWebに投稿する文章を書くときにどのような流れで書きますか？

CMSを使う場合もあれば、HTMLベースで書く場合もあるかと思います。
だいたいの流れとして、文章を考えて、その後にHTMLタグを付け加えてファイルをアップロードするかと思います。

新しい文章を考える
↓
<p>新しい文章を考える</p>

ただ、文章を修正したい場合、HTMLタグが多く入った状態で該当部分を探すことになるので可読性に欠けたり、開始タグと終了タグで文章を囲む手間が生まれてしまったりして、手間が多くかかってしまいます。
そこで、今回は可読性を損なわずに文書管理ができるMarkdown記法についてご紹介します。

概要

Markdown記法は「書きやすくて読みやすいプレーンテキストとして記述した文書を、妥当なXHTML（もしくはHTML）文書へと変換できるフォーマット」として、ジョン・グルーバー氏によって2004年に開発されました。
もう10年以上前に考案されたもので、様々な開発者によってカスタマイズされていて、利用できるプラットフォームが多く存在します。
例えば、Wordpressでは公式として、記事編集ページでMakrdownが使えるようになっていますし、テキストエディタではSublime TextやAtomなどでプラグインが提供されています。

記述形式は文頭に#や*などを付けて見出しやリストを表現したり、**で囲えばその範囲内は太字になったりします。
記述について詳しくはMarkdown: Syntaxをご覧ください。

一例を挙げると下記のようになります。

# 見出し
↓
<h1>見出し</h1>

- リスト1
- リスト2
- リスト3
↓
<ul>
    <li>リスト1</li>
    <li>リスト2</li>
    <li>リスト3</li>
</ul>

Markdown記法のメリット

Markdown記法のメリットとして、以下が挙げられます。

HTMLを簡単に表現できる

HTML形式では構造化するためにはタグを入力する必要がありました。
文頭と文末に開始タグと終了タグが存在し、文章を入力する前に開始タグを入力して書き終わったら終了タグを入力する、もしくは文章を書いた後にカーソルを文頭に持ってきて、開始タグを入力、文末に再度移動して終了タグを入力するという手間のかかる入力方法でした。
ですが、Markdown形式では基本的に文頭に特定の文字（#や*など）を入力すれば文末に構造化するための記述をする必要がありません。
単純に作業の手間が半分になり、仮に別のタグに置き換えなければならなくなった場合でも文頭の文字を変更するだけになります。

<h3>テキストテキストテキストテキスト</h3>
↓
### テキストテキストテキストテキスト
（文末にタグを入力する必要がない、タグを変更する際に1つで済む）

HTML構造を記述しつつ、読みやすい文章が書ける

HTMLタグが文頭、文末に存在する事によって、マークアップ構造と、文章内容が共存したファイルになっているため、可読性が低くなってしまう可能性があります。
レイアウト上、タグを多く設けなければならない場合など、文章のまとまりが見えづらかったりした経験はないでしょうか。
そういった時にMarkdown記法だとタグの代わりに特定文字を配置するだけなので、HTMLより可読性は向上します。

htmlの場合:
<p><a href="https://ja.wikipedia.org/wiki/Markdown"><strong>Markdown記法</strong></a>は<strong>HTML<strong>よりも可読性は向上します。</p>
 
markdownの場合:
**[Markdown記法][md]**は**HTML**よりも可読性は向上します。
[md]:https://ja.wikipedia.org/wiki/Markdown

Markdown記法のデメリット

これまで、Markdownの良い点を上げていきましたが、注意しないといけない部分もあります。
特性を理解して使用すればより作業効率は上がると思います！

全てのHTMLタグがMarkdownに置き換えられるわけではない

例えば、dl, dt, ddタグなどはMarkdownでは記述できません。
リストやテーブルで代用することになります。

パーサーは出力が異なることがあるので統一する

Markdown記法はHTMLに変換する際にプログラム（パーサー）が必要になります。
そのプログラムを拡張すると、Markdownでは使えなかった記法をサポートできるようになったり、同じ記法でもHTMLで出力した結果が異なることがあります。
そういった同じMarkdownファイルを書いたつもりでも違うHTMLが出力されることがないように、変換するプログラム（パーサー）をチーム内で統一したほうがよいかと思います。
パーサーの一例は下記になります。