こんにちは!
Misoca開発チームのめろたん(@renyamizuno_)です!
髪がだいぶもっさりしてきたのでそろそろなんとかしないとなぁと思っています。
この写真は先日 きたむらさんとこくぼさんで朝明渓谷に行ってきた時の写真です。
すごく綺麗で泳いだのですが、まぁまぁ寒かったです。
最近はポケモンGOにはまっています。
会社の入っているビルがポケストップになっていて、お昼休みに社長がルアーモジュールを置くので、
ポケモンも集まるし、社員も集まってきます。
どうやら社長が会社にルアーモジュールおいたっぽい
— めろたん。れんやたん。 (@renyamizuno_) July 25, 2016
Misocaのはいってるビルはポケストップになっていて、昼休みは社長の仕事としてルアーを指しています。社員に1000円のランチを奢るより感謝されている実感がある。 pic.twitter.com/8vDvs0Jgcd
— とよし (@toyoshi) July 26, 2016
はい。
今回はPostCSSについて書きたいと思います。
PostCSS
そもそもPostCSSとは、Node.jsで作られたCSSのパーサでASTを操作することで色々できるといったものになります。
なので、PostCSSだけ導入しても何も起きません。
各PostCSS-pluginを追加することで、出力結果に違いが出てきます。
一番有名なのは、Autoprefixerですね。
CSSを書いているとどうしてもベンダープレフィックスが必要になってくる場合があります。
それを毎回書くのはとてもつらいので、それをAutoprefixerが自動でやってくれます。
a { display: flex; }
このCSSが
a { display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; display: flex }
このように自動でプレフィックスをつけてくれます。
Sassで書くと
a { @include display-flex; }
のように書かないといけなくて、CSSだけの知識では書けず、またベンダープレフィックスが不要になった時に書きなおしたりする必要が出てきてしまいます。
一方PostCSSではCSSしか書いていません。そのためベンダープレフィックスが不要になったときは、PostCSSを使わないようにすればいい。
という風に機転がききます。
このようにPostCSSのいいところは基本的にCSSを書くだけで良い。と言うところだと思っています。*1
PostCSSでトランスパイル
最近はJavaScriptを書くときにBabelを使ってES2015
, ES2016
をトランスパイルして使おうと言うような話が多くあると思います。
ですが、CSSではそのような話は滅多に聞きませんでした。
しかし、PostCSSのおかげで次世代のCSS構文が使えるようになりました。
例えばCSS内で変数を使いたい。というようなことは多くあったと思います。そのためSass等altCSSを使用して、変数を使っていたと思います。
$hoge-color: red; .hoge { color: $hoge-color; }
上のようなコードです。
もちろんブラウザでは動きません。
ですが、W3CのCSS Custom Properties for Cascading Variables Module Level 1のような書き方でも変数を扱うことが出来ます。
:root { --hoge-color: red; } .hoge { color: var(--hoge-color); }
ブラウザによってはこれで動きます(http://caniuse.com/#feat=css-variables)が対応していないブラウザもあります。
そこでPostCSSです。
このプラグインを使うことで、上のコードが
.hoge { color: red; }
というふうに変換されます。
以上のような次世代のCSS構文を書けるようにするプラグインが他にもたくさんあります。
プラグインはPostCSS.partsというサイトがあって、そこで検索することが出来ます。
とても便利です。
個人的なおすすめプラグインはnestedです。
scssみたいに&
を使うことが出来るようになります。
.hoge { color: red; &_huga { color: blue; } }
出力は
.hoge { color: red; } .hoge_huga { color: blue; }
となります。
まとめ
PostCSSの利点は
になるかと思います。
また、PostCSSはaltCSSに比べるとコンパイルが速い。という話があったりしますが、個人的には体感出来たことがないのと、 そもそも性質が違う*2ので今回は触れませんでした。
最後に、
MisocaではPostCSSでナウいアプリケーションを作りたいというエンジニアを募集しています。