Blogトップに戻る2017年からは使ってみたいPostCSS2017.01.04TweetPocket310kフロントエンドエンジニアCSSFutureCssSyntaxPostCSSgulpこんにちは。フロントエンドエンジニアの佐藤です。名前くらいは聞いたことがあるであろうPostCSS。導入を検討してみたいんだけど...。いった疑問にサンプルコードを交えながらお答えします。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タスクでは以下の動作を実現しています。8以降)で正しく解釈されるCSSに変換することができます。}SassではできないことをさせてみるPostCSSは最初に述べたとおり、あくまでCSSパーサーとASTを扱う機能を提供するものにすぎません。CSSのような何かをCSSに変換するだけのツールではないのです。私は下記のようなタスクを組んでいます。これはstylefmtで設定したCSSのルールに従ってチェックし記法を統一、さらにプロパティの並び替えを自動で行うものです。これによってインデントずれや表記ルールが機械的に統一され、コードレビューのコストを削減し本質的な部分のレビューに費やすことができるようになりました。.pipe(gulp.dest('dist/css/'));PostCSSを導入すべきかまず前述の注意点についてしっかり検討することが必要でしょう。独自進化しすぎると、次の流れが来たときに移行しにくくなってしまうかもしれません。ことはすでにSassなどで実現可能です。構文・記法が変化することでチームメンバーへ再度ルールの共有をする必要が出てくることは無視できません。IDEの入力補完、シンタックスハイライトの対応状況についても確認したほうが良いでしょう。IntelliJなどは標準的なPostCSSプラグインには対応していますが、独自に作り込んだ構文や記法はサジェストしてくれないかもしれません。次世代CSSを今のうちからキャッチアップしておくことは決して無駄にはなりませんし、開発をサポートしてくれるタスクの存在によって再びCSSを書くのが楽しくなるかもしれません。InputとOutputを自由にコントロールできるPostCSSは、ReactやAngularと合わせて利用することも可能です。2017年はPostCSS導入を前向きに検討しても良いのではないでしょうか。