gatsby 公式チュートリアルメモ part2


## 公式チュートリアルリンク
https://www.gatsbyjs.com/tutorial/part-two/
パート2の内容のメモ

## siteの作成
コマンドを叩いて，part2用のサイトを作成
```shell:shell
gatsby new tutorial-part-two https://github.com/gatsbyjs/gatsby-starter-hello-world
cd tutorial-part-two
```

## cssファイル作成
globalのcssファイルはこんな感じで追加する

```shell:shell
cd src
mkdir styles
cd styles
touch global.css
```
```css:global.css
html {
  background-color: lavenderblush;
}
```

## jsに外部cssを追加してみる
```shell:shell
cd ../..
touch gatsby-browser.js
```

```js:gatsby-browser.js
import "./src/styles/global.css"

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

あとは以下のようにビルドしてlocalhostで表示してみる
globalのCSSが読み込まれ，背景がラベンダー色になっていれば成功
```shell:shell
gatsby develop
```

## component-scope CSSを使ってみる
新しいコンポーネントとそれに紐づくcssを作る

```js:src/comopents/container.js
import React from "react"
import containerStyles from "./container.module.css"

export default function Container({ children }) {
  return <div className={containerStyles.container}>{children}</div>
}
```
```css:src/compoents/container.module.css
.container {
  margin: 3rem auto;
  max-width: 600px;
}
```
hoge.module.cssという名前にするのがポイントらしい

次にページを作る

```js:src/pages/about-css-modules.js
import React from "react"

import Container from "../components/container"

export default function About() {
  return (
    <Container>
      <h1>About CSS Modules</h1>
      <p>CSS Modules are cool</p>
    </Container>
  )
}
```

`http://localhost:8000/about-css-modules/` にアクセスしてみるとcontainerのCSSが適用されているのがわかる

## CSS Modulesを使ったcomonentの装飾
人物リストを想定したCSSを作る．

```css:src/pages/about-css-modules.module.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;
}
```

適用する.

```jsx:src/pages/about-css-modules.js
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 function About() {
  return (
    <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>
  )
}
```

自作CSSクラスが適用されているのが確認できた．

## CSS-in-JS
CSS-in-JS を gatsbyで使っていく上でおすすめのミニチュートリアルリンクを教えてくれた．

- Emotion (https://www.gatsbyjs.com/docs/emotion/)
- Styled Components (https://www.gatsbyjs.com/docs/styled-components/)

CSS-in-JSをもっと詳しく知りたい人が読むべき記事はここらしい

- [Christopher “vjeux” Chedeau’s 2014 presentation that sparked this movement](https://speakerdeck.com/vjeux/react-css-in-js)
- [ Mark Dalgleish’s more recent post “A Unified Styling Language”.](https://medium.com/seek-blog/a-unified-styling-language-d0c208de2660)

他にgatsbyがサポートしているCSSオプションは以下もあるとのこと

- Typography.js
- Sass
- JSS
- Stylus
- PostCSS