トトロのTシャツをソラマチで買ってきました、どうもトロユニさんです。先週、WP-D Week という1週間ぶっ続けで勉強会をするというやばいイベントが行われましたが、緑の本の著者でおなじみの谷さんと一緒に、CSS 設計の話をずーっとさせて頂きました。
最近、CSS は難しいとかいうことも耳にするようになりましたが、そもそも、「簡単だったはずの CSS が最近 CSS3 やマルチデバイス対応だとかで難しくなった」、ということじゃ無くて、そもそも昔から、ちゃんと作るには難しいシロモノだったのでは無いかと。
なので、CSS を見た目が出来た段階で終わりにしないで、常に整理整頓しながら書いていくのがとても、実は開発効率・保守・拡張等でとても大切だ！って話です。
開発効率って話はあまりしませんでしたが、それなりのページ数の HTML/CSS を作成する場合において、CSS を書かずに、もしくは最小限の CSS の追加で済むケースが、特に中盤から終盤になってくると増えてきます。こういった意味でも、CSS 設計をちゃんとやることってのはメリットが大きいのかなとも思っております。
部屋の掃除と CSS 設計
要は、ソフトウェアとして CSS の設計もちゃんとやろうぜ！って話なんですが、やっぱり、「難しかった」みたいなお話はちらほらともらいました。というわけで、綺麗な部屋を保つことと、良い CSS を書くことって一緒だよって話をしようかと思います。
リファクタリングと日々の掃除
部屋が綺麗な人って別に毎週末大掃除をしてるわけでは無いんですよね。毎日ちょっと掃除をしたり、ご飯を食べたらすぐに食器を洗って片付けたりしてるんですよね。
これを一気にまとめてやろうとすると、ホコリはたまってて大変だし、キッチンに至ってはシンクがヌメったり、酷いときはリアル腐海に墜ちてたりするんですよね。
しかしまぁ、そこでなんとかするならまだ良いんですが、やっぱりその状況って触りたくないんですよね。結果さらにシンクはやばいことになり、机の下のホコリは掃除機で吸うのも大変な量になってしまったり。。。
結局大事なのは、大ごとになる前に掃除をすることだったり、掃除を日々の習慣でやることなんですよね。
良い CSS 設計と片付けやすい部屋
自分の部屋の片付けというものが根本的に苦手なんですが、それでも一人暮らしも長いので、昔よりはマシになった気がします。その経験からなんですが、ヤバイって気づいて片付けよう！って思ったりするんですが、いざやろうとすると、そもそも「どうやって片付けて良いかが解らない」って現象に陥るんですよね。
で、とりあえず、食器は適当に食器棚に押し込んでみたり、服も適当にクローゼットに押し込むんですが、結局それだと、だいたい状況は改善しなくて、結局足の踏み場も無い状況に戻ってしまうんですよね。「『とりあえず何も考えずに突っ込む』というメンタリティ」そのものに実は大きな問題があるんじゃ無いかと。
自分の家のスペース、収納、ライフスタイル等を鑑みた上でどのように片付けるか、どうしたら使いやすいか、をちゃんと考えることが必要で、これが CSS を設計するということなのでは無いかと思います。
断捨離の必要性
片付けできない人によくあるのが、物を捨てられないというやつです。まぁ僕が全くその通りの人間なのですが、物があるから片付ける必要があるわけで、そしてそれが大量にあるから大変なんですよね。片付け上手な人って、着なくなった服とかすぐ捨てますよね。CSS も一緒で、使わないならすぐ消すというのがやっぱり大事だなと思います。
ただ、物を捨てたりするのって、勿体ないっていうか、すっごい抵抗あったりするんですよね。いつか使うかもみたいなことも思ってしまうし。ただ、幸いソフトウェアの世界に生きているので、git 等を使いバージョン管理をしておくと過去に消してしまったコードに簡単にアクセスできます。そういう人こそ、バージョン管理をすると幸せになれるんじゃ無いでしょうか。
自分の部屋もバージョン管理したいです。
人に見せることの重要性
自宅で、友人に料理を作ったり、ボードゲームしたりという機会が増えました。
やっぱり人が来るとなると、頑張って片付けるんですよね。こういう機会が増えてくると、毎日の生活で、部屋を片付けようって意識が芽生えたりします。というか足下にいろいろ落ちてたりすると、物は壊れるしケガさせてしまうし。
CSS 設計の闇のとして良くあるのが、「人の書いた CSS 良く解らない問題」があるとは思いますが、そもそも、「誰かが見るかも…」しれないという意識を持ってコードを書くってのは出発点なんじゃないでしょうか。
書く前にチームで相談してルールを決める
家族と暮らしていると、だいたい片付ける場所がルール化されてたりして、それを適当にやって母親に怒られる男子・お父さんなんてのは良くある話かもです。主に自分は母親が非常にきれい好きでマメな性格ということもあってそんなことが良くあった思い出があります。
あれって最初に家族というチームの中で、日用品などの場所が決まっているからこそなんですよね。それを決めずに各自でやったらやっぱりトンでもないことになるでしょう。
そういう意味で、まず CSS を書く前にルールの整備ってのは大切です。しかしそれを会議して決めていくのは案外難しかったりしたりルールの不備などに弱いです。
そういった意味で、ドキュメントを残したり、コメントを残してわかりやすくするというのは大切です。
棚とか引き出しに、シールとか張ったりするじゃないですか。大事なのってきっとそういうことです。
まとめ
どんな人にも使いやすい完璧な部屋、みたいなのって結局存在しないですよね。CSS 設計もその通りで、そのサイトやアプリケーション、運用方法によって異なります。
なのでやっぱり答えは無かったりしますが、それでも、「服はちゃんとたたんで、種類ごとにまとめる」、「本や漫画はジャンル・シリーズごとにまとめて並べておく」、「山積みにして下の物が取り出せない状況にはしない」等の基本的なことって一人暮らしの六畳一間でも、大家族の住む一軒家でも、大金持ちの住む豪邸でも通じる方法論なのでは無いでしょうか。
CSS に限らずプログラミングなどでも、オブジェクト指向等の話があったりしますが、結局のところそれは手段で、どうやって整理整頓するかというひとつの方法論です。そういった目線で CSS と付き合っていくとまた別の見方が出来るのかなと思います。
突き詰めると答えも無く、キリも無い話なんですが、でも所詮言ってることは、部屋の片付けと同じ話と思ってもらえると取っつきやすいのかなと。リアルの部屋の片付けよりは簡単だと思います。