htmlとcssは卒業、これからはpugとstylusを使おう！

僕が普段コーディングをする時はpugとstylusという言語を使っています。HTMLとCSSを直接書くことは少ないです。これらの言語をHTMLとCSSにコンパイルしてサイト制作をしています。とても便利ですよ。

pugとstylusを使ったコンポーネント例

試しにユーザーを紹介するコンポーネントをつくってみました。ViewCompiledボタンでコンパイル後のHTMLやCSSもみれるので比較してみてください。このように記述量がグッと減りコードの見通しも良くなっていると思います。

pugを使う理由

pugには、HTMLを便利に効率的にコーディングするための機能が多く盛り込まれています。テンプレートエンジンのうちの一つです。

PugはHamlの影響を強く受け、Node.jsとブラウザ用のJavaScriptで実装された高性能テンプレートエンジンです。
https://github.com/pugjs/pug

僕がpugを使うのには、いくつかの理由があります。
以下にリストアップしました。

ファイルを分割管理して読み込ませることができる

include機能でファイルを分割しておいて１つのファイルに読み込ませることができます。サイトの共通ヘッダーやフッターごとに分割して読み込ませると管理もしやすく便利です。

CSSのセレクタのようにかける記法

idを#(シャープ)、classを.(ドット)で表現できるなど、CSSのセレクタと同じようにかけるのでコードを再利用しやすく読みやすいです。

インデントで記述するのでミスを減らせる

角括弧（<>）でタグを記述する必要がなく、HTML構造をタグ名とインデントで表現するのが特徴です。閉じタグ忘れのミスを減らせるのはとてもよいです。

あえて使っていない機能と活用スタンス

上記の項目を活用するだけでもメリットは十分にあります。その他にも条件分岐(if文)や繰り返し(for文)、変数、関数などがありますが僕個人はあまり使っていません。HTMLにプログラムのようなロジックを取り入れるとコードが複雑になるからです。あくまで構造化された静的なデータを効率的に記述できるといった意味合いで活用しています。

stylusを使う理由

セレクタとインデントを中心としたシンプルな記法

波括弧（{}）でプロパティを囲う必要がなくセレクタとインデントで表現していくので無駄な記述が減り開発効率があがります。シンプルなソースコードになるので、見通しも良くなり保守性もあがります。コロン（：）やセミコロン（；）も省略して記述できます。

ファイルを分割管理して読み込ませることができる

pugと同様にstylusもファイルを分割管理できます。リセットCSSや共通コンポーネントを分割して読み込ませて使っています。

コンポーネントごとに記述をまとめられる

&で一個前のインデントのセレクタを参照することができます。親セレクタの参照です。この&を使うことでコンポーネントごとに記述をまとめることができます。

独自のプロパティを定義できる

自分専用のオリジナルCSSプロパティがつくれます。
最初の例では、circleというプロパティをつくって使用しました。設定した値の大きさの正円がつくれてしまいます。circleプロパティの中身はwidthとheightとborder-radiusを設定した値を元に同時に設定しているだけなのですが、こうすることで自分なりに直感的につかえる独自のプロパティを定義することができます。circleは僕もお気に入りのプロパティです。

minify出力ができる

コンパイル時に設定しておくと、タブや空白をとりのぞいた軽量化CSS(minify)を出力してくれます。容量を減らしたCSSは通信量の削減、サイトのスピードにつながります。ちなみにpugもminifyできます。

embedurlで画像をCSSに埋め込める

embedurlという関数でbackgroundに画像パスを設定すると、data uri形式で画像をCSS内に埋め込んで出力してくれます。svgアイコンなどに限定して使ったりすることで、画像をファイルとして読み込んでいる時間を短縮することができます。

Sassやlessを使わずあえてstylusを使う理由

SassやSCSS、lessなどのその他のcssプリプロセッサにもStylusと似たような機能はあります。stylusがダントツでおすすめな理由は、「記述量が少なく効率的に開発できる」からです。また、記法においてpugとの親和性もあります。上述のメリット良く使う記述をプロパティとしてまとめておくことで記述量を減らすことができるなど、とにかく記述量を減らせるというこの一点につきます。他のCSSプリプロセッサであるSCSSやlessは記法が冗長でコンパイルのロスタイムを考えるとCSSと大きな差はないと考えています。効率を求めてツールを導入したものの使う必要のない機能を選定できず、結果として非効率になってしまうというのは恐ろしい結末です。