初心者でもできた!! 1から始めるPostCSS ~次世代CSSの使い方~

PostCSS logo

今話題の次世代CSS『PostCSS』について、調べたことをまとめつつ、実際に使ってみました。

 

PostCSSとは?

PostCSSはJavaScriptプラグインでCSSスタイルを変換するためのCSS Processorです。
PostCSSはCSSを変換するAPIで、必要なプラグインをダウンロード(カスタマイズ)して設定することでCSSを変換することができる。
これらのJSプラグインは200以上用意されていて、変数やミックスインのサポート、カスタムセレクター、最新のCSS構文利用、インライン画像などの表示に役立ちます。
(プラグインの一覧はこちら

 

SassからPostCSSに移行する流れが出てきているようで、GoogleやTwitte、Shopifyなど結構大手サイトもPostCSSを導入しているそうです。

 

PostCSSを使うメリットとデメリット

メリット

・コーディング時間の時短(LESSやSassと同じ感じ)
・Sass覚えなくても、CSS,JSがわかれば大丈夫
・変換速度が他のプロセッサに比べてスピードが3~30倍になる(さらに早い場合もある)
・Sass風に書けるプラグインがあるので、記述方法が大きく変わってしまうこともなく、抵抗なく移行しやすい
・オリジナルのプラグインを作成・利用できる
・シンプルな仕組みなので、今後もっと便利なプラグインが出てきて定番になっていきそう

 

デメリット

・自由にカスタマイズできてしまうので、チームでの開発の際にルール決めや情報共有が大変
・今のところ日本語の情報が少ない(日本語の書籍も出ていない)
・プラグイン多くて探すのが手間
・ロゴがいまいちw(次世代なのに古代ぽいw)

 

 

 

環境準備

PostCSSはBrunch、Broccoli、Grunt、Gulp、Stylus等で利用可能です。
今回はGlupを例に、1からの人向けにインストールから順に説明します。
※もう環境が整っている人は飛ばしてください。

 

Node.jsをインストール

node.js スクショ

インストーラーをDLし、起動してインストールします。
インストールが完了したらターミナル(コマンドプロンプト: 以外、ターミナル)を起動し、以下のコマンドを実行します。

node.jsのバージョンが表示されればOKです。

 

npmの準備

沢山のモジュールとそのバージョンやモジュールの依存性を管理する為の準備をします。

任意の場所に新規ディレクトリを作成し、ターミナルで作成したディレクトリへ移動します。(今回はC:\Documents\PostCSS_testというディレクトリを作成しました。)

 

移動したら以下のコマンドを実行します。

すると以下のように質問が続きますので、任意の値を入力します。

ただ使うだけならEnterを押すだけでOKです。これらの設定は後で変更することができます。

すべて入力するとディレクトリ内にpackage.jsonが作られます。

中身を確認すると、先ほど入力内容が記載されます。

 

 

Glupのインストール

次にGulpをインストールします。

以下のコマンドを実行すると、Gulpをインストールできます。

Gulpをローカルにもインストールします。

–save-devとつけることで、このパッケージを開発用パッケージとしてインストールすることができます。

ディレクトリ内に新たに node_modules というフォルダが出来上がります。

package.jsonを見るとdevDependecesにGulpが記載されています。

package.jsonに記載されたパッケージは次回以降、npm installというコマンドを実行するだけでインストールすることができます。
package.jsonがあれば、いつでも必要なパッケージがすぐにインストールできます。

 

PostCSSを使ってみよう

 

PostCSSのインストール

以下のコマンドを実行すると、PostCSSをインストールできます。

 

プラグインのインストール

試しに、Autoprefixer(プレフィックス自動追加)と、cssnano(minifyする)をインストールしてみます。

gulpプラグインを利用できるようにgulpfile.jsに以下の設定を記述してきます。

 

コンパイル前の準備

ちなみに、今回テスト用で作ったディレクトリ構造はこんな感じになってます。

PostCSS ディレクトリ構成例

/web/postcss/内にコンパイル前のcssファイルを用意します。

test.css(テスト用CSSファイル)

 

コンパイルする

以下のコマンドを実行すると、コンパイルが実行されます。

実際のコンソール画面

 

実行完了後、/web/css/にコンパイルされたCSSファイルが生成されます。

CSSファイルの中身はこうなりました。

プレフィックスもついててファイルも圧縮されています。

 

まとめ

SassやLESSをほとんど触ったことのないウェブデザイナー(私)でも、シンプルなので理解できました。

今後もいろいろなプラグインをひとつひとつ試しながら記述方法なども同時に見についていきそうです。

次回は、試したプラグインのまとめをご紹介しようと思います。