GatsbyJS v2 はじめの一歩 (3) ページにスタイルを当てる

GatsbyJS v2 はじめの一歩 (1) 開発環境の立ち上げ、GatsbyJS v2 はじめの一歩 (2) 実際にページを作るの続編です。

ReactにおいてCSSを書くライブラリは多数存在しますが、筆者はCSS in JSというJSの中にCSSを書くアプローチなライブラリが比較的人気であると感じています。 その中でも勢いがあって、国内企業でも複数導入されているstyled-componentsというライブラリを使っていきます。

styled-componentsとは？

styled-componentはJSファイル中にCSSを書くライブラリの一つで、複数のスタイルを含めたコンポーネントを作るアプローチのライブラリです。 次の例ではTitle, Wrapperをコンポーネントと定義して、HogeComponentの中でそれらのコンポーネントを使っています。

import React from 'react';
import styled from 'styled-components';

const Title = styled.h1`
  font-size: 1.5em;
  text-align: center;
  color: palevioletred;
`;

const Wrapper = styled.section`
  padding: 4em;
  background: papayawhip;
`;

const HogeComponent = () => {
  <Wrapper>
    <Title>Hello World, this is my first styled component!</Title>
  </Wrapper>
}

見てわかるとおり、JSファイルの中でCSSと同じ記法で書くことが出来ます。また、Titleというスタイルを含んだコンポーネントを見てわかるとおり、非常にリーダブルなコードになります。

css-modulesは？

Reactを書くときに考える必要があるのがCSSの扱いです。 Reactアプリケーションの雛形を作成するCLIツールのcreate-react-appで作られるReactアプリケーションではCSSとJSが別々のファイルになっていてJSからcssをimportする形式になっていました。

import React, { Component } from 'react';
import './App.css';

class App extends Component {
  render() {
    return (
      <div>hoge</div>
    );
  }
}

export default App;

これは一見良さそうに見えますが、ユーザーが見る際にすべてのコンポーネントのスタイルをまとめたCSSファイルが生成されます。この方針で作られたCSSをファイルが大きくなりがちで、ページの読み込みをブロッキングする要素になります。CSSファイルは何も考えずに読み込もうとすると、CSSファイルを読み込むまでページのレンダリングが開始されません。 styled-componentsはそのページに必要なスタイルをinline styleとして出力するので、CSSが読み込みをブロッキングすることがなく高速化の文脈で有利になります。

styled-componentsを導入する

styled-components単体を導入するだけでは、ブラウザでしか動作しません。GatsbyJSではHTMLを生成する再にブラウザを通さない処理があるのでこのままではCSSのあたっていないHTMLが生成されてしまいます。 そこでGatsbyJS側でサーバーサイドでのみ動く処理を書く必要があるのですが、幸運なことにgatsby-plugin-styled-componentsというライブラリが用意されています。

gatsby/packages/gatsby-plugin-styled-components at master · gatsbyjs/gatsby

pluginの利用方法

GatsbyJSにおけるプラグインはgatsby-node.jsやgatsby-ssr.js、gatsby-broswer.jsでGatsbyJSの挙動を変えてくれるパッケージのことをいいます。 今回のgatsby-plugin-styled-componentsはレンダリングするReactコンポーネントから必要なスタイルだけを抜き出しinline styleとして出力してくれる処理を担ってくれます。

https://next.gatsbyjs.org/packages/gatsby-plugin-styled-components

プラグインのREADME.mdを見ながらインストールを進めていきましょう。まずは指示通りにパッケージのインストールをしましょう。

$ npm install --save gatsby-plugin-styled-components styled-components babel-plugin-styled-components

プラグインを利用するにはgatsby-config.jsにプラグインの情報を入力する必要があります。今回は次のような処理をgatsby-config.jsに書き加えましょう。

module.exports = {
  siteMetadata: {
    title: 'Gatsby Default Starter',
  },
  plugins: [
    'gatsby-plugin-react-helmet',
    {
      resolve: `gatsby-plugin-manifest`,
      options: {
        name: 'gatsby-starter-default',
        short_name: 'starter',
        start_url: '/',
        background_color: '#663399',
        theme_color: '#663399',
        display: 'minimal-ui',
        icon: 'src/images/gatsby-icon.png', // This path is relative to the root of the site.
      },
    },
   'gatsby-plugin-offline'
+   'gatsby-plugin-styled-components'
  ],
}

パッケージのインストール時には再度gatsby developの実行が必要です。gatsby developをctrl+cで一旦止めて再度実行しましょう。これでstyled-componentsを利用するための準備が整いました。

ここからは実際にスタイルを書いていきましょう。

実践styled-comopnents

基本的にはstyled-componentでコンポーネントを作ってReactをコンポーネントとして利用すれば大丈夫です。

import React, { Component } from 'react';
import styled from 'styled'
import './App.css';

const RedTitle = styled.div`
  color: red;
  font-size: 20px;
`

class App extends Component {
  render() {
    return (
      <RedTitle>hoge</RedTitle>
    );
  }
}

export default App;

ちゃんと反映されているかブラウザを開いて確認してみましょう。