MD-Blog_Web Creative

どうもどうもこんにちは。超絶寒がりですでに冬眠したいマークアッパーです。

先日、社員旅行でグアムに行ってまいりまして。暖かいし、潤ってるし、仕事しなくていいし、遊んでていいし、暖かいし、暖かいし、ホント天国でございました。
実質2日間の、短い天国でございました...。

ところでワタクシ、英語がまったくできませんで。そんな私でもなんとか生きていけるくらい、グアムは日本人に優しかったです。日本語が通じる。日本語発音で通じる。グアム楽しい！グアム優しい！

え？仕事しろ？

はい、そうですね、帰国すると、待っているのはお仕事です。楽しく遊ばせていただいたんですから、お仕事もしっかりしませんとね。

ということで、皆さん「CSSのスタイルガイド」って作ってますか？　活用してますか？

実はワタクシ、恥ずかしながら、まだ作ったことがなかったんですよね。
何年も前から必要性は感じてましたし、途中で引き継いだ案件にスタイルガイドがあれば！！！　って強く強く思うこともしばしばあったのに。

なら作ってみればいいじゃない

というわけで。今回ははじめてCSSスタイルガイドを作ってみたっていうお話です。今さらすぎてゴメンナサイ。

まずはジェネレータを選ばねば

スタイルガイドを作るためのジェネレータにも色々ありますね。選択する基準として、私が考えたのは、こんな感じです。

• 導入・運用のしやすさ（簡単であること）
• CSSだけでなくSassなどにも対応していること
• Node.js以外の実行環境に依存しないこと
• gulpで実行できること
• ちゃんと更新されていること

で、なんとなく3つまで絞った候補が、こちら。

1. aigis
2. Frontnote
3. SC5 Style Guide Generator

aigis、君に決めた！

その中から選んだのは「aigis（アイギス）」というスタイルガイドジェネレータ。
最終的に決め手となったのは"導入のしやすさ"でした。3つとも試してみましたが、gulpとか苦手な私でもすんなり導入できたのが「aigis」だけだった、とも言う...。

「aigis」はドキュメント類の充実っぷりとわかりやすさが素晴らしい。何と言っても日本語のドキュメントが用意されているってところが、恥ずかしながら、たいそうありがたいのです。aigis 優しい！

それに加えて、「CodeGrid」というフロントエンド技術の最新情報を配信している技術情報メディアの中に、とっても丁寧に解説してくれている導入記事『はじめてのaigis』があったりしまして、これがまた大変にありがたかったです。なにしろ作者自ら解説してくれてるものなので、とてもとてもわかりやすい！ポンコツな私でもすんなり導入できたのは、この記事のおかげだというウワサです。

テンプレートが用意されている

スタイルガイドを生成するにはテンプレートファイルが必要になりますが、「aigis」ではinitコマンドの実行により、用意されているテンプレートのひな形を出現させることができて便利です。aigis 優しい！

もちろん、それを元にいろいろとカスタマイズすることができますし、configファイルの設定によってさらに色々と柔軟にカスタマイズすることもできるようです。

テンプレートエンジンも選べる

「aigis」は、3種類（EJS、Jade、Handlebars）のテンプレートエンジンから選んで利用できるところも素敵だなと思いました。

弊社メンバー、使用しているテンプレートエンジンがEJS派とJade派に分かれてまして、好きなものを選んで使えるっていうのは、他のメンバーにもオススメしやすいという点で、ひとつのメリットになりますね。やっぱり aigis 優しい！

ということで、作ってみた

ジェネレータを選んだところで、実際にCSSスタイルガイドを作ってみました。

作り方などに関しては、本家のドキュメント類が充実してるので、ここでは解説などいたしません。以下、作ってみてのただの感想です。

粒度が難しい

今回は、すでに書き終えたCSSに対して、あとからスタイルガイドを導入していったわけなんですが、そのブロックというか、モジュール？コンポーネント？の粒度が、難しいなと感じました。

まぁ、つまりはCSS設計におけるモジュール？コンポーネント？の粒度ってことになるわけなんですが、スタイルガイドを導入することで、そこの未熟さが露わになってしまったというか...。

逆に言えば、最初からスタイルガイドを導入すれば、今までよりもCSS設計についてしっかり考えるようになる...ならざるをえない...かも...しれませんね。

プレビューに白い文字がツライ

これは何が悪いというわけではないのですが、プレビュー部分に背景色のない白い文字が乗ると、ツライなって...。

そういうスタイルのものだと、どうしてもそうなっちゃうので、仕方がないわけなんですが、皆さんこういうのどう対処してるのかしらと、ちょっと疑問に思ったのでした。

まとめ

「aigis」を使ってみたら、思っていたよりはCSSスタイルガイドの導入は難しいものではなかったです！

とは言え、忙しい開発の最中とか、余裕がないと、スタイルガイドのことを考えながらCSSを書いていくのって、実際はけっこうツライんじゃないかな...なんて現実的なことも思ってしまったり、そもそもスタイルガイドのことを考えながらCSSを書くこと自体が本末転倒かもなぁとか思ったり。

実際の案件でしっかりと活用できるようになるには、ある程度の慣れが必要な気もしますし、ある程度のコストはかかる気がしますし、その辺はそんなに簡単ではないかも。

それでも、スタイルガイドのない案件を長く運用していくのってだんだんツラくなっていきますし、そういう案件を途中から引き継いだりなんかするとけっこう悲惨ですし、なんかうまい運用方法を探したいところではありますね。

まだ試してみた程度の段階なので、これから先、実案件でも導入してみたり、よりよいCSS設計を探ってみたり、効率的で便利な運用の仕方を模索していけたらなぁと。

やっぱりこのお仕事、長い長い旅ですよね...(笑)。
あぁ、グアムに戻りたい...。