Next.jsのCSSスタイル

本チャプターではNext.jsで作成したページを装飾する「CSS」について学びます。
まずNext.jsで使用できるCSS実装方法は大きく分けて以下の様に4種類あります。

本チャプターではCSS ModulesとCSS in JSについて詳しく解説していきます。
Pure CSSとCSSフレームワークについては説明を省かせていただきますので ご興味があれば是非調べてみてください。

CSS Modulesとは

CSS Modulesは、CSSのスコープ(適用範囲のこと)をコンポーネント単位で管理しようという考えで作られたものです。 プログラミング初学者の多くの方はHTML/CSSから学習されると思いますが、それに近しいスタイルの書き方です。 その為学習コストが低く万人向きとなっています。デフォルトで適用されているPure CSSも書き方は似ていますが、 こちらはCSSのスコープが広く適用させる為のクラス名が被りやすいというのがネックで それを避けようと命名が冗長的になっていき結果として管理が難しくなる問題があります。
その問題を「グローバルスコープ汚染問題」と言います。
上記の問題を回避する為に開発されたのがこのCSS Modulesと後述で解説するCSS in JSです。 CSS ModulesはHTML/CSSと同様にJavaScriptファイルとCSSファイルの2つからなり
特徴的なのはCSSファイル名が*.module.cssというファイル名にするということです。
適用方法としてはJavaScriptファイルの先頭にimport "クラス名" from "ファイル名.module.css"
を記述してインポートしCSSを適用させたい箇所のclassNameを{module名.class名}にして適用できます。
CSS Modulesの詳しい実装方法については後述でSassというCSSを拡張した言語で行なっていきます。

項目	CSS Modules	Pure CSS
CSS管理方法	スタイルをコンポーネント単位で管理する	すべてのスタイルを一元管理する
ファイル構成	JavaScriptコンポーネントファイル一つにつきCSSファイルが一つが必要	CSSファイル一つで管理
クラス名の衝突	CSS Modulesが提供するスコープ機能により、同一クラス名でもコンポーネント単位で管理されるため、衝突しない。	グローバルスコープ汚染問題が起こりやすく、命名規則に注意が必要。

CSS Modulesのメリット

HTML/CSSの形に非常に近しい為、とても学習コストが低い

create-next-appした時点で導入されているのですぐに、使える。

上記からも分かる様にCSS Modulesの最大のメリットは圧倒的な学習コストの低さです。 導入も簡単でクラス名の衝突等の考慮も必要ない初級者に優しいCSS適用方法となります。

Sassとは

それではSassについて見ていきましょう。SassとはCSSの拡張言語です。 通常のCSSでも問題なく実装をすることは出来ますが、スタイル適用量が膨大になっていくに連れて記述が大変になってきます。 また修正があった際に1つひとつ修正する必要があり、手間が掛かってしまいます。 Sassを用いれば、通常の記述を少なくしたり、修正があった際にもCSSよりも修正範囲を少なくすることも可能です。 このようにCSSの弱点を補い、より機能を充実させたものがSassなのです。
Sassには記法が2つあり、「SASS記法」と「SCSS記法」があります。 最初は「SASS記法」が用いられていましたが、通常のCSSの書き方を非常に簡略化して書かれており そのためCSSの書き方と異なり分かりづらいためあまり普及しませんでした。 その後にCSSの書き方に近い「SCSS記法」が作られ、それが広く普及して 今現在Sassを利用しているプロジェクトの多くが「SCSS記法」を用いて記述されています。 そのため、Sassと呼ばれていますが ファイルの拡張子は「.scss」 となっています。 この辺りが少しややこしいので、注意しましょう。
本チャプターではこちらのSCSS記法について解説していきます。

Sassの導入

Sassモジュールをプロジェクトにインストールしていきます。
CLIでプロジェクトのディレクトリに移動し、下記コマンドでSassをインストールできます。
npm install sass
上記のコマンドでSassと共にDart Sassというトランスパイラ(Sass言語をCSSに変換する機能) を同時にインストールすることができます。その為Sassの導入は非常に簡単になっています。 次章では実際にページを装飾していきます。

スタイルの適用

それでは実際にSassのSCSS記法を用いてCSSを適用していきます。 新規ファイルでpages/Sass.tsxというファイルを作成し、下記の様なコードを記述します。

pages/Sass.tsx

import styles from "../styles/Sass.module.scss";

const Home = () =>  {
  return (
    <div className={styles.panel}>
      <h1 className={styles.main}>これはメインカラーで赤です。</h1>
      <h1 className={styles.sub}>これはサブカラーで青です。</h1>
    </div>
  );
}

先頭行でCSSファイルをstylesという名前でインポートし、各h1タグの行でstylesのheadingプロパティをclassNameに記述して 呼び出すという流れです。
今はまだSass.module.scssを用意していない為下記の様に表示されます。

それでは次にstyles/Sass.module.scssというファイルを作成し、Sassを記述していきます。

styles/Sass.module.scss

