はじめに
ここ最近、GitHubやQiita等のWebサービスで採用されているマークダウン。メモ帳などで記載するよりもリッチなドキュメントを作れる上に、HTMLよりも少ないコードで表現できるので、徐々に普及しつつあります。今回はそんなマークダウンの基礎を学んでいきましょう。
レッスン１．マークダウン(MD)とは
マークダウン(以下MD)はテキスト記述のためのマークアップ言語の１種です。マークアップ言語はHTMLが代表的ですが、文書構造や装飾などを表現するための言語のことです。MDを使うことで、プレーンテキストがよりリッチに表現できます。一定のルールに従って記載していき、完成した後はHTMLとしての書き出しも可能となっています。記法もタグというよりは記号が多いので、視覚的に分かりやすいかつ、覚えやすい言語仕様となっています。
レッスン２．MDを書くための環境を整える
MDの用途として、Webサービスの場合は直接Web上で打ち込むことになります。下記のリンクのページのように、Web上で直接打ち込んでプレビューを確認できるサービスもあります。
https://markdownlivepreview.com/
しかしながら、将来的にはファイルとして保存したり、差分を確認したりする必要が出てくることも考えられますので、多彩な用途で便利に使えるようにエディタを準備すべきです。MD専用のエディタもありますが、ここでは汎用性を考えてVisual Studio Code（以下VS Code）を使ってみましょう。
まず、VS Codeのインストールを行ってから下記に進みましょう。
Visual Studio Code(VS Code)
VS Code様々なプログラミング言語に対応した高性能エディタです。本体とプラグインで構成されておりますので、まずは本体をインストールしていきます。
インストーラをダウンロードするには、以下のページにアクセスします。
https://azure.microsoft.com/ja-jp/products/visual-studio-code/
「今すぐ無料でダウンロードする」をクリックします。
次のページで、今回はWindowsの場合なので「Windows」をクリックします。
32bit/64bitなどは特に気にせず、下記のボタンを押せばお使いのPCに応じた適切なインストーラが自動で選択されてダウンロードされます。
ダウンロードされたインストーラファイルを開き、以下の手順に沿ってインストールを進めてください。
「同意する」を選んで次へ。
そのまま次へ。
そのまま次へ。
そのまま次へ。
インストールを押します。
インストールが終わったら、完了を押して早速実行します。
Welcomeウィンドウが開いたらインストールは完了です。
VS Codeプラグイン(Markdown All in One)のインストール
VS Codeの準備ができたらＭＤのプラグインを導入します。導入することで、目次を入れたり、リストの入力を自動補完したりできるようになります。
拡張機能のインストールウィンドウから、「markdown」と入力し、「Markdown All in One」をインストールしてください。
新規ファイルを作り、「test.md」として保存します。ファイルの種類は「Markdown」を選択してください。
新規ファイルが開いたら、プレビューウィンドウを出しておきます。
これで、MDを記載する準備は完了です。
レッスン３．記法を学ぶ
では、MDの代表的な記法を学んでいきます。実際に書いてプレビューを見ながら、その表示を確認してみてください。使いたいときにいつでも参照できるように、このページをブックマークしておくと便利です。
見出し
まずは見出しです。HTMLでいうところのHタグとなります。シャープの数で見出しのレベルを決めることができます。シャープの後のスペースを忘れずに。
コード # 見出し1 ## 見出し2 ### 見出し3
プレビュー
太字、斜体
斜体と太字はアスタリスクの数で表します。最初は紛らわしいですが、徐々に慣れると思います。こちらは記号の前後にスペースは不要です。
コード *斜体* **太字**
プレビュー
リスト(ドット)
ドット形式のリストです。アスタリスクの後にスペースが入ります。インデントしたい場合は、文頭にスペースを2つ入れます。
コード
* リスト1 * リスト2 * リスト3 * スペース2つで子アイテムになる
プレビュー
リスト(ナンバリング)
続いてナンバリングのリストです。全て１で指定しても、自動ナンバリングされます。アイテムを追加削除しても自動でナンバリングされるので便利です。こちらもピリオドの後にスペースが必要になります。
コード
1. リスト1 1. リスト2 1. リスト3
プレビュー
チェックボックス
作業内容の進捗を表すときなどに便利なチェックボックスを表現することもできます。アルファベットのxを入れると、チェックを入れることができます。
コード
## 帰宅後 - [ ] うがい - [x] 手洗い
プレビュー
表(テーブル)
続いては表です。表も直感的にわかりやすい記号になっています。タイトルと項目の間の区切り線の両端にコロンを入れると、その列の文字配置を指定できます。
コード
| 左寄せ(デフォルト) |中央揃え| 右寄せ | | ------------------ | :----------------------------: | -------------------------: | | その１ | コロンでラインを挟むと中央揃え | 右側にコロンを書くと右寄せ | | その２ | 実践編 | 実践編 | | その３ | 発展編 | 発展編 |
プレビュー
表をMDで記載していると、列がガタガタになって見にくいことがあります。表が大きくなるとより顕著になりますが、VS Codeにはそれを自動で修正してくれる機能があります。
コードウィンドウで「Shift+Alt+F」もしくは、コードエリアを右クリックし「ドキュメントのフォーマット」を選ぶと、整形されます。
サンプルには全角文字が入っているため多少ずれはありますが、それでもある程度見やすくなります。ぜひお試しください。
引用
文章を引用したい場合に使います。一般的に引用に使う記号と同じなので、分かりやすいですね。記号の数で引用のネストをすることも可能です。
コード
> 引用しました >> 引用の引用です >>> さらに引用 と、このように引用を表すことができます
プレビュー
ソースコード(ブロック)
ソースコードブロックを表示します。コードブロックの始まりの行に言語を指定するキーワードを入れると、シンタックスハイライトが効きます。今回は例としてC言語で記載してみます。
コード
コードを記載します ```c int val; val = 100; printf( "%d\n", val ); ```
プレビュー
対応言語は、MDを記述する先のサービスに依存しますので、そちらでご確認ください。対応していない言語でもエラーになることはなく、シンタックスハイライトされないだけになります。GitHubなどは多数の言語に対応しており、Python, Javascript, Javaなどなど、メジャーな言語はほぼ対応しているといった状況です。
ソースコード(インライン)
変数名などを文中で使いたい場合に便利なインラインのコードを表現することもできます。シングルクォーテーションで括ります。
コード
この値は`strValue`という変数に格納されています
プレビュー
改行
改行は普通に改行しても適用されません。行末にスペースを２つ入れてから改行すると適用されます。また、２行以上改行すると、スペースなしでも改行されます。
コード
改行 しました 改行 しました
プレビュー
水平線
セクションの区切りなどに用いる水平線は、アスタリスクやアンダーラインを３つ以上入力すると表現できます。どちらでも意味合いは同じなので、お好きな方をお使いください。
コード
セクション１ *** セクション２ ___ セクション３
プレビュー
Webリンク
Webページのリンクを入れることもできます。ナレッジサービスなどでは参考URL等に使うことが多いので、覚えておきましょう。角括弧に文字列を入れると、リンクのラベルを付けることができます。
コード
[Googleへのリンク](https://google.co.jp)
プレビュー
画像を入れる
画像を挿入するには、画像のURLを入れます。(下記画像URLはサンプルですので、画像URLは適宜変更ください)
コード
プレビュー
コメントを入れる
MDのコード自体の説明や、切り替えて使いたいコードのコメントアウトなど、ページには表示させたくない内容がある場合、コメントを入れることができます。
コード
この行は表示される
プレビュー
おわりに
今回はMDについて学びました。HTMLよりも少ないコード量で手軽にかけて、HTMLに互換があるということで、ナレッジ系Webサービスを中心に普及しつつあります。また、Gitのホスティングサービスでは、リポジトリの説明で良く使われるので、Gitをマスターしたらそれとセットで覚えておくと便利です。注意としてMDで記載したものは、用いる先のWebサービスによって見え方が変わってきますので、ある程度書いたところで表示を確認しながら進めていくことをお勧めします。
最後までお読みいただき、ありがとうございました。
No Comments