PostCSS って最近ちらほら目にするようになったけどいったいなに？と思っている方いませんか？僕はその一人です。なんとなくこんなもんかな？といった感じで曖昧にしか理解していなかったので「とりあえずこれだけ知っておけばいい」という情報を簡単にまとめてみました。
はじめに
PostCSSをノートPCに例えると…
SassをVAIOのようなメーカーが作ってパッケージしたノートPCに例えると、PostCSSはマザーボードからプロセッサーからケースまで、すべて自分で選んで組み立てる自作PCです。
かなり良さそう
結論から言ってしまうと、かなり良さそうなので早速使い始めて損はないと思います。大きな導入リスクやデメリットは思いあたらないし、すでにビルドツールを使っていれば導入コストも少なくすみます。少なくとも試してみる価値は十二分にありそうです。もちろん、開発体制や環境、プロジェクトの性質によるんでしょうけど。
仕組みのシンプルさや開発者の間での盛り上がりを見ていると、かなり可能性が広がっていきそうです。フロントエンドに関わる仕事をされている方なら、知っておいて絶対に損はなさそうです。
では、PostCSSの特徴をざっくり箇条書きでまとめていきます。
PostCSSってなに？
- JavaScriptでCSSをプロセスするための仕組み
- JSの関数を組み合わせることで、Sassのようなプリプロセッサーと同等のことが実現可能
- モジュラーなので必要なものだけを組み込める
なぜ、いまPostCSSなのか
- SassやLessなどのCSSメタ言語が発達して便利になったが、CSSが複雑になった
- シンプルに必要なものだけ実行したい場合に有効
- JSでプラグインを書けば機能を実装できるため、Sassなどに依存しなくてすむ
- シンプルな仕組みなので比較的容易にいろんな機能を実装できる。例えばdoiuse というプラグインを使えば、caniuse.com のデータに照らし合わせてブラウザサポートをチェックできる
- Sassなどと併用も可能で、より柔軟な開発環境を構築できる
- Sassなどが普及し、GulpやGruntなどのビルドツール導入やコマンドラインツール自体へのハードルが下がった
- Sass言語はその用途以外で役立つことはないがJSなら他でも役に立つ
PostCSSのGithubで紹介されている3つの利点
- Performance:
libsassより2倍早い - Future CSS:
ドキュメント全てを読み込んで再構築できるのでCSSの最新仕様にある機能を実装できる。例えばcssnextというプラグインを使えば将来の仕様を今使えるCSSに書き換える（transpile / transcompile）できる。 - New abilities:
スタイルの全てのパーツを読んで変更できるので、先ほど紹介したdoiuseやAutoprefixerのような機能を実装できる
デメリット
- Gulpなどのビルドツールやコマンドラインに慣れていないと導入のハードルが高い（デザイナーでCSSも書く方とか？）
- Sassほどのリソースや開発コミュニティが確立していない（時間の問題？）
- プラグインを探すのが面倒
- チームで利用する場合、自由に何んでもできるためルールづくりが必要。その点、Sassなどでは共通言語があるので、すでにあるリソースを活用できる
- 日本語のリソースがまだ少ない？
導入するには？
GulpやGruntで開発環境ができていらば、かなり容易に導入できますね。なので、初期投資はひとまず用途にあった安定したプラグインを探すことくらいで済みそうです。CLI（コマンドラインインターフェイス）ツールも用意されています。
以下のツールのプラグインがあるそうです：
- Grunt
- Gulp
- webpack
- Broccoli
- Brunch
- ENB
- Fly
- Stylus
- Duo
- Connect/Express
プラグイン一覧
プラグイン一覧はPostCSSのGithubページ にも掲載されていますが、postcss.parts では検索可能な一覧にまとめられています。
さいごに
以上、PostCSSについて簡単にまとめてみました。イントロでも書きましたが、かなり良さそうです。仕組みのシンプルさを考えると可能性が広がりそうなので、進化して長生きしそうなツール・仕組みではないかなと期待しています。
2015年10月9日に公開され、2016年1月30日に更新された記事です。
About the author
「明日のウェブ制作に役立つアイディア」をテーマにこのブログを書いています。アメリカの大学を卒業後、ボストン近郊のウェブ制作会社に勤務。帰国後、東京のウェブ制作会社に勤務した後、ウェブ担当者として日英バイリンガルのサイト運営に携わる。詳しくはこちら。
ウェブ制作・ディレクション、ビデオを含むコンテンツ制作のお手伝い、執筆・翻訳のご依頼など、お気軽にご相談ください。いずれも日本語と英語で対応可能です。まずは、Mastodon @rriver@vivaldi.net 、Twitter @rriver 、またはFacebook までご連絡ください。