はじめてのmarp～markdown文法とテキストエディタでスライド作成入門

# 1. はじめに
Marp(マープ、 最近は Marpit という名前になっている模様) は、markdown(マークダウン)文法という記述方法でスライドを作るソフトです。これを始めるにあたって、何をインストールしたら良いのかについて、記述しました。
この記事の対象は、パソコンでキーボード入力が出来て、"ワード"で文章を書いたことがあり、"ホームページ"(ここでは「webページ」と呼びます)をパソコンのブラウザで見ることのできる人です。

（補足）
markdownとは、組版のための記述言語(マークアップ言語(markup)というコンピュータ用の分野)で、webページを見る時に使うHTMLという記述方法に似た役割を果たします。 "ホームページ"を見た時に、右クリックすると「ページのソースを表示」などのメニューが出ます。これをクリックすると、暗号みたいなのがずらずら並びます。しかし良く見ると、こんな＜ ＞かっこでくくられた文字が並んでいるはずです。これがmarkupという形式のHTMLという言語です。
実は、この記号を並べてブラウザに読み込ませることで、"ワード"を購入しなくても、綺麗な文章を作ることができるのです。
そして、このHTMLという記述方法よりも簡単にしたのが、markdownという言語です。（ただし、ブラウザではmarkdownが変換できないので、VSCode（ブイ エス コード）というフリーのソフトウエアなどが必要です）


# 2. インストール

## 2.1. 流れ
ソフトの手順は次の通りです。

1. vscodeのインストール
2. marp 拡張機能のインストール
3. (オプション)markdown All in oneの拡張機能のインストール

## 2.2. vscodeのインストール

下記のページにアクセスしダウンロードをクリックします。

https://code.visualstudio.com/

![01.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/698531/ca07cafd-a3f6-03b2-6572-0fe1cd072007.png)

しばらくすると、勝手にダウンロードが始まります。終わったらその部分をクリックして実行します。

![02.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/698531/7a49507c-e297-dad2-f26f-85e93c3c9b4a.png)

ライセンスの同意確認で、同意するを選択して、次へ（図ではNext)をクリックします。

![03.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/698531/a8c5f5cc-cc06-5805-08bd-ba92e06dbbfc.png)

色々と質問されますが、次へ（図ではNext)をクリックします。

![05.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/698531/add66323-57ea-cc7e-7801-1e219398c31a.png)

この画面が出るまで、次へをクリックし、ここで、Codeで開くをエクスプローラのコンテクストメニューに加えると、サポートするファイルを関連付けるにチェックを入れましょう。今回は触れませんが、色々と便利な場面があります。

![06.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/698531/3cae73b5-b011-b714-6a68-ae16aafb038e.png)

この画面が出たら、インストールをクリックします。

![07.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/698531/385bd38f-498e-159f-ca53-abe07d312737.png)

インストールが終了し、Visual Studio Codeを起動します

![08.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/698531/277b8c6d-77c6-3fe1-a026-5c4fe8b335e9.png)

起動すると次のような画面が出ます。これが、VSCodeです。
![09.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/698531/ece67d63-9e1b-d9db-edd8-7e53def38a6d.png)


## 2.3. marp 拡張機能のインストール


VSCodeの画面の右側にある、 四角が3つと1つあるアイコンをクリックします。 
![10.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/698531/f73ee41b-b562-3c46-f024-b67783fd1e93.png)

出てきた枠に marp と入力し、インストールボタンを押します。

![11.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/698531/369c2f0a-cd21-7447-21c4-4c2661ec4de5.png)

インストールが完了するとインストールボタンが消えます。

![12.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/698531/c2bbdb2f-a771-851b-a0c2-afbf81182d38.png)



## 2.4. (オプション)markdown All in oneの拡張機能のインストール


必須ではありませんが、markdownを書きやすくするツールも入れましょう。
枠にmarkdownと入力し、Markdown All in One （一番上に出てくるはずです）のインストールボタンを押します。