.panel {
    background-color:  rgb(110, 235, 110);//緑
    .main {
      font-size: 24px;
      color: rgb(212, 72, 72);//赤
    }
    .sub {
      font-size: 24px;
      color: rgb(85, 85, 240);//青
    }
}

{}の中に子要素のタグ(main,sub)を記載すると自動的に親要素(panel)を認識してくれます。
ちなみにPure CSSで同じコードを書くと下記の様になります。

Pure CSSで記載した場合

.panel {
background-color:  rgb(110, 235, 110);//緑

.panel main {
  font-size: 24px;
  color: rgb(212, 72, 72);//赤
}

.panel sub {
  font-size: 24px;
  color: rgb(85, 85, 240);//青
}

このようにSassで書いたコードはCSSに比べて親要素、子要素が視覚的に分かりやすく書きやすくなっている為多くの開発現場で用いられています。

スタイル適用後

Sassの変数を使用してスタイルを管理

先ほどスタイルしたCSSをもう一度見てみましょう。
①background-color: rgb(110, 235, 110);//緑
②font-size: 24px;
上記のコードでは下記の様な問題が出てきます。
①ではまた同じrgbの緑色が使用したくなった際に同じrgbの数値を何度もコピーしないといけない為大変不便です。
②ではmainやsubの様なクラスが増えるたびに②を書かないといけません。 もしファイル全体で文字のサイズが変更になれば②の記載箇所全てを書き換えないといけません。
そんな①と②の問題を解決してくれるのがSassの変数による管理です。

Sass変数の宣言と呼び出し

では、Sass変数の記述方法について見ていきましょう。 Sassの変数は$(ドルマーク)の後に変数名を記述し、:(コロン)の後に値を指定します。 変数の呼び出しも同じように使いたいプロパティの値に$変数名と入力することで、任意の場所に呼び出すことが可能です。

$green: rgb(110, 235, 110);
$red: rgb(212, 72, 72);
$blue: rgb(85, 85, 240);
$textSize: 24px;

.panel {
    background-color:  $green;
    .main {
        font-size: $textSize;
        color: $red;
    }
    .sub {
        font-size: $textSize;
        color: $blue;
    }
}

とてもコードがすっきりとした印象になりました。
①の問題では緑を使用したい箇所に$green;をするだけで実装できます。
②の問題では$textSizeのpxを書き換えるのみで使用箇所全ての文字サイズが変更されるので管理も簡単になりました。
上記の様に変数を用いたスタイルの管理はとても便利なので是非覚えておいてください。
またこのように便利な機能がSassにはたくさん備わっているので是非ご自身でも調べてみてください。

CSS-in-JSとは

前チャプターではCSSModulesでのスタイル適用方法を学びました。 本チャプターでは、CSS-in-JSのスタイル適用方法について学んでいきましょう。 CSS-in-JSはその名前の通りJSコードの中にCSSを記述する適用方法を指します。 JSのコードの中にCSSを記述する為PureCSS, CSS Modulesに比べるとファイルが一つで済むということが 管理が楽になり大きなメリットになります。 しかし、CSS-in-JSをCSSに変換する分レンダリング速度が若干遅くなるなどのデメリットもあります。 CSS in JSはスタイルをレンダリングして生成するのでその分レンダリングが遅れる。といったイメージです。 ただ、そこまで表示までの速度を求めていないのであればあまり気にするデメリットでもありません。
それでは実際にCSS-in-JSを実装していきましょう。

インラインスタイル

CSS-in-JSでスタイル適用させる上でもっともシンプルな方法がインラインスタイルと呼ばれる方法です。 文字通りCSSをComponentにstyleとして渡すことでスタイルを記述することができます。 それでは実際にコードを見ていきましょう。

新規でpages/CssInJs.tsxというファイルを新規作成し下記コードを記述しましょう。

pages/CssInJs.tsx

const CSSinJS = () => {
    return <h1 style={{ color: 'blue' }}>CSSinJSでスタイルを適用</h1>
};

export default CSSinJS;

上記の様に記載してhttp://localhost:3000/CssInJsで見てみましょう。

またSassと同様に変数を定義して下記の様に記述することもできます。

pages/CssInJs.tsx

const CSSinJS = () => {
    const h1Style = {
        color: 'white',
        fontSize: '24px',
        backgroundColor: 'gray',
    };
    return <h1 style={h1Style}>CSSinJSでスタイルを適用</h1>
};

export default CSSinJS;

いかがでしょうか？直感で分かりやすいと感じましたでしょうか。
このようにCSS-inJSはJSファイル内に全て記述できるので、すごく可読性に優れているスタイルです。 またCSS-in-JSにはよく使う機能をまとめたライブラリ機能というものが備わっています。 本チャプターでは説明を省略させていただきますが、とても便利な機能ですので是非ご参考にしてみてください。

まとめ

本レッスンではNext.jsでのCSSの適用方法について学んでいきました。 CSS ModulesとCSS-in-JSは実際に開発現場でよく使うスタイル適用方法になりますので是非覚えておいてください。 次のレッスンでは、Next.jsで作成したページに画像等を表示させる流れについて学んでいきます。