Tailwind CSSとSSGの台頭

最終更新: 2023年03月14日

報告

マークアップに存在した課題

これまでマークアップにおいて以下の点が共通の課題として存在しました。

  • クラス命名の難しさ
  • 開発環境の乱立、不均一
  • マークアップの冗長性
  • ブラウザ互換性の担保

特にチームで開発する場合、クラス命名をチーム全体で厳重に行わないとメンテナンス性がたちまち崩壊してしまいます。そのため途中からチームに参加したメンバーや引き継ぐメンバーはまずプロジェクトごとの命名ルールを十分に把握する作業が必要でした。

またマークアップを取り巻く開発補助ツールが乱立しており、各プロジェクトごとに独自のGulp環境やnpm環境が構築されてきました。

マークアップにおいてページを跨いで共通するパーツが存在する場合でもHTML単体ではそのパーツをコピー&ペーストする実装しかできないため、Pugなどのテンプレート言語を導入してパーツの共通管理を独自に構築する必要もありました。

さらに日々CSSの新たな機能が登場することでブラウザ互換性の担保も必要性を増し、機能ごとにブラウザ互換性に神経を使いながら実装する必要もありました。

特に大きかったクラス命名の課題

前述した課題の中でも特にクラス命名の難しさは大きな課題で、中規模以上のWebサイトを構築する場合熟練のマークアップエンジニアでもない限り高確率でクラス命名ルールが破綻し、その管理やドキュメンテーションに多大な工数を払う必要がありました。

この課題を解決するためにBEMをはじめとするグローバルなクラス命名規則が誕生しましたが、BEM採用率が極端に上がることもなく、解釈や使い方にもバラつきが生じたため、これによりクラス命名の混沌とした世界観が変わることはありませんでした。

SSGの登場

SSGとは Static Site Generator のことで、静的サイトを作るためのフレームワークを指します。元々SSGは存在しており海外では積極的に使われていたのですがそのキャッチアップコストの高さからか日本では浸透しませんでした。

しかし近年Webアプリ開発フレームワークである Next.js や Nuxt.js が急速に広がり、それらがSSGベースのフレームワークであったため、Next.js や Nuxt.js を静的サイト制作に使おうという動きが出始めています。

これらのフレームワークには

  • ローカルサーバー
  • ライブリロード
  • Sass導入
  • リソースの圧縮
  • パーツの共通管理

など、これまでマークアップエンジニア各々が都度おこなってきた開発環境構築が最初なされているため、この作業から解放されることになります。また、プロジェクトを跨いで開発環境がブレることもなくなるためプロジェクトの引き継ぎや途中参加のコストが大きく減ります。

Tailwind CSSの登場

SSGの登場に合わせて注目を集めているのが Tailwind CSS です。これはユーティリティベースのCSSフレームワークで、使いたい時に使いたい装飾を直接指定する形で実装します。

たとえばボタンが必要な場合、これまでであれば class="button" のようなクラスを用意して見た目を設計していました。

Tailwind CSSの場合はあらかじめ用意されたクラスを使って角丸や文字の太さをHTMLに直接指定していくのでクラス命名について一切配慮する必要がありません。インラインでスタイルを書いていくのに近い体験です。

はじめてこれをみた人は

  • 覚えるのが大変そう
  • HTMLが長くなりそう
  • ボタンを使いまわす時に毎回あの長い記述が必要なのか
  • インラインスタイルと何が違うのか

と思うでしょう。まずユーティリティクラスについてはVisual Studio CodeのTailwind CSS拡張機能を使うことで、なんとなくそれらしい単語（例えば太字の場合 bold など）を打つことで自動で補完してくれるので記憶する必要はありません。

また、Tailwind CSSのクラスを一度覚えれば他のプロジェクトでも通用しますがプロジェクト固有のクラス名の場合そのプロジェクトでしか通用しない知識です。今急速に広がりを見せるTailwind CSSのクラス名を覚えることは決して無駄ではありません。

HTMLが長くなる問題についてはSGの登場で解決されました。SGはそもそもパーツ（コンポーネント）単位で組んだものを組み合わせることでページを実装するため、ボタンのコンポーネントを作成してそれを使いまわすことになります。そのため長いコードを何度も書く必要はありません。

// ボタンコンポーネントを作っておく
const Button = ({children}) => {
  return <button className="rounded px-2 py-1 font-bold shadow">{children}</button>;
}

// 使いたいシーンでコンポーネントを呼ぶだけ
<Button>ボタンA</Button>
<Button>ボタンB</Button>
<Button>ボタンC</Button>

前提としてReactかVueの知識は必要ですが、最近の開発はどんどんReactやVueに集約されてきているので必要な教養だと考えてください。

最後にインラインスタイルとの違いですが、インラインスタイルではメディアクエリーや疑似要素が使えないためインラインスタイルだけで完結させることはできません。この辺りは公式ドキュメントに詳しく書かれています。

まとめ

以上を踏まえ、PARSEでは SSG の中でも特に勢いのある Next.js と Tailwind CSS を使ったマークアップを推奨しています。それらの採用が許されない現場においては引き続きBEMやGulpをキャッチアップするメリットがあると思いますが、そうでない限りNext.js と Tailwind CSS を使うことを検討しましょう。

Next.js を理解すればWebサイトだけでなくWebアプリケーションも作れるようになるため、サイト制作に Next.js を採用することは自分のキャリアの幅を広げることにもなります。

なお、Next.js（React）が制作にまつわるJavaScript部分を吸収することからPARSEでは jQuery についての解説も行いません。