【GatsbyJS製ブログ】SCSS & CSS Modulesで快適CSS開発環境を作る

2021年9月7日2023年12月5日

ようやく開発環境が整ってきましたが、まだまだ快適開発環境への欲は尽きません。ということで、Gatsby製ブログをカスタマイズする記事第３弾は、以前より興味津々だったSCSSとCSS Modulesを使ってSCSSをブログに当てていきたいと思います。

Gatsbyで実際に運用しているブログはこちらです。ぜひ、のぞいてみてください！

あわせて読みたい

大分ツーリングおんせん県大分のツーリング情報を発信していきます！穴場ツーリングスポットやツーリンググルメなど、地元大分在住だからこそわかる魅力をお伝えします。その他バイクに関…

この記事はこんな人にオススメ

GatsbyでSCSSを便利に使いたい！
CSS Modulesっていうのがあるらしいけど何？美味しいの？

SCSSとは

SCSSとは、簡単に言うとCSSを管理しやすい形で書けるようにした構文です。以下のようなメリットがあります。

入れ子で書けるので、「こいつの子要素になぜこんなスタイルが効いてるんだ！」と迷子探しする必要がなくなる。
変数を利用できる。
四則演算、関数利用ができる。
ミックスイン、継承ができる。

一方、デメリットは

コンパイルが必要になる。

くらいでしょうか？上記であげた変数、四則演算などを利用するための学習コストはかかりますが、それ以上に管理コスト削減のメリットが遥かに大きいと思います。

「SCSSってなに？」という人は、以下のリンクで具体例と一緒に説明しています。

あわせて読みたい

SCSSとは？「基本的な書き方から便利な使い方」この記事では、SCSSの基本から便利な使い方を説明していきます。SCSSの便利さを知ってしまうと、SCSS無しではサイトの管理ができません。ホームページやブログを作って…

CSS Modulesとは

CSSをベタ書きした経験がある人はわかると思いますが、クラス名を付けるときにかなり大変な思いをします。特に私は「とりあえずやってみよう！」タイプで、以前HTMLとCSSをベタ書きしてブログを作るということをしていたのですが（当然、PHPでページネーションを実装するあたりで面倒になりWordPressに切り替えましたが）、当時面倒だなぁと思っていたのが正にこれでした。

「タイトルにスタイルを適応したいけれど、.titleは使ってるなぁ。.article-title？いや、これもさっき使ったか。.card-article-title？くらいか？まぁこれなら大丈夫か。他で使ってなかったよな？クラス名なげぇなぁ…。」

これが非常に面倒でした。命名規則とかも勉強したのですが、あまり根本的な解決になってないような気がして結局自分が付けたいようにクラス名を付けていました。

前置きが長くなりましたが、CSS Modulesとは、部品ごとにCSSを当てる、というコンセプトで設計されたものです。ファイル名を「***.module.css」(***は当てたい部品の名前)として作成し、JSファイルの方でインポートしてやれば、そのJSファイルにだけCSSが当たるという簡単＆管理しやすい書き方になります。

試しに、以下の図のようにヘッダーとフッターに同じクラス名を宣言してみます。

結果は次のようになります。

確かに同じ「titleText」というクラス名を宣言していますが、import文で該当のCSSファイルを読み込むことで、そのCSSファイルにあるクラスの設定だけが当たっていることがわかります。これで、ファイルさえ分けてしまえばクラス名の被りを気にせずに宣言し放題です。

クマ

パーツ毎にJSファイルとCSSをセットで作成して管理できるので、わかりやすい！便利！

余談①

公式docを読んでいたら、「cssは普通kebab case（例、.title-textのようにハイフンで繋ぐ）だけど、classNameの方は普通camel case（例、titleTextのように単語の区切りを大文字にする）で書くだろ？でもGatsbyのCSS Modulesはそこを上手いこと変換してくれるんだぜ？」（意訳）と書いていたので試してみました（上の図ではその形で書いています。JSファイルとCSSファイルでクラス名の形が違っているのが確認できます）。確かに読み込めるんですが、一つずつクラスを読まないといけないのですごく面倒です。２度と使わないと誓いました。代わりに次のようにして読み込むと楽ちんです。

import styles from '../styles/header.modules.css'  //stylesとしてCSSの全てのクラスを読み込む
…
<div className={styles.title}>  //styles.(クラス名)でCSSの方のクラス指定をする
 …
</div>

余談②

上の図ではCSSファイルをインポートしていましたが、次に紹介するSCSSをインポートしても大丈夫でした。

import styles from '../styles/header.modules.scss'  //SCSSファイルでも大丈夫

BearFruitのマスコットキャラ「クマ」がLINEスタンプになりました！

