CA Reward

Tech Blog

Tech Blogトップに戻る

2017年からは使ってみたいPostCSS

2017.01.04

  • このエントリーをはてなブックマークに追加
  • Pocket
310k
310kフロントエンドエンジニア

こんにちは。フロントエンドエンジニアの佐藤です。

おそらく名前くらいは聞いたことがあるであろうPostCSS。

Sassとは何が違うの? どうやって書けばいいの? そろそろ導入を検討してみたいんだけど...。そういった疑問にサンプルコードを交えながらお答えします。

PostCSSとは

PostCSSは、JSプラグインでCSSを変換するためのツールです。

PostCSS本体は特定の構文を別の構文に変換するといった機能は持たず、CSSパーサーとAST(抽象構文木)のみを提供しています。

プラグインを組み合わせていき、SassやLESSのようなビルドシステムを作り上げることができるイメージです。

プラグインは変数、mixin、次世代CSSの構文が使えるようになるもの、最適化など多種多様です。

これらを必要に応じて組み込み、ビルドツールとして機能拡張していきます。

Sass、LESSとの違い

Sass、LESSは独自の構文があり、それに従ってコードを書いて行くことになります。

PostCSSは導入するプラグイン次第です。次世代CSSの標準構文プラグインを導入し先取りすることができますし、SCSS記法プラグインを利用することで移行・学習コストを抑えることも可能です。

またSass、LESSにはmixinや変数などがあらかじめ組み込まれており、PostCSSは必要な機能のみプラグインで組み込むところが違います。

注意点

PostCSSは自由にプラグインを組み合わせ機能を拡張できる反面、作り込みすぎると構文・機能の説明が複雑になり、複数人での開発に支障をきたす可能性があります。

SassであればSassの本を読んでおいて、で済みますが、PostCSSを利用して独自に組み上げたビルドシステムは使用方法の解説が必要になります。

試してみる

PostCSSは様々なタスクランナーから利用できます。

以下gulpを利用したサンプルコードです。実際に業務に導入しているタスクの一部をご紹介いたします。

こちらのgulpタスクでは以下の動作を実現しています。

上記gulpタスクにより、下記のようなコードを指定した環境(サンプルコードでは各ブラウザ最新2バージョン、Android 4以降、iOS 8以降)で正しく解釈されるCSSに変換することができます。

Sassではできないことをさせてみる

PostCSSは最初に述べたとおり、あくまでCSSパーサーとASTを扱う機能を提供するものにすぎません。CSSのような何かをCSSに変換するだけのツールではないのです。

私は下記のようなタスクを組んでいます。これはstylefmtで設定したCSSのルールに従ってチェックし記法を統一、さらにプロパティの並び替えを自動で行うものです。

これによってインデントずれや表記ルールが機械的に統一され、コードレビューのコストを削減し本質的な部分のレビューに費やすことができるようになりました。

PostCSSを導入すべきか

まず前述の注意点についてしっかり検討することが必要でしょう。

独自進化しすぎると、次の流れが来たときに移行しにくくなってしまうかもしれません。

また、大抵のことはすでにSassなどで実現可能です。構文・記法が変化することでチームメンバーへ再度ルールの共有をする必要が出てくることは無視できません。

IDEの入力補完、シンタックスハイライトの対応状況についても確認したほうが良いでしょう。IntelliJなどは標準的なPostCSSプラグインには対応していますが、独自に作り込んだ構文や記法はサジェストしてくれないかもしれません。

しかし次世代CSSを今のうちからキャッチアップしておくことは決して無駄にはなりませんし、開発をサポートしてくれるタスクの存在によって再びCSSを書くのが楽しくなるかもしれません。

InputとOutputを自由にコントロールできるPostCSSは、ReactやAngularと合わせて利用することも可能です。

2017年はPostCSS導入を前向きに検討しても良いのではないでしょうか。