こんにちは!とりです。
実は私、Sqripts記事の推進も担当しているんですが、記事を書く際にもよく使われる記法としてマークダウン(Markdown)記法というものがあります。エンジニアやソフトウェア開発に携わる人がドキュメントを書く際にもよく利用される便利な記法で、ソフトウェアテストと直接関係するテーマではありませんが、利用できるシーンも多いため、まだ触れた事がない方向けに記法書式や実際に使用した所感を交えて紹介したいと思います。
マークダウン記法とは?
ウェブページのファイルに使用されているHTMLは、世間一般的にも有名な記法ですが、それを更にシンプルかつ、楽に書ける様にした記法です。元々は、マークアップ(Markup)と呼ばれる、文章にタグなどの形で文章構造(書式など)を明示するための言語があり(代表的な言語としてHTML)、そのマークアップを簡略軽量化したものがマークダウン記法です。
マークダウン記法の特徴
マークダウン記法の特徴をHTMLと比較する形で以下に挙げます。
ツールを選ばず、高い効率性でドキュメントを作成できるため、文章メインのドキュメント作成に特化した記法と言えます。
マークダウンの使いどころ
マークダウンが用いられる状況は、以下の用途が多い様です。
– マークダウンに対応しているサービスでの利用
Github、Notion、WordPressなどマークダウンに対応しているサービスを利用する際は、マークダウン記法を活用すると作業の効率化が図れます。
– 議事録や技術メモ作成
メモ帳で走り書きするのと大差なく形が整ったドキュメントを作成でき、後でPDF化して共有化する事も出来るため便利です。
– ブログ記事作成
エディタツールを選ばずHTML化する事ができるため記事執筆に便利です。
書式一覧
先にも書いた通り、使用できる書式は非常に少なくシンプルです。スペースの入れ方にやや癖があるものの、覚えるのは楽だと思います。
書式 | 入力例 | 出力サンプル |
段落 | 段落1 段落2 ※行間に空白行 | |
改行 | 改行 改行2 ※行末に半角スペース2つ | |
見出し | # 見出し1 ## 見出し2 ### 見出し3 #### 見出し4 ##### 見出し5 ###### 見出し6 ※記号の後に半角スペース必要 | |
強調 | *強調1(斜体)* **強調2(太字)** ***強調3(斜体+太字)*** | |
箇条書き | – 箇条書き ※記号の後に半角スペース必要 | |
番号付きリスト | 1.番号付きリスト 2.番号付きリスト ※記号の後に半角スペース必要 | |
打消し線 | ~~打消し~~ | |
引用 | >引用文章サンプルです 引用終わりには半角スペース×2で改行が必要です。 | |
リンク | [Sqriptsのリンクです](https://sqripts.com/) | |
画像 | ![Sqriptsのロゴ](https://sqripts.com/wp-content/themes/sqripts/img/common/logo.svg) | |
罫線 | — ※「*」や「_」でも代用可 | |
コード(インライン) | バッククォートで囲うと‘<code>‘この様にインラインコードをそのまま貼れます | |
コード(複数行) | 複数行の場合 “` # 見出し1 *強調1(斜体)* – 箇条書き “` | |
表 | |大項目の見出し|中項目の見出し|小項目の見出し|小項目の見出し| |—|:—:|—:|:—| |デフォルト|中央寄せ|右寄せ|左寄せ| |デフォルト|中央寄せ|右寄せ|左寄せ| ※表の2行目に「:」を入れ、文字寄せ可能 |
便利な無料のマークダウンエディタ
無料で使える便利なマークダウンエディタをいくつか紹介します。 各エディタの詳細は割愛しますが、PC版はいずれもプレビューを確認しながら編集する事ができます。
– Visual Studio Code Microsoft社提供のコードエディタ。拡張機能「Markdown All in One」を導入しましょう。
– Boostnote プログラマ特化のコードエディタ。
– AtomGithub社が提供しているエディタ。Githubと連携。
– Joplin iOS、Android対応アプリあり。
マークダウン使ってみました(VSCode)
というわけで、実は本記事はマークダウンを使って書いてみました。今回は、Visual Studio Code(以降 VSCode)を使用しています。VSCodeには拡張機能「Markdown All in One」をインストールしてください。ファイルは.mdの拡張子で作成します。実際の見た目を確認しながら書けるのでとても便利です。
先にも書いた通り作成だけであればメモ帳でも十分です。 ただ、表はテキストだけでは見栄えがイメージし辛いため、プレビュー確認できるエディタを使うメリットが増します。あと、表に関してはExcelやWordの様にセル内で書式を細かく変えるといった複雑な見せ方は殆どできないため、そこは割り切って表はシンプルな使い方をした方が良さそうです。
マークダウン文章をHTML変換してみました(VSCode)
VSCodeを使用してマークダウンで書いた記事のHTMLへの変換もしてみましたので、そちらも軽く触れます。対象のファイル(mdファイル)を選んでいる状態で、メニューの「View」から「Command Palette」を呼び出します。
コマンドラインに「HTML」を入力すると候補が出てきますので、その中から「Markdown All in One:Print current document to HTML」を選択します。するとVSCodeで設定されている出力先に変換されたHTMLファイルが出力されます。
出力されたHTMLファイルをブラウザで開いてみます。
出力されたファイルをメモ帳で開きますと、しっかりHTML化されてますね!
まとめ
ということで意外とまだ浸透していないかもしれない、便利なマークダウン記法について紹介してみました。学生の頃は、ホームページを作成するのにも、ごりごりとHTMLタグをメモ帳で書いていた思い出がありますが、ずいぶんと楽になりましたね・・・。(こういうのも技術の進歩と言えますよね)
大変楽な記法なので、余計な労力はかけず、アウトプットを残せる文化が広まれば良いなと思います。知ってたけど使ってなかったって人も一度是非使ってみてくださいね!
おすすめ情報
【2024年度最新版】現役大学生の新卒就職先業界を学部別に徹底解説!
就職に強い学部とそうでない学部は存在する?-そんな疑問にお答えする記事です。(外部リンク)