Gatsby チュートリアル (ステップ 2, 3)

2021-03-20

チュートリアルを試す

前回のつづき

ステップ２

ステップ２にはスタイルの当て方が書かれている。

２種類の当て方があって、一つは gatsby-browser.js というファイルで CSS ファイルを import する方法。この CSS はサイト全体に適応される。

gatsby-browser.js

import "./styles/global.css"

もう一つはコンポーネント単位で CSS を適応する方法。この方法に関して更に２つの手法が紹介されていて、それぞれ下記のようになっている。

CSS Module という方法

****.module.css というファイルに CSS を記載し、それをコンポーネントファイルで import して、要素の className props に紐付ける

componentA.module.css

.my-paragraph {
    background-color: red;
}

componentA.js

import React from "react"
import * as styles from "./componentA.module.css"

const ComponentA = () => {
    return (
        <p className={styles.myParagraph}>test</p>
    )
}
export default ComponentA

CSS-in-JS という方法

Emotion や Styled Components のようなライブラリを使って、 js ファイルの中に CSS を書き、それをコンポーネントに適応する

css-in-js.js

import React from "react"
import styled from "styled-components"

const MyP = styled.p`
    background-color: red;
`

const ComponentA = () => {
    return (
        <MyP>test</MyP>
    )
}
export default ComponentA

ちなみにコンポーネントに直接 import "hogehoge.css" としてスタイル適応することも可能だが、例えば h1 タグとかに対するスタイルをクラス名も指定せずに記述してしまうとサイト全体に影響がでるため注意。

それを回避するためには className を指定して、クラスに対してスタイルを当てる。だがそれをするのであれば CSS Module の方法を取るのがおすすめ。クラス名も勝手に BEM みたいにしてくれるので、もしも意図しない別のコンポーネントとたまたまクラス名が衝突していてもスタイルが干渉するリスクがかなり減らせる。

所管

js 内に CSS を記載するよりファイルを分けておきたい性分なので基本的には CSS Module を採用している。だが、チュートリアルを通して触ることになる Emotion や、上に例を記載した Styled Components も、とても小さいコンポーネントであればそこまで悪い選択肢ではないと思った。

あと正直に書くと、この記事を書いているつい今 CSS Module の重要性を再認識し、サイトを CSS Module に準拠させた（笑）。実は上記で良くないよと書いたように import "hogehoge.css" とだけコンポーネントに書いておき、各タグに className props で指定したクラスにスタイルを適応していた。アウトプットの重要性を再認識させられる。。

ステップ３

ステップ３では layout コンポーネントを作って、コンポーネントをネスト構造化する方法が記載されている。

たとえばサイトではヘッダやフッタは全ページ固定というケースが多いかと思うが、こういったものを layout の方に記載しておき、ページ内コンテンツはページごとにコンポーネントを切り替えるといったか感じ。

layout.js

import React from "react"
import Header from "header"
import Footer from "footer"

const Layout = ({children}) => {
    return (
        <>
            <Header />
                <main>{children}</main>
            <Footer />
        </>
    )
}
export default Layout

sample-page-1.js

import React from "react"
import Layout from "layout"

const Page1 = () => {
    return (
        <Layout>
            {/* sample-page-1 のコンテンツ */}
        </Layout>
    )
}
export default Page1

sample-page-2.js

import React from "react"
import Layout from "layout"

const Page2 = () => {
    return (
        <Layout>
            {/* sample-page-2 のコンテンツ */}
        </Layout>
    )
}
export default Page2

所管

この手のパターンはシンプルだがとても強力で汎用性も高いため、 js, React, Gatsby に限らずあらゆる場面でこういうパターンに遭遇する。

あと、このステップ３を写経すると出来上がるページのデザインがシンプルで好き。本サイトでもそういう無駄と飾り気の無い感じを狙っているが、フォントなのか文字サイズなのか配置なのか。。。まだまだ洗練されていない印象を持っている。

まぁしかしそういった箇所も好きなだけカスタマイズしていけるので、焦らずちょっとずつ無駄を削いでいければと思う。