コンパイルとcssを考える

ソースマップの記事を書いていたら「コンパイル」が気になってしまいました。

scss→cssコンパイルなの?

過去の記事でも混乱していました(笑)
調べているとコンパイラ言語からプログラムの実行をする過程の中でコンパイルが出てくるので図にしました。

f:id:yokoyoko_115:20200804003940p:plain

図は正確にはあってないと思います。
コンパイルによってできたオブジェクトファイルというのは中間語なのか、機械語なのか。このあたりはいろいろな記事があってうまくまとめられませんでした。
C言語を勉強してみようか...。

コンパイラとは

コンパイラ - Wikipedia

コンピュータ・プログラミング言語の処理系(言語処理系)の一種で、高水準言語によるソースコードから、機械語あるいは元のプログラムよりも低い水準のコードに変換(コンパイル)するプログラムである。

なんとオブジェクトコードに変換する以外にも広い意味で「変換」するということなんですね!
そう考えれば、scssファイルからプログラミング言語ではない、スタイルシート言語のcssへの変換も「コンパイル」と言えると。
そう解釈しないとこの一度モヤモヤした気持ちはどうすればいいのか...。

CSSプリプロセッサ

そんなときプリプロセッサという存在を知りました。

プリプロセッサとは

プリプロセッサ(プリコンパイラ)とは - IT用語辞典 e-Words

プリプロセッサとは、ソフトウェアの役割による分類の一つで、ある中心的な処理を行うプログラムに対して、その前処理(preprocess)を行うプログラムのこと。プログラミング言語コンパイラの前処理を行うものが非常に有名。一方、メインの処理に対する後処理を行うものは「ポストプロセッサ」(postprosessor)という。

「ビルド」機能とは?仕組みやコンパイルとの違いを解説 | サービス | プロエンジニア

コンパイルまでには静的解析とプリプロセッサの処理が行われます。

プリプロセッサの別名は「プリコンパイラ」のようなので、そこからscss→cssを「コンパイル」と呼ばれるようになったのではないかと思いました。

CSSプリプロセッサの種類

CSSプリプロセッサにはいくつかあります。

  • Sass (Syntactically Awesome Style Sheets)
  • Scss (Sassy CSS)
  • Less (The Dynamic Stylesheet Language)
  • Stylus
  • PostCSS

プリプロセッサはプログラムのことを指したり、言語のことを指したり(これらはメタ言語)、どちらもあるようです。
混乱しそうですが、「Sass(言語)を使うにはSass(プログラム)をインストールする必要があります」という解釈でいいかなと思いました。

おまけ

いろいろ脱線したので、副産物の中からある程度まとめられた部分をメモします。

スクリプト言語インタプリタ言語の違い

ここでもどうしても「〜言語」がよく出てくるので調べました。
コンパイラ言語(型)とインタプリタ言語(型)は対義語的だなと理解しましたがスクリプト言語というのもあるとは。

スクリプト言語とは?インタプリタ型言語との違いは? | じゃぱざむ

今まで「スクリプト言語」だと思っていたものは「インタプリタ言語」でした。

図にしようと思いましたが、雰囲気で覚えておこうと諦めました。

コンパイラ言語でかつスクリプト言語であるというjavaを勉強してみようか...。

ブラウザでのレンダリングについて考える

今度は"コンパイル後"のcssファイルがどのようにブラウザで使われているか調べました。

ブラウザでは最初にDOM ツリー、CSSOM ツリーを構築する

オブジェクト モデルの構築  |  Web  |  Google Developers

CSSはHTML同様、CSSOM ツリーという、ツリー構造のオブジェクトモデルを構築します。

CSS のバイトが文字、トークン、ノードへと変換されていき、最終的に「CSS オブジェクト モデル」(CSSOM)というツリー構造にリンクされます。

とあるので、ソースを読み込んだ後に「バイト」になっているようです。 ↑のページの図を見ると3C 62 6F...とあります。

これはいわゆる機械語です。0と1だけのもののみを指すのかと思いきや、16進数で表されるものも機械語というのですね。

この後、DOM ツリー、CSSOM ツリーができて、
→ DOM と CSSOM を組み合わせてレンダリング ツリーを作る → Layout → Paint...

と続きます。この後の処理については別の機会に学びます。

フロントエンジニアなら知っておきたいブラウザレンダリングの仕組みをわかりやすく解説! | LeapIn