フロント周り 必要となる知識を広く浅く学ぶ03

目的

フロント周りで必要となる知識を広く浅く学び、実務に生かす。

内容

メタ言語

とある言語を記述するための言語。
例
・Haml（HTMLを記述するための言語）　Hamlファイル→HTMLファイルを生成
・Sass（CSSを記述するための言語）　Sassファイル→CSSファイルを生成

altHTML、altCSS、altJS

alternativeXXXの省略。つまり代わりとなるXXXと言う意味

言語		メタ言語(altXXX)
HTML	→	Haml/Slim/Pug...
CSS	→	Less/Sass/Stylus...
JavaScript	→	CoffeeScript/TypeScript...

altHTMLを詳しく

メタ言語	発祥
Haml（ハムル）	Ruby
Slim（スリム）	Ruby
Jade（ジェイド）	Node（JS）
EJS（スタイラス）	Node（JS）

altCSSを詳しく

メタ言語	発祥
Less（レス）	Ruby
Sass（サス/サース）	Ruby
Scss（サス/サース）	Ruby
Stylus（スタイラス）	Node（JS）

便利な共通機能

1. ネストできる
2. 自己参照できる
3. 四則演算ができる
4. 一行コメントが楽（//）
5. 変数が扱える
6. 条件文・繰り返し文が扱える
7. 独自@import

参考記事

コンパイラ/コンパイル、トランスパイラ/トランスパイル

コンパイラ
・プログラミング言語から機械語（バイナリ：0と1）へ変換することを指す
コンパイル
・プログラミング言語から機械語（バイナリ：0と1）へ変換する行為(プログラム)を指す
トランスパイラ
・マークアップ言語からマークアップ言語へ変換することを指す
トランスパイル
・マークアップ言語からマークアップ言語へ変換する行為(プログラム)を指す

まとめると

変換することを指す	変換する行為(プログラム)を指す
コンパイラ	コンパイル
トランスパイラ	トランスパイル

コンパイラとトランスパイラの違い

トランスパイラはコンパイラの一種

コンパイラ
　∟トランスパイラ

なんかふんわりしてる。。コンパイラ、トランスパイラがどの段階で実行されているかの処理手順を調べればわかるのかな？
参考になった記事

ひと休憩

「Playground（プレイグラウンド）」とは、何もインストールせずにその場で試せる機能
例　https://www.sassmeister.com/

まとめ

HTML/CSSのメタ言語が何でできてるのかを把握することでコードを書く先に参考になりそう
コンパイラ、トランスパイラの実行手順は調べておこうと思う。いまいちふんわりしているので。