GatsbyJSの基本 1

前提

Reactについて知っている。

開発の流れについて

gatsby new で雛形を作成する
プロジェクトディレクトリへ移動
gatsby developで開発サーバを立ち上げる

gatsby new [rootPath] [starter]で雛形を作成する。

rootPathは利用したいプロジェクトディレクトリの名前を設定する。 starterは、 https://www.gatsbyjs.org/starters/ から選んで適当に設定する。

下記の例の場合には、「gatsby-starter-hello-world」を使用してhello-worldというディレクトリ名でプロジェクトを作成します。

1
gatsby new hello-world https://github.com/gatsbyjs/gatsby-starter-hello-world

プロジェクトディレクトリへ移動

1
cd hello-world

開発サーバ立ち上げ

1
2
3
npm run develop
// or
gatsby develop

ディレクトリ構成について

src/pages以下にページを追加していくルールになっています。

src/pages/index.js

1
2
3
import React from "react"

export default () => <div>Hello world!</div>

pages以下の拡張子を除いたファイル名とパスが一致します。

index.jsは/でアクセスできます。

Gatsbyサイト

遷移について

遷移はLinkコンポーネントを使用します。

Next.jsと同じようにpages内のパス記述でページの移動ができます。

外部を示すリンクは通常通りaタグを使用します。

下記の場合pages/contact.jsに移動できます。

index.js

1
2
import { Link } from "gatsby"
<Link to="/contact/">Contact</Link>

スタイルについて

デフォルトでサポートされているものは標準CSSファイル、css modules, inline styleです。

emotionやstyled-componentsのようなcss in jsはgatsby-pluginを入れる必要があります。

標準CSSファイル

gatsby-browser.jsでCSSファイルをimportして使います。

gatsby-browser.js

1
import "./src/styles/global.css"

css modules

標準でサポートされているようです。

container.js

1
2
3
4
5
import React from "react"
import containerStyles from "./container.module.css"
export default ({ children }) => (
  <div className={containerStyles.container}>{children}</div>
)

container.module.css

1
2
3
4
.container {
  margin: 3rem auto;
  max-width: 600px;
}

inline style

素のReact同様、普通に使えます。

1
2
3
const Hello = () => (
  <div style={{ color: 'red' }}>Hello</div>
)

プラグインについて

GatsbyJSではGatsbyJS固有のプラグインを入れて拡張していくようです。

styled-componentsを使う場合には、下記のようにgatsby-plugin-styled-componentsというものも入れる必要があります。

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

加えてgatsby-config.jsに使用するプラグインを記述していく必要があります。

gatsby-config.js

1
2
3
module.exports = {
  plugins: [`gatsby-plugin-styled-components`],
}

この流れは他のものでも同様です。GatsbyJSではgatsby-pluginを入れて拡張していきます。

続き→GatsbyJSの基本 2