Help us understand the problem. What is going on with this article?

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

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

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

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)をインストールはこちらを参照

※参考:Web開発環境についてのまとめ(随時更新)

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追記)

※参考:【JS】BabelでESをコンパイルする

自動コンパイル

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に移植:型付け→モジュール分割(エラーあり)

※随時更新中!

i-ryo
フロントエンドエンジニア。神奈川に住まう四十路のオジキ。 DTP→Webデザイナーから転向し今に至る。引き続きコツコツの日々。ブログも書いてます。 Webづくり やりたい時が 始め時!
https://www.i-ryo.com
Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
Comments
No comments
Sign up for free and join this conversation.
If you already have a Qiita account
Why do not you register as a user and use Qiita more conveniently?
You need to log in to use this function. Qiita can be used more conveniently after logging in.
You seem to be reading articles frequently this month. Qiita can be used more conveniently after logging in.
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
ユーザーは見つかりませんでした