unified を使う前準備

以前、 Markdown ベースの WYSIWYG エディターを作りましたが、ここで使っている remark について何も知らなかったので、調べた結果をまとめます。

が、全部書くとすごい量になるので、ちょっとずつわけて書く予定です。まずは unified を理解するための前準備の記事です。

この記事をスタートとして、最終的に自分で Markdown を拡張する方法も書いていますので、興味があればぜひどうぞ。

unified とは

remark について調べていたのにいつの間にか unified の話しになっていた。何を言っているか（以下略）。

調査した結果、 remark は unified というもっと大きな枠組みの中の Markdown 担当ということがわかりました。なので、 unified について調べてみました。

unified は大雑把に言うと、テキストと構文木や AST と AST を変換するための JavaScript 製フレームワークのことです。 TypeScript でも扱うことが可能ですが、慣れないと少しむずかしいでしょう。

unified における用語

構文木

自然言語を名詞や動詞など、構文にそって解析して木構造としたものです。

AST

日本語では抽象構文木と言います。 Abstract Syntax Tree の頭文字を取って AST です。

一言でいうと構文木から、文法のための記号や助詞など、意味のない部分を除いた木構造を指します。実例としては HTML に対応する DOM がわかりやすいでしょう。< や > などタグを表す文字は DOM では保持されません。

unist

universal syntax tree のことです。太字にしてある部分をつなげて unist と呼ぶみたいです。

unist に定義や操作するためのライブラリーがまとまっています。

unified の世界では、 AST のベースとなるもののようです。オブジェクト指向的にいうとすべての AST の親となるものですね。そのため、基本的に AST を操作するときは unist として扱うと便利です。

parser

parser はテキストを解釈して、その parser が解釈できる文法に沿った AST を生成するものです。

compiler

compiler は parser の反対の動作をします。 AST から、文法に沿ってテキストを生成します。

transformer

transformer は AST 間の変換をするものです。

vfile

virtualized file の略で、ファイルを仮想化して扱えるようにしたものです。 unified では vfile を用いてデータをやりとりします。

対応している文法

ここでは unfied で扱うことのできる文法を紹介します。

Markdown

Markdown 文法の担当として remark があります。

remark における parser は remark-parse 、 compiler は remark-stringify です。

transformer は色々あります。

name	descs
remark-rehype	Markdown AST から HTML AST への変換
remark-retext	Markdown AST から自然言語の構文木への変換
remark-react	Markdown AST から ReactElement への変換

ちなみに remark 内部の処理は micromark に移譲されています。 micromark も色々できるようなのですが、別の記事で取り上げる予定です。

また、Markdown を表す AST は markdown ast の太字部分をつなげて mdast と呼ばれています。操作用のライブラリも用意されています。

HTML

HTML を担当するのは rehype です。

reyype-parse 、 rehype-stringify がそれぞれ parser と compiler です。

HTML 文法における AST は hast と呼ばれています。 html ast の略です。操作用のライブラリーは hast です。

自然言語

retext が担当しています。

現在は英語、オランダ語、ラテン文字の自然言語に対応しているようです。絵文字も扱うことができます。

プラグイン

unified はプラグインシステムを採用しています。 parser や compiler もプラグインとして提供されており、 transformer は自分で好きなように定義して使うことが可能です。

まとめ

unified はかなり大掛かりな仕組みだということがわかりました。迷子にならないように、まず全体感と用語をまとめました。

次回はプラグインの定義と使い方を見ていきましょう。