フリーランスのためのネットビジネス専門学校 ネットで独立開業を目指す人を応援
フリーランスのためのネットビジネス専門学校 ネットで独立開業を目指す人を応援

【2018】Sass,webpack,styled-componentsなどCSS周りの環境をまとめてみた

DMM.com Advent Calendar 2018 3日目の記事です。

オンラインサロンというWebサービスでサーバサイド/フロントエンドエンジニアをしている@yuzoohoです。
CSSを最近3ヶ月書いたのち、最近PHP7系/Reactを使うチームに移動しました。

今回この記事を書こうと思った理由

  • 諸事情あって3ヶ月ほどCSSを書いてて色々なつらみがあった。
  • 今の時代、ただの生のCSSを書いているところなんてそうそうないけど、何が流行りか分らない。
  • CSS周りの環境がありすぎて何を使ったらいいか正直分からない。

想定読者

  • CSS周りの環境が何があるか分からないから、とりあえずどんなものがあるのか知りたい。
  • 各プリプロセッサやビルドツール・モジュールバンドラの概要をだいたい把握したい。

CSSプリプロセッサ とは

CSSプリプロセッサと言われると「?」となるかもしれませんが、SassやLessといった普通のCSSでは書くことができない便利な書き方ができ、ビルドツールやタスクランナーを通してCSSにコンパイルして使えるものになります。

Googleトレンド比較(地域:日本、期間:2016年12/02〜2018年12/02)
css.png
※比較が5つまでなのと、CSS Moduleやstyled-componentsは若干異なる部類のものであるため除外しています。
※またPostCSS以外はCSS 〇〇とつけていますが、LessやStylusが本来あるべきワードとして計測されないためです。(Sassというワードで比較すると圧倒的にSassの動向が高いです。)

▼素直なキーワードでのトレンド
css2.png
上記懸念点から、あまりどれがトレンドとは言いづらいのですが、圧倒的にSassが高いのということは言えます。

各プリプロセッサ・フレームワーク・ライブラリの概要

Sass,Less,Stylus,PostCSSの他にCSS Modulesやstyled-componentsも入れました。

名前 リリース時期     概要 GitHubスター数
Sass 2006年 一番ポピュラー。記法にSCSSとSASSがある。 11,602
Less 2009年 Sassに影響され当時持っていなかった機能を担うよう作られた。 15,835
Stylus 2011年 SassとLESSに影響を受けて作られたもの。 9591
PostCSS 2013年 CSSツールを作るためのフレームワーク。 19,765
CSS Modules 2015年 本来プログラミングにあるべき概念がCSSに取り込まれている。 11,012
styled-components 2016年 CSS in JS。ReactといったSPAと相性がいい。 20,650

※GitHubのスター数は2018年12月2日現在

Sass

2006年にリリースされてから、ずっと人気と言って良いであろうSass。記法は2種類あり、SCSS記法とSASS記法で、SASS記法(セミコロンや括弧を書く書き方)が圧倒的に主流です。ネスト、変数、extend、mixin、演算などを使うことができる。

公式:sass-lang.com/
GitHub:github.com/sass/sass

Less

Sassに影響され、後発として作られたのがLess、当初はSassが持っていない機能などを持っていた。変数スコープの概念などがあるが、Sassと若干変数の上書きなどの仕様が異なる。トレンドからもわかる通り、現状流行は下火

公式:lesscss.org/
GitHub:github.com/less/less.js

Stylus

Stylusは、ExpressやJadeを開発した人が開発した。SassとLessのいいところ取って作られており、また書き方的に:;が省略可能。Sassと同じくif文、配列、for文などが使える。

公式:stylus-lang.com
GitHub:stylus-lang.com/

PostCSS

Node.js製の「CSSツールを作るためのフレームワーク」。ベンダープリフィックスを自動で付与する「Autoprefixer」やリンターの「stylelint」などが有名。
SassやStylusの変数やネストなどは使うけど、mixinやextendは使わないといった場合には、PostCSSを使うと必要な機能だけ選択することができます。また、自分で作るのもよしという感じです。

公式:postcss.org/
GitHub:github.com/postcss/postcss

styled-components

JSでstyleを記述するCSS in JSで、Reactのコンポーネント思考でフロントエンド開発が進む中、注目を集めているライブラリです。ローカルスコープの概念CSSそのものの記述は変わらない、CSSとJSで値が共有できるなど便利な点がたくさんあります。

公式:www.styled-components.com/
GitHub:github.com/styled-components

CSS Modules

