Markdown記法～自分へ向けて～

# まえがき  
### 自分に向けて
みなさんはMarkdownというものをご存知でしょうか。エンジニアとして活躍されている方なら既にご存知の方も多いかと思います。
この記事はMarkdownを全く知らなかった私自身のために、「Markdownってどんなものなの？」という観点で調べたり調査した内容を備忘録として書いているので、これから学んでいくためのチュートリアルのような記事だと思ってください。

### なぜMarkdownを学ぼうと思ったのか
上記にも書きましたが、私はMarkdownというものを全く知りませんでした。
ある時、上司に「Markdownって知ってる？」と聞かれ、「知りません」と答えると驚かれたのを覚えています。
そこで軽く調べてみると、文書を見やすくすることができたり、Markdownで書くことが前提のサービス（Qiitaがまさにそうですね）があったりと覚えておくことで様々な利点があることが分かったので、Markdownを知ることで今後の自分に役立てるかもしれないということで学ぶことにしました。

# 目次

- [Markdownとは](#markdownとは)
- [なぜMarkdownを使うのか](#なぜmarkdownを使うのか)
- [記法の紹介](#記法の紹介)
- [まとめ](#まとめ)

# Markdownとは
まず初めにMarkdownとは何なのかを簡単に説明します。
Markdownとは普段何気なく書いている文書（テキストやWordなど）をより読みやすくするための記法であり、**文書の書き方のルール**のことです。
イメージとしては、HTMLに近いです。
HTMLもタグで囲んで～といった**ルール**がありますよね？そんなHTMLをより手軽に文書を作成したい！といった考えから生まれたものがMarkdownです。
HTMLの簡易版と覚えておきましょう。

# なぜMarkdownを使うのか
実際に例を挙げながらみなさんがMarkdownを使う理由を見ていきましょう。

### 誰が書いても同じ文章構成になる（統一規格）
みなさんはこのような経験はないでしょうか。

- 文章の書き方が人によってバラバラで読みにくい
- 半角スペースで段落を分けているのにこの人は全角スペースで分けている

特に一つ目が多いでしょうか。人によって見出しの書き方が違ったりとバラバラなのでなにかと面倒なことが多いですよね。
これを解決する方法は**全員同じルールで書く**ことです。
最初にMarkdownは**文章の書き方のルール**とお伝えしました。
つまり、Markdownを使って文章を書くと、全員がそのルールに則って文章を書くので人によって文章の書き方がバラバラになる心配がありません。
（そういった意味ではHTMLもルールに則って書いていますが、①で示したように視認性が悪いのでMarkdownに軍配が上がります。）

### HTMLよりも読み書きが簡単
まず初めにHTMLで簡単な文章を書いてみます。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/761331/4d7d6b34-d672-ff8e-e55a-6028920bda72.png)
この状態だととても見やすいのですが、実際に書いた文章を見てみましょう。

```html:HTML
<h1>簡単な文（ここから）</h1>
<h2>挨拶</h2>
<p>こんにちは<br>
    私の名前は<strong>太郎</strong>です。</p>
<h2>趣味</h2>
<ul>
    <li>スポーツ
        <ul>
            <li>サッカー</li>
        </ul>
    </li>
    <li>読書</li>
    <li>ゲーム
        <ul>
            <li>FPS</li>
            <li>RPG</li>
        </ul>
    </li>
</ul>
<h2>好きなもの</h2>
<p>私は猫が好きです。</p>
<h1>簡単な文（ここまで）</h1>
```

このように非常に分かりづらい文章で書かれています。
HTMLでの書き方のルールを理解している方であればこのような文章でもパッと見ただけでどのように書かれているか分かるかと思いますが、ではHTMLを全く知らない方がこの文章を見たらどう思うでしょうか。
一方でMarkdown記法で上記と全く同じ簡単な文を書いてみます。

```markdown:Markdown
# 簡単な文（ここから）
## 挨拶
こんにちは。  
私の名前は**太郎**です。

## 趣味
- スポーツ
    - サッカー
- 読書
- ゲーム
    - FPS
    - RPG

## 好きなもの
私は猫が好きです。  
# 簡単な文（ここまで）
```

どうでしょうか。
Markdownで書かれた文章の方がHTMLで書かれた文章よりもシンプルで、プレーンテキストやWordに比べると劣りますがパッと見ただけでどんな文章構成となっているかがなんとなく理解できます。（実際にMarkdownを全く知らない私でもなんとなく理解できました）

このように、Markdownで書かれた文章は視認性が良く、同じ文章でもHTMLに比べてシンプルに書くことができます。

### Markdown記法の良い点、悪い点
では、ここからは様々な機能を書き易さや見やすさを観点にMarkdownと比較していきます。
比較対象は以下になります。

- プレーンテキスト
- Word
- HTML

比較内容は以下とします。

- コードブロック[^1]
- 印刷
- Webで見る
- 文章を書く際の苦労

[^1]: コードブロックって何？って思った方は、上記にHTMLとMarkdownで書かれた文章がありますよね。背景が黒っぽくなっているところです。この機能をコードブロックと言います。簡単に言うと、コードをブロックする（囲む）ことができる機能のことです。

#### 1. コードブロック
以下にプレーンテキスト、Word、HTMLで簡単な文章とコードを書いてみました。
##### 1-1. プレーンテキスト
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/761331/7aaf7153-5676-00a5-f1b8-4266e1a3bfda.png)
##### 1-2. Word
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/761331/d96faa77-bede-6356-f0ed-7736dde24f30.png)
##### 1-3. HTML
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/761331/cacb6b96-b84a-3555-8e05-8228f65ed9dc.png)
まず初めに言いたいのはこれら3つはコードブロックの機能がなく、コードを見やすくするなら自分で枠を作成するしかないということです。例えば、上記のWordの場合は1マスの表を作成し、その中にコードを埋め込んでいます。

