Qiita Teams that are logged in
You are not logged in to any team

Log in to Qiita Team
Community
OrganizationEventAdvent CalendarQiitadon (β)
Service
Qiita JobsQiita ZineQiita Blog
9
Help us understand the problem. What is going on with this article?
@i-ryo

【メタ言語】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テンプレートエンジン事始め

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

エラーを掘り下げる。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追加

※参考:【メタ言語】フロントエンド開発スターターキットを作った

※随時更新中!

9
Help us understand the problem. What is going on with this article?
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
9
Help us understand the problem. What is going on with this article?