フロントエンドのメタ言語のコンパイル環境を作る（言語選定編）

以前、CodePenで体験できるフロントエンドのメタ言語（HTMLテンプレートエンジン、AltCSS、AltJS）をやってみた。その後、CodePenでは体験できないEJSなどの存在も知り、そろそろローカル環境にメタ言語のコンパイル環境を作りくなった。言語によって方法が変わりそうなので、まずは言語を絞り込む。

【目次】

言葉の定義
メタ言語の選定
最後に

前回記事はこちら
※参考：【HTML】テンプレートエンジンEJSでFizzBuzzる！（Pugとの比較あり） - クモのようにコツコツと

※参考：HTMLテンプレートエンジン、AltCSS、AltJSのまとめ
qiita.com

言葉の定義

拡張言語？代替言語？メタ言語？プリプロセッサ？ポストプロセッサ？

「HTMLテンプレートエンジン、AltCSS、AltJS」というのは長いので（とくにHTMLテンプレートエンジンが長いw）これらを一言で総称できる言葉がないか調べてみた。

「拡張言語」「メタ言語」という言い方。「拡張メタ言語」ともいうなかな？

※参考：https://necosystem.hirokihomma.com/archives/96/

「代替言語」という言い方

※参考：代替言語について思うこと。 - nobkzのブログ

「プリプロセッサ」「ポストプロセッサ」という言い方

※参考：CSSのプリプロセッサーとポストプロセッサーはどれがイイ？ - 株式会社クイックのWebサービス開発blog

いろんな言い方があったw

文字数と字面（一般名詞か固有名詞など）を検討し、ここでは「メタ言語」で統一してみる。

コンパイル？トランスパイル？

メタ言語をネイティブなHTML、CSS、JSに変換する方法だが、コンパイル、トランスパイル、どちらの言い方がいいのか。

こちらの記事によれば

※参考：Babelは「ES2015をコンパイルするコンパイラ」なのか、それとも「ES2015をトランスパイルするトランスパイラ」なのか - Qiita

コンパイルとはプログラミング言語をマシン語にすること
トランスパイルとはあるプログラミング言語を別のプログラミング言語にすること
トランスパイルはトランスコンパイルともいう（コンパイルの一種）

ということでトランスパイルの方が正しそうだが、コンパイルの方が広い意味で使われており、トランスパイル的な意味も含むようだ。

「BabelをJSにコンパイルする」とは言っても「C言語をマシン語にトランスパイルする」とは言わない。ここでは「コンパイルする」で統一してみる。

コンパイラ？コンパイル？

また先ほどの記事によると

コンパイラ（英:compiler）とは、人間が理解しやすい言語や数式で記述されたプログラムを、機械語に（あるいは、元のプログラムよりも低いレベルのコードに）変換するプログラムのこと。

コンパイラはプログラム。名詞。

コンパイラによる変換することを動詞で「compile コンパイル」と呼ぶ。

コンパイルは動詞。Babelなどは「コンパイラ」にあたり、「Babelでコンパイルする」という言い方をする。

メタ言語の選定

選定基準

まずは、HTML 、CSS、JSに無数にあるメタ言語のうち、どの言語からやってみるか選抜してみる。共通する選抜基準はこちら。

Node環境でコンパイルできる
なるべくネイティブの書式と似ている言語
なるべく実務の現場でスタンダードに使われている言語

Ruby環境でコンパイルするメタ言語も多いが、今のところ自分はNode環境での作業が多いのでNode環境でコンパイルできる言語としたい。

また、RubyやPyrhonのようなカッコ無しでインデントで階層を表現する言語より、ネイティブなHTML、CSS、JSに近い書式の方が既存サイトの改修などにも使いやすそうに感じた。

そうは言っても実務の現場でスタンダードではない言語だとノウハウが活かしにくいので、そこも考慮した。

HTMLテンプレートエンジンはEJS、Pug、（Markdown）

HTMLはEJSとPugを選抜した。これまで触れたHTMLテンプレートエンジン（Haml、Slim、Pug、EJS）の中で、Node.jsでコンパイルできるのはPugとEJS

※参考：【Emmet, Haml, Markdown, Slim, Pug】HTMLテンプレートエンジン事始め - クモのようにコツコツと

EJSはNode.jsが用意している拡張言語で、前回の記事にも書いたがネイティブのHTML書式と近い。