![25.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/698531/29aaa65b-7f43-9bea-a3d2-7e02e1848b16.png)



# 3. 操作およびスライド作成方法

VSCodeは、基本的にはテキストエディタです。windowsに標準で付いているテキストエディタは、メモ帳 (notepad.exe)です。 書式も何も無い、ただ単に文字を入力するためのアプリです。ソフトウエアのプログラムを書く場合、このようなテキストエディタを使うのです。それと同じものを使います。しかし、使い方は簡単ですので、安心してください。

まず、ファイルから新規ファイルを選びます。すると、なにやら表示されていますが、気にせずに、行頭に文字を入力します。

![13.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/698531/d6e95947-ffc8-867a-9eee-0bc1468370a9.png)

入力するのは、これから作成するファイル名が良いです。 例えば、 ```test.md``` と入力してみましょう。(最後の.md が重要です。拡張子（かくちょうし)といいます)

![14.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/698531/43632dc5-1c17-663c-dcdc-b8de4b382395.png)

ファイルから保存（もしくは、コントロールキーを押しながら s を押します）をすると、入力したファイル名が表示されているはずです。saveボタンをクリックして、保存します。

![15.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/698531/b7907376-27f9-f003-f909-bee3445c56a0.png)

さて、さっそくmarpを使って見ましょう。画面の右上に 三角が並んだようなアイコンがありますので、そこをクリックします（これが marpアイコン です）。
すると、真ん中に、3行の文字が現れますので、真ん中(Toggle Marp Preview for current Markdowntと書かれたところ）をクリックします。

![16.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/698531/f779ddb6-9683-eaf8-9d70-df054c2e9e5a.png)

すると、一番上に、marp: trueという文字が現れます。これが、このファイルはmarp用です、とアプリケーションに対して宣言するおまじないです。

![17.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/698531/480a914e-0486-8e3c-852a-8d1c07e71fdf.png)

右上の、虫めがねが付いた扉みたいなアイコンをクリックしてみましょう。(このアイコンは、プレビューアイコンです）

![19.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/698531/911838ef-b07d-38e9-a3ab-273a14fa6a18.png)

なんと、スライドが表示されました！
これはプレビューという機能で、これから入力する文字を、「marpで整形した後は、こんな画面になりますよ」という表示機能です。
左側に文字を入力して、右側で出来映えを確認しながら、スライドを作成していくわけです。
では、何か入力してみましょう。例えば次のように、です。

すると、2枚のスライドが右側に表示されているはずです。
（ここで感動したあなたは、marpやmarkdownを使う素質がきっとあるはずです。）

```
# スライド1
これは1枚目です
- 箇条書きです
- 箇条書きしてます
  - 箇条書き
- 箇条書きでした

---
# スライド2
これは2枚目です
1. 箇条書きです
2. 箇条書きしてます
  - 箇条書き
3. 箇条書きでした

```

と入力してみましょう。コピー&ペーストでも良いです。


![20.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/698531/7da3d04d-6c61-2df0-7ccb-36cdf8f53864.png)

さて、スライドを作成してみましょう（右側に表示されているのは、参考表示なので、まだ完成したスライドではないのです）。ちなみに出力できるのは、スライドはPDF形式や、パワーポイントのpptx形式などがありますが、今回はPDFを出力します。

右側のmarpアイコン（三角が並んだもの）をクリックし、中央に現れた3行のうち一番上(Esport slide deck...)をクリックします。

![21.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/698531/3bfe6ff3-4b56-25e3-75e3-254e445d82a0.png)

ファイル名の最後がpdfになっているはずです。 出力(この図ではExport)をクリックします。

![22.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/698531/5b28920f-c7f0-cc85-d492-0dba588ca7c2.png)

初めて実行した場合は、pdfファイルを何で表示するか？と聞かれます。この画像のように、マイクロソフト Edgeでも良いですし、Adobe Acrobat Readerでも良いです。好きなpdf表示ツールを使って下さい。今回は、Edgeを例に次に進みます。

![23.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/698531/f47178c6-be9a-c8b7-95a1-85c8050f4057.png)

先ほど、プレビューされたものと同じものが、pdfで表示されたはずです。これでスライドが完成です。書きたい内容を書いて、作成してください。 

![24.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/698531/bf51bb52-592f-65cc-bb43-02fa294144b9.png)

# 4. 文法（記述方法）

ここでは、markdown文法と表現について簡単に説明します。
詳しい書き方については、「[marp 文法](https://www.google.com/search?q=marp+%E6%96%87%E6%B3%95)」で検索すると良いでしょう。

## 4.1. 見出し記号（＃）

まず覚えたいのが、見出し記号``` # ``` です。
例えば、この章のタイトルは「4. 文法（記述方法）」と書いていますが、少し大きいフォントで書かれています。これが、見出し という機能です。 （実は、"ワード"や"パワポ"でも、見出し機能はありますが、みなさんは、利用したことがありますか？）
marpのスライドでは、この見出しを使うととても見やすくなります。
使い方は簡単です。 行頭に半角文字のシャープ ``` # ``` と半角のスペースを書いて、何か言葉を書きます。たったこれだけ。

最も大きい見出しは、シャープ1つ ``` # ``` 。 その次に大きいのは シャープ2つ ``` ## ``` です。 同様にシャープの数を増やすと、小さくなっていきます。


## 4.2. 箇条書き記号(-)

スライドは、大きな見出しと、箇条書きとの、2つがあれば、ほとんど体裁として整います。
箇条書きは、行頭に半角文字のマイナス ```- ```と半角のスペースを書いて、何か言葉を書きます。たったこれだけです。 

```
- 項目1
- 項目2
  - 項目2．1
  - 項目2．2
- 項目3
```

この例を見て判るように、行頭に2つ位のスペースを入れると、1レベル下がった箇条書きができます。項目2の中に、入れ子状態で更に箇条書きができます。

インストールで、 markdown all in oneを入れてあれば、この箇条書きをすると、次のマイナス記号が現れます。タブキー(Tabキー）を押すと、1レベル下げることができます。バックスペースを押すと、レベルを元に戻せます。

## 4.3. 数字の箇条書き

箇条書きには、2種類あり、点の他に、数字も箇条書きで利用できます。半角の数字の後にピリオドとスペース```1. ```と書いて、何か言葉を書きます。たったこれだけです。

インストールで、 markdown all in oneを入れてあれば、この箇条書きをすると、次の1.が現れます。

![26.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/698531/de19b93f-980c-eab4-68cb-2ad1a7d49441.png)



## 4.4. スライドの区切り

スライド1枚1枚を区切るには、マイナスを3つ繋げます```---```。これでスライドが次のスライドになります。
この記号は、marpではスライド区切りですが、一般的なmarkdownについては、太い区切り線になります。

## 4.5. その他

marpは、図を挿入したり、背景に図を入れたり、割り付けで右側だけに図を入れたりと色々とできます。
詳しい書き方については、「[marp 文法](https://www.google.com/search?q=marp+%E6%96%87%E6%B3%95)」で検索すると良いでしょう。

# 5. おわりに

テキストエディタでスライドを作るアプリmarpを導入する方法について説明しました。パソコンを使ったことがある人であれば、簡単にできることが判ると思います。
ただし、PowerPointみたいに、アニメーションしたり、細かい表現をしたりはできませんが、書きたい事をざっと作るには、非常に強力な手法だと思います。私は、マウスを使う必要が無いためPowerPointに比べて2倍以上のスピードでスライドを作ることができると感じています。
これに興味を持たれた方は、ぜひ、markdownでの文書作成もチャレンジしてみてください。作業効率が全く違うことに感動すると思います。