[第2章：Gatsbyにおけるスタイリング 編] Gatsby公式ドキュメントを翻訳してみた。

# はじめに
このシリーズでは、英語ソースばかりで「Gatsby使ってみたいけど、よくわからない...」という方々のために、公式Docを翻訳（ところどころざっくり要約）していきます。

実際の公式ドキュメントは[こちら](https://www.gatsbyjs.org/tutorial/)

（この章では、CSSモジュールを使ってコンポーネントをスタイリングできるようになることがゴールです）

〜〜 以下、翻訳となります 〜〜

## 2. Gatsbyにおけるスタイリングを理解しよう

この章では、Gatsbyサイトの開発でスタイリングをする際にどのような方法があるのかを理解していきます。

### グローバルスタイリングを使おう
どんなサイトでも、背景色やタイポグラフィー（デザインにおける活字の構成および表現）を指定するようなグローバルスタイリングが使われていると思います。

Gatsbyサイトでも、同じようにCSSを使ってグローバルスタイリングができます。

### 新しいGatsbyサイトを用意しよう
この章では、[前章](https://qiita.com/wlcmty/items/dcfcdf36ed660fd94ad7)まで使ってきたサイトではなく、新しくGatsbyサイトを作ってスタイリングしていきましょう。

それでは、新しいターミナルのタブを開いて`tutorial-part-two`という名前で前回のようなGatsbyサイトを作成し、そのディレクトリに移動しましょう。

```shell
gatsby new tutorial-part-two https://github.com/gatsbyjs/gatsby-starter-hello-world
cd tutorial-part-two
```
今回も`hello-world-starter`を利用しているので、下記のような構成となっているはずです。

```
├── package.json
├── src
│   └── pages
│       └── index.js
```

### CSSファイルを追加しよう
1 . まず、下記のようにして`global.css`というファイルを作成します。

```shell
cd src
mkdir styles
cd styles
touch global.css
```
すると、これでこのような構成になるはずです。

```
├── package.json
├── src
│   └── pages
│       └── index.js
│   └── styles
│       └── global.css
```

2 . それでは次に、作成したcssファイルに以下の記述をしましょう。

```css
html {
  background-color: lavenderblush;
}
```

（ちなみに、絶対に`src/styles/`の中に`css`のファイルを配置しなければならないという訳ではありません。）

3 . 次は、以下のようにして`gatsby-browser.js`を作成しましょう。

```shell
cd ../..
touch gatsby-browser.js
```

すると、このような構成になっているはずです。

```
├── package.json
├── src
│   └── pages
│       └── index.js
│   └── styles
│       └── global.css
├── gatsby-browser.js
```

> `gatsby-browser.js`が何なのか気になる方がいらっしゃるとは思いますが、今はとりあえず「`gatsby-browser.js`と名付けられたファイルは特別である」ということだけ理解してください。どう特別なのか知りたい方は、[こちら](https://www.gatsbyjs.org/docs/browser-apis/)（英語ソース）をご覧ください。

4 . そして、`gatsby-browser.js`の中で先ほど作成した`global.css`を読み込みましょう。

```js
import "./src/styles/global.css"

// or:
// require('./src/styles/global.css')
```

> 今回の場合、`require`でも`import`でもちゃんと機能しますが、どちらか使うか迷ったら、とりあえず`import`を使うのが無難です。Node.js環境の中でのみ使用されるファイルには、`require`を使うようにしましょう。

5 . それでは、サーバーを立ち上げて確認してみましょう！

```shell
gatsby develop
```

![global-css.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/482472/7998a24c-8ed8-b48a-272a-ce5e147a306e.png)


このようにCSSが適用されているのを確認できましたか？

### コンポーネントごとにCSSを当てよう

これまでは、他の言語やフレームワークでも見られるような普通のCSSの書き方を使ってきました。

次に、コンポーネント指向に合ったCSSの使い方を学びます。CSSファイルをモジュール化して使う方法です。

## CSSモジュールを学ぼう
CSSモジュールとは何でしょうか。
[公式Github](https://github.com/css-modules/css-modules)のREADMEから引用すると、以下のような定義となります。

> CSSモジュールとは、中で書かれる全てのクラスやアニメーションがデフォルトで特定のファイルにスコープ化されているCSSファイルである。

CSSモジュールを使えば、自動的に一意性のあるクラス名やアニメーション名を生成できます。他のファイルのクラス名と重複することを心配したり、BEMを意識して冗長なクラス名を書いたりする必要もありません。

Gatsby（つまり、React）では、このCSSモジュールを使用する方法が推奨されています。

### 早速、CSSモジュールを使って新しいページを作成してみましょう。
まず、スタイルを当てたい`Container`コンポーネントを作成しましょう。

1 . `src/components`というディレクトリを作成し、その中に`container.js`というファイルを作成して以下のコードを記述します。

```jsx
import React from "react"
import containerStyles from "./container.module.css"

export default ({ children }) => (
  <div className={containerStyles.container}>{children}</div>
)
```

2行目で、`container.module.css`という名前のCSSモジュールを読み込もうとしています。それでは次に、そのファイルを作成しましょう。

2 . 同じディレクトリ内（`src/components`）に、`container.module.css`というファイルを作成して以下のコードを記述します。

```css
.container {
  margin: 3rem auto;
  max-width: 600px;
}
```

作成したファイルの名前が`.module.css`で終わることに気が付きましたか？このようにすることによって、Gatsbyはこれが普通のCSSなのかモジュールCSSなのか判断することができるのです。

3 . `src/pages/`の中に`about-css-modules.js`という新しいpageコンポーネントを作成します。

```jsx
import React from "react"

import Container from "../components/container"

export default () => (
  <Container>
    <h1>About CSS Modules</h1>
    <p>CSS Modules are cool</p>
  </Container>
)
```

これで、`http://localhost:8000/about-css-modules/`にアクセスすれば以下のような見た目になっているはずです。

![css-modules-basic.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/482472/c814c91a-c7ff-e0db-2350-a830a0910fe6.png)

### CSSモジュールを使ってコンポーネントをスタイリングしてみよう
それでは少し発展編です。
これから、人物名と写真と自己紹介文が入った`<User/>`コンポーネントを作成し、それをCSSモジュールを使って見た目を整えていきます。

1 . まずは、`about-css-modules.module.css`というCSSモジュールのファイルを`src/pages`の中に作成します。

2 . 以下のCSSをその中に記述します。

```css
.user {
  display: flex;
  align-items: center;
  margin: 0 auto 12px auto;
}

.user:last-child {
  margin-bottom: 0;
}

.avatar {
  flex: 0 0 96px;
  width: 96px;
  height: 96px;
  margin: 0;
}

.description {
  flex: 1;
  margin-left: 18px;
  padding: 12px;
}

.username {
  margin: 0 0 12px 0;
  padding: 0;
}

.excerpt {
  margin: 0;
}
```

3 . 次に、先ほど作成した`about-css-modules.js`の中を以下のように編集し、`src/pages/about-css-modules.module.css`を読み込ませます。

```js
import React from "react"
import styles from "./about-css-modules.module.css"
import Container from "../components/container"

console.log(styles)
```

最後の行の`console.log(styles)`で、`./about-css-modules.module.css`から読み込んだ`styles`の中身をログに出力することができます。ログは、デベロッパーツールで確認することができます。（ブラウザを開いた状態で`F12`を押せば簡単にデベロッパーツールを開けます。）

![css-modules-console.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/482472/606206c5-50b8-26cd-e2a6-c74f0f2f38b4.png)

先ほど`about-css-modules.module.css`の中に記述したクラス名の横に、長〜い文字列が生成されているのが確認できますよね。これらが、CSSモジュールが自動的に生成しているクラス名です。このおかげでクラス名が絶対に重複することはありませんし、実際に先ほど書いたように使うCSSモジュールをファイルの上で読み込まなければならないので、どのCSSモジュールが適用されているのかも簡単に確認できます。

4 . `about-css-modules.js`の中に新しく`<User/>`コンポーネントを作成し、同ファイルを以下のように修正します。
（HTMLと同じようなクラスの指定はできないので、注意しましょう）

```jsx
import React from "react"
import styles from "./about-css-modules.module.css"
import Container from "../components/container"

console.log(styles)

const User = props => (
  <div className={styles.user}>
    <img src={props.avatar} className={styles.avatar} alt="" />
    <div className={styles.description}>
      <h2 className={styles.username}>{props.username}</h2>
      <p className={styles.excerpt}>{props.excerpt}</p>
    </div>
  </div>
)

export default () => (
  <Container>
    <h1>About CSS Modules</h1>
    <p>CSS Modules are cool</p>
    <User
      username="Jane Doe"
      avatar="https://s3.amazonaws.com/uifaces/faces/twitter/adellecharles/128.jpg"
      excerpt="I'm Jane Doe. Lorem ipsum dolor sit amet, consectetur adipisicing elit."
    />
    <User
      username="Bob Smith"
      avatar="https://s3.amazonaws.com/uifaces/faces/twitter/vladarbatov/128.jpg"
      excerpt="I'm Bob Smith, a vertically aligned type of guy. Lorem ipsum dolor sit amet, consectetur adipisicing elit."
    />
  </Container>
)
```

このようなユーザー一覧が表示されていれば、完成です。

お疲れさまでした！

参考文献：[Gatsby公式ドキュメント](https://www.gatsbyjs.org/tutorial/)

[次の章](https://qiita.com/wlcmty/items/8302dcdc61debbd4132e)のテーマは、
「GatsbyプラグインやLayoutコンポーネントを学ぼう」です。

お楽しみに！！

[[第0章：環境構築編] Gatsby公式ドキュメントを翻訳してみた。](https://qiita.com/wlcmty/items/67b6f51ddc646484d7bc)

[[第1章：Gatsbyサイトの理解 編] Gatsby公式ドキュメントを翻訳してみた。](https://qiita.com/wlcmty/items/dcfcdf36ed660fd94ad7)

[[第3章：Layoutコンポーネントを使ってみよう 編] Gatsby公式ドキュメントを翻訳してみた。](https://qiita.com/wlcmty/items/8302dcdc61debbd4132e)