Markdown を使う利点

Markdown を使う利点

Markdown 形式で記事を書いて Vue で表示する方法を紹介しました。この方法だと、HTML などで記事を書く場合に比べると幾つかの利点があります。この記事では、Markdown で記事を書く利点について紹介します。

記事の概要のデータを埋め込める！

一つの大きな利点は、前回の記事でも紹介していますが、Markdown 形式の記事はそのままでも読みやすくなっています。 HTML ファイルの場合は、Web ブラウザを使って表示させる場合には、見やすく体裁も整えることが可能なので便利です。しかし、HTML 形式のファイルそのものを見た場合には、見出しや本文につけるタグがあるために、一般の人には読みにくいと言う欠点があります。

別の利点は、記事の概要のデータを Markdown のファイルに埋め込んで簡単に利用できる点があります。 例えば、タイトルや投稿日時などを埋め込んで、Markdown を処理するパッケージプログラムで簡単に抜き出して利用できるのはとても便利です。 こうしたデータを「メタデータ(meta data)」と呼んでいます。このようなデータを埋め込むことは、HTML でも可能ですが、Markdown の方がより利用者に使いやすい形で利用できるようになっています。

この記事では、Markdwon に記事の概要のデータを埋め込む方法と、その利用のやり方を紹介しています。

Markdown にメタデータを埋め込むには

最初に、Markdown 形式の記事にメタデータ、つまり、記事の概要に関するデータを埋め込む方法を紹介します。 書き方を簡単で、行の最初に「---」を入れた行で必要な情報を挟むような形で記述します。

文章の説明だとわかりにくいので、タイトルと投稿日、記事の概要を埋め込む例を以下に示します。

---

title: タイトル

date: '2022-04-26'

summary: 記事の概要

---

それぞれの項目には、「見出し」をつけて「:」で区切って、それに対応するデータを書くだけです。 これを、Markdown の冒頭に入れるだけで、プログラムでこの情報を簡単に抜き出して利用できるようになります。

メタデータを抜き出すには？

Markdown に記事に関するデータ（メタデータ）を記述するのは簡単です。 このデータをプログラムで抜き出すには、Markdown の処理のためのパッケージ（モジュール）を利用します。 いろいろな、パッケージがインターネット上で公開されていて、無料で利用可能です。

この記事では、前回も紹介した、npmの Javascript のパッケージとして公開されている、「gray-matter」と言うパッケージを利用する方法を紹介します。

import matter from "gray-matter";

function ProcessMarkdown(text) {

  const processed = matter(text);

  // 本文

  const contents = processed.content;

  // メタデータ

  const data = processed.data;

  return processed;

}

Markdown のファイルの中身を「text」として、関数に渡すと、関数では、この「gray-matter」を使って Markdown の記述を処理して、「本文」と「データ」の部分に分けてくれます。本文の部分は、処理結果の「processed」を使って、「processed.content」でアクセス可能です。データ部分は、「processed.data」でアクセスできます。Markdown が上の例のように書かれている場合は、タイトルは、「processed.data.title」でアクセス可能です。日付の場合は「processed.data.date」、概要の場合は、「processed.data.summary」でアクセスできるようになっています。

何が便利か？

では、これがどうして便利なの？と疑問に思う方もいらっしゃるかと思います。 これは、プログラムで Markdown を扱う場合に便利な点がいくつかあります。

一つは、記事の一覧を表示する際に、ファイルの名前を表示するよりは、記事のタイトルを一覧で表示した方が利用者には親切です。ファイル名からもある程度中身を推測できる様に名前をつけることも可能ですが、それよりは、実際の記事のタイトルを表示できた方が利用者にはありがたい場合が多くなります。さらに、記事の概要を一緒に表示できれば、さらに読みたい記事かどうかを記事の全部を読まないで選ぶことができるので便利です。こうした、利用者の立場に立った使いやすいサービスを実現する上で価値の高いサービスを提供できます。

実際には、このメタ情報を抜き出すためには、ファイルの中身にアクセスする必要がありますが、さらに効率的に処理をするためには、ファイルの場所と、メタデータを一緒にしてデータベースなどにデータを保持できると、毎回ファイルの中身にアクセスしなくても、記事（ファイル）の概要を表示する事ができます。この場合、メタデータばファイルと別に保存することになります。ただ、このデータベースのデータを作成する際に、埋め込んだデータがない場合には、別の方法で個別に入力してデータベースを作成する必要があります。しかし、Markdown のようにファイルに埋め込んでメタデータを保持できる場合には、ファイルを投稿（アップロード）する際にファイルからメタデータを抽出して利用する事が可能です。つまり、ほぼ自動でファイルの概要のデータベースを作成することも可能になります。

まとめ

プログラムで記事を管理する場合、Markdown にメタデータを埋め込んでおくと、記事の一覧の表示をする際や記事のデータベースを作成する際に利用可能です。 こうしたデータを別に入力するのは意外に面倒なものです。予め記事を書く際に、記事に関連したデータ（メタデータ）を記事のファイルに埋め込んでおくと、将来的な記事の管理に便利です。データの抽出もインターネットに公開されているパッケージを利用すると、ほとんど自分でコードを書く必要はありません。こうした事を考慮すると、Markdown を利用すると、有利な要素がたくさんあります。書き方も簡単なので短時間でマスターできるのも魅力です。是非、Markdown による執筆を試してみてください！