eclairのブログ 
最近はpugとstylusではなく、Tailwind cssとAlpine.jsをつかっています。
かつては、pugとstylusをほとんどのプロジェクトで採用していました。
htmlとcssは卒業、これからはpugとstylusを使おう！
しかし、僕が最近コーディング案件で採用している技術はもっぱらTailwind cssとAlpine.jsです。この技術の何がいいかというとHTMLの構造にどうしても依存せざるおえないCSSやjavascriptの実装を、あえて別ファイルで管理せず、HTMLファイル内に記述することができることにあります。
これによって、ファイルの依存関係を極力まで減らし、プログラムの影響範囲を把握できるようになります。だって、CSSもjavascriptもそのHTML内に記述されているので、依存関係のある外部ファイルがそもそも生まれないのですから。
HTMLファイルさえきちんとメンテナンスしていれば、ファイルの移動もフォルダ管理も今まであれこれ設計に苦労してした多くの部分がそもそも考える必要がなくなってしまうのです。
tailwindとalpineは最高だがそれでも欠点がある
当然ながらCSSもJSもHTML内に書くので記述が冗長になり、HTMLそのものが読みにくくなります。
また、大規模案件になればなるほど同じコンポーネントの実装を予め統一してそれを再利用したほうが良い場面が増えてきます。tailwindにもそれを実現する方法はあるにはあるんですが、そうなると個人的にはpugやStylusの機能に頼ったほうが多くのメリットを享受できます。
コンポーネントの再利用がコピペによって繰り返されるが、その過程で拡張や修正が繰り返され、もはやコンポーネントの実装が統一できなくなる
あくまでもこれは僕自身の経験から考える個人的な意見にすぎないのですが、
tailwindやalpineはHTMLコードのコピペだけでコンポーネントの再利用ができるのが何よりメリットです。しかし、コード量が増えてくるとコンポーネントのコピペが繰り返されていくうちに少しずつコピペ以上の拡張や修正が繰り返されて、結局、同じような見た目でも実装がバラバラになって実装が統一できなくなってしまったりします。これでは、せっかくコンポーネントとして実装を統一した意味も無くなってしまいます。
場当たり的にコンポーネントが増殖していくのは後々の回収に莫大な工数がかかる可能性があり、危険です。
個人開発であれば、最高の開発体験が享受できる
- HTMLコードだけでCSSとJSの実装を内包できる
- HTMLコードをコピペするだけで一度つくったコンポーネントは再利用できる
- 実装の変更もクラス名の一括置換で容易にできる
- HTMLのクラス名を考える手間が省ける
- ファイル移動がなくなるので何より開発効率が上がる
大規模開発でも、利用の仕方によっては大きなメリットが享受できると思います。bootstrapのような制約の多いフレームワークから解放されて管理画面の開発などでも大活躍できるフレームワークだと思いますし。
僕は個人開発者なので、その立場から上記の言語を使ってみて、最高の技術だなーと感じてます。どちらもCDNから読み込むだけで利用できる手軽さもありますし、最近はtailwindのJITコンパイラが導入されたこともあり、ピクセルパーフェクトで最低限のCSSで開発ができるのも最高です。
tailwindcssとAlpine.jsをぜひ体験してみてください
tailwindcssでコーディングをはじめる方法はこちら
Tailwind CSS JITとlaravel-mixでコーディングを最速で開始する
tailwindcss公式サイト
Tailwind CSS – Rapidly build modern websites without ever leaving your HTML.
