【メモ】PostCSSが面白そう

Smarty経由で久しぶりにCSSの話を見て、それlessで出来るよみたいな話を見掛けてlessとscssの違いを調べてたら「Bootstrap5ではScssからPostCSSになります」みたいな話を読んで興味を持ったという流れ。実際にはBootstrap5では使っても使わなくても良いということになってるみたいですが。

PostCSSとは何か

「簡単にいうとCSSを読み込んで最適化するためのフレームワーク」という感じでしょうか。今までもgulpやwebpackで出来ていたことですがPostCSSの特徴は、

• 読み込みたい機能をプラグインという形で読み込んで実行出来る
• CSSだけでなく、SCSSやlessなどパース可能なソースなら読み込み可能

ということらしく、

1. lessをソースとして読み込んで変数などを展開してCSSにコンパイル
2. 定められた標準フォーマットに則るよう書き換え
3. Cache Busting（画像URLなどにMD5値や更新日時などを引数で付加することでキャッシュをコントロールする）を行う
4. minify

といったことを例えば、

gulp build

といったコマンドで実行することが可能になります。ええやん。







インストールやプラグインの詳細などはこちらの記事が非常に詳しく超絶わかりやすいのでそちらを読んでください。上の画像もこちらの記事から引用させていただきました。

Sassの代替というよりかはCSSのエコシステムを構築するための共通基盤、といったところでしょうか。

Step by Stepで始めるPostCSS – Qiita

使ってみたいけど、既存システムに入れるコストはどれほどか？

業務で導入することを考えると……すでにgulpなりwebpackなりを導入している場合には、当然既にnpmが入ってたりScssで書く環境が（コーダーの技量も含めて）整ってたりしてコストはそんなに高くないと思いますが、一方でそれで出来てるなら改めてPostCSSを導入するメリットは少なそう。「やってみたい」だけじゃ他の人が困るだけだし（このエンジニアのエゴにどれだけ振り回されたことか）、ちょっと難しいですかね。新しいシステムを作るというなら話は別ですけれども。


個人的なプロダクトというとこのブログのテーマ（Understrap-child）とボランティアで管理やってる友人のバーのサイトぐらい。前者はSCSSで書いてgulpでコンパイルしている状況なので移行は難しくないですが、がっつり使うというのにはちょっと物足りないかなー。後者はサイトのサイズは極小ですがそれだけになんもやってないのでそこに入れてみるのは面白いかも？ただnpmから入れることになるんでちょっと面倒か。まあコマンドですぐ入るんですけど。

機会を作って触ってみます

みんな「便利だけど別にScssとかlessとかのままでよくね」ってなって発展しない可能性もあるのでなんとも言えませんが、いまなんとなくエンジニア業界に戻ってきてることもあるし触っておくのは大事かなあと思いつつ、機会があったらどこかに導入してみたいと思います。意義のあるなしはともかく開発環境そのものを作る試みは面白いと思うので。