2022/08/12 (更新日: 2022/10/14)

Next.jsで使えるCSSフレームワークまとめ！【おすすめはCSS Moduleです】

こんにちは。あっきーです。
Webシステム開発やホームページ制作を行っております。

今回はNext.jsで使えるCSSフレームワークをまとめてみました！という話です。

Next.jsではいろんなCSSフレームワークに対応しているんですが、結構種類が多くでどれを選べばいいのかわからないということに陥りやすいです。
それぞれに長所短所はあるもので、一概に「これを使え！」と決めることはできないんですが、僕がいろいろ試してみてこれがいいなと思うものを教えていきたいと思います。

各フレームワークの概要もまとめるのでぜひ比較してください！

【結論】CSS Moduleを使いましょう

結論を言うと、CSS Moduleで十分です。
理由は以下の通り

特に外部パッケージを入れなくても使える（Next.jsが推している）
「コンポーネント」と相性がいい
CSSが使える人なら学習コスト0
ほかのライブラリとも併用できる

Next.jsの標準機能として使える

例えばTailwindCSSだったり、emotion.jsなどを使うとなると別途インストールが必要です。
まあこれら公式ページに行けばインストール方法とか初期設定方法とかすべて書いてあるのでそんなに敷居は高くないんですけど、これが面倒だったりします。
こういう類のものって、設定がうまくいかなくて使わないというケースも多いです。

CSS ModuleはNext.jsが標準で装備している機能なので、準備不要ですぐに使えます。
公式ページでも結構推している感じなので相性はいいのかなと思います。

コンポーネントと相性がいい

Next.jsはコンポーネントベースの言語です。
「コンポーネントベース」っていうのは、例えば「ボタン」というファイルを作り、それを使いまわしていくというものです。

これはつまり「ボタン」というファイルの中では、「ボタン」に関する機能とかデザインを当てたいわけですね。
CSS Moduleを使うと「ボタンに関数するデザイン」を実装することができます。

具体例を挙げると、以下のような「ボタン」フォルダ（コンポーネント）を作ります。


-Button
|-index.tsx
|-index.module.css

そしてそれぞれにコードを書いていきます。


/* index.module.css */
.button {
  /*ボタンに関するスタイルを作る*/
}


// index.tsx
import styles from './index.module.css' //ボタンに関するcssをインポート

interface Props {
  children: ReactNode
}
const Button= ({children}: Props) => {
  return (
    <button className={styles.button}>{children}</button>
  )
}

こうすると、スッキリしますよね。
機能の部分はindex.tsxをいじり、スタイルはindex.module.cssをいじればOKということです。
さらに、このindex.module.cssは呼び出した範囲でしか適用されないので、.buttonというクラスを他で使ってもスタイルはつきません。

コンポーネントレベルのスタイルがつけられるのは相性が抜群です。

書き方はただのCSS

また、CSS Moduleは結局のところただのCSSです。
CSSを使ったことある方なら全く同じ書き方で書くことができるので、特別何かを学習する必要はありません（クラスのつけ方がちょっと異なるくらいですかね。）

styled-jsxやTailwindCSSでは別で覚える必要のあることがあるので、学習コストがかからないのはうれしいですね。

ほかのライブラリとも併用できる

CSS Moduleをメインで使うと、スタイルの微調整などを行いやすいです。
CSS Moduleはクラスで定義するので、優先度が低いです。

Next.jsではCSS-in-JSがサポートされていて、これはstyleを直接書くタイプなので、優先度が高くなります。
なので、ちょっとだけ調整したいけどCSS Moduleファイルを変更したくない場合なども、CSS-in-JSと併用することで簡単にスタイルの調整ができます。

こんな感じでCSS Moduleは使いやすく、Next.jsの構造と相性がいいのもあってお勧めです。

その他CSSフレームワークとの比較

じゃあ、そのほかはどうなのか？というところを少し解説していきます。

グローバルなCSSを書く

これは全体で使えるファイルglobal.cssを作り、これを_app.tsxなどトップのファイルで読み込むパターンです。
これは特殊パターンを除いておすすめしません。

