あるとイイね！なフロントエンドのメタ言語「HTMLテンプレートエンジン」「AltCSS」「AltJS」についての記事を書いています。随時更新でここにまとめていきます。
※2020/12/01追加：フロントエンド開発スターターキットを作った！
HTMLテンプレートエンジン
CodePenで体験できるテンプレートエンジンに似たツール
- Emmet：テキストエディタの拡張機能。コードが書きやすい
- Markdown：ブログの拡張機能。文章が書きやすい。
CodePenで体験できるHTMLテンプレートエンジン
- Haml：先発テンプレートエンジン（Ruby環境）
- Slim：Hamlよりシンプル。（Ruby環境）
- Pug：Hamlよりシンプル。（Node.js環境）
※参考：【Emmet, Haml, Markdown, Slim, Pug】HTMLテンプレートエンジン事始め
HTMLテンプレート、Pugの変数、if文、for文を使ってFizzBuzzをやってみた。JSとの比較も。
※参考：【HTML】PugでFizzBuzzる！（テンプレートエンジンの変数、for文、if文）
Node.jsパッケージのEJSでFizzBuzz。変数、if文、for文を使う（Pugとの比較も）。PugよりHTMLの書式が残っていて見やすい。
※参考：【HTML】テンプレートエンジンEJSでFizzBuzzる！（Pugとの比較あり）
AltCSS
CodePenで体験できるAltCSS
- CSSと似た書き方でより便利に書きたい→LESS、SCSS。
コンパイルをNodeで行いたい→LESS。 いや、Rubyで行いたい→SCSS。 - コンパイルはRuby。さらに書き方も全てRubyライクでスタイリッシュに行きたい！→Sass
- いろんな書き方をフレキシブルに混在させたい。 →Stylus または他の人が作ったCSSを修正することになった。→Stylus
- 次世代CSSがどのような書き方になるか体験したい。 →PostCSS みんなが作った豊富なプラグインを体験したい（jQueryやWordPress的なシェア文化）→PostCSS
（Sass、SCSSはNode.jsでもコンパイルできることが後にわかる！）
※参考：【LESS, SCSS, Sass, Stylus, PostCSS】 AltCSS 事始め
AltJS
CodePenで体験できるAltJS
- Rubyライクに書きたいよ→ CoffeeScript
- さらに関数型を駆使したいよ→ LiveScript
- JSライクでいいけど型を厳密にしたいよ。classも定義したいよ→ TypeScript
- ブラウザが最新ESに対応するまで待ちきれないよ→ Babel
※参考：【CoffeeScript, LiveScript, TypeScript, Babel】AltJS 事始め
Gulpコンパイル編
メタ言語選定
コンパイル環境を作るにあたり、下記の言語を選定した。その理由について。
- HTML：EJS、Pug、（Markdown）
- CSS：Sass(SCSS)、Stylus
- JS：TypeScript、Babel、（Flow）
※参考：フロントエンドのメタ言語のコンパイル環境を作る（言語選定編）
コンパイル環境構築：タスクランナー（gulp）をインストールはこちらを参照
HTMLテンプレートエンジン
Pugをコンパイル（メタ言語初！）（2019/11/29追加）
※参考：【HTML】PugをGulpでコンパイルしてみる（メタ言語初コンパイル！）
EJSをコンパイル（2019/12/06追加）
※参考：【HTML】EJSをGulpでコンパイルしてみる（SyntaxErrorでちょい苦戦）
Markdownをコンパイル（2020/03/27追加）
※参考：【HTML】MarkdownをGulpでHTMLにコンパイルしてみる
AltCSS
Sass（SCSS）をコンパイルしてみる（2019/12/17追加）
※参考：【CSS】Sass（SCSS）をGulpでコンパイルしてみる
Stylusをコンパイルしてみる（2020/03/10追加）
※参考：【CSS】StylusをGulpでコンパイルしてみる
AltJS
TypeScriptをコンパイルしてみる（2019/12/25追記）
※参考：【JS】TypeScriptをGulpでコンパイルしてみる
Babelをコンパイルしてみる（2020/01/11追記）
自動コンパイル
Sassをwatch()メソッドでコンパイル（2020/04/01追加）
※参考：【Gulp】watch()メソッドでSass(SCSS)を自動コンパイル
SassをGulpとbrowser-syncによる自動リロード（2020/04/08追加！）
※参考：【gulp】browser-syncによる自動リロード（watch()の分離、defaultでSassと同時に実行）
メタ言語を同時にコンパイル
フォルダをsrc→destの構成に変更（2020/04/15追加！）
※参考：【gulp】Sass(SCSS)以外のメタ言語をコンパイルするためフォルダ構成（src→dest）
Sass(SCSS)とTypeScriptを同時にコンパイル（2020/04/25追加！）
※参考：【gulp】Sass(SCSS)とTypeScriptを同時にコンパイルする環境を作る
メタ言語（EJS、Sass(SCSS)、TypeScript）フルセットでコンパイル（2020/05/01追加！）
※参考：【gulp】メタ言語（EJS、Sass(SCSS)、TypeScript）を同時コンパイルする！
EJSコンパイル時にgulp-replaceで空白行を削除する正規表現（2020/05/09追加）
※参考：【gulp】gulp-replaceの引数に書かれている正規表現を掘り下げる
モジュール分割
BEM命名規則
BEMの長いclass名をSass(SCSS)とEJSで書いてみる（2020/05/17追加）
※参考：【メタ言語】BEMによるclass名をSass(SCSS)とEJSで書いてみる（モジュール事始め）
Sass(SCSS)モジュール
@ importを使ってBEMのブロックごとにファイルを分割（2020/05/22追加）
※参考：【Sass(SCSS)】@importでBEMのBlockごとにファイル分割する
変数($)や@ mixinでモジュールを超えた共通設定を行う（2020/05/30追加）
※参考：【Sass(SCSS)】変数($)、@mixinを使ってモジュールを超えた共通スタイルを設定する
EJSモジュール
inclue()を使ってEJSもBEM構成のモジュールに分割（2020/0604追加）
※参考：【EJS】include()でBEMのブロックごとにモジュール分割（Sass(SCSS)も修正）
EJSのテンプレートとJSONのコンテンツを分離してfsモジュールで読み込む（2020/06/11追加）
※参考：【EJS】fsモジュールを使ってコンテンツのJSONデータを読み込む
TypeScriptモジュール
以前作ったおみくじJSを移植。モジュール分割はエラーあり。。（2020/06/27追加）
※参考：【TypeScript】おみくじJSをTypeScriptに移植：型付け→モジュール分割（エラーあり）
エラーを掘り下げる。CommonJS由来だった（2020/07/14追加）
※参考：【TypeScript】モジュール分割で起きたエラーを調べる（CommonJSが原因）
webpackでコンパイル。一つのファイルにバンドルできた！（2020/07/17追加）
※参考：【TypeScript】モジュールファイルをwebpackでバンドルする
webpackをgulpと連携。モジュールをさらに細かく分割してもバンドルされた！（2020/07/20追加）
※参考：【TypeScript】gulpでwebpackを起動できるようにする（モジュールも再分割）
外部のJSONファイルを型付で読み込む（2020/11/20追加）
※参考：【TypeScript】外部のJSONファイルを型付で読み込む
メタ言語のスターターキットを作る
メタ言語コンパイル環境の中に画像圧縮の設定も組み込む（2020/11/22追加）
※参考：【gulp-imagemin】メタ言語コンパイル環境で画像圧縮も実行する
gulp.task()をgulp4で推奨されている関数の形に書き換え、他（2020/11/23追加）
※参考：【gulpfile.js】gulp.task()を関数化（←gulp4推奨）他、リファクタリング
delで破壊神になってファイルを削除した！（2020/11/28追加）
※参考：【gulp】我、破壊神となりてdelをもってファイルを削除すべし - クモのようにコツコツと
フロントエンド開発スターターキットを作った！（2020/12/01追加）
※参考：【メタ言語】フロントエンド開発スターターキットを作った
※随時更新中！