※参考：【HTML】テンプレートエンジンEJSでFizzBuzzる！（Pugとの比較あり） - クモのようにコツコツと

一方PugはRubyのようにカッコ無しでインデントで階層を表現する。

※参考：【HTML】PugでFizzBuzzる！（テンプレートエンジンの変数、for文、if文） - クモのようにコツコツと

個人的にはEJSの方がわかりやすかったが、Googleトレンドで見るに日本国内ではPugの方が比較的スタンダードなようで無視はできない。

ということで、「EJS」と「Pug」を対象とする。

また、メタ言語ではないがMarkdownも無視できない。Googleトレンドで見るといかにMarkdownが突出しているかわかる。

MarkdownはHTMLを読み書き知識が不要でエンジニア以外も利用している。このブログもMarkdownだし。

ページの本文の部分を書くには便利で静的CMSの構築に役立ちそう！「Markdown」についても併せて調べていきたい。

AltCSSはSass（SCSS）とStylus

以前紹介したAltCSS（LESS, SCSS, Sass, Stylus, PostCSS）の中でNode.jsでコンパイルできるのは…実は全部！

※参考：【LESS, SCSS, Sass, Stylus, PostCSS】 AltCSS 事始め - クモのようにコツコツと

SCSSやSassはRubyでコンパイルすると思っていたが、今はNode.jsでもコンパイルできるらしい！

Googleトレンドで見るとSassとSCSSとStylusが拮抗しているように見える。

こちらのアンケートではSassが圧倒的！

CSSコーダーに質問。
スタイルシートをコーディングするときどの技術をよく使ってますか？
※Twitterのアンケート機能で回答ください
— 池田泰延 (@clockmaker) March 5, 2018

SassはRubyのようにカッコがなくてインデントで階層を表現するのが、個人的にはCSSと似た書式のSCSSの方がわかりやすい。しかし、Sassについての記事を調べるとほとんどはSCSSを意味しているようだった！（先ほどのGoogleトレンドの結果もSassとSCSSが同義と考えるとやはり突き抜けている！）

今後はSass＝SCSSという意味で「Sass（SCSS）」と併記していきたい。

※2020/03/10追記

その後、「Stylus」を触ったり調べる機会があり、こちらもとても多機能で便利に感じたので追加しました。

AltJSはTypeScriptとBabel、（Flow）

最後はAltJS。以前触れたAltJS（CoffeeScript, LiveScript, TypeScript, Babel）はすべてNode.jsでコンパイルできるようだ。

※参考：【CoffeeScript, LiveScript, TypeScript, Babel】AltJS 事始め - クモのようにコツコツと

Googleトレンドで見るとTypeScriptが飛び抜けている！

CoffeScriptは以前はメジャーだったようだが、最近は使われなくなっている模様。

また、LiveScriptは関数型の少し変わった形。数式みたいに簡素な書き方でこれもRubyのようにカッコがなく、インデントで階層を表現している。

TypeScriptはフロントエンドの現場ではスタンダードになってきていて、型を指定することで間違いが起こりにくいらしい。書式もJSとほぼ同じ。

Babelは最新のESの書き方ができる。厳密には「AltJS」ではない。

Babelはコードを変換するという点では、CoffeeScriptやTypeScript*といった、JavaScriptのコードを生成するAltJSの仲間と言えるかもしれません。CoffeeScriptやTypeScriptでも、Class構文やArrow Functionといった、ES6に似た構文を使ってコードを書くことができます。構文を使うことはできますが、あくまでも書いているのはAltJSであって、本来のJavaScriptではありません。

Babelを使う際に書くのは、AltJSではなく純粋なJavaScriptです*。新しい機能や構文を使って書いたJavaScriptを、現状のブラウザでも動くJavaScriptへと変換します。

※参考：Babelの手ほどき - Babelとは | CodeGrid

TypeScriptとは別の目的として、将来採用され得るES書式で書く、という局面もあると感じた。（Googleトレンドの結果はちょっと低すぎやしないか？と感じた…）

ということで「TypeScript」と「Babel」を対象にしていきたい。

※2020/03/10追記

Reactを開発しているFacebookがJSの静的型チェッカー「flow」を開発しており、これとBabelを組み合わせて使うとTypeScriptのような機能を実現できそう！

※参考：Flow を Babel と組み合わせてつかう | スマホ神 – JavaScript 受託開発 –