プログラマーの心に刺さる、「プログラミングあるある」。毎日使いたくなること間違いなし！

LINE STORE

クマのプログラミング日記

GatsbyでSCSS＆CSS Modulesを利用できる環境を作る

Gatsbyでは、デフォルトでCSS Modulesが利用できるので、実質Sass（SCSS）が実行できる環境を作ればよいです。「~~node-sass~~」「sass」と「gatsby-plugin-sass」のプラグインで簡単にSass環境を構築できます。ターミナルで以下のコマンドを実行。

$ npm install --save sass gatsby-plugin-sass

クマ

npmでインストールしたけど、「yarn add」でも大丈夫。

※ 2022年4月3日追記

私が環境構築したときには問題なかったのですが、

クマ

ブログネタ用にGatsbyブログを一つ立ち上げよう！

ということで、上記のnode-sassをインストールしてgatsby developをした際に

  ModuleError: Module Error (from ./node_modules/sass-loader/dist/cjs.js):
  Node Sass version 7.0.1 is incompatible with ^4.0.0 || ^5.0.0 || ^6.0.0.

というエラーが出てしまいました。

調べてみると、node-sassは使えなくなっていて、上記のように「sass」を使わなければならないようです。

もし、node-sassをインストールしてしまった、もしくはnode-sass周りで上記のようなエラーが出る場合は、次のコマンドでnode-sassをアンインストール、sassをインストールしましょう。

$ npm uninstall node-sass
$ npm install sass

次にgatsby-config.jsを編集します。pluginにgatsby-plugin-sassを指定してあげます。

plugins: [
…
  `gatsby-plugin-sass`,
]

あとは普通にSCSSファイルを書くだけ。簡単。SCSSを保存しただけでSCSS→CSSのコンパイルまでしてくれるスグレモノ。

クマ

でも、上記のようにGatsbyはSCSSを直接読み込める…結局どうCSSファイルを適応していくのが正解なのだろうか。

まとめ

Gatsby製ブログにSass(SCSS)とCSS Modulesを適応して、快適なCSS作成環境を整えてみました。プログラミングはこういう保守管理が効率化（しかもかなりバカにならない）に直結するので、しっかりと考えることは重要ですね。次回は、フォントの変更を行なっていきたいと思います。

ちょっと一息…

最近本格的にCSSの勉強を始めました。

WordPressでもGatsbyJSでも必要な基本的な知識「CSS」…これが奥深い。

クマ

もちろんCSSに関する基本的な知識はあるのですが、引き出しは多くしておきたいものです。

ワンランク上のホームページ、ブログ作成を目指して、特に「これはよかった」というオススメのCSS学習教材の紹介をしていきます。

動画編

Webデザインのオンラインスクールなどは沢山ありますが、数万円〜数十万円するので、なかなかハードルが高いですよね。

そこでオススメなのはUdemy。

このブログでもちょくちょく紹介させてもらっていますが、一つの講座買い切り、というのがありがたいです。

しかも、種類もかなり豊富！GatsbyJSの講座まである、というのは他ではなかなかないです。

そのなかでもオススメのCSSに関する講座を紹介しておきます。

クマ

CSSの講座とかは沢山あるので、「これよさそう！」と思ったものを探すのも楽しいかもしれません。

書籍編

CSSを実践的に書いていくなら、書籍も便利です。

本を片手にコーディング、というのは効率もいいですよね。

こちらもオススメの本を紹介しておきます。

クマ

CSSの基本ができている人が「次のステップに行きたいなぁ…」というときにオススメです。

あわせて読みたい

【GatsbyJS製ブログ】フォントをGoogleフォントに変更する Gatsbyのデフォルトの日本語フォントはお世辞にも見やすいもの、とは言えません。なんかこう「海外産」って感じです。今回はフォントの変更をしていきたいと思います。 …

あわせて読みたい

【GatsbyJS製ブログ】Gatsbyの勉強法このブログでは結構Gatsby関係の記事を書いていて、情報発信をしています。もちろん自分でもGatsby製ブログの運営をしています！ですが、Gatsbyは日本語の情報が少な…

あわせて読みたい

【Gatsby製ブログ】framer-motionの基本的な使い方今やサイトにアニメーションで動きをつけるのは必須と言っても過言ではないでしょう。 Gatsby製のブログやサイトでも動きをつけることはできます。実際に私が運営してい…

よかったらシェアしてね！

URLをコピーしました！

URLをコピーしました！

【GatsbyJS製ブログ】SCSS & CSS Modulesで快適CSS開発環境を作る

SCSSとは

CSS Modulesとは

GatsbyでSCSS＆CSS Modulesを利用できる環境を作る

まとめ

tomokichi.90