CSS Nite LP, Disk 26「CSS Preprocessor Shootout」に参加してきました。どういう内容だったのかは、公式サイトのセッション概要とか、他の参加者のブログ記事（公式サイトにまとまっています）を読んでいただくことにして、思ったことだけ書いておきます。

今回のテーマであるCSSプリプロセッサですが、僕は申込時点（開催２ヶ月前）ではその方面はかなり無知な状態でした。せっかく東京まで勉強に行くのだから、その機会を有効に活用できるよう、多少なりとも準備をしていこう。そう思って事前に勉強して臨むことにしました。勉強には、Sass入門（電子書籍）やCSS Preprocessor Advent Calendar 2012が特に参考になりましたね。また、黒い画面で（初歩的なところまでですが）環境構築も経験し、昔書いたCSSをStylusで書き直してみたりしました。そのおかげか、話のメインストリームには付いていくことができました（ほっ）。

参加しての感想としては、いつも以上、期待以上に良かった、です。記述の仕方とかコンパイル環境とか、そういう概要やTips的なところにとどまらず、なぜ今CSSプリプロセッサに注目すべきなのかを、歴史的・思想的な流れまで含めて、自分なりに理解できたのが大きな収穫でした。

CSSプリプロセッサの導入事例として、クックパッドやグリーの担当者が登壇されていましたが、確かに規模の大きなプロジェクトほど、その効果は大きいと感じました。ページの構成要素をモジュール化して運用していく方法って、いま業界でどれくらい使われているのかわからないのですが、僕個人としては３年くらい前に高津戸さんや小久保さんから（確かこれもCSS Nite LPの懇親会で）お聞きして「ほーっ」と思った記憶があります。CSSプリプロセッサは、これをさらにエレガントに実現するのに役立つので、コードの設計に悩んでいる人たちには必須のツールだと思いました（このへんは、高津戸さんの「Takazudolog - OOCSSとSass」などが参考になるかと思います）。

じゃあ個人や小さなチーム（コードを書くのが自分だけとか）だと導入の意義は薄いのかというと、そんなこともないと思います。プログラムに不慣れな僕ですら、変数使えるとカラースキームを指定するのに便利だなぁとか、セットで書くプロパティを関数的に呼び出してこれるのは楽だなぁとか、すぐ思いつくぐらいなので。単純にCompassとかnibとか使えるだけでも魅力ですし、環境構築もMacならCodeKit入れるだけなんで、やらない理由はないんじゃないかと。

と、技術の話だけすれば「みんな今日から始めたらいいよ」っていうのが結論なのですが、僕としては、CSSプリプロセッサが制作現場で当たり前とされる時代になったとき、制作者のスキルの扱いはどう変わるだろうか、ということを考えずにいられませんでした。特に、Stylusの紹介を担当した佐藤歩さんのセッションを聴いてからは。

このブログにしてはめずらしくコードで説明しますが、僕が手元の環境（Stylus）で

div {
  border-radius: 5px
}

と書いてコンパイルすると、以下のようなコードが出力されます。

div {
  -webkit-border-radius: 5px;
  -moz-border-radius: 5px;
  border-radius: 5px;
}

このように、ベンダープリフィックス付きのコードを自動的に追加してくれるわけです。これは魔法でも何でもなく、いわゆるミックスインを使っているだけです。Stylusは、SassやLESSと違い、ミックスインの呼び出しに特殊な記号を使いません。普通のCSSと見分けのつかない、中身が完全に隠蔽された仕組みです（このような仕様を佐藤さんは「透過的ミックスイン」と紹介されていました）。

CSSを書く場合、上記のベンダープリフィックスをはじめとして、様々な環境へ対応するために補助的なゴチャゴチャした記述をすることがよくあります。これは手間がかかるだけでなく、高度な知識がないと記述の仕方がわからない、ベストとされる記述が年を追うごとに変わっていくなど、高い専門性を要求する部分と言えます。変な言い方ですが、こうした「難しい部分」の存在が、「CSSが書ける」という一言では表しきれない、CSSを書く人のレベルの差を作っています。業務でバリバリ活躍するためには、この「難しい部分」をきちんと理解して書くスキルが求められるのですから。

しかし、CSSプリプロセッサが導入された環境では、この「難しい部分」を理解していない人でも、普通に（基本的な）CSSを書くだけで適切なコードを生産することができるわけです。もちろん、元のミックスインを書くには「難しい部分」の理解が不可欠ですが、それは社内の誰かが書いておくか、Webに公開されているスゴイ人のコードを借りればいいわけです。CSSを実際に書くのは、ミックスインの仕組みも中身も理解していない人でいい。経営者はスキルの高い人を高い給料で雇わなくても良くなります。CSSは直接書けるが、諸条件に合わせた高レベルの設計ができるほどではない、そんな中途半端なスキルの人は、能力に見合った給料をもらうのが難しくなるんじゃないでしょうか。それくらいならバイトさんでも大丈夫だからさ、みたいな。

何か予期せぬ自体になったときを考えれば、ツールに頼らない制作スキルを持っていることは重要です。しかし、そういう人ばかりで制作チームを固める必要はない、コストを考えれば優先度を下げざるを得ない、そのような環境が一般的になる可能性は高いだろうと思います。すでにWordPressやjQueryがそうしてきたように、CSSプリプロセッサもまた、制作に必要とされるスキルの最低ラインを変えていくだろうと思います。次はjadeなどのHTMLメタ言語も一般的になるかもしれません。

技術が変われば、開発の仕方も変わり、どんな人がどのくらいどのような形で必要とされるのかも変わるでしょう。特にWeb業界は変化のスピードが速いと言われます。何が重要なのか、何に価値があるのかを、常々見極めていかねばならないのだと思います。でも、Sassが登場したのは2006年だそうですよ。今から７年も前ですが、最初からブレイクしたわけではなかった。最近はサイトも閲覧環境もCSSも複雑になり、それがSassの普及につながったのだと小久保さんは語っていました。そう考えると、明日いきなり世界が変わるわけではなく、その兆しを眺める時間的な余裕はあるわけです。とにかくアンテナは張っておかないとね。

今回のイベント名「CSS Preprocessor Shootout」の「Shootout」は銃撃戦という意味だそうです。プリプロセッサ界の覇者は誰か。それを見届ける前に流れ弾にやられないよう、今日から自分なりに頑張っていこうと思わせてくれるイベントでした。関係者のみなさん、貴重な機会をどうもありがとうございました。