皆さんReactのフレームワークGatsby.jsをご存じでしょうか？

恐らくReactのフレームワークと言ったらNext.jsが代表かと思われます。

そこで今回は、Gatsby.jsを一週間勉強してGatsby.js良いところ悪いところ完全な主観でまとめてみたいと思います。

もう一回言います。

主観でまとめます。

悪魔で僕個人の意見なので、鵜呑みにはしないようお願いします。

こんな感じなんだと思って頂ければ十分です。

それでは早速良いところをまとめていきます。

良いところ#

ルーティングの設定が不要##

まず、１つ目はルーティングについてです。

Reactでルーティングを行う時って結構面倒ですよね。

必要なパッケージをインストールしたり、あとはpushメソッドとかをstoreで管理したり色々と慣れるまでは面倒。

Gatsby.jsではそれが不要です！

Gatsby.jsはデフォルトでsrc\pagesというフォルダがあります。

ここがルーティングそのものになります。

どういうことか。

例えば、http://localhost:8000/contact/inputというパスはsrc/pages/contact/input.jsを参照するということです！

要するにルーティングを行う場合は、src/pages配下にあるファイル・フォルダそのものがルーティングになっているわけです！

わざわざ設定しなくても勝手にやってくれる！

僕にとってはこれが一番良い点でした。

ページ遷移##

ページ遷移を行う場合もGatsbyではデフォルトで用意されています。

わざわざreact-routerやreact-router-domをインストールする必要がありません。

以下に例を挙げておきます。

import React from "react"
import { Link } from "gatsby"

const Example = (props) => {
  return (
    <>
      <Link to="/contact/input">お問い合わせフォーム</Link>
    </>
  )
}

export default Example

メソッドとしてページ遷移を行う際もnavigate()というメソッドがもともと用意されています。

これはpushメソッドと同じ動きをします。

import React from "react"
import { navigate } from 'gatsby-link'

const Example = (props) => {
  return (
    <>
      <Button variant="outlined" onClick={() => navigate('/contact/input')}>
        お問い合わせフォーム
      </Button>
    </>
  )
}

export default Example

こんな感じでルーティングに関しての機能がデフォルトで用意されているのが最高でした。

悪い点#

ヘッダーやフッターコンポーネントはページごとにレンダリング##

ReactやVueでヘッダーやフッターなどのコンポーネントを使用する際、メインとなるファイルに<Header />などを記述すことで各ファイルにこれらを書かなくて済むという仕組みですが、Gatsbyではこれができません。

なぜかは知りません。

もしかしたら出来るかもしれないです。

なので、マイページ使うヘッダーやフッターはlayout.jsにまとめてそれを毎回呼び出すというのが定石らしいです。

Layoutの使い方は公式のドキュメントに詳しく書いてあるのでリンクを貼っておきますね。

https://www.gatsbyjs.com/docs/how-to/routing/layout-components/

SPAならこの問題を解決してほしいと願っております。

まとめ#

結論、良い点は

ルーティングの設定が不要
ページ遷移の機能がデフォルトで備わっている

で、悪い点は

毎回使うコンポーネントは毎回レンダリングを行わなければいけない

です！

まだ１週間しか勉強していないので、もっと良い点、悪い点があると思います。

学習を進めていくにあたってまた記事として書いていこうかなと思います。

引き続き勉強頑張ります。

Thank you for reading