もくじ

[入門編]Gatsby.jsの使い方。初心者でもReact爆速サイトが簡単に作れます。

ハウツー
コロのicon
コロ

Gatsbyとは?が知りたい方はこちらの記事からどうぞ。

環境構築

gatsby cliのインストール

$ npm install -g gatsby-cli

フォルダをつくる

以下のコマンドで test-site というプロジェクトフォルダが生成されます。
$ gatsby new test-site
スターターテーマを使うこともできる
$ gatsby new test-site https://github.com/gatsbyjs/gatsby-starter-hello-world

ローカルサーバーをたちあげる

プロジェクト階層に移動
$ cd test-site
ローカルサーバーを立ち上げるコマンドを入力
$ gatsby develop
http://localhost:8000 にアクセス
http://localhost:8000/___graphql にアクセスでGraphQlも確認できる

Gatsbyコマンド

プロダクションビルド

/public にコンパイルされたファイルが生成される
$ gatsby build

プロダクションビルド&ローカルサーバー立ち上げ

$ gatsby serve

サイトフレームの構築

ヘッダー、フッターを追加

components と Layoutというフォルダを作成して、headerやfooterなど共通で使うコンポーネントを管理します。
この階層は任意なので、好みの場所、フォルダ名に変更しても問題ありません。
| |-- components | | |-- Layout | | | |-- Footer.js // 追加 | | | `-- Header.js // 追加 | | | `-- pages | |-- index.jsx |

Header.jsx

src/components/Layout/Header.jsx
import React from "react" const Header = ({ location }) => { return ( <header> <h1>header</h1> </header> ) } export default Header;

Footer.jsx

src/components/Layout/Footer.jsx
import React from "react" const Footer = ({ location }) => { return ( <footer> <h1>footer</h1> </footer> ) } export default Footer;

Layoutを作成

| |-- components | | |-- Layout | | | |-- Footer.js | | | `-- Header.js | | `-- layout.jsx // 追加 | `-- pages | |-- index.jsx |

layout.jsx

src/components/layout.jsx
headerとfooterをimportしてレイアウトフレームを完成させます。
前ファイルでheader, footerを読み込まなくてもlayout.jsxで一元管理できるようになりました。
import React from 'react'; import Header from './Layout/Header'; import Footer from './Layout/Footer'; const Layout = ({ children, location }) => { // childrenは <Layout /> コンポーネント内の記述が展開される return ( <> <div className="site-wrap"> <Header location={location} /> {children} <Footer location={location} /> </div> </> ) } export default Layout;

レイアウトを使ってTOPページを表示

index.jsx

src/pages/index.jsx
impor React from "react" import { Link } from 'gatsby' import Layout from '../components/layout' class Home extends React.Component { render() { return ( <Layout location={this.props.location}> <h1>index-page</h1> </Layout> ); } } export default Home;
layoutコンポーネントをimportして、一番外側を囲います。
これでheaderとfooterを読み込まなくてもindexを下記のように表示することが出来ます。
header indexの内容 footer

アバウトページの作成

Gatsbyは /pages階層のファイル構造がそのままサイトの階層になります。
| |-- components | | |-- Layout | | | |-- Footer.js | | | `-- Header.js | | `-- layout.jsx | `-- pages | |-- about.jsx // 追加 | `-- index.jsx

about.jsx

src/pages/about.jsx
import React from "react" import { Link } from 'gatsby' import Layout from '../components/layout' class About extends React.Component { render() { return ( <Layout location={this.props.location}> <h1>about-page</h1> <Link to="/">indexに戻る</Link> </Layout> ); } } export default About;

ページ間のリンクは<Link>を使う

gatsbyのLinkコンポーネントを使うことでページの読み込みを行うことなくスムーズに、高速なページ移動が可能です。
import { Link } from 'gatsby' ・ ・ ・ return ( <Layout location={this.props.location}> <h1>about-page</h1> <Link to="/">indexに戻る</Link> </Layout> );

404ページの作り方

src/pages/404.jsx を作成
| |-- components | | |-- Layout | | | |-- Footer.js | | | `-- Header.js | | `-- layout.jsx | `-- pages | |-- about.jsx | |-- 404.jsx // 追加 | `-- index.jsx

404.jsx

src/pages/404.jsx
import React from "react" const NotFound = () => { return ( <div> <p>404 PAGE NOT FOUND</p> </div> ) } export default NotFound
存在しない階層にとぶと、このページが表示されるようになります。

Graphqlを使ってサイト情報を表示する

サイト名やロゴマークのpathなど共通で管理したいデータはgatsby-configで管理出来ます。

gatsby-config.jsにサイト情報を追加

module.exports = { /* Your site config here */ siteMetadata: { siteName: `サイト名`, siteUrl: `https://hogehoge.net`, siteLogo: `/images/logo.png`, author: `author`, }, /* plugins */ plugins: [], }

Graphqlにアクセスしてクエリをチェック

ローカルサーバーを立ち上げている状態で、
http://localhost:8000/___graphql にアクセス
Explorer枠(左カラム)で取得したいデータを選択
Execute(再生ボタン)をクリック
Code Exporter枠(右カラム)に書き方が出力される
An image from Notion

データを取得して確認する

layout.jsx

src/components/layout.jsx
import React from 'react'; import { useStaticQuery } from 'gatsby'; import Header from './Layout/Header'; import Footer from './Layout/Footer'; const Layout = ({ children, location }) => { // graphqlで調べた書き方でデータを取得 const { site } = useStaticQuery( graphql ` query { site { siteMetadata { siteUrl siteName } } } ` ) // サイト名が取得できる // ブラウザの検証 > Consoleタブで確認できます console.log(site.siteMetadata.siteName); return ( <> <div className="site-wrap"> <Header location={location} /> {children} <Footer location={location} /> </div> </> ) } export default Layout;

サイト名をHeaderで表示する

取得したデータを siteName というプロパティとして渡します。
src/components/layout.jsx
return ( <> <div className="site-wrap"> <Header location={location} siteName={site.siteMetadata.siteName} /> {children} <Footer location={location} /> </div> </> )

サイト名を表示

src/components/Layout/Header.jsx
import React from "react" const Header = ({ location, siteName }) => { return ( <header> {/* サイト名が表示される */} {siteName} <h1>header</h1> </header> ) } export default Header;

CSSを適応する

Gatsbyでは大きく分けて3通りstyleを適応する方法があります。
今回は一番わかりやすい Global CSS Files の方法で適応してみます。
Sassが使いたい、モジュール・コンポーネントごとにスタイルを用意したい方はドキュメントを参考にしてみてください
Global CSS Files ← いつものCSS

1. レイアウトコンポーネントを使わない方法

src/style/global.css ファイルを作成

// global.css html { background-color: white; } p { color: #555; }

gatsby-browser.js がなければ作成

階層のトップに作成
// gatsby-browser.js import "./src/styles/global.css"

2. レイアウトコンポーネントを使う方法

src/components/layout.css を用意

ファイル名は任意
// layout.css h1 { font-size: 2rem; }

src/components/layout.js で読み込む

// layout.js import React from 'react'; import Header from './Layout/Header'; import Footer from './Layout/Footer'; // スタイルを読み込む import "./layout.css" const Layout = ({ children, location }) => { return ( <> <div className="site-wrap"> <Header location={location} /> {children} <Footer location={location} /> </div> </> ) } export default Layout;

参考サイト

コロのicon
コロ
飼い猫と食べ物のことを考えてたら1日が終わってます。Reactでいろいろ作りたい