Gatsbyとは？

React製の静的サイトジェネレーターです
静的なHTML/CSS&Javascriptを生成するツールです。
いわゆるSSGというやつです。

v3.0.0のリリース

最新が2021年3月に3系がリリースされて、細かいところが2系と変わっていますが大枠は変わっていないようなので今から始めるのであれば3系でも良さそうな印象。

主なアップデート内容

必要なページだけのビルドに変わったので、開発時のビルド待ち時間を削減
Node.js 12未満のサポート終了、React 17/webpack 5/ESLint 7へアップデート、globalのgraphqlではなくimportして使うように変更、APIの変更など

Gatsbyの特徴

Gatsbyは静的HTML生成に加えて、それと連動する通常のReactアプリも生成します。
静的サイトジェネレーターと聞くと、動的サイトは作れないという印象を持ってましたが、ReactSPAのすべての機能を発揮できる。

参考記事: https://qiita.com/uehaj/items/1b7f0a86596353587466

できること

・reactアプリケーションでできることは同等にできる。（axios使ったり）
・GraphQLがデフォルトで入っているので、外部のAPIやWordpress,csv...etcをgraphqlに通してデータを取得することができます。
・Typescriptに標準で対応
・Wordpress代替として爆速でサイトを作る。
・Jamstackの構成（webhookで事前ビルド）

強み

・サーバーを意識しない手軽さ(SSG前提のため)
・とにかく速い(SEO強い。描画や遷移が爆速)
・プラグインが豊富なので導入が簡単
・初心者でもとっつきやすい
・カスタマイズ性がある

弱み

ページ数が多い大規模なサイトではビルドに時間がかかる
頻繁にAPIリクエストするようなアプリケーションは向かなそう

JSの書き方

コンポーネントの作り方

JSXにはクラス型と関数型の書き方があって、React開発サイドは関数型を推奨しているようです。

※ 以前のバージョンでは、状態管理やライフサイクルの機能はクラス型じゃないとできなかったりしたのですが、関数型にフックという機能が追加された。

関数型

sample-method.jsx

import React from 'react'

const Sample = () => {
  return (
    <div>
      <h1>Sample</h1>
      <h2>This is a component.</h2>
    </div>
  );
}

export default Sample

クラス型

sample-class.jsx

import React from 'react

class Sample extends React.Component {
  render() {
    return (
      <div>
        <h1>Sample</h1>
        <h2>This is a component.</h2>
      </div>
    );
  }
}

export default Sample

CSSの書き方

CSSの設計方法

CSSの選択肢は、４つほどある。個人的にはCSS Modulesが良さそう。

CSS Modules
CSS in JS
Tailwind CSS
Purge CSS

CSS Modules

ファイルをjsとcssに分けて、importしてCSSを当てます。
scopeされるので、BEMのようにクラス名を長くする必要がありません。

例:
components/header.js
components/header.module.scss

/src/components/header.module.scss


.layout {
  background: #000;
  margin-bottom: 1.45rem;
}
.title {
  color: white;
  text-decoration: none;
}

// このようなクラス名をつけずに .title というクラス名にしても他とバッティングすることがない
.headerTitle {

}

/src/components/header.js


import * as headerStyles from "./header.module.scss"

const Header = ({ siteTitle }) => (
  <header className={headerStyles.layout}>
    <div>
      <h1 className={headerStyles.title}>
        <Link to="/">{siteTitle}</Link>
      </h1>
    </div>
  </header>
)

CSS in JS

完結にいうとjs内に直接CSSを書くやり方です。
Reactならstyled-componentsが主流なイメージですが...
個人的にあまり好きくない笑

https://styled-components.com/
https://emotion.sh/docs/introduction

Tailwind CSS

Tailwind CSSはユーティリティークラスを大量に集めたCSSフレームワークです。
マルチクラスでスタイルを複数付与して、CSSを極力書かないような設計(Bootstrapのような）

Purge CSS

PurgeCSSは、未使用のスタイルをCSSファイルから削除するためのツールで、
使用すると、CSSファイルを60%以上削減できるらしいです。

引用: https://coliss.com/articles/build-websites/operation/css/how-to-remove-unused-css.html

GraphQLの使い方

GatsbyはGraphQLの環境が標準搭載

$ yarn develop
でGraphQLも起動するので、簡単にGraphQLのIDEを使用できます。
http://localhost:8000/___graphql

上記URLにアクセスして、クエリを書くとサイト内のデータや連携したAPIのデータがすべてGraphQLを通して取得できます。

graphql

{
  site {
    siteMetadata {
      title
    }
    port
    host
    buildTime
  }
  allFile {
    edges {
      node {
        id
        relativePath
      }
    }
  }
}

デモ環境

実際のソースを見ながら説明

■ github
https://github.com/RyunosukeOguri/hello-gatsby

■ デモ
https://hello-gatsby.amalab.io

まとめ

大量のページ数のサイトやAPIリクエストが頻繁に起きるアプリケーションは向いていないかも
LPやコーポレート、ブログとかはかなりおすすめしたい。
Gatsbyが難しいというよりReactに慣れていないとVueユーザーは概念的な違いから学習コストが高く感じる印象。
標準でTypeScriptとGraphQLが搭載されているのは結構気に入っている。（この２つを学ぶって意味ではわかりやすいかも）
SSGならGatsby, SPA,SSRならNext,Nuxt。どれが良いというより作るものによってやはり検討が必要。
総評、Gatsbyのスペックは高いので積極的に使って良いと思っている。

余談

Next.jsではISR（Incremental Static Regeneration）という仕組みがあって動的なアプリケーションに向いてる。
ISRは、ビルド時に生成するのではなくて、アクセス時にそのページを生成するという仕組み。
SSGで静的に生成しておいて、ビルド後DBにデータの追加があった場合、
１回ページにアクセスされるとページを生成してその後はその生成されたページが表示されるというすごいやつ。(まだ実験的なようですが)

ありがとうございました！