CSS Modulesは、CSSのいい点を残しつつ、大規模化するCSSの問題点(グローバルネームスペース、依存性、デッドコード)を新しい機能追加によって解決しようと作られたものです。
CSSには今までなかった、ローカルスコープの概念や、モジュールの単一責任、コンポジションなど、本来プログラミングにあるべき概念が取り込まれています。
SPAが流行ってきてコンポーネント思考になるなか、それに合わせてきたCSSといった言われようもあります。

GitHub:github.com/css-modules/css-modules

ビルドツール・タスクランナー・モジュールバンドラ

プリプロセッサやCSS in JSなどを紹介してきましたが、上記のようなCSSを便利に書けるものを使っても、実際にCSSとして認識される書き方にコンパイルし直す必要があります。

またCSSやJSを圧縮したい、ファイル管理を容易にしたいなど、そういった処理をプラグインを使って簡単に行えるようにということで、タスクランナーやモジュールバンドラが登場しました。

Googleトレンド比較(地域:日本、期間:2016年12/02〜2018年12/02)
build.png
2年前までは、gulpとwebpackが同じくらいだったが、最近では圧倒的にwebpackの方がトレンドになってきてます。意外とParcelに注目がき始めているのもグラフからわかります。

各ビルドツール・タスクランナー・モジュールバンドラの概要

名前 リリース時期     概要 GitHubスター数
gulp 2013年 王道のビルドツールであったが最近は人気が下火になってきている。 30,624
webpack 2012年 現在一番人気のモジュールバンドラである。gulpと併用することもある。 45,525
Grunt 2011年 人気がなくなってしまったタスクランナー。 11,891
Parcel 2017年 最近リリースされたばかりで注目が集まるモジュールバンドラ、configファイルがいらない。 28,297
Rollup 2015 あまり馴染みのないモジュールバンドラ。 14,320

※GitHubのスター数は2018年12月2日現在

gulp

2年前ぐらいまでは、王道のビルドツールであったgulp。Node.jsをベースとしてできていて、基本的に非同期処理なのでGruntなどと比べると処理速度が早いのも特徴。
だが、最近はgulpのプラグインが更新されていなかったり、node.jsのバージョンアップによって使えなくなったりなど、若干人気が落ちてきている印象です。

公式:gulpjs.com/
GitHub:github.com/gulpjs/gulp

webpack

gulpよりもリリース時期は前だが、最近人気でよく使われるようになってきているwebpack。SassをCSSにするにはsass-loaderというプラグインを使います。
gulpと併用されることもあり、CSSの圧縮にはgulp、JS周りのファイルの管理はwebpackなどといった使い分けの仕方もあるみたいです。

公式:webpack.js.org/
GitHub:github.com/webpack/webpack

Grunt

GitHubのスター数でもわかるように最近はだいぶ人気がなくなってきてしまったGrunt。gulpよりも前にリリースされており、GruntもNode.js製で、grunt.initConfigでCSSの書き出しなどの各タスクの設定をJSON形式で指定します。
Gruntは、同期処理のため非同期処理のgulpに比べ処理速度が遅いです。

公式:gruntjs.com/
GitHub:github.com/gruntjs/grunt

Parcel

2017年にリリースされたばかりで、ここ1年で注目を集め始めたParcel。webpackと違い設定ファイルがそもそもないため、configファイルなどの肥大化などが起こらない。
しかし、Babel、PostCSS、Sass、Stylusなどはサポートしているため簡易的なものには使えそうだが、現状webpackにある機能でParcelにはない機能があるため、実務には不向きといった声もあります。

公式:parceljs.org/
GitHub:github.com/parcel-bundler/parcel

Rollup

あまり馴染みのないRollupだが、webpackと同じくモジュールバンドラであり、プラグインを使えばSassやPostCSSなどもコンパイルできる。

公式:rollupjs.org/guide/en
GitHub:github.com/rollup/rollup

今後は使う言語やフレームワークによっても大きく変わってくるかも

ここまでCSSプリプロセッサやCSS in JS、ビルドツールやモジュールバンドラなどを一通り紹介しましたが、ReactやVueといったSPAフレームワークの流行、WebサービスやLPなどの開発用途の違いによって使うべきものが大きく変わってくるかもしれません。
一概にこれを使うべきとも言えず、どれが開発しやすいか、チームやサービスにもよると思います。

参考記事

上記記事参考にさせてもらいました。ありがとうございます。
※表記や解釈が間違っていた場合は、編集リクエストやコメントで教えてもらえると嬉しいです。

[紹介元] CSSタグが付けられた新着記事 – Qiita 【2018】Sass,webpack,styled-componentsなどCSS周りの環境をまとめてみた

コメント

記事に戻る

コメントを残す