【メタ言語】HTMLテンプレートエンジン、AltCSS、AltJSのまとめ（随時更新）

あるとイイね！なフロントエンドのメタ言語「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テンプレートエンジン事始め](https://www.i-ryo.com/entry/2017/09/11/083055)

HTMLテンプレート、Pugの変数、if文、for文を使ってFizzBuzzをやってみた。JSとの比較も。

※参考：[【HTML】PugでFizzBuzzる！（テンプレートエンジンの変数、for文、if文）](https://www.i-ryo.com/entry/2019/10/02/090335)

Node.jsパッケージのEJSでFizzBuzz。変数、if文、for文を使う（Pugとの比較も）。PugよりHTMLの書式が残っていて見やすい。

※参考：[【HTML】テンプレートエンジンEJSでFizzBuzzる！（Pugとの比較あり）](https://www.i-ryo.com/entry/2019/10/17/065517)

# 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 事始め](https://www.i-ryo.com/entry/2017/09/12/065904)

# AltJS

CodePenで体験できるAltJS

* Rubyライクに書きたいよ→ CoffeeScript
* さらに関数型を駆使したいよ→ LiveScript
* JSライクでいいけど型を厳密にしたいよ。classも定義したいよ→ TypeScript
* ブラウザが最新ESに対応するまで待ちきれないよ→ Babel

※参考：[【CoffeeScript, LiveScript, TypeScript, Babel】AltJS 事始め](https://www.i-ryo.com/entry/2017/09/13/065947)

# Gulpコンパイル編

### メタ言語選定

コンパイル環境を作るにあたり、下記の言語を選定した。その理由について。

* HTML：EJS、Pug、（Markdown）
* CSS：Sass(SCSS)、Stylus
* JS：TypeScript、Babel、（Flow）

※参考：[フロントエンドのメタ言語のコンパイル環境を作る（言語選定編）](https://www.i-ryo.com/entry/2019/10/30/141231)

コンパイル環境構築：タスクランナー（gulp）をインストールはこちらを参照

※参考：[Web開発環境についてのまとめ（随時更新）](https://qiita.com/i-ryo/items/35b057aead8d6cb29203)

### HTMLテンプレートエンジン

Pugをコンパイル（メタ言語初！）（2019/11/29追加）

※参考：[【HTML】PugをGulpでコンパイルしてみる（メタ言語初コンパイル！）](https://www.i-ryo.com/entry/2019/11/29/064907)

EJSをコンパイル（2019/12/06追加）

※参考：[【HTML】EJSをGulpでコンパイルしてみる（SyntaxErrorでちょい苦戦）](https://www.i-ryo.com/entry/2019/12/06/070115)

Markdownをコンパイル（2020/03/27追加）

※参考：[【HTML】MarkdownをGulpでHTMLにコンパイルしてみる](https://www.i-ryo.com/entry/2020/03/27/074740)

### AltCSS

Sass（SCSS）をコンパイルしてみる（2019/12/17追加）

※参考：[【CSS】Sass（SCSS）をGulpでコンパイルしてみる](https://www.i-ryo.com/entry/2019/12/17/095254)

Stylusをコンパイルしてみる（2020/03/10追加）

※参考：[【CSS】StylusをGulpでコンパイルしてみる](https://www.i-ryo.com/entry/2020/03/10/054444)

### AltJS

TypeScriptをコンパイルしてみる（2019/12/25追記）

※参考：[【JS】TypeScriptをGulpでコンパイルしてみる](https://www.i-ryo.com/entry/2019/12/25/224004)

Babelをコンパイルしてみる（2020/01/11追記）

※参考：[【JS】BabelでESをコンパイルする](https://www.i-ryo.com/entry/2020/01/11/211504)

# 自動コンパイル

Sassをwatch()メソッドでコンパイル（2020/04/01追加）

※参考：[【Gulp】watch()メソッドでSass(SCSS)を自動コンパイル](https://www.i-ryo.com/entry/2020/04/01/081024)

SassをGulpとbrowser-syncによる自動リロード（2020/04/08追加！）

※参考：[【gulp】browser-syncによる自動リロード（watch()の分離、defaultでSassと同時に実行）](https://www.i-ryo.com/entry/2020/04/08/074158)

# メタ言語を同時にコンパイル

フォルダをsrc→destの構成に変更（2020/04/15追加！）

※参考：[【gulp】Sass(SCSS)以外のメタ言語をコンパイルするためフォルダ構成（src→dest）](https://www.i-ryo.com/entry/2020/04/15/200520)

Sass(SCSS)とTypeScriptを同時にコンパイル（2020/04/25追加！）

※参考：[【gulp】Sass(SCSS)とTypeScriptを同時にコンパイルする環境を作る](https://www.i-ryo.com/entry/2020/04/25/150442)

メタ言語（EJS、Sass(SCSS)、TypeScript）フルセットでコンパイル（2020/05/01追加！）

※参考：[【gulp】メタ言語（EJS、Sass(SCSS)、TypeScript）を同時コンパイルする！](https://www.i-ryo.com/entry/2020/05/01/184334)

EJSコンパイル時にgulp-replaceで空白行を削除する正規表現（2020/05/09追加）

※参考：[【gulp】gulp-replaceの引数に書かれている正規表現を掘り下げる](https://www.i-ryo.com/entry/2020/05/09/191031)

# モジュール分割

### BEM命名規則

BEMの長いclass名をSass(SCSS)とEJSで書いてみる（2020/05/17追加）

※参考：[【メタ言語】BEMによるclass名をSass(SCSS)とEJSで書いてみる（モジュール事始め）](https://www.i-ryo.com/entry/2020/05/17/094446)

### Sass(SCSS)モジュール

@ importを使ってBEMのブロックごとにファイルを分割（2020/05/22追加）

※参考：[【Sass(SCSS)】@importでBEMのBlockごとにファイル分割する](https://www.i-ryo.com/entry/2020/05/22/185144)

変数($)や@ mixinでモジュールを超えた共通設定を行う（2020/05/30追加）

※参考：[【Sass(SCSS)】変数($)、@mixinを使ってモジュールを超えた共通スタイルを設定する](https://www.i-ryo.com/entry/2020/05/30/095648)

### EJSモジュール

inclue()を使ってEJSもBEM構成のモジュールに分割（2020/0604追加）

※参考：[【EJS】include()でBEMのブロックごとにモジュール分割（Sass(SCSS)も修正）](https://www.i-ryo.com/entry/2020/06/04/081314)

EJSのテンプレートとJSONのコンテンツを分離してfsモジュールで読み込む（2020/06/11追加）

※参考：[【EJS】fsモジュールを使ってコンテンツのJSONデータを読み込む](https://www.i-ryo.com/entry/2020/06/11/080215)

### TypeScriptモジュール

以前作ったおみくじJSを移植。モジュール分割はエラーあり。。（2020/06/27追加）

※参考：[【TypeScript】おみくじJSをTypeScriptに移植：型付け→モジュール分割（エラーあり）](https://www.i-ryo.com/entry/2020/06/27/061659)

エラーを掘り下げる。CommonJS由来だった（2020/07/14追加）

※参考：[【TypeScript】モジュール分割で起きたエラーを調べる（CommonJSが原因）](https://www.i-ryo.com/entry/2020/07/14/072538)

webpackでコンパイル。一つのファイルにバンドルできた！（2020/07/17追加）

※参考：[【TypeScript】モジュールファイルをwebpackでバンドルする](https://www.i-ryo.com/entry/2020/07/17/015050)

webpackをgulpと連携。モジュールをさらに細かく分割してもバンドルされた！（2020/07/20追加）

※参考：[【TypeScript】gulpでwebpackを起動できるようにする（モジュールも再分割）](https://www.i-ryo.com/entry/2020/07/20/200659)

外部のJSONファイルを型付で読み込む（2020/11/20追加）

※参考：[【TypeScript】外部のJSONファイルを型付で読み込む](https://www.i-ryo.com/entry/2020/11/20/081558)

# メタ言語のスターターキットを作る

メタ言語コンパイル環境の中に画像圧縮の設定も組み込む（2020/11/22追加）

※参考：[【gulp-imagemin】メタ言語コンパイル環境で画像圧縮も実行する](https://www.i-ryo.com/entry/2020/11/22/163820)

gulp.task()をgulp4で推奨されている関数の形に書き換え、他（2020/11/23追加）

※参考：[【gulpfile.js】gulp.task()を関数化（←gulp4推奨）他、リファクタリング](https://www.i-ryo.com/entry/2020/11/23/165020)

delで破壊神になってファイルを削除した！（2020/11/28追加）

※参考：[【gulp】我、破壊神となりてdelをもってファイルを削除すべし - クモのようにコツコツと ](https://www.i-ryo.com/entry/2020/11/28/124511)

フロントエンド開発スターターキットを作った！（**2020/12/01追加**）

※参考：[【メタ言語】フロントエンド開発スターターキットを作った](https://www.i-ryo.com/entry/2020/12/01/082409)

※随時更新中！