BETA

GatsbyJSの基本 1

投稿日:2019-10-13
最終更新:2019-10-13

前提

  • Reactについて知っている。

開発の流れについて

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

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

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

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

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

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

cd hello-world  

開発サーバ立ち上げ

npm run develop  
// or  
gatsby develop  

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

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

src/pages/index.js

import React from "react"  

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

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

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

遷移について

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

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

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

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

index.js

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

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

css modules

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

container.js

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

container.module.css

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

inline style

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

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

プラグインについて

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

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

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

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

gatsby-config.js

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

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

続き→GatsbyJSの基本 2

技術ブログをはじめよう Qrunch(クランチ)は、プログラマの技術アプトプットに特化したブログサービスです
駆け出しエンジニアからエキスパートまで全ての方々のアウトプットを歓迎しております!
or 外部アカウントで 登録 / ログイン する
クランチについてもっと詳しく

この記事が掲載されているブログ

hiko1129の技術ブログ

よく一緒に読まれる記事

0件のコメント

ブログ開設 or ログイン してコメントを送ってみよう