理由は簡単で、コンポーネントが活きてこないからです。
さっきのように、コンポーネントごとにスタイルを決めていくのがNext.jsの大原則なので、全体に使えるcssはそれをぶち壊しにいくようなものです。

ただ、逆に全体でよく使うものはここで定義してしまってもいいですね。
例えば以下な場合


.text-lg {
  font-size: 1.25rem;
}

.text-lgはフォントサイズを大きくするというものですが、ところどころ文字を大きくしたい箇所はありますよね。
ただ、毎回CSS Moduleなどで書くのも面倒です。

こういった場合はグローバルに定義しちゃってこのクラスを使いまわす方が良いですね。

CSS-in-JS

これはtsxファイルに直接スタイルを書いていく形になります。


const Button= ({children}) => {
  return (
    <button style={{background: "#aaa", color: "#fff"}}>{children}</button>
  )
}

これのデメリットは以下の通り。

見づらいし書きづらい
スタイルの調整がやりにくい

まずただただ見づらいです。もっとコードが増えたら大変ですよね？
また、さっきも少し触れたんですが、CSS-in-JSはstyleで直接更新するので優先度が高いです。なので後付けでclassで定義しても適用されません。
またbeforeやhoverが使えないので、細かいスタイルもやりにくいです。

ただ、メリットもあります。

cssファイルを作る必要がなくなる
Next.jsデフォルトの機能

でもCSS Moduleに軍配があがりそうです。

styled-jsx

styled-jsxもtsx,jsxファイルに直接書いていきます。直接styleタグを埋め込む形ですね。


const Button= ({children}) => {
  return (
    <>
     <style jsx>{`
       button {
         background: #aaa;
         color: #fff;
       }
     `}
     <button>{children}</button>
    </>
  )
}

これもデメリット、メリットはcss-in-jsと同じです。

これのもう一つのメリットとしては、条件分岐が可能なところですかね。
tsxファイル内なので、変数が使えます。


const Button= ({children, color}) => {
  return (
    <>
     <style jsx>{`
       button {
         background: ${color};
         color: #fff;
       }
     `}
     <button>{children}</button>
    </>
  )
}

colorという引数を用意しておいて、外部からcolorを渡せばスタイルの更新がしやすいです。
ですが、それもCSS Moduleで外からスタイルを渡せば済む話なのでやっぱりCSS Moduleが強いですね。

TailwindCSS

これはCSSフレームワークの一つで、すでに用意されているクラスを当てはめていってスタイルを当てます。

ただデメリットがやはりあって

見づらい
初期設定が必要
クラスを覚えないといけない

TailwindCSSは「各クラスにスタイルは1つ」という形になっています。
例えば以下のようにクラスがすでに用意されています。


.text-xl {
  font-size: 1.25rem;
}
.w-12 {
  width: 3rem;
}

なので、TailwindCSSだけで作ろうとなれば何個もクラスを書かないといけないわけですね。


const Button= ({children}) => {
  return (
     <button className="py-2 px-4 bg-gray-300 text-white">{children}</button>
  )
}

当然見づらいです。

また、外部ライブラリということでインストール&初期設定が必要ですし、そもそもこういうクラスを覚えていかないと使えないです。
なのでCSS Moduleの方が使い勝手がよさそうです。

TailwindCSSはもちろんよくできていて、コンポーネントベースの言語とは相性がいいので、部分的に使うのはいいと思います。

まとめ

ということで、いろいろ解説しましたが、CSS Moduleが一番無難で使いやすいです。

ただ、忘れないでほしいのは、CSS Moduleを絶対に使えということではないです。
実際に僕もCSS Moduleをメインにはしていますが、部分的にcss-in-jsなどを利用しています。

こんな感じでCSS Module + 何かという形で使うのもあるのでぜひうまく使ってください！

それでは、また。

スポンサードサーチ

オススメ英語学習用SNS "Our Dictionary"

人気記事英語学習用SNSをLaravelで作ってみた【システム解説あり】