Edited at

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

あるとイイね!なフロントエンドのメタ言語「HTMLテンプレートエンジン」「AltCSS」「AltJS」についての記事を書いています。随時更新でここにまとめていきます。

※2019/11/21追加Gulpインストールでけた!


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 事始め


コンパイル環境を検討

言語選定編 (2019/10/30追加!)

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


  • HTML:EJS、Pug、(Markdown)

  • CSS:Sass(SCSS)

  • JS:TypeScript、Babel

※参考:フロントエンドのメタ言語のコンパイル環境を作る(言語選定編)

タスクランナー選定編(※2019/11/14追加!)

タスクランナーいっぱいあるがGulpが主流。一方脱Gulpの主流npm-scriptsも知る。

※参考:【Gulpかnpm-scriptsか】メタ言語のコンパイル方法を調査・検討した


Gulpインストール

Gulpインストールに苦戦、Nodeとnpmのバージョンが古い?(※2019/11/20追加!)

※参考:Gulpのインストールが5分で出来なかった話(苦戦中)

Gulpインストールでけた!package.json入れ忘れてた。。(2019/11/21追加

※参考:Gulpインストールでけった〜!!(package.json作り忘れてた。。)