JavaScriptから見たCSS。CSSを学ぶという事。（CSS おれおれ Advent Calendar 2012 – 24日目）

CSS おれおれ Advent Calendar 2012 – 24日目

CSS おれおれ Advent Calendarの今年最後の記事です。JavaScript視点でCSSを考えてみます。

先に結論を申し上げると

CSSがあるお陰でJavaScriptが便利に！　JavaScriptをやるならCSSを学ぶ必要があるし、CSSを習得した人ならJavaScriptを始めるのに有利！　というお話です。

なおCSSなる単語が出現してきた時点でお分かり頂けると思うが、クライアント側JavaScript、つまりウェブブラウザーで動くJavaScriptが文脈です。Node.jsとかは今回の範囲外。（もちろん、あれも楽しいよね！）　あ、あとSVGやらも範囲外です。

断定的に申していても、常々例外はあるものです。

JavaScriptで出来る事、出来ない事

JavaScriptそれ自体が出来る事は、あまりありません。数値を計算したり文章を編集したりってのが関の山です。

しかし現実にはJavaScriptを用いた、多くの「派手な」実装があります。クリックすると画面が切り替わったり、メッセージが表示されたり、あるいはゲームが進行することもあります。

これはどういう事かと言うと、その「周辺仕様のAPI」をJavaScript経由で利用しているのです。（これは他の言語でも一緒ですが。）

JavaScriptだけじゃ何も出来ない

処理した数値や文章を出力するには、それ相応の出力を行わねばなりません。が、JavaScriptの言語中核仕様にはあらゆる出力は規定されていません。往年のalert()も近年のconsole.log()も、あるいはdocument.write()やelement.innerHTMLも全てJavaScriptそれ自体ではなく周辺仕様の類です。

例えば通信処理を行う場合はXMLHttpRequestという仕様をJavaScriptから利用して行います。例えば音楽を鳴らす場合はFlashをJavaScriptから操作します。（最近はHTML5がありますが、JavaScriptではありません。）

そして、その最たるものが、HTMLとCSSです。

CSSで出来る事、JavaScriptとの繋がり

というわけで閑話休題。

JavaScriptであれやこれやと計算をして、例えば画像を動かすような場合、その場所を指定するのにCSSを利用します。もちろん、JavaScriptなしでCSSだけで場所を指定する場面も多々ある事でしょう。そうやって配置したものを動かすときに使うのが、JavaScriptです。あるいは逆に見ると、JavaScriptから画像の位置を動かすには、CSSを使う他ありません。

配置を例に上げましたが、CSSの多彩な表現はそれに留まりません。文字の大きさや背景の色、矩形の大きさを定めたり影を付けたり、余白、不透明度の指定まで出来ます。これらを駆使して画面を彩ります。

JavaScriptにはそれが出来ません。出来るのは、そういう「CSSを使う」ところまでです。JavaScriptでそういった動きを実現するために、我々はCSS（とHTML）についても合わせて学ぶ必要があります。

JavaScriptから見たCSS

前述の通り、JavaScriptから画面を操作しようとした場合、HTMLとCSSが必須となります。

ですが、これは良い事です。視覚的な細かい処理を自分でやる必要がなくなりますから。

例えば枠線を描く、といった処理を自前で作成するのは楽ではありません。特定の文字列領域を探して来て、矩形領域を計算し、適切なブラシを以てパスを描画する、なんて面倒でやっていられません。

セレクター（あ、これも実に強力ですね！）で検索して、指定の形式border:dotted 3px redを「設定」するだけで、完了です。楽ちんです。

特に最近ではCSS 3の登場により、視覚表現が飛躍的に強化されています。

影を自前で描画する事を考えてください。背景用に複数の画像の配置を自前で計測する事を考えてください。立体的な矩形の変形を自前で演算する事を考えてください。

気が遠くなりそうです。でも、CSSがこのあたりを全部引き受けてくれるので（ブラウザーが既に実装してくれているので）、我々は簡単に視覚表現を実装する事が出来ます。

ありがとう、CSS！　ありがとう、ブラウザーベンダー！　でもIE 6は爆発しろ！

学ぶ

CSSから始めてJavaScriptを学ぶ場合

あ、もちろんHTMLもCSSと一緒にやっといてくださいね。

先にCSSを知っている人は、プログラミングなるものを学ぶ事になります。これはなかなか難易度が高いです。

が、取っ掛かりはしやすいはずです。何と言ってもすぐに結果が出ますから。

具体的にやりたい事というのは、既にご存知のはずです。例えば最近流行りの視差表現（パララックス）を実現したいなら、「よくわかんないけどスクロールしたらpositionを操作すりゃ良いんでしょ」とまではわかるはずです。あとは順番に（「スクロールしたら」ってどうやってわかるの？　positionを設定する要素はどこから探すの？　というかCSSを設定するってどうやるの？）解決してゆけば、全て実装できます。

大丈夫。

JavaScriptのためにCSSを学ぶ場合

CSSで表現の幅が増えたという事は、CSSを使ったJavaScriptの表現も幅もそれ以上に増えたという事です。

例えば先程掲載したCSS 3D Butterflyをキーボードから動かせたら、もうちょっとしたゲームが作れますね。

そこまで高度でなくても、フォームの入力内容を確認してエラーを表示するとか、一覧を動的に検索して強調表示するとか、そういうのはCSSも知っていないと実装しづらいと思います。サイズを変えるならボックスモデルや、配置するなら包含ブロックについての知識も必要でしょう。（いずれもCSSの仕様です。）

おしまい

つらつらと書いてみましたが、まあ誰が得するんだよって感じに仕上がりました。

うーん。まあ良いか。一応、これで本年のひとりAdvent Calendarは完走という事にしたいと思います。（うちは本家に合わせて24日で終わり。）　いやあ、明日からは早寝早起きをしたいと思います。

とっぴんぱらりのぷう。