2/7にベルサール九段で開催されたCSS Nite LP39「Coder’s High 2015：コーディングスタイルの理想と現実」に参加してきました。コーディングメインの企画ということで、正直ついていけるか不安だったのですが、結果的には豪華な登壇者の方々による、笑いあり涙ありのセッションで楽しませていただき、あっという間の5時間を過ごせました。
技術的に詰め込みというタイプのセミナーではありませんでしたが、これからのコーディングスタイルを模索する上で、大きな指針を得ることができた気がします。
目次
基調講演：CSS設計の理想と現実
まず始めに谷拓樹さんによる基調講演。谷さんの著書「CSS設計の教科書」を読んで、自分なりのOOCSSを模索するヒントをもらっていただけに、かなり楽しみなセッションだったのですが、ビジュアルやアイコンを中心に見せていくスライドの作りが印象的で、さっそく惹き込まれてしまいました。また、アニメGIF（？）を多用した間の取り方も絶妙で、会場の笑いを誘う演出もさすがだったと思います。
セッションの内容はOOCSSやBEMの概要から、「こういう使い方はやめた方がいい」というOOCSSとBEMのアンチパターン集の紹介、Sassのプレースホルダーセレクタを使った便利な管理方法まで、実際のソース例を交えて分かりやすく解説されていました。また、「CSS設計の教科書」には掲載されていなかった、ITCSSという新たな設計手法も紹介されていて、大変参考になりました。
個人的には、もうclassセレクタだけでいいんじゃないかと思っているんですが、一方でidセレクタを使うべきだという人もいるので、谷さんのような方が今回「idセレクタを使う意味はそれほどない」という、論理的な説明材料を提示してくださっていたのは、非常に心強かったです。
理想のCSSフレームワークを探して
アップルップルの森田霞さんによるCSSフレームワークに関するセッション。このセッションのタイトルですが、確か開催前にCSS Niteのサイトをチェックした時は、「あなたの理想のフレームワークなんてきっとない」みたいなタイトルだった気がするのですが、途中で変更になったのでしょうか・・？
フレームワークが大好きだと言う森田さんの発言と、「理想のフレームワークなんてない」という一見否定的とも捉えられるタイトル案との矛盾は、セッションを聞いているうちに自然と解消されました。つまりこのセッションは、フレームワークが大好きで色んなフレームワークを探し回っているうちに、ついには自分でフレームワークを作ってしまったというお話だったのです。
そう思って実行できるところがすごいと思うのですが、それだけ色々なフレームワークの長所・短所を知り尽くした上でのことなのでしょう。私はまだフレームワークはかじり始めたばかりという段階なので、せめてもう少し使いこなせるぐらいまでは、じっくりソースを読み込んでみようと思いました。
案件の種類に応じた、おすすめのフレームワーク活用法など、実践的な話題も盛り込まれていて興味深かったのですが、個人的にはpullとpushでコンテンツの並び順を指定する機能や、複数のフレームワークを並用して組み合わせる手法などは、かなり使えそうな気がしたので参考になりました。
5分でゼロからテストサイトまで立ち上げます！
こちらは、密かに一番楽しみにしていた、こもりまさあきさんのセッション。今回はLT枠ということで、5分間のデモだけというお話でしたが、その5分間でいかに素早くデモをできるか、日々鍛錬されているらしいことも知っていたので、否が応でも期待が高まりました。
結果的に10分枠に拡大となりましたが、今回のデモは、こもりさんお勧めの今どきのツールや制作環境を使いながら、10分間でツールや環境の導入から、サイトの構築、そして公開までを全てやり切るという意欲的な内容です。相変わらず流れるような華麗なデモで、半分以上は何をやっているのか分かりませんでしたが、トークでの解説を交えて実演していただいたので、それぞれのツールの特徴や使いどころなどを知ることができました。
こもりさんの新著「Development Environments for Web Designers」を読んで勉強している最中だったので、さすがにターミナル操作への拒否反応なく話を聞くことができましたが、JadeでMarkdownが使えることや、MarkdownにHTMLを直書きできてしまうことなどは、知らなかったのでとても便利そうな気がしました。
こういう話を聞くと、テンプレートエンジンやMarkdownも、単に流行りやトレンドというだけでなく、新しい技術どうしが相互に結びついていることがよく分かりますね・・。今回のデモに登場したHarpやJadeなども、ぜひ今度実践で活用してみたいと思います。
デモでは出来上がったサイトを瞬時にホスティングして、来場者の皆さんにURLを共有していましたが、ちょっとした静的サイトを公開するには、DivshotやHerokuのようなサービスを使うといいらしいです。
ビルドツールはじめの一歩（タスクランナー編）
続いて、ピクセルグリッドの講師陣によるGruntやgulpなどタスクランナーに関するセッション。なんと、MacとWindowsといったOS別に、Node.jsとnpmのインストール方法からしっかり解説してくれて、サンプルファイルもそのままダウンロードして使えるという至れり尽くせりぶり・・。
私自身、Gruntやgulpはかじったことはあるものの、改めてインストール方法と言われると、記憶が怪しいところもあったりしたので、とても良い復習になりました。セッションの始めに来場者に質問したところ、タスクランナーを使ったことがある人は半数以下という結果だったので、この辺はCSS Niteの事前アンケートを踏まえたセッション内容だったのかもしれません。
後半は、実際の大規模案件での事例を元に、タスクランナーの使いどころを紹介。CSSやJSの結合・圧縮ぐらいなら自分も思いつくのですが、文字コードの変換や、ローカルサーバの起動といった処理も、タスクランナーで自動化できるとは知らなかったので勉強になりました。納品ファイルをZIPにまとめるタスクなども、自動化すると地味に便利そうですよね。
タスクランナーと直接関係ない話としては、Gitやスタイルガイドの導入による、チーム間でのリソースの共有などが、やはり大事だなと再認識させられました。また、ピクセルグリッドさんでは、クライアントにもGitを使ってもらって、納品作業が発生しないフローを確立したり、クライアントにgulpを使ってもらっている事例もあるのだとか・・。
これはかなり先進的な事例だと思うのですが、会場からも大きな反響とどよめきの声が上がっていました。いきなりそこまで実現するには、色々と障壁もありそうですが、タスクの効率化はコーディング作業単体で考えるのではなく、周囲やチームを巻き込んで、作り上げていくものなのだな、と良い教訓になりました。
music.jpのリファクタリング before / after
まぼろしの小林さんと、株式会社エムティーアイの宮地さんによるリファクタリングのセッション。受託案件の事例紹介では、なかなか公にできない部分も多いものですが、このセッションではかなりリアルな自社サービスの話が聞けたので、会場のリアクションも一際大きかったように思います。
実際にやったこととしては、カオス状態となり、デグレが頻発していたHTML/CSSを、150枚くだいのHTMLテンプレートとしてリファクタリングし、スタイルガイドやGitの導入なども実施したのだとか・・。実際の運用ルールの策定や保守といったところに関しては、色々と大変なシーンもあったそうですが、結果として外注管理や品質チェックに関わる稼働時間が7割以上にも激減したという話ですから、驚きですよね。
私の実経験としても、運用フェーズにあるサイトに手を入れるとなると、より一層腰が重たくなるものですが、このように目に見える効果があるという話を聞くと、やはりメスを入れる意味はあるんだなと、実感させられました。
柔軟なコンポーネント設計のためのCSS
最後は、高津戸壮さんによるコンポーネント設計に関するセッション。「さっさと、ぬかりなく、高品質にコーディングをこなすには？」というテーマでのお話だったのですが、非常に含蓄に富んだ深みのある内容で、色々と考えさせられました。
高津戸さんのスライドも、ビジュアルが多用されていて、イメージで理解しやすいように工夫されていました。要所要所でソースコードを掲載していた谷さんのスライドに対して、高津戸さんのスライドでは実際にCSS設計する際のブロックの分け方などを、ワイヤーフレームで分かりやすく図式化されていたのが対照的です。
ブロックの粒度や、ブロックの拡張性、余白の設計といった問題は、実際にコーディングを行う上で、誰しも一度は頭を悩ませたことがあるトピックだと思います。そんな簡単には答えの出ない、奥の深いテーマに対して、高津戸さんならではの経験に裏付けられた落とし所や、お役立ちテクニックを披露してくれていたので、大変参考になりました。
とりあえず、CSS設計の共通言語として、BEMとSMACSSを押さえること。そして、決して簡単に実現できることではないけれど、柔軟なCSS設計を諦めない。この2点を肝に据えて、私もぜひ今後の実制作に活かしていきたいと思います。
まとめ
「Coder’s High」というタイトルから、かなりマニアックで高度な会話が飛び交うものかと思っていたのですが、実際には初学者から経験者まで楽しめるバランスの取れたセッション構成となっていました。
また、「コーディングスタイルの理想と現実」という副題にもある通り、コーディングという仕事にまつわる『闇』の部分も色々と浮かび上がるセミナーでしたが、240名が一堂に会するビッグなイベントなのですから、ここで上がった反響の声が日本のWeb制作現場の一つの標準と捉えても問題ないのでしょう。
現在と未来を見据えて
私自身もOOCSSやBEMは覚えたて、タスクランナーやGitも、チームでの活用についてはまだまだ踏み込めていない状況ですが、同じようなステージにいる人も決して少なくないのかな、というのを肌感として感じました。
そんな現実は現実として素直に受け入れて、一歩づつ理想の制作スタイルに向けて進んでいこう、と思ったのが全体を通しての感想です。そのために必要なツールや設計概念は、登壇者の方々が的確に示唆してくれていたと思います。
次回のCSS Niteでは・・？
2年前のCSS Niteでは、Sassやビルドツールに関するノウハウを扱っていたのが記憶に新しいのですが、今回のセミナーでカバーする領域の広さと比較すると、時代の移り変わりを感じずにはいられません。
1年後・2年後にはどんなトピックが話題の中心になっているのか想像もつきませんが、ぜひCSS NiteではタスクランナーやGitに関する実践的なセミナーも、近々企画してもらえると嬉しいな、と思っています。