では、ここでMarkdownを見てみます。

##### 1-4. Markdown
I'll try to write C++ code in plain text.

```cpp

#include<iostream>
using namespace std;

int main()
{　
    int num = 0;
    //int num2 = 0;
    cout << "Hello World!";
}
```
Markdownはコードブロック機能を持っているため、文章とコードをパッと見ただけで見分けることができます。また、シンタックスハイライト機能によって言語ごとの構文に応じた色付け表示もしてくれているので、コード自体も非常に見やすくなっていることが分かります。

#### 2. 印刷
ここでは、どれが印刷することに適しているのかをまとめてみました。

| No | 確認方法 | 評価 |
| :---: | :---: | :---: |
| プレーン<br>テキスト    |メモ帳<br>「ファイル」→「印刷」| 意図せぬところで改行されたりなど<br>色々と問題がある |
| Word    |Word<br>「ファイル」→「印刷」| Word上で書いたものを印刷できるので<br>非常に見やすい |
| HTML    |ブラウザ（IE）<br>「ツール」→「印刷」| ブラウザ上に表示されたものを<br>印刷できるので見やすい |
| Markdown    |Visual Studio Code<br>PDF作成→「印刷」| 意図せぬところで改行されたりなど<br>色々と問題がある |

以上より、プレーンテキストとMarkdownは分の途中で改行されてしまったりと見にくい部分があったため、印刷する場合に適しているのはWordかHTMLだと感じました。
#### 3. Webで見る
次に、Webで見る場合はどれが適しているかのをまとめてみました。

| No | 確認方法 | 評価 |
| :---: | :---: | :---: |
| プレーン<br>テキスト    |メモ帳<br>「プログラムから開く」→<br>「ブラウザ（IE）」| 意図せぬところで改行されたりなど<br>色々と問題がある |
| Word    |HTMLで保存| 余白が大きくなったり<br>意図せぬところで改行される |
| HTML    |そのまま表示| ブラウザ上に表示されたものを<br>印刷できるので見易い |
| Markdown    |HTMLで保存| HTMLにしているので<br>Markdownが適用されない |

以上より、Webで見るのに適しているのは当然ですがHTMLだと感じました。
※Markdownはブラウザの設定次第でHTMLにしなくても表示させることができるようです。
[ブラウザでMarkdownを表示する方法](https://qiita.com/SUZUKI_Masaya/items/6476dbbcb3e369640c78
)

#### 4. 文章を書く際の苦労
実際に私が書いてみた所感をまとめてみました。
ここでは**書く**ことだけを観点に比較していきます。

| No | メリット | デメリット |
| :---: | :---: | :---: |
| プレーン<br>テキスト    |簡単な文章を書く時に<br>サッと書ける|色を変えたり見出しを付けれないので<br>長い文章を書くと見返す際に苦労する|
| Word    |様々な機能があるので<br>どんな文章も書きやすい|特になし|
| HTML    |特になし|タグを書くのが非常に面倒で<br>見返す際にも非常に苦労する|
| Markdown    |記法が簡単で<br>かつ文章を見返しやすい| 色を変えることができない|

以上より、書くことを観点にするとWordが圧勝のように感じました。
MarkdownはWordには劣るものの長文であろうと非常に見返しやすいなという印象でした。


### 考察
上記の結果をもとに、Markdown記法はエンジニアやプログラマには向いているが、そうでない方にはあまり有用ではないと考えます。
MarkdownはHTMLを簡単にしたものと最初に言いましたが、そもそもHTMLはWebページを記述するための言語です。文書やレポートを書くだけならWordが最も簡単に見栄え良く作成することが可能です。
ですが、コードブロックやシンタックスハイライトが非常に便利なものであることを知っている方にとっては、文章作成が簡単で、かつ見栄え良く作成することができるMarkdownが便利だと思います。

# 記法の紹介
別の方の記事で綺麗にまとめて下さっていたので、URLを貼っておきます。

[【すぐに使えるサンプル付き】Markdown記法一覧を徹底解説！](https://www.sejuku.net/blog/77398)

# まとめ
## 学んだ感想
冒頭にも書きましたが、私はMarkdownを全く知りませんでした。ですが、記事を書くために色々調べるだけでMarkdownで書くことを前提としているこのQiitaを利用することができました。初心者の方にも学びやすいレベルなのかなと思います。
この調子でMarkdownに慣れていき、業務の効率を少しでも上げられたらなと思います。

## 参考文献
[Markdownとは](https://wa3.i-3-i.info/word16753.html
)
[メモ書きやドキュメント作成に便利な「Markdown記法」を使ってみよう](https://www.asobou.co.jp/blog/bussiness/